Angular

Component

import { Component } from '@angular/core';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent implements OnInit, OnDestroy {  
    constructor(public myService: MyService) {
        // ...
    }

    ngOnInit(): void {
        // ...
    }

    ngOnDestroy(): void {
        // ...
    }
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <app-root></app-root>
</body>

</html>

Module

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Data binding

Text interpolation

export class MyComponent { 
   title = "My Title"; 
}

<h1>
    {{ title }}
</h1>

<!-- Expression -->
<p>The sum of 1 + 1 is {{1 + 1}}.</p>

Property binding

Pass data from component to views
export class MyComponent { 
   isDisabled = true;
}

<button type="button" [disabled]="isDisabled">Disabled Button</button>
Pass data between components
Child component
export class MyItemComponent { 
   @Input() childItem: Item;
}
Parent component
<div *ngFor="let parentItem of parentItems">
    <app-my-item [childItem]="parentItem"></app-my-item>
</div>

Event binding

Pass data from views to component
export class MyComponent {
    public myFlag = false;

    onToggle() {
        this.myFlag = !this.myFlag;
    }
}

<button (click)="onToggle()">My Button</button>
EventEmitter
Child component
export class MyItemComponent {
    @Input() item: Item;
    @Output() deleteItem: EventEmitter<Item> = new EventEmitter();

    delete() {
        this.deleteItem.emit(this.item);
    }
}

<button type="button" (click)="delete()">Delete</button>
Parent component
export class MyParentComponent {
    onItemDeleted(item: Item) {
        // ...
    }
}

<app-my-item (deleteItem)="onItemDeleted($event)" [item]="currentItem">
</app-my-item>

Two-way binding

<app-my-item [(item)]="currentItem"></app-my-item>

Attribute binding

<div [style.<cssproperty>]="myVariable"></div>
<div [style.background-color]="'blue'"></div>

<button class="btn" [class.btn-primary]="true" type="submit">My Button</button>

Directives

ngIf

<div *ngIf="showImage">
    <img src="../assets/my-image.svg">
</div>

ngFor

<li *ngFor="let name of names">{{ name }}</li>

<li *ngFor="let notification of notifications | async">{{ notification }}</li>

ngSwitch

<div [ngSwitch]="myVariable">
    <div *ngSwitchCase="'A'">Var is A</div>
    <div *ngSwitchDefault>My default text</div>
</div>

ngStyle

<div [ngStyle]="{'margin-left.px': myVariable}"></div>

ngClass

<div [ngClass]="{bordered: myVariable}"></div>

Services

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class MyService {
    // ...
}