Bindings

Interpolation binding (``)

• cannot interpolate arbitrary javascript commands, instead, calling functions from that component

Property binding ([])

Event binding (())

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  template: `
  <div>
    <input type="text" (change)="onChange($event)" />
    <p></p>
  </div>
  `,
  standalone: true,
})

export class AppComponent {
  isEditable:boolean = true;

  value: string = "";

  onChange(event: Event): void {
    const inputElem = event.target as HTMLInputElement;
    this.value = inputElem.value;
  }
}

• A list of events

  Mouse Events

  • (click): Triggered when an element is clicked.
  • (dblclick): Triggered when an element is double-clicked.
  • (mousedown): Triggered when a mouse button is pressed on an element.
  • (mouseup): Triggered when a mouse button is released over an element.
  • (mouseenter): Triggered when the mouse pointer enters the element.
  • (mouseleave): Triggered when the mouse pointer leaves the element.
  • (mousemove): Triggered when the mouse pointer is moved over the element.
  • (mouseover): Triggered when the mouse pointer is moved onto the element.
  • (mouseout): Triggered when the mouse pointer is moved out of the element.
  • (contextmenu): Triggered when the right mouse button is clicked to open a context menu.

  Keyboard Events

  • (keydown): Triggered when a key is pressed.
  • (keypress): Triggered when a key is pressed and held.
  • (keyup): Triggered when a key is released.

  Focus Events

  • (focus): Triggered when an element gains focus.
  • (blur): Triggered when an element loses focus.

  Form Events

  • (input): Triggered when the value of an input element changes.
  • (change): Triggered when the value of an input element changes and the element loses focus.
  • (submit): Triggered when a form is submitted.
  • (reset): Triggered when a form is reset.

  Drag and Drop Events

  • (drag): Triggered when an element is being dragged.
  • (dragstart): Triggered when the user starts dragging an element.
  • (dragend): Triggered when the user stops dragging an element.
  • (dragenter): Triggered when a dragged element enters a drop target.
  • (dragleave): Triggered when a dragged element leaves a drop target.
  • (dragover): Triggered when an element is being dragged over a drop target.
  • (drop): Triggered when a dragged element is dropped on a drop target.

  Clipboard Events

  • (copy): Triggered when content is copied to the clipboard.
  • (cut): Triggered when content is cut to the clipboard.
  • (paste): Triggered when content is pasted from the clipboard.

  Touch Events

  • (touchstart): Triggered when a touch point is placed on the touch surface.
  • (touchmove): Triggered when a touch point is moved along the touch surface.
  • (touchend): Triggered when a touch point is removed from the touch surface.
  • (touchcancel): Triggered when a touch event is interrupted.

  Miscellaneous Events

  • (scroll): Triggered when the user scrolls an element.
  • (resize): Triggered when the window is resized.
  • (error): Triggered when an error occurs.
  • (load): Triggered when an element or resource finishes loading.
  • (unload): Triggered when the document or a resource is being unloaded.

  Custom Events

  • (ngModelChange): Triggered when the value of a form control bound with [(ngModel)] changes.

Two-way data binding ([()]) - use FormsModule to handle form value changes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  template: `
  <div>
    <input type="text" [(ngModel)]="value" />
    <p></p>
  </div>
  `,
  standalone: true,
  imports: [FormsModule]
})

export class AppComponent {
  isEditable:boolean = true;

  value: string = "";

  onChange(event: Event): void {
    const inputElem = event.target as HTMLInputElement;
    this.value = inputElem.value;
  }
}

Component communication

@Input

For receiving values from other components.

@Output

For notifying other components that a event has happened.

child component - output an event emitter for emitting a string - emitter can be treated as a source of event, like (change), (click) and others.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {Component, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-child',
  styles: `.btn { padding: 5px; }`,
  template: `
    <button class="btn" (click)="addItem()">Add Item</button>
  `,
  standalone: true,
})
export class ChildComponent {
  @Output() addItemEvent = new EventEmitter<string>();

  addItem() {
    this.addItemEvent.emit('🐢');
  }
}

parent component - use an emitter from child component as an event binding to handle events.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {Component} from '@angular/core';
import {ChildComponent} from './child.component';

@Component({
  selector: 'app-root',
  template: `
    <app-child (addItemEvent)="addItem($event)" />
    <p>🐢 all the way down </p>
  `,
  standalone: true,
  imports: [ChildComponent],
})
export class AppComponent {
  items = new Array();

  addItem(item: string) {
    this.items.push(item);
  }
}