Event binding trong Angular 4

<div style="text-align:center">
    <h1> Welcome to {{ title }}</h1>
</div>
<div> Months :
    <select>
        <option *ngFor="let i of months">{{i}}</option>
    </select>
</div>
<div>
    <span *ngIf="is_valid; then condition1 else condition2">
        Condition is valid.
    </span>
    <ng-template #condition1>Condition is valid</ng-template>
    <ng-template #condition2>Condition is invalid</ng-template>
</div>
// Tạo button và gán sự kiện cho button
<button (click)="myClickFunction($event)">Click Me</button>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'Angular 4 Project!';
    //array of months.
    months = ["Tháng 1", "Tháng 2", "Tháng 3",
                "Tháng 4", "Tháng 5", "Tháng 6",
                "Tháng 7", "Tháng 8", "Tháng 9",
                "Tháng 10", "Tháng 11", "Tháng 12"];
    is_available = true;
    
// Khai báo hàm xử lý sự kiện cho button
    myClickFunction(event) {
        alert("Nhận được lệnh click từ button");
    }
}

<div style="text-align:center">
    <h1>
        Welcome to {{title}}.
    </h1>
</div>

<div> Months :
    // Gán sự kiện change cho select
    <select (change)="changemonths($event)">
        <option *ngFor="let i of months">{{i}}</option>
    </select>
</div>
<br/>

<div>
    <span *ngIf="is_valid; then condition1 else condition2">
        Condition is valid.
    </span>
    <ng-template #condition1>Condition is valid</ng-template>
    <ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click)="myClickFunction($event)">
    Click Me
</button>

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["Tháng 1", "Tháng 2", "Tháng 3", 
             "Tháng 4", "Tháng 5", "Tháng 6", 
             "Tháng 7", "Tháng 8", "Tháng 9", 
             "Tháng 10", "Tháng 11", "Tháng 12"];
   is_available = true;
   myClickFunction(event) { 
     alert("Nhận được lệnh click từ button");    
   }
   
    // Khai báo hàm change month để kiểm soát sự kiện change đã khai báo bên html
    changemonths(event) { 
     alert("Bạn vừa thay đổi tháng trong dropdown");    
   }
}