libs/fruit-basket/src/counter-display/counter-display.component.ts
| selector | counter-display |
| templateUrl | ./counter-display.component.html |
Inputs |
Outputs |
counter
|
Type: |
label
|
Type: |
pick
|
$event type: EventEmitter
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'counter-display',
templateUrl: './counter-display.component.html'
})
export class CounterDisplayComponent {
@Input() label: string;
@Input() counter: number;
@Output() pick = new EventEmitter<number>();
}
<div class="card">
<div class="card-content">
<div class="card-title">{{label}}</div>
Current total: {{ counter }}
</div>
<div class="card-action">
<button class="btn" (click)="pick.emit(1)">Pick</button>
<button class="btn" (click)="pick.emit(3)" *ngIf="label === 'Apples'">Pick 3</button>
</div>
</div>