Dav/Devs Footer Logo Dav/Devs

Angular Learning Notes

Angular Learning Notes

1. Syntax Notes

{{ }}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


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

  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


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


  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


@Output('clickable') clicked = new EventEmitter<string>();
<fa-event-binding (clickable)="onClicked($event)"></fa-event-binding>

Back to articles