Card image cap
[Angular 7][2] Interpolation {{ ... }}
Friday, 08 Mar 2019

Hello world,

Melanjutkan dari materi sebelumnya. Setelah kita dapat menjalankan serve dan menampilkan halaman pertama dari aplikasi kita. Sekarang kita coba belajar cara menampilkan variabel dan istilah-istilah lain pada angular seperti interpolation. Pada dasarnya yang menurut saya adalah variable pada angular ada yang menyebut sebagai property (dari sebuah class). Tapi di sini mungkin agar lebih mudah dimengerti saya sebut saja sebagai variabel. Kalau kalian sudah pernah mencoba javascript/jquery pada umumnya ini masih mirip-mirip cara penulisannya. Langsung saja kepada contohnya. 

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'namaweb';
}

Contoh di atas adalah isi dari file app.component.ts yang belum diedit sama sekali. Sekarang kita coba menambahkan variabel baru setelah title. Di sini saya coba buat variabel baru bernama subtitle.

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'namaweb';
subtitle = 'Ini website baru';
}

Selanjutnya cara menampilkannya di app.component.html adalah dengan tanda {{subtitle}} dan dapat diletakkan sesuai keinginan. Kita juga dapat membuat operasi sederhana menggunakan tanda interpolation {{}} . Tambahkan {{1 + 4}} pada app.component.html dan akan ditampilkan angka 5 (karena bentuk datanya adalah number). Berbeda jika kita menuliskan {{'1' + '4'}} yang akan muncul adalah 14. 

Variable Initialization, kita juga dapat membuat inisialisasi pada variabel yang ingin dibuat dengan type data tentunya. 

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'namaweb';
subtitle = 'Ini website baru';
angka2 : number = 2;
angka4 : number;
constructor() {
this.angka4 = 4;
}
}

Dari contoh di atas ada 2 cara yang saya coba yaitu variabel angka2 dan angka4 dimana ada perbedaan angka4 menggunakan constructor. Selanjutnya kita dapat menampilkan ke dalam app.component.ts dengan cara yang sama seperti di atas yaitu {{angka2 + angka4}} sehingga akan menampilkan angka 6. 


Selamat mencoba :)