title: Angular2 typescript set selected dropdown button value on page load
body: <p>Ref : trying to use Dropdown component <a href="https://github.com/valor-software/ng2-bootstrap/tree/development/components/dropdown" rel="nofollow">https://github.com/valor-software/ng2-bootstrap/tree/development/components/dropdown</a></p>
  
  <p>I can pull the drop down values on clicking button and persist on selection using Typescript but <strong>couldn't set the selected value on page load</strong> like we do using select option like :</p>
  
  <pre><code>&lt;option [selected]="value.id == value.statusId"&gt;  
  </code></pre>
  
  <p>Parent template :</p>
  
  <pre><code> &lt;dropdownst [values]="releaseNames" [selectedReleaseId]="item.releaseId"&gt;&lt;/dropdownst&gt;
  </code></pre>
  
  <p>Object : releaseName.ts</p>
  
  <pre><code>export class ReleaseName {
  releaseId: number;
  name: string;
  }
  </code></pre>
  
  <p>Dropdown Component :</p>
  
  <pre><code>@Component({
  selector: 'dropdownst',
  template: `&lt;div (click)="$event.preventDefault()"&gt;
              &lt;div&gt;
                  &lt;button type="button" class="btn btn-warning btn-sm" (click)="dropdownMenu($event)"&gt;
                          RELEASE (Toggle)
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="btn-group" dropdown [(isOpen)]="status.isopen"&gt;
                  &lt;button id="dropdown-list" class="btn btn-default" dropdownToggle &gt;
                          {{title}} 
                      &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dropdown-list"&gt;
                      &lt;li role="menuitem" *ngFor="let data of values"&gt;
                          &lt;a class="dropdown-item" [id]="data.releaseId"  #val [title]="data.name" 
                                (click)="updatePbiRelease(val.id, val.title)" &gt;
                                      {{data.name}}
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
           &lt;/div&gt; `,
  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(() =&gt; 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() {     
      }    
  }
  </code></pre>
  
  <p>Html Template :</p>
  
  <pre><code>&lt;div (click)="$event.preventDefault()"&gt;
      &lt;div&gt;
         &lt;button type="button" class="btn btn-warning btn-sm" (click)="dropdownMenu($event)"&gt;
                          RELEASE (Toggle)
         &lt;/button&gt;
      &lt;/div&gt;
   &lt;div class="btn-group" dropdown [(isOpen)]="status.isopen"&gt;
         &lt;button id="dropdown-list" class="btn btn-default" dropdownToggle &gt;
  
  //Trying to set dropdown selected value here on page load as title from DB on TS  Angular 2
                          {{title}} 
  
           &lt;span class="caret"&gt;&lt;/span&gt;
         &lt;/button&gt;
      &lt;ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dropdown-list"&gt;
  
  //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)
         &lt;li role="menuitem" *ngFor="let data of values"&gt;
           &lt;a class="dropdown-item" [id]="data.releaseId"  #val [title]="data.releaseId == selectedReleaseId ? data.name : data.name" 
            (click)="updatePbiRelease(val.id, val.title)" &gt;
                  {{data.name}}
           &lt;/a&gt;
         &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p> </p>
  
  <p>Any help would be great.</p>