Penggunaan Layanan di Angular

Dalam pelajaran sebelumnya, kita telah membuat layanan DataService kita sendiri. Sekarang mari impor ke dalam komponen:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // di sini

Dalam dekorator @Component pada properti providers, perlu ditentukan layanan kita:

@Component({
	.....
	providers: [ DataService ] // di sini
})

Sekarang kita akan menggunakan pendekatan khusus, yang disebut injeksi ketergantungan (dependency injection). Intinya adalah bahwa dalam konstruktor komponen kita dapat meneruskan layanan kita sebagai parameter dan itu akan secara otomatis masuk ke properti privat komponen kita. Lihat dalam kode:

export class AppComponent {
	constructor(private dataService: DataService) { // menyuntikkan ketergantungan
		console.log(this.dataService); // layanan dalam properti privat
	}
}

Injeksi untuk layanan kita bekerja, karena kita sebelumnya telah menerapkan dekorator Injectable padanya.

Sekarang mari dalam konstruktor kelas komponen dapatkan data dari layanan kita, dengan memanggil metode yang sesuai:

export class AppComponent {
	public data: string[] = [];
	
	constructor(private dataService: DataService) {
		this.data = this.dataService.getData();
	}
}

Mari tampilkan data yang diperoleh dalam template komponen:

<ol>
	<li *ngFor="elem of data">
		{{ elem }}
	</li>
</ol>

Dapatkan barang dari layanan Anda di komponen dan tampilkan dalam template komponen.

Buat di layanan Anda metode untuk menambahkan barang baru. Dalam komponen buat tombol, yang ketika diklik akan menambahkan barang baru.

Buat formulir dengan dua input dan tombol, yang ketika ditekan akan menambahkan barang baru.