Angular Data Binding and Directives

Related learning

Free course
Intro to Angular
Learn the core concepts of Angular, including the basics of data binding and directives, in this introductory course.
Intermediate.
6 hours

Data Binding In Angular

In Angular, a component’s data model is linked to its template through various data binding methods, such as text interpolation and event binding.

<h1>Welcome {{ user.name }}</h1>
<button (click)="deactivate()">Deactivate</button>

Angular Directives

In Angular, the Document Object Model (DOM) can be augmented through various types of directives like component, attribute, and structural directives.

<!-- Use component directive-->
<app-user />

Two-way Data Binding in Angular

In Angular, two-way data binding enables a bi-directional flow of data between a component’s model and its template.

This type of binding uses a syntax that combines property and event binding, known as “banana-in-a-box.”

<!-- Two-way bind `toggle` to `user.active` property -->
<app-toggle [(toggle)]="user.activate"/>

Built-in Directives in Angular

Angular provides built-in directives to augment the DOM.

The attribute directives include:

ngClass: modifies the set of CSS classes applied to an element
ngStyle: modifies the set of styles applied to an element

Component directives:

Components are directives with their own templates and can be reused throughout the application

<!-- modify class based on `user.active` -->
<h1 [ngClass]="user.active? 'active': 'deactivated'">Welcome {{ user.id }}</h1>

Custom Directives in Angular

A custom directive can be created in Angular using the @Directive (from @angular/core) decorator around a class, similar to creating a component.

The directive can accept an input by defining an input using @Input with the same name as the selector.

import { Directive, Input } from "@angular/core"

@Directive({
	selector: "[appRotate]",	// custom attribute selector
	standalone: true
})
export class AppRotateDirective {
	@Input() appRotate = "180deg"	// rotation amount
}

Pipes in Angular

In Angular, pipes are used in a component’s template to apply a transformation to data. It is applied using a pipe symbol (|), and can be displayed and chained together. Angular provides many pre-built pipes like:

UpperCasePipe: formats data into all capital letters
DatePipe: formats dates
DecimalPipe: formates decimals

<!-- using a `DatePipe` to format the `user.joinedOn` `Date` object -->
<p>Joined {{ user.joinedOn | date }}</p>

Custom Pipes in Angular

A custom pipe can be created in Angular by creating a class decorated with @Pipe (from @angular/core). This class should implement the PipeTransform interface (from @angular/core) and its transform() method, which takes a value parameter and any number of other parameters.

import { Pipe, PipeTransform } from "@angular/core"

@Pipe({
	name: "alternatecase",	// name used in the template
	standalone: true
})
export class AlternatingCasePipe implements PipeTransform {
	transform(value: string, startUppercase = true): string {	// value and other parameters
		// implementation
	}
}

Angular Event Binding

Angular provides a type of data binding used to synchronize data changes in the component’s template (through events) to the component’s data model, known as event binding.

Event binding involves wrapping a target event in parentheses (()) and calling an event handler function.

The event handler function can receive the Event object using the special $event argument.

<!-- event bind to `click` event and call `deactiveUser()` with the `Event` object through `$event` -->
<button (click)="deactivateUser($event)">Deactivate</button>

Host Listeners in Angular

In Angular, a host element can have its raised events bound using the host property in the component decorator. It allows components to react to host element events without directly manipulating the DOM.

The host property uses event binding syntax '(eventName)' to listen to events, and can pass arguments like $event to the handler method.

import { Component } from "@angular/core"
@Component({
  selector: "app-activate-button",
  host: {
    '(click)': 'handleClickEvent($event)'  // host bind to `click` event and receive `Event` object
    }
})
export class AppActivateButton {
  handleClickEvent(event: Event) {    // receives `Event` object and other potential args
    // process click event
  }
}

Angular Property Binding

Angular provides a type of data binding known as property binding, which allows you to bind a component’s data model to attributes of elements in the template. This one-way data binding ensures that whenever the source property in the component changes, the corresponding property in the template is automatically updated.

Property binding involves wrapping an element property in brackets ([]) and setting it equal to data in the component.

<!-- property bind the `user` property to an instance variable in the component called `selectedUser` -->
<app-user [user]="selectedUser"/>

Angular Text Interpolation

In Angular, text interpolation embeds data or expressions into text in the component’s template. This allows you to display component properties dynamically within the HTML.

Text interpolation is done by wrapping data in double curly braces ({{}}).

<!-- text interpolate `user.name` in the template text within the <p> element -->
<p>Welcome {{ user.name }}</p>

Creating Two-way Bindable Properties in Angular

A two-way bindable property can be created in an Angular component by defining an input property and an output property.

Use the @Input decorator to create an instance variable, allowing the parent component to pass data to this component.

Use the @Output decorator to create an instance variable with an EventEmitter. This variable should follow the naming pattern of the input property with “Change” appended to it, enabling the component to emit changes back to the parent.

In the example code, the @Input decorator is named isActive and the @Output decorator is named isActiveChange.

import { Component, Input, Output, EventEmitter } from "@angular/core"
@Component({
  selector: "app-activate-button",
  standalone: true
})
export class AppActivateButton {
  // define input named `isActive`
  @Input() isActive = false 

  // define output following `xChange` naming convention
  @Output() isActiveChange = new EventEmitter<boolean>() 
}

Host Elements in Angular

In Angular, a host element is the Document Object Model (DOM) element created to encapsulate a component’s template when the component instance is created.

Host elements contain the component’s template elements or the element a directive is attached to. In the code example, <app-dashboard> is the host element.

<!-- in `app-dashboard.component.html` -->

<!-- wrapped by `<app-dashboard>` when component instance is created -->
<h1>Welcome</h1>
<app-user/>
<footer>Thank You</footer>

Host Binding in Angular

In Angular, a host element can have its properties or attributes bound using the host property in the component decorator. This is useful for dynamically setting classes, styles, or other attributes on the host element.

The host property uses template binding syntax: '[property]' for property bindings, '[attr.name]' for attribute bindings, and the decorated variable or method provides the value.

import { Component, Input } from "@angular/core"
@Component({
  selector: "app-activate-button",
  host: {
    '[class]': 'myClass',           // bind to `class`
    '[attr.aria-label]': 'getLabel()' // bind to `aria-label`
  }
})
export class AppActivateButton {
  @Input() active = false

  myClass = "text-class"  // `myClass` provides the value

  getLabel() {
    return this.active ? "activated" : "deactivated" // calculate `aria-label` for host element 
  }
}

Learn more on Codecademy

Free course
Intro to Angular
Learn the core concepts of Angular, including the basics of data binding and directives, in this introductory course.
Intermediate.
6 hours