Menggunakan Component HTML Template

by

Template wajib dimiliki oleh Angular Component. terdapat dua pendekatan:

  • External HTML template
  • Inline HTML template

External HTML Template

Adalah file HTML yang menggunakan format nama_component.component.html. Informasi template diakses oleh file component.ts melalui @component decorator menggunakan property templateUrl yang diisi dengan relatif path dari file html template.

Menggunakan contoh dari modul sebelumnya, yaitu file server.component.ts

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

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html'
})
export class ServerComponent{
    servertitle = 'server component..';
 }

Inline HTML Template

Digunakan jika code template tidak terlalu panjang. Didefinisikan dalam @Component decorator pada property template.

Berikut contohnya, menggunakan file servers.component.ts, yang digenerate secara otomatis pada modul sebelumnya.

Perhatian, bisa digunakan back-tick (“) untuk multiline HTML template.

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

@Component({
  selector: 'app-servers',
  template: `
    <app-server></app-server>
    <app-server></app-server>
  `,
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
Sharing is caring:

Leave a Comment