How to get output eventemitter boolean value in parent ts file?

Question

I have below code in my child component

@Component({
    selector: 'app-child'
})
export class ChildComponent {

    @Output()
    dataDeleted: EventEmitter<boolean>;

    constructor() {
        this.dataDeleted = new EventEmitter<boolean>();
    }

    delete() {
        this.dataDeleted.emit(true);
    }
}

I tried using @Input() dataDeleted: boolean; in parent ts file. but it's not working.

Please let us know what you haven't found in this page before posting: https://angular.io/guide/component-interaction#parent-listens-for-child-event — Vega, Jul 25 '22 at 07:12

ayala · Accepted Answer · 2022-07-25T06:06:55.347

0

In Parent component:

Add event listener to the child selector. The $event is an angular specific variable which is a generic name for what ever you emitted from the child component, in your case it holds the boolean value.

HTML:

<app-child (dataDeleted)="onDataDeleted($event)"></app-child>

Add a method to call when event is emitted.

TS:

onDataDeleted(val:boolean)
{
 
}

You can read this guide

edited Jul 25 '22 at 06:06

answered Jul 25 '22 at 06:01

ayala

331
1
9

Hi @ayala. Thank you for answer. `test: boolean; onDataDeleted(val:boolean) { this.test = val;}`. This `this.test` how can I make globally accessible in TS file? – Mike Jul 25 '22 at 06:15
Why do you need global accessible? please share more details – ayala Jul 25 '22 at 06:23
On basis of that value. I need to change the value in another function. – Mike Jul 25 '22 at 06:47
Call the another function in onDataDeleted method – ayala Jul 25 '22 at 06:53

How to get output eventemitter boolean value in parent ts file?

1 Answers1