CODEWITHSUNDEEP
angulartypescriptangular-materialangular6
SGR
SGR

Reputation: 2427

To call different dialog window based on the button present in the component

I have a component called home which as some description and button inside it. As in below image.

enter image description here

How can I change the (click) function of the particular button on basis of its presence in the component?

The stackblitz DEMO

Upvotes: 0

Views: 1006

Answers (1)

firegloves
firegloves

Reputation: 5709

You can use @Output to emit an event to the container, then in the container component you can choose what to do when you receive the event.

HomeComponent

export class HomeComponent  {

     @Output() openDialog = new EventEmitter();

     constructor(public dialog: MatDialog) {}

  open(): void {
     this.openDialog.emit();
  }

}

HomeComponent's template

Hai!! welcome to our application..

<div style="padding:30px;">
  <button mat-raised-button  (click)="open()" color="primary">ADD</button>
</div>

BikeComponent's template

<app-home (openDialog)="openDialog($event)"></app-home>

BikeComponent ts

export class BikeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  openDialog($event: any) {
     // open desired bike component
  }

}

CarComponent's template

<app-home (openDialog)="openDialog($event)"></app-home>

CarComponent ts

export class CarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  openDialog($event: any) {
     // open desired car component
  }

}

Look at official doc: https://angular.io/guide/component-interaction

Upvotes: 1

Related Questions