Pada tutorial kali ini saya akan kembali membahas tentang angular 4 setelah sebelumnya saya membahas Component pada angular 4 nah untuk sekarang saya akan membahas tentang Bagaimana Cara Melakukan Data Binding Pada Angular 4.Â
Binding properti secara sederhana  berarti Anda mengirimkan data dari kelas komponen dan menetapkan nilai elemen tertentu dalam tampilan. Binding properti adalah salah satu cara, karena data ditransfer dari komponen ke kelas. Manfaat Binding properti adalah memungkinkan Anda mengendalikan nilai properti elemen dari komponen dan mengubahnya kapa.tsn pun diperlukan. Mari kita lihat lebih dekat pada Binding properti.
3 Cara Untuk Binding Pada Angular
|
1 2 3 |
<img src="{{logo}}"> <img [src]="logo"> <img bind-src="logo"> |
- Anda bisa melakukan metode 1 yaitu interpolation untuk mendefenisikan value , sepanjang value yang anda defenisikan bernilai string. Jika bukan string maka harus memakai cara ke 2 atau ke 3 di bawah ini.
- Menambahkan breket pada atribute, akan menghasilkan hal yang sama saja
- menambahkan bind-Â sebelum atribute dan akan menghasilkan hasil yang sama saja.
Untuk membuat metode binding di atas berkerja maka harus menambahkan perintah berikut pada component.ts
|
1 2 3 4 5 6 7 8 9 10 11 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; logo = 'https://angular.io/assets/images/logos/standard/logo-nav@2x.png'; } |
hasilnya akan seperti ini :
BAiklah itu saja untuk artikel tentang Bagaimana Cara Melakukan Data Binding Pada Angular 4 sampai bertemu pada artikel selanjutnya.