Angular 4 : Input & Passing Variable Antar Komponen

Assalamu’alaikum Wr. Wb

Pada kesempatan kali ini, penulis ingin membagikan ilmu tentang bagaimana kita mendapatkan input dari textfield, dan menampilkannya. Selain itu juga, penulis akan membahas bagaimana cara mengirim data antar komponen.

Jadi langsung saja,

Buka project yang telah penulis buat pada :

Angular 4 : Membuat Component” atau bisa juga dengan mendownload projectnya di repo “GitHub” penulis.

Berikut penulis perlihatkan struktur foldernya:

struktur folder

Pada kali ini, penulis ingin membuat form input pada component di app.component.ts, yang kemudian nilai dari form tersebut akan di tampilkan pada example.component.ts.

Langkah pertama, anda buka AppComponent. kemudian buat sebuah textfield di app.component.html.

membuat sebuah input text di app.component.html

Langkah kedua, tambahkan “directive” “NgModel” pada text field anda.

menambahkan directive NgModel pada textfield

#Note :

Apa itu “Directive” :

menurut penulis directive adalah sebuah penanda (biasanya berupa attribut pada HTML tag) yang didalamnya sudah terdapat sebuah fungsi/perilaku yang spesifik.

pada kode di atas, penulis menggunakan directive ngModel, ngModel ini merupakan directive untuk binding value ke variable. jadi misal terdapat kode :

[(ngModel)]=“input_satu”

berarti value/nilai yang ada pada input yang memiliki attribute tersebut akan masuk ke dalam variable input_satu.

sebagai pembuktian, tambahkan kode berikut :

<p>Anda memasukkan nilai : “{{ input_satu }}”</p>

maka code akan menjadi :

hasil penambahan kode

kode {{ <value>}} berguna untuk menampilkan nilai dari variable. pada kode diatas penulis menuliskan {{ input_satu }}, berarti pada kode itu menampilkan nilai dari variable input_satu. Setelah itu, coba anda jalankan dengan eksekusi perintah pada terminal/command prompt.

ng serve
hasil kompilasi kode

Hasil di atas adalah hasil dari kode yang telah kita buat, apapun yang anda masukkan di dalam field maka akan tampil di bawah text.

Langkah kedua, buka example.component.ts. Import Input dari package “@angular/core”, dengan cara

import { Input } from “@angular/core”

ketika digabungkan dengan kode yang ada, maka akan menjadi :

Langkah ketiga, tambahkan “@Input()” pada variable yang akan menampung hasil passing dari component lain, dengan cara :

@Input() nilai : string

pada kode diatas, penulis membuat sebuah variable penampung nilai, dengan tipe data string.

Kode sekarang pada example.component.ts menjadi seperti :

hasil kode pada example.component.ts

sekarang variable hasil penampung dapat diproses di komponen example. Penulis pada saat ini hanya akan menampilkan saja pada komponen example

Untuk menampilkan variable tersebut, buka templateUrl ExampleComponent yang bernama example.component.html. Tambahkan {{ nilai }} pada sembarang tempat. Penulis membuatnya menjadi seperti berikut :

menambahkan {{ nilai }} pada kode example.component.html

Langkah keempat, kita akan mengubungkan variable dari AppComponent ke ExampleComponent, dengan cara menambahkan attribute “[nilai]” pada tag-selector ExampleComponent di AppComponent (app.component.html). Berikut adalah kode yang ditambahkan di app.component.html :

menambahkan attribute [nilai]=”input_satu” pada tag <app-example/>

ketika selesai pastikan ExampleComponent telah didaftarkan pada declarations di app.module.ts.

ExampleModule di app.module.ts

Sebelumnya jangan lupa import FormsModule dari "@angular/forms". Dan Masukkan FormsModule ke array imports di @NgModule

Langkah kelima, coba anda jalankan aplikasi dengan perintah “ng serve” :

hasil semua kode

Ketika anda menuliskan sesuatu, maka tulisan tersebut akan muncul pada komponen Example.

Sekian yang dapat penulis sampaikan. Apabila ada kesalahan dalam penulisan, penulis mohon untuk di tulis di kotak komentar. Untuk source code, dapat anda lihat di repo “GitHub” penulis.

Terima Kasih,

Wassalamu’alaikum Wr.Wb