app.component.html

<divclass="container">
<divclass="jumbotron">
<h1>Welcome</h1>
<h2>Angular & Bootstrap Demo</h2>
</div>
<divclass="panel panel-primary">
<divclass="panel-heading">States</div>
<divclass="panel-body">
<div>
<h3>{{title}}</h3>

<divclass="row">
<divclass="col-sm-4 form-group">
<labelfor="states">States</label>
<divclass="form-group">
<divclass="btn-group">
<buttontype="button" class="btn btn-default dropdown-toggle btn-wrap" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Select States <spanclass="caret"></span>
</button>
<ulclass="dropdown-menu">
<li*ngFor="let s of states"><a><inputtype="checkbox" [checked]="isChecked(s.id)" (change)="onChangeStates($event.target.checked, s)" value="{{s.id}}"> {{s.name}}</a></li>
</ul>
</div>
</div>
</div>
<divclass="col-sm-4 form-group">
<label>Selected States</label>
<divclass="form-group">{{ concatenatedStates }}</div>
</div>
</div>

</div>


<div>
<h3>Single Select Dropdowns</h3>
<divclass="row">
<divclass="col-sm-4 form-group">
<labelfor="state">State</label>
<divclass="form-group">
<divclass="btn-group">
<buttontype="button" class="btn btn-default active" disabledaria-haspopup="true" aria-expanded="false">
<div*ngIf="(undefined !==selectedState); else undef;">{{selectedState.name}}</div>
<ng-template#undef>Select State</ng-template>
</button>
<buttontype="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span*ngIf="(undefined !==selectedState);">{{selectedState.abbreviation}}</span>
<spanclass="caret"></span>
</button>
<ulclass="dropdown-menu pre-scrollable">
<li*ngFor="let s of states" role="presentation">
<arole="menuitem" tabindex="-1" href="#" (click)="selectState(s)">{{s.abbreviation}}</a>
</li>
</ul>
</div>
</div>

</div>
</div>

</div>

</div>
</div>
</div>