/Javascript/AngularJS/Angular event emitter

Angular event emitter

  @Output() open: EventEmitter<any> = new EventEmitter();


  toggel() {
  	this.open.emit(null);
  }

Source: angular.io

Eventemitter in angular

So, how to use it properly?
Simply use it to emit events from your component. Take a look a the following example.

@Component({
    selector : 'child',
    template : `
        <button (click)="sendNotification()">Notify my parent!</button>
    `
})
class Child {
    @Output() notifyParent: EventEmitter<any> = new EventEmitter();
    sendNotification() {
        this.notifyParent.emit('Some value to send to the parent');
    }
}

@Component({
    selector : 'parent',
    template : `
        <child (notifyParent)="getNotification($event)"></child>
    `
})
class Parent {
    getNotification(evt) {
        // Do something with the notification (evt) sent by the child!
    }
}
How not to use it?
class MyService {
    @Output() myServiceEvent : EventEmitter<any> = new EventEmitter();
}
Stop right there... you're already wrong...

Source: stackoverflow.com

What does event emitter do in angular

Data flows into your component via property bindings and flows out of your component through event bindings. If you want your component to notify his parent about something you can use the Output decorator with EventEmitter to create a custom event.

Similar codes

0 vote141 views1 answer
Get data from URL in angular
Javascript AngularJS
6 votes105 views1 answer
Angular 8 limit text length
Javascript AngularJS
4 votes154 views1 answer
Downgrade angular version in project
Javascript AngularJS
-1 vote180 views1 answer
Angular bind to class or ngClass
Javascript AngularJS
1 vote150 views1 answer
Your global Angular CLI version is greater than your local version
Javascript AngularJS
0 vote151 views1 answer
Angular get firebase firestore
Javascript AngularJS
21 votes223 views6 answers
Angular property has no initializer and is not definitely assigned in the constructor
Javascript AngularJS
0 vote164 views2 answers
Same file select angular second time not selected
Javascript AngularJS
0 vote253 views1 answer
How to import all material module in angular
Javascript AngularJS
16 votes167 views6 answers
Generate new component angular
Javascript AngularJS