Angular Html Call Function From Another Component

MUAZHAN

4 min read

·

Jul 01, 2024

49

Share

Memanggil Fungsi dari Komponen Lain di Angular

Dalam pengembangan aplikasi Angular, sering kali kita perlu memanggil fungsi dari komponen lain. Ini memungkinkan interaksi dan komunikasi yang efektif antara komponen yang berbeda dalam aplikasi. Berikut adalah beberapa metode umum untuk memanggil fungsi dari komponen lain di Angular:

1. Menggunakan @Output dan EventEmitter

@Output dan EventEmitter adalah mekanisme yang kuat untuk memicu event dari satu komponen ke komponen lain.

Langkah-langkah:

1. Deklarasikan EventEmitter di komponen yang akan memicu event:

   import { Component, Output, EventEmitter } from '@angular/core';
   
   @Component({
     selector: 'app-child',
     template: `
       Click Me
     `
   })
   export class ChildComponent {
     @Output() buttonClick = new EventEmitter();
   
     onButtonClick() {
       this.buttonClick.emit();
     }
   }
   

2. Bind EventEmitter di komponen yang ingin menerima event:

   import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'app-parent',
     template: `
       
     `
   })
   export class ParentComponent {
     onChildButtonClick() {
       // Panggil fungsi yang ingin Anda eksekusi setelah event terjadi
       console.log("Tombol di ChildComponent ditekan!");
     }
   }
   

2. Menggunakan Service

Service menyediakan cara yang lebih terstruktur dan terorganisir untuk berbagi data dan logika antara komponen.

Langkah-langkah:

1. Buat service:

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class MyService {
     myFunction() {
       console.log("Fungsi di service dipanggil!");
     }
   }
   

2. Injeksikan service ke komponen yang ingin menggunakannya:

   import { Component } from '@angular/core';
   import { MyService } from './my.service';
   
   @Component({
     selector: 'app-child',
     template: `
       Call Service Function
     `
   })
   export class ChildComponent {
     constructor(private myService: MyService) {}
   
     callServiceFunction() {
       this.myService.myFunction();
     }
   }
   

3. Injeksikan service ke komponen yang ingin memanggil fungsi:

   import { Component } from '@angular/core';
   import { MyService } from './my.service';
   
   @Component({
     selector: 'app-parent',
     template: `
       
     `
   })
   export class ParentComponent {
     constructor(private myService: MyService) {}
   
     callServiceFunction() {
       this.myService.myFunction();
     }
   }
   

3. Menggunakan ViewChild

ViewChild memungkinkan kita mengakses komponen anak secara langsung dan memanggil fungsinya.

Langkah-langkah:

1. Deklarasikan ViewChild di komponen parent:

   import { Component, ViewChild } from '@angular/core';
   import { ChildComponent } from './child.component';
   
   @Component({
     selector: 'app-parent',
     template: `
       
     `
   })
   export class ParentComponent {
     @ViewChild('child') childComponent: ChildComponent;
   
     callChildFunction() {
       this.childComponent.myFunction();
     }
   }
   

2. Tambahkan fungsi yang ingin Anda panggil di komponen anak:

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-child',
     template: `
       
     `
   })
   export class ChildComponent {
     myFunction() {
       console.log("Fungsi di ChildComponent dipanggil!");
     }
   }
   

Pertimbangan

• @Output dan EventEmitter cocok untuk event sederhana yang hanya memerlukan komunikasi satu arah.
• Service adalah pilihan yang baik untuk logika dan data yang rumit dan harus dibagikan di seluruh aplikasi.
• ViewChild memungkinkan akses langsung ke komponen anak, tetapi sebaiknya digunakan dengan hati-hati karena dapat memperumit struktur kode.

Pilihan metode yang tepat bergantung pada kebutuhan spesifik aplikasi dan tingkat kompleksitas interaksi antar komponen.