Angular2 typescript set selected dropdown button value on page load - twitter-bootstrap-3

Question

Ref : trying to use Dropdown component https://github.com/valor-software/ng2-bootstrap/tree/development/components/dropdown
I can pull the drop down values on clicking button and persist on selection using Typescript but couldn't set the selected value on page load like we do using select option like :
<option [selected]="value.id == value.statusId">
Parent template :
<dropdownst [values]="releaseNames" [selectedReleaseId]="item.releaseId"></dropdownst>
Object : releaseName.ts
export class ReleaseName {
releaseId: number;
name: string;
}
Dropdown Component :
#Component({
selector: 'dropdownst',
template: `<div (click)="$event.preventDefault()">
<div>
<button type="button" class="btn btn-warning btn-sm" (click)="dropdownMenu($event)">
RELEASE (Toggle)
</button>
</div>
<div class="btn-group" dropdown [(isOpen)]="status.isopen">
<button id="dropdown-list" class="btn btn-default" dropdownToggle >
{{title}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dropdown-list">
<li role="menuitem" *ngFor="let data of values">
<a class="dropdown-item" [id]="data.releaseId" #val [title]="data.name"
(click)="updatePbiRelease(val.id, val.title)" >
{{data.name}}
</a>
</li>
</ul>
</div>
</div> `,
directives: [ DropdownDirective, DropdownMenuDirective, DropdownToggleDirective, CORE_DIRECTIVES],
styles:['.scrollable-menu {height: auto;max-height: 200px;overflow-x: hidden;}']
})
export class Angular2Dropdown implements OnInit{
#Input()
selectedReleaseId: number;
#Input()
values: ReleaseName[];
#Input()
title: string;
private disabledMenu:boolean = false;
appComponent: AppComponent;
private status:{isopen:boolean} = {isopen: false};
constructor(#Inject(forwardRef(() => AppComponent)) private _parent:AppComponent){
this.appComponent = _parent;
}
updatePbiRelease(releaseValue, title){
this.appComponent.updatePbiRelease(releaseValue);
this.title = title;
}
private dropdownMenu($event:MouseEvent):void {
$event.preventDefault();
$event.stopPropagation();
this.status.isopen = !this.status.isopen;
}
ngOnInit() {
}
}
Html Template :
<div (click)="$event.preventDefault()">
<div>
<button type="button" class="btn btn-warning btn-sm" (click)="dropdownMenu($event)">
RELEASE (Toggle)
</button>
</div>
<div class="btn-group" dropdown [(isOpen)]="status.isopen">
<button id="dropdown-list" class="btn btn-default" dropdownToggle >
//Trying to set dropdown selected value here on page load as title from DB on TS Angular 2
{{title}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dropdown-list">
//Iterate through releaseName has values passed from parent template
//to get name (i.e title) matchng releaseId and Id from DB(i.e item.releaseId)
<li role="menuitem" *ngFor="let data of values">
<a class="dropdown-item" [id]="data.releaseId" #val [title]="data.releaseId == selectedReleaseId ? data.name : data.name"
(click)="updatePbiRelease(val.id, val.title)" >
{{data.name}}
</a>
</li>
</ul>
</div>
Any help would be great.

Answer 1

Did the following changes to Template and ngOnInit() to work
Template :
template: `<div (click)="$event.preventDefault()">
<div>
<button type="button" class="btn btn-warning btn-sm" (click)="dropdownMenu($event)">
RELEASE (Toggle)
</button>
</div>
<div class="btn-group" dropdown [(isOpen)]="status.isopen">
<button id="dropdown-list" class="btn btn-default" dropdownToggle >
{{title}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dropdown-list">
<li role="menuitem" *ngFor="let data of values">
<a class="dropdown-item" [id]="data.releaseId" #val [title]="data.name"
(click)="updatePbiRelease(val.id, val.title)" >
{{data.name}}
</a>
</li>
</ul>
</div>
</div> `,
Added a if condition on releaseName on parent template
<dropdown *ngIf="releaseNames" [values]="releaseNames" [selectedReleaseId]="item.releaseId">
Set the title value on page load onInit using the id passed from parent template selectedReleaseId
ngOnInit() {
for (var x = 0; x < this.values.length; x++) {
if(this.values[x].releaseId == this.selectedReleaseId) {
this.title = this.values[x].name;
}
}
}