Angular Call Js Function From Html

MUAZHAN

4 min read

·

Jul 01, 2024

34

Share

Cara Memanggil Fungsi JavaScript dari HTML dalam Angular

Angular adalah framework front-end populer yang dibangun di atas TypeScript. Salah satu kekuatan Angular adalah bagaimana ia mengikat data dan logika ke dalam komponen, membuat kode Anda lebih terstruktur dan mudah dipahami. Namun, terkadang Anda mungkin perlu memanggil fungsi JavaScript biasa dari template HTML Anda.

Berikut adalah beberapa cara untuk memanggil fungsi JavaScript dari template HTML dalam Angular:

1. Deklarasi Fungsi di Komponen

Anda dapat mendeklarasikan fungsi JavaScript langsung di dalam kelas komponen Anda:

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

@Component({
  selector: 'app-my-component',
  template: `
    Click me
  `
})
export class MyComponent {
  myFunction() {
    console.log('Fungsi dijalankan!');
  }
}

Dalam contoh ini, kita mendeklarasikan fungsi myFunction di kelas MyComponent. Fungsi ini dijalankan ketika tombol dengan (click) directive diklik.

2. Mengimpor Fungsi dari File Eksternal

Jika fungsi Anda lebih kompleks atau Anda ingin menggunakannya di beberapa komponen, Anda dapat menyimpannya di file JavaScript terpisah dan mengimpornya ke dalam komponen Anda.

my-utils.js:

function myExternalFunction() {
  console.log('Fungsi eksternal dijalankan!');
}

my-component.component.ts:

import { Component } from '@angular/core';
import * as myUtils from './my-utils.js';

@Component({
  selector: 'app-my-component',
  template: `
    Click me
  `
})
export class MyComponent {
  myExternalFunction = myUtils.myExternalFunction; 
}

Kita mengimpor fungsi myExternalFunction dari my-utils.js dan mengaturnya ke properti myExternalFunction di komponen.

3. Menggunakan window Object

Anda dapat menggunakan window object untuk mengakses fungsi global yang didefinisikan dalam HTML:

index.html:

my-component.component.ts:

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

@Component({
  selector: 'app-my-component',
  template: `
    Click me
  `
})
export class MyComponent {
  callGlobalFunction() {
    window.globalFunction();
  }
}

Metode ini jarang digunakan karena mengurangi modularitas dan dapat membuat kode Anda lebih sulit untuk diuji.

4. Menggunakan Renderer2

Renderer2 adalah layanan Angular yang memungkinkan Anda berinteraksi langsung dengan DOM. Anda dapat menggunakannya untuk memanggil fungsi JavaScript yang terkait dengan elemen HTML.

my-component.component.ts:

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

@Component({
  selector: 'app-my-component',
  template: `
    Click me
  `
})
export class MyComponent {
  constructor(private renderer: Renderer2) {}

  callMyFunction(element: HTMLElement) {
    this.renderer.invokeElementMethod(element, 'myFunction');
  }
}

Dalam contoh ini, Renderer2 digunakan untuk memanggil metode myFunction dari elemen <button> yang memiliki reference myButton.

Kapan Menggunakan Metode Mana?

• Deklarasi Fungsi di Komponen: Untuk fungsi sederhana yang hanya digunakan di dalam komponen Anda.
• Mengimpor Fungsi dari File Eksternal: Untuk fungsi yang kompleks atau yang Anda ingin gunakan di beberapa komponen.
• Menggunakan window Object: Untuk fungsi global yang didefinisikan dalam HTML (hindari jika mungkin).
• Menggunakan Renderer2: Untuk berinteraksi langsung dengan DOM dan memanggil fungsi yang terkait dengan elemen HTML.

Penting untuk memilih metode yang paling sesuai untuk kebutuhan spesifik Anda dan untuk memastikan kode Anda mudah dipelihara dan diuji.