Angular Learning Notes

1. Syntax Notes

Syntax	Type	Examples
{{ }}	String Interpolation	{{name}}
[ ]	Property Binding (input)	[colour]
( )	Event Binding (output)	(click)
[( )]	Two-way Binding (Angular 1 compatibility)	[(click)]
*	Structural Directives	*ngIf

2. Keep Inner HTML Content

Use the <ng-content> tag to mark content to be kept.

3. EventEmiiter

TypeScript

import { Component, Output, EventEmitter } from "@angular/core"

@Component({
  selector: "fa-event-binding",
  template: ` <button (click)="onClicked()">Click Me!</button> `,
  styles: [],
})
export class EventBindingComponent {
  @Output() clicked = new EventEmitter<string>()

  onClicked() {
    this.clicked.emit("It works!")
  }
} //end EventBindingComponent class

HTML

<fa-event-binding (clicked)="onClicked($event)"></fa-event-binding>

Notes:

1. The EventEmitter is a generic class that can emit any datatype from primitives to complex object.
2. When declaring the event binding in HTML, declare the emitted variable with a $. This variable is read-only.

4. Custom names for Input/Output

TypeScript

@Output('clickable') clicked = new EventEmitter<string>();

<fa-event-binding (clickable)="onClicked($event)"></fa-event-binding>

Back to articles