title: How to access FormControl value in the HTML Code
body: <p>I am programmatically changing the value of the form "select".</p>
  
  <p>In the form field, you can see that the value has changed. But the element <code>"p"</code> is still hidden.</p>
  
  <p>If you manually change the value of the form, the visibility of the element "p" will work correctly.</p>
  
  <blockquote>
    <p>Expected Result:</p>
  </blockquote>
  
  <pre><code>The &lt;p&gt; tag should be visible if the value of `field1` FormControl is equal to `1`.
  </code></pre>
  
  <p>Tell me, please, what could be the problem?</p>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="formGroup"&gt;
    &lt;mat-form-field class="mb-4" fxFlex="100"&gt;
        &lt;mat-select #field1 formControlName="field1" placeholder="Data type" required&gt;
          &lt;mat-option value="0" selected&gt;Boolean&lt;/mat-option&gt;
          &lt;mat-option value="1"&gt;Int&lt;/mat-option&gt;
          &lt;mat-option value="2"&gt;Double&lt;/mat-option&gt;
          &lt;mat-option value="3"&gt;String&lt;/mat-option&gt;
          &lt;mat-option value="4"&gt;Byte array&lt;/mat-option&gt;
          &lt;mat-option value="5"&gt;Object&lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
  &lt;/form&gt;
  
  &lt;p *ngIf="field1.value === '1'"&gt;Integer&lt;/p&gt;
  
  &lt;button mat-raised-button color="primary" (click)="onClick()"&gt;Set 'Int'&lt;/button&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>export interface Item {
    value: string;
    viewValue: string;
  }
  
  @Component({
    selector: 'select-overview-example',
    templateUrl: 'select-overview-example.html',
    styleUrls: ['select-overview-example.css'],
  })
  export class SelectOverviewExample {
    public data: Item[] = [
      {value: '1', viewValue: 'Option 1'},
      {value: '2', viewValue: 'Option 2'},
      {value: '3', viewValue: 'Option 3'}
    ];
    public formGroup: FormGroup;
  
    constructor(private _formBuilder: FormBuilder){
  
    }
  
    ngOnInit() {
      this.formGroup = this._formBuilder.group({
        field1: [1, null]
      });
    }
  
    onClick(){
      this.formGroup.controls.field1.setValue('1');
    }
  }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-hrbfff?file=app/select-overview-example.html" rel="noreferrer">Example Stackblitz</a></p>