Cara Menggunakan Output Decorator di Angular Read Now

Di Angular, halaman web dapat berisi banyak komponen berbeda yang dapat digunakan kembali. Setiap komponen biasanya berisi logika TypeScript, template HTML, dan gaya CSS sendiri.

Anda juga dapat menggunakan kembali komponen di dalam komponen lain. Dalam hal ini, Anda dapat menggunakan dekorator Output untuk mengirimkan informasi dari komponen anak kembali ke komponen induknya.

Anda juga dapat menggunakan dekorator Output untuk mendengarkan peristiwa yang terjadi di komponen anak.

Cara Menambahkan Dekorator Keluaran ke Komponen Anak

Pertama, Anda perlu membuat aplikasi Angular baru dengan komponen induk dan komponen anak.

Setelah Anda memiliki komponen induk dan anak, Anda dapat menggunakan dekorator Output untuk mentransfer data dan mendengarkan kejadian di antara kedua komponen tersebut.

1. Buat aplikasi Angular baru. Secara default, “app” adalah nama komponen root. Komponen ini mencakup tiga file utama: “app.component.html”, “app.component.css”, dan “app.component.ts”.
2. Untuk contoh ini, komponen “app” akan bertindak sebagai komponen induk. Ganti semua konten di “app.component.html” dengan yang berikut:

    <div class="parent-component">
     <h1> This is the parent component </h1>
   </div> 

3. Tambahkan beberapa gaya ke komponen aplikasi induk di “app.component.css”:

    .parent-component {
     font-family: Arial, Helvetica, sans-serif;
     background-color: lightcoral;
     padding: 20px
   } 

4. Gunakan perintah “ng generate component” untuk membuat komponen Angular baru yang disebut “data-component”. Dalam contoh ini, “data-component” akan mewakili komponen anak.

    ng g c data-component 

5. Tambahkan konten ke komponen anak di “data-component.component.html”. Ganti konten saat ini untuk menambahkan tombol baru. Ikat tombol ke fungsi yang akan berjalan saat pengguna mengkliknya:

    <div class="child-component">
     <p> This is the child component </p>
     <button (click)="onButtonClick()">Click me</button>
   </div> 

6. Tambahkan beberapa gaya ke komponen anak di “data-component.component.css”:

    .child-component {
     font-family: Arial, Helvetica, sans-serif;
     background-color: lightblue;
     margin: 20px;
     padding: 20px
   } 

7. Tambahkan fungsi onButtonClick() ke file TypeScript untuk komponen, di “data-component.component.ts”:

    onButtonClick() {
   } 

8. Masih di dalam file TypeScript, tambahkan “Output” dan “EventEmitter” ke daftar impor:

    import { Component, Output, EventEmitter, OnInit } from '@angular/core'; 

9. Di dalam kelas DataComponentComponent , nyatakan variabel Output untuk komponen yang disebut “buttonWasClicked”. Ini akan menjadi EventEmitter. EventEmitter adalah kelas bawaan yang memungkinkan Anda memberi tahu komponen lain saat suatu peristiwa terjadi.

    export class DataComponentComponent implements OnInit {
     @Output() buttonWasClicked = new EventEmitter<void>();
     // ...
   } 

10. Gunakan penghasil peristiwa “buttonWasClicked” di dalam fungsi onButtonClick(). Saat pengguna mengklik tombol, komponen data akan mengirimkan kejadian ini ke komponen aplikasi induk.

     onButtonClick() {
        this.buttonWasClicked.emit();
    } 

Cara Mendengarkan Acara di Komponen Anak Dari Komponen Induk

Untuk menggunakan properti Output komponen anak, Anda perlu mendengarkan peristiwa yang dipancarkan dari komponen induk.

1. Gunakan komponen anak di dalam “app.component.html”. Anda dapat menambahkan keluaran “buttonWasClicked” sebagai properti saat membuat tag HTML. Ikat acara ke fungsi baru.

    <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component> 

2. Di dalam “app.component.ts”, tambahkan fungsi baru untuk menangani peristiwa klik tombol saat terjadi di komponen anak. Buat pesan saat pengguna mengklik tombol.

    message: string = ""
   
   buttonInChildComponentWasClicked() {
       this.message = 'The button in the child component was clicked';
   } 

3. Tampilkan pesan di “app.component.html”:

    <p>{{message}}</p> 

4. Ketik perintah “ng serve” ke terminal untuk menjalankan aplikasi Angular Anda. Buka di browser web di localhost:4200. Komponen induk dan anak menggunakan warna latar belakang yang berbeda agar lebih mudah membedakannya.

5. Klik pada Klik saya tombol. Komponen anak akan mengirimkan acara ke komponen induk, yang akan menampilkan pesan.

Cara Mengirim Data Dari Komponen Anak ke Komponen Induk

Anda juga dapat mengirimkan data dari komponen anak ke komponen induk.

1. Di “data-component.component.ts”, tambahkan variabel untuk menyimpan daftar string yang berisi beberapa data.

    listOfPeople: string[] = ['Joey', 'John', 'James']; 

2. Ubah jenis kembalian emitor peristiwa buttonWasClicked. Ubah dari void menjadi string[]untuk mencocokkan daftar string yang Anda nyatakan di langkah sebelumnya:

    @Output() buttonWasClicked = new EventEmitter<string[]>(); 

3. Ubah fungsi onButtonClick(). Saat mengirim event ke komponen induk, tambahkan data sebagai argumen ke dalam fungsi emit() :

    onButtonClick() {
       this.buttonWasClicked.emit(this.listOfPeople);
   } 

4. Di “app.component.html”, ubah tag “app-data-component”. Tambahkan “$event” ke dalam fungsi buttonInChildComponentWasClicked(). Ini berisi data yang dikirim dari komponen anak.

    <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component> 

5. Perbarui fungsi di “app.component.ts” untuk menambahkan parameter data:

    buttonInChildComponentWasClicked(dataFromChild: string[]) {
       this.message = 'The button in the child component was clicked';
   } 

6. Tambahkan variabel baru bernama “data” untuk menyimpan data yang berasal dari komponen anak:

    message: string = ""
   data: string[] = []
   
   buttonInChildComponentWasClicked(dataFromChild: string[]) {
       this.message = 'The button in the child component was clicked';
       this.data = dataFromChild;
   } 

7. Menampilkan data pada halaman HTML:

    <p>{{data.join("https://www.Bocah Handal/angular-output-decorator-how-use/,")}}</p> 

8. Ketik perintah “ng serve” ke terminal untuk menjalankan aplikasi Angular Anda. Buka di browser web di localhost:4200.

9. Klik pada Klik saya tombol. Komponen anak akan mengirimkan data dari komponen anak ke komponen induk.

Mengirim Data ke Komponen Lain Menggunakan Output Decorator

Ada dekorator lain yang dapat Anda gunakan di Angular, seperti dekorator Input atau dekorator Komponen. Anda dapat mempelajari lebih lanjut tentang cara menggunakan dekorator lain di Angular untuk menyederhanakan kode Anda.