CODEWITHSUNDEEP
angulareventscomponents
Pablo
Pablo

Reputation: 2042

Angular Events Between Components

I need to get an event from one component into another component lying next to the emitting one.

HTML in DisplayComponent

<app-header></app-header>   Emitting rom this ...

<show-list></show-list>     ... into this

Code in header component

@Output()
change: EventEmitter<number> = new EventEmitter<number>();


public switchSomething():void {
  doSomething();
  this.change.emit();
}

Is there a propper way to do this or do I need any dirty workaround to achieve it. Maybe I just think just too complicated.

Upvotes: 2

Views: 2079

Answers (1)

Carsten
Carsten

Reputation: 4208

Make app-header emit to DisplayComponent and have DisplayComponent call a function of show-list. I don't see any issue with your setup.

DisplayComponent html

<app-header (change)="doSomething($event)"></app-header>
<show-list #list></show-list>

DisplayComponent ts

@Component({etc.etc.})
export class etc etc. {

  @ViewChild('list') list: ShowListComponent;

  doSomething(event: Number) {
    this.list.callSomething(event);
  }
}

Upvotes: 4

Related Questions