Forward Advance Learning

Input and @Output Decorators

When writing TypeScript we can use @Input and @Output decorators to provide component inputs and outputs.

These replace the inputs attribute in the decorator. We can even create the EventEmitter inline, which makes our code quite tidy.

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

import {Component, Input, Output} from '@angular/core';
@Component({
selector: 'profile',
template: `
<div>
<h1>{{person.name}}</h1>
<button (click)="handleClick()">
Upvote
</button>
</div>
`
})
export class DatatableComponent {
@Input() person:Person;
@Output() upvote:EventEmitter<any> = new EventEmitter();
handleClick() {
upvote.emit(this.person)
}
};

Exercise - Component Interaction

Modify your dungeon exercise to use the @Input and @Output decorators for component interaction.

You can start with the start point in the repository, or decorate your own app.