Trigger a change to children components in Angular 2, even though the data/state is not changes

Question

I have this parent components, that has a Boolean attribute, that can be set by user through a button in UI.

I have a recursive set of children components, a tree in fact, that need to response to change of that Boolean attribute, even when the value of that Boolean attribute is not changed, but user has pressed that button.

In other words, even if that Boolean attribute is false, and user clicks that button, and because of some logic the Boolean attribute is not changed at all and remains false, I still want the children components to be notified.

I'm using ngOnChanges and I'm trying to trigger the event manually.

But in case of false to false, which means no change, the ngOnChanges on children components is not called.

What do I miss here?

@user184994, EventEmitter sends the event from children to parent. I want to send the event from parent to children. — mohammad rostami siahgeli
– mohammad rostami siahgeli, Commented Jul 6, 2018 at 21:13
Why not use a Subject or Observable then, and pass the subject as an Input to the child? — user184994
– user184994, Commented Jul 6, 2018 at 21:17

user184994 · Accepted Answer · 2018-07-06 21:31:16Z

You can pass a Subject as an input to the child components.

In your parent component, create a Subject, like so:

import { Component } from '@angular/core'; import { Subject } from 'rxjs'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { subject = new Subject<string>(); handleClick() { // This will send a message via the subject this.subject.next("TEST"); } // Complete the subject when your component is destroyed to avoid memory leaks ngOnDestroy() { this.subject.complete(); } }

And pass it to the child component:

<hello [notifier]="subject"></hello>

In your child component, subscribe to the Subject, and do whatever you need to do in the subscribe callback:

import { Component, Input } from '@angular/core'; import { Subject } from 'rxjs'; @Component({ selector: 'hello', template: `<h1>Hello {{name}}!</h1>`, styles: [`h1 { font-family: Lato; }`] }) export class HelloComponent { @Input() notifier: Subject<any>; ngOnInit() { if (this.notifier != null) { this.notifier.subscribe((event) => { // This will be logged every time the subject.next is called. console.log("HelloComponent heard", event); }) } } }

Here is a StackBlitz example

Collectives™ on Stack Overflow

Trigger a change to children components in Angular 2, even though the data/state is not changes

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related