title: Select Option: Angular 2
body: <p>I want to prevent or continue with the option that is currently being selected based on a flag:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    template: `
      &lt;select [(ngModel)]="selectedStudent" (change)="onSelectChange($event)"&gt;
        &lt;option *ngFor="let student of list" [ngValue]="student"&gt;{{student.name}}&lt;/option&gt;
      &lt;/select&gt;
    `,
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    private list: Object = [
      {name: 'Abc', age: '24'},
      {name: 'Def', age: '25'},
      {name: 'Ghi', age: '25'},
      {name: 'Jkl', age: '25'},
      {name: 'Mno', age: '25'}
    ];
    private selectedStudent: Object;
  
    private condition: boolean = true;
  
    onSelectChange(event) {
      if (this.condition) {
        // select the option being selected
      } else {
        // prevent any change in option
      }
    }
  }
  </code></pre>
  
  <p>How to achieve the desired effect.
  Moreover, if I use [ngValue], initially nothing is shown in the select option dropdown. Why so?</p>