Skip to content

Instantly share code, notes, and snippets.

@t301000 t301000/app.component.html
Last active May 31, 2017

Embed
What would you like to do?
簡易計數器範例
<app-counter-button [step]="-2" (changed)="change($event)"></app-counter-button>
{{ counter }}
<app-counter-button [step]="5" (changed)="change($event)"></app-counter-button>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
counter = 0;
change(v) {
this.counter += v;
// this.counter = this.counter + v;
}
}
<!-- counter-button/counter-button.component.html -->
<button (click)="count()">{{ value }}</button>
/* counter-button/counter-button.component.ts */
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-counter-button',
templateUrl: './counter-button.component.html',
styleUrls: ['./counter-button.component.css']
})
export class CounterButtonComponent implements OnInit {
@Input('step') value = 1;
@Output('changed') valueChange = new EventEmitter<number>();
constructor() { }
ngOnInit() {
}
count() {
this.valueChange.emit(this.value);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.