Learn Angular - Components & Templates

#Introduction

In episode 3 you got a running Angular project. Now we go to the heart of Angular: components and templates. Everything you see on screen — buttons, forms, lists, cards — is a component rendering a template.

Episode 4 dissects how to create components, use interpolation and the various forms of data binding, template references, and inter-component communication with @Input and @Output. These are skills you'll use in every line of Angular code you write.

#Creating Components and Templates

#Generate a Component with the CLI

The best way to create a component is through the CLI, because the required files are generated automatically and registered correctly.

ng generate component produk
ng g c produk --skip-tests

ng g c produk --skip-tests creates a produk folder with .ts, .html, and .scss files and no spec file. Once generated, the component can be used in other templates via its selector.

#Anatomy of a Component

A simple produk component

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-produk',
  standalone: true,
  template: `<h3>Daftar Produk</h3>`,
  styleUrl: './produk.component.scss',
})
export class ProdukComponent {
  namaToko = 'Toko Online';
}

The @Component decorator defines the selector, template, and styleUrl. The namaToko property is component state you can display in the template. A standalone component doesn't need an NgModule to be used.

#Interpolation and Data Binding

#Interpolation

Interpolation displays values from the component into the template using double braces:

Interpolation in a template

<p>Selamat datang di {{ namaToko }}</p>

{{ namaToko }} will display the value of the namaToko property. Angular also supports simple expressions inside the braces, such as {{ 1 + 2 }} or {{ nama.toUpperCase() }}, but avoid complex logic in templates.

#Property Binding, Event Binding, and Two-way Binding

• Property binding [property]="value" sends values from the component to an element.
• Event binding (event)="handler($event)" captures events from an element.
• Class/style binding changes classes and styles based on conditions.
• Two-way binding [(ngModel)] combines both for forms.

Various forms of binding

<button [disabled]="sedangMuat">Simpan</button>
<input [value]="nama" (input)="nama = $any($event.target).value" />
<div [class.aktif]="terpilih" [style.color]="warna">Item</div>

Notice the binding patterns: [disabled] binds a DOM property, (input) captures an event, [class.aktif] adds a class when terpilih is true, and [style.color] binds a style value directly.

#Template References

#View Child and Template Reference Variables

A template reference variable (marked with #) gives you access to a DOM element or component within the same template, without manual queries.

Template reference variable

<input #cariInput placeholder="Cari produk" />
<button (click)="cari(cariInput.value)">Cari</button>

#cariInput is a reference to the input element. When the button is clicked, the value of cariInput.value is sent to the cari method. To access the element from the component class, use viewChild:

Access an element from the class

import { Component, ElementRef, viewChild } from '@angular/core';
 
@Component({
  selector: 'app-cari',
  standalone: true,
  template: `<input #cari />`,
})
export class CariComponent {
  readonly cari = viewChild<ElementRef<HTMLInputElement>>('cari');
}

viewChild('cari') returns a signal containing the input element once the view is ready. This is the modern approach that replaces the decorator-based @ViewChild.

#Inter-component Communication

#@Input and @Output with Signals

A parent component sends data to a child component through inputs, and the child notifies the parent through outputs. Since Angular 17.2, input and output are available as signal-based functions.

A child component with input and output

import { Component, input, output } from '@angular/core';
 
@Component({
  selector: 'app-kartu-produk',
  standalone: true,
  template: `
    <div class="kartu" (click)="pilih.emit()">
      <h4>{{ produk().nama }}</h4>
      <p>Rp {{ produk().harga }}</p>
    </div>
  `,
})
export class KartuProdukComponent {
  readonly produk = input.required<Produk>();
  readonly pilih = output();
}

The parent then uses <app-kartu-produk [produk]="p" (pilih)="bukaDetail()" />. Notice input.required for required inputs and output() for the event emitted when the card is clicked.

#Two-way Communication

The combination of input and output is what forms the two-way communication pattern between components: the parent sends data via property binding, and the child reports actions via event binding. This pattern is called component communication and is the foundation of Angular's component architecture.

#Wrap Up

Key takeaways:

• A component is a unit of view with a selector, template, and styles.
• Interpolation displays values; property and event binding connect components with the DOM.
• Class and style binding manipulate the view based on conditions.
• Template reference variables make it easy to access elements in a template.
• Signal-based input and output replace the classic @Input and @Output.
• Inter-component communication always takes the form of data in and events out.

In the next episode, episode 5, we'll cover directives and pipes — using built-in directives such as *ngIf and *ngFor plus the modern @if and @for control flow, creating custom directives, and using and creating pipes to format display data.