CODEWITHSUNDEEP
javascriptangular
user8770372
user8770372

Reputation:

Javascript Angular 4 using eventEmitter though several layers of components

I am having a bit of a problem with getting the following situation done in Angular.

I am using Angular 4 and this is the situation.

app.component.html contains a wrapper div which I would like to be able to change it's color by adding a class to it.

My problem is that I have different layers of components.

For example, if I wanted to change the class in app.component.html it would have this:

app.component - root

button-wrapper.component - holds the button

button.component - message comes from there.

Normally I could do this:

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

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

  handleEvent(value) {
    console.log(value);
    myClass = value;
  }
}

and in app.component.html have this:

<div [ngClass]="myClass">

  <app-button (outputEvent)="handleEvent($event)"></app-button>

</div>

BUT, my problem is that app-button component is inside button-wrapper component so it looks like this:

<div [ngClass]="myClass">

    <button-wrapper></div>

</div>

So where would I put this:

(outputEvent)="handleEvent($event)"

How can I go round this issue?

Upvotes: 2

Views: 1117

Answers (1)

Z. Bagley
Z. Bagley

Reputation: 9260

You can chain events as long as their direct children:

button.component.ts (selector: app-button)

startChainEvent() {
  this.outputEvent.emit('className');
}

button-wrapper.component.html

<app-button (outputEvent)="handleEvent($event)"></app-button>

button-wrapper.component.ts (selector: app-button-wrapper)

handleEvent(e) {
  this.outputEvent.emit(e);
}

app.component.html

<app-button-wrapper (outputEvent)="handleEvent($event)"></app-button-wrapper>

app.component.ts

handleEvent(e) {
  myClass = e;
}

Upvotes: 3

Related Questions