Angular Call Ts Function From Html

MUAZHAN

3 min read

·

Jul 01, 2024

34

Share

Memanggil Fungsi TypeScript dari HTML di Angular

Angular adalah framework JavaScript populer yang memungkinkan pengembangan aplikasi web yang kompleks dan scalable. Salah satu aspek penting dalam pengembangan Angular adalah interaksi antara HTML dan TypeScript. Dalam artikel ini, kita akan membahas bagaimana memanggil fungsi TypeScript dari HTML di Angular.

Memahami Konsep Dasar

Dalam Angular, HTML digunakan untuk membangun struktur dan tampilan aplikasi, sementara TypeScript menangani logika dan data aplikasi. Untuk membuat interaksi antara keduanya, kita menggunakan Data Binding, yang memungkinkan data dan fungsi dalam TypeScript ditampilkan dan diakses melalui HTML.

Cara Memanggil Fungsi TypeScript dari HTML

Berikut adalah langkah-langkah umum untuk memanggil fungsi TypeScript dari HTML di Angular:

1. Deklarasikan Fungsi dalam Komponen TypeScript:

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-my-component',
     templateUrl: './my-component.component.html',
     styleUrls: ['./my-component.component.css']
   })
   export class MyComponentComponent {
     message: string = 'Hello World!';
   
     greetUser(name: string) {
       this.message = 'Hello, ' + name + '!';
     }
   }
   

   Dalam contoh ini, kita mendeklarasikan fungsi greetUser() yang menerima parameter name dan mengubah nilai message di komponen.

2. Panggil Fungsi dalam Template HTML:

   {{ message }}
   
   Greet John
   

   Dalam template HTML, kita menggunakan {{ message }} untuk menampilkan nilai message. Untuk memanggil fungsi greetUser(), kita menggunakan directive (click) yang dihubungkan dengan fungsi greetUser dan menyertakan parameter 'John'.

3. Jalankan Aplikasi:

   Jalankan aplikasi Angular Anda dan Anda akan melihat teks "Hello World!" pada halaman. Setelah Anda mengklik tombol "Greet John", teks akan berubah menjadi "Hello, John!".

Penggunaan Directive Event

Directives (click), (change), dan (submit) adalah beberapa contoh directive event yang memungkinkan Anda memanggil fungsi TypeScript saat terjadi event tertentu pada elemen HTML.

Kesimpulan

Memanggil fungsi TypeScript dari HTML di Angular memungkinkan Anda untuk membangun aplikasi interaktif dan dinamis. Dengan memahami konsep Data Binding dan menggunakan directive event, Anda dapat dengan mudah membuat aplikasi Angular yang responsif dan efisien.