Is there a method to trigger a function on emit event and not only onChange?

Question

When I press an arrow in the parent element I always emit true. The child receives the change only at the beginning when the emitter changes from undefined to true. Is there a method to call the function always when the parent emitts something even it's the same value as the lat time?

Parent HTML:

<div (click)="emit()">
<child [changed_slide]= "changed_slide"></child>

Parent .ts:

emit(){this.changed_slide.emit(true);}

Child:

ngOnChanges(changes: { [property: string]: SimpleChange }){
    let change: SimpleChange = changes['changed_slide'];
    console.log(change);
    }

So I want that every time I click the parent div "true" will be emitted (or everything else, I just want something to be emitted in order to do something in the child) and then one function will be automatically triggered in the child. Every time I click the parent the child does something. I would appreciate any ideas, Thank you!

Very unclear. Post a complete minimal example reproducing the problem, tell precisely what you're doing, what you expect to happen and what happens instead. 5 lines of code without any context are not sufficient. — JB Nizet, Nov 29 '19 at 12:49
true **is** being emitted every time you click. But the changed_slide input you provide to the child goes from `true` to `true`. So it doesn't change at all. So ngOnChanges() isn't called, since the input value doesn't change. Emit a **different** value. Or use a shared service and subscribe to an observable exposed by this shared service from the child. — JB Nizet, Nov 29 '19 at 12:56
Have a look [here](https://netbasal.com/event-emitters-in-angular-13e84ee8d28c) — bhavya_karia, Nov 29 '19 at 12:57
also look this question https://stackoverflow.com/questions/44053227/how-to-emit-an-event-from-parent-to-child — Belouccio, Nov 29 '19 at 13:00

score 0 · Accepted Answer · answered Nov 29 '19 at 16:13

Like you are sending data from a Parent to a Child element you could use a set in the Child @Input:

**Child**
    private _changed_slide: boolean;
    @Input() public set changed_slide(value: boolean) {
       this._changed_slide = value;
    }

Then in your parent, you can do:

export class ParentComponent {
    private eventSource: Subject<boolean>;
    public event$: Observable<boolean>;
    constructor() {
     this.eventSource = new Subject();
     this.event$ = this.eventSource.asObservable();
    }

    emit() {
      this.eventSource.next(true);
    }
}

Html:

<div (click)="emit()">
<child [changed_slide]= "event$ | async"></child>

Is there a method to trigger a function on emit event and not only onChange?

1 Answers1