Setting value of [(ngModel)] upon first page load in Angular 2

Question

I am trying to create a simple select component which takes in some data via attributes and renders the required options. I plan to use this select component inside the template of another component, say PageComponent's template( page.template.html ).

I am binding a variable of PageComponent to the select component using [(ngModel)]. Upon selecting an option, the value of the variable get's updated as expected but how do I set it to point to the first option upon page load without triggering a manual selection on the select component?

Here's the code.

In page.template.html

<select ui-select 
        [options]="options" 
        [(ngModel)]="alertType"
        [defaultValue]="'Select an alert Type'">
</select>
{{alertType}} <!-- To see the value while debugging -->

In page.component.ts, PageComponent class

alertType:any;
options = [
    {id:1, value:"item-1"},
    {id:2, value:"item-2"},
    {id:3, value:"item-3"}
];

In select.component.ts

import {Component, Input} from '@angular/core'

@Component({
  selector: '[ui-select]',
  template: `
    <option *ngIf="defaultValue" value="-1">{{defaultValue}}</option>
    <option *ngFor="let option of options" [value]="option.id">{{option.value}}</option>
  `
})
export class SelectComponent {
  @Input() options: any;
  @Input() defaultValue: string;
}

Right now, the {{alertType}} value initially shows nothing and updates only upon selecting a new option from the select box.

I do understand that it's happening because alertType is set to undefined by default in PageComponent but I can't figure out how to set it to the first option value when the page loads.

Update

The original question has been answered but I had one more question regarding this so updated the question.

In the updated code, the select component accepts a defaultValue custom property from the template and renders a conditional <option> for that default value.

Now, how do I say that if defaultValue is set, alertType should have that value or otherwise it should have the value of the first item in the options list.

P.S - If you have comments about the approach used in building the component, please feel free to add them in answers as it will help me learn.

Answer 1

So you want alertType should be set to the selected value, whether it could be from your provided options or from your defaultValue(first option).

this could be done by using AfterViewInit hook,

the modified code will be..

@Component({  
  selector: 'my-app',
  directives:[ 
    SelectComponent
  ],
  template : `<select ui-select
        [options]="options"
        [(ngModel)]="alertType"
        [defaultValue]="'Select an alert Type'" #mySelect>
</select>
{{alertType}}`
})
export class App implements AfterViewInit{
  @ViewChild('mySelect', {read: ViewContainerRef}) mySelect;
options = [
    {id: 1, value: "item-1", selected: false},
    {id: 2, value: "item-2", selected: true},//if all options will be false then defaultValue will be selected
    {id: 3, value: "item-3", selected: false}
];
alertType: any;

 ngAfterViewInit() {
    this.alertType = this.mySelect.element.nativeElement.value;
  }

}

I have created a plunker, check this!!

Answer 2

You could try it like so:

options = [
    {id:1, value:"item-1"},
    {id:2, value:"item-2"},
    {id:3, value:"item-3"}
];

alertType: any = options[0].id;

Answer 3

For your new question, you could leverage the selected attribute in your ui-select component:

<option *ngIf="defaultValue" selected="true" value="-1">{{defaultValue}}</option>