Membuat Event Click Sederhana di Angular 2

Angular2

Cara membuat event click sederhana di angular 2 sangatlah gampang, berikut contoh sederhana dengan hasil output seperti di bawah ini. Setiap button diklik maka jumlah bilangan bertambah.

//app.ts di folder app

import { Component } from 'angular2/core';

@Component({
    selector: '.wrapper',
    templateUrl: `app/templates/example.html`
})

export class AppComponent {
  times = 0;
  klik(event){
    console.log(event.target);
    this.times++;
  }
}

//example.html di folder app/templates

<button (click)="klik($event)">Klik {{times}}x</button>

//index.html, melihat javaScript yang dipakai

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>

<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="node_modules/rxjs/bundles/Rx.js"></script>

<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Syntax Perulangan di Angular2 beserta Contohnya

Angular2

Ada beberapa perubahan syntax perulangan dari angular 1 ke angular 2. Di bawah ini adalah daftar syntax perulangan di angular 2:

//app.component.ts

import { Component } from 'angular2/core';

import { Book } from './login.model';
import { AppModule } from './app.module';

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

export class AppComponent {

  constructor(){
    this.hobbies = ['Musik', 'Movies', 'Sports'];
  }

}

//hobbies.html

  <div *ngIf="showHobbies">
    <h3>Hobbies:</h3>
    <ul>
      <li *ngFor="#item of hobbies">
        {{item}}
      </li>
    </ul>
  </div>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.