Angular

Chapter 12: Directives & components :
@Input @Output
Section 12.1: Angular 2 @Input and @Output in a nested
component
A Button directive which accepts an @Input() to specify a click limit until the button gets disabled. The parent
component can listen to an event which will be emitted when the click limit is reached via @Output:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'limited-button',
template: `
`,
directives: []
})
export class LimitedButton {
@Input() clickLimit: number;
@Output() limitReached: EventEmitter = new EventEmitter();
disabled: boolean = false;
private clickCount: number = 0;
}
onClick() {
this.clickCount++;
if (this.clickCount === this.clickLimit) {
this.disabled = true;
this.limitReached.emit(this.clickCount);
}
}
Parent component which uses the Button directive and alerts a message when the click limit is reached:
import { Component } from '@angular/core';
import { LimitedButton } from './limited-button.component';
@Component({
selector: 'my-parent-component',
template: `
You can only click me twice
`,
directives: [LimitedButton]
})
export class MyParentComponent {
onLimitReached(clickCount: number) {
alert('Button disabled after ' + clickCount + ' clicks.');
}
}
GoalKicker.com – Angular 2 Notes for Professionals 63