Trang chủ Lập trình Angular 2 căn bản Angular 2 căn bản - Bài 13. Sự Tương tác giữa các component
Lập trình Angular 2 căn bản 23/01/2017 10,304 lượt xem

Angular 2 căn bản - Bài 13. Sự Tương tác giữa các component

Angular 2 căn bản - Bài 13. Sự Tương tác giữa các component

Bài này chúng ta sẽ học về @Input, @Ouput và @ViewChild trong Angular 2. Giúp tương tác qua lại giữa các component

import { Component,Input,Output,EventEmitter} from '@angular/core';

@Component({
    selector: 'my-tutorial',
    template: `
    <h2>{{title}}</h2>
    <p>Child component: {{name}}</p>

    <button [disabled]="voted" (click)="vote(true)">Agree</button>
    <button [disabled]="voted" (click)="vote(false)">Disgree</button>
    Result: {{voted}}
    `
})
export class TutorialComponent {
    @Input() name:string;

    @Output() onVote = new EventEmitter<boolean>();
    public voted:boolean =false;

    setName(name:string){
        this.name = name;
    }
    vote(agree:boolean){
        this.voted = true;
        this.onVote.emit(agree);
    }
}

Tác giả: Bạch Ngọc Toàn

Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.

Chia sẻ:

Bài viết liên quan

Giới thiệu về Angular
08/12/2019 Bạch Ngọc Toàn

Giới thiệu về Angular

Chào mừng bạn đến với series bài viết hướng dẫn Angular. Series này bao gồm từ Angular 2, 3, 4, 5, 6, 7, 8 và 9. Bao gồm các bước để bắt đầu làm chủ Angular

Đọc thêm
Angular 2 căn bản - Bài 10: Two way binding
16/01/2017 Bạch Ngọc Toàn

Angular 2 căn bản - Bài 10: Two way binding

Tìm hiểu cơ chế hoạt động của Two way - binding trong Angular 2 và sự khác nhau giữa Angular 1 và 2. Đây là tính năng rất quan trọng và thường sử dụng khi bạn làm việc với Angular

Đọc thêm