Pass Events from Angular 2 Components with @Output

Share this video with your friends

Send Tweet

Components push out events using a combination of an @Output and an EventEmitter. This allows a clean separation between reusable Components and application logic. This lesson shows how to use @Output to create an update event and then listen for the event in your application.

RentPath User 5
RentPath User 5
~ 6 years ago

love the course. however, the most frustrating part of these courses is that by the time one get around to actually take the course, parts of it are already behind the 8ball... Case in point, in this module the update/onUpdate code no longer works as it is described in the video. tying to google for an answer and one gets EXACTLY what the console.log output shows: NOTHING... that's one of the reasons I gave up on angular when google decided to ignore the developers and went on their own, now 6 versions later(a version every month) where employers want you to be EXPERIENCE on the latest version..... Yeah right.

martin sundvall
martin sundvall
~ 6 years ago

In my case I'd have to update the properties sent to <app-simple-form> to read the event-object with $event.text (instead of the previously used "message.text"):

app.component.html (or the inline template from app.component.ts): <app-simple-form *ngFor="let theMessage of mail.messages" [message]="theMessage.text" (update)="onUpdate(theMessage.id, $event.text)"> </app-simple-form>