Menggunakan Angular Component Selector

by

Cara kerja dari component selector pada Angular mirip dengan css selector.

Menggunakan contoh dari modul sebelumnya, buka file app.component.ts.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular Apps';
}

Kita dapat menggunakan selector dengan beberapa pendakatan,

  • Element: bekerja seperti element html lainnya, pastikan elemen yang dibuat adalah unik.
  • Class: Angular akan mencari element html dengan class yang didefinisikan pada selector.
  • Attribute: Angular akan mencari element html dengan attribute yang didefinisikan pada selector.

Sebagai Element HTML

Jika decorator @component menggunakan selector element html seperti code dibawah, maka implementasi pada html template berupa html element tag.

selector: 'app-root'
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h1>APP Component</h1>
            <hr>
            <app-server></app-server>
        </div>
    </div>
</div>

Sebagai Attribute

Jika selector didefinisikan sebagai attribute, maka pada HTML template harus digunakan sebagai attribute dari element HTML. Contoh digunakan div.

selector: '[app-root]'
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h1>APP Component</h1>
            <hr>
            <div app-server></div>
        </div>
    </div>
</div>

Sebagai Class

Jika selector didefinisikan sebagai class, maka pada HTML template harus digunakan sebagai class dari element HTML. Contoh digunakan div.

selector: '.app-root'
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h1>APP Component</h1>
            <hr>
            <div class="app-server"></div>
        </div>
    </div>
</div>

Sharing is caring:

Leave a Comment