Integrating Different forms with a select dropdown in Angular

Question

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.

Below is code having the dropdown :

app.component.html

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

app.component.ts

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'},
  ];
}

The Other form Contains the following :

app.component.html

<h1>Value 1 is selected !!</h1>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'form1';
}

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 "value 1 is selected" should be navigated

Ben Taliadoros · Accepted Answer · 2021-05-13 12:50:12Z

1

You can put an output on the mat-select to detect a change in value:

 <mat-select (selectionChange)="myMatSelectWasChanged($event)">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

Then in the .ts file you can navigate to the new form:

export class AppComponent {
  title = 'Food';
  foods: Food[] = [
    {value: '1', viewValue: 'value 1'},
    {value: '2', viewValue: 'value 2'},
  ];

  myMatSelectWasChanged(valueChange) {
    // enter code here
  }
}

answered May 13, 2021 at 12:50

Ben Taliadoros

9,73119 gold badges68 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Biju Over a year ago

I have a similar problem. Will this solution render the dynamic form as a sub-form or as a pop-up?

Ben Taliadoros Over a year ago

All this code does is detect the change of the drop down, whether that triggers a pop-up or not depends on what is in the "// enter code here" part

Biju Over a year ago

Yeah. I just realised that. This was very helpful. Thanks! Am also looking for suggestion on how we can render the dynamic form as a sub-form which has the dropdown. Any inputs would be very helpful!

Ben Taliadoros Over a year ago

I'm not totally sure what the dynamic form is, have you got an example?

Collectives™ on Stack Overflow

Integrating Different forms with a select dropdown in Angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related