title: Integrating Different forms with a select dropdown in Angular
body: <p>I have three different forms where the first form has a select dropdown with two values .. i want to know on selection of one of the dropdown options it must must open another sub form . I want to know how this can be achieved.</p>
  <p>Below is code having the dropdown :</p>
  <p>app.component.html</p>
  <pre><code>&lt;mat-form-field&gt;
    &lt;mat-label&gt;Favorite food&lt;/mat-label&gt;
    &lt;mat-select&gt;
      &lt;mat-option *ngFor=&quot;let food of foods&quot; [value]=&quot;food.value&quot;&gt;
        {{food.viewValue}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  
  </code></pre>
  <p>app.component.ts</p>
  <pre><code>import { Component } from '@angular/core';
  
  interface Food {
    value: string;
    viewValue: string;
  }
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'Food';
    foods: Food[] = [
      {value: '1', viewValue: 'value 1'},
      {value: '2', viewValue: 'value 2'},
    ];
  }
  
  </code></pre>
  <p>The Other form Contains the following :</p>
  <p>app.component.html</p>
  <pre><code>&lt;h1&gt;Value 1 is selected !!&lt;/h1&gt;
  </code></pre>
  <p>app.component.ts</p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'form1';
  }
  </code></pre>
  <p>Please help me with this where i can achieve : on click of a select dropdown option should navigate to another form ( in this case when value 1 is selected from drowdown, the new form containing &quot;value 1 is selected&quot; should be navigated</p>