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';
selector: 'profile',
template: `
<button (click)="handleClick()">
export class DatatableComponent {
@Input() person:Person;
@Output() upvote:EventEmitter<any> = new EventEmitter();
handleClick() {

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.