My Angular Cheat Sheet

Debugging in Chromium

launch.json

{
      //chromium --remote-debugging-port=9222 --user-data-dir=remote-debug-profile > /dev/null --disable-web-security &
      "type": "chrome",
      "request": "attach",
      "name": "attach to browser",
      "port": 9222,
      "url":"http://localhost:4200",
      "webRoot": "${workspaceFolder}/src"
}

• ng serve
• launch "attach to browser"

Terms

• Interface: class that contains properties
• Pipe: A Pipe takes in data as input and transforms it into a desired output. Examples are: UpperCasePipe, LowerCasePipe or PercentPipe
  Syntax: In example.component.html {{data.exampleDate | date:"MM/dd/yy"}} or {data.exampleNum | fixedVal:42}}. Chaining is possible {{data.exampleDate | date | uppercase}}

Syntax Snippets

*ngFor

 <li *ngFor="let obj of objcts">
    <p>blah</p>
 </li>

*ngIf

<div *ngIf="objcts.length > 0">
    <p>blah</p>
</div>

*ngIfElse

<div *ngIf="objcts.length > 0; else example">
    <ul>
        <li *ngFor="let obj of objcts">
            <p>blah</p>
        </li>
    </ul>
</div>
<ng-template #example>
    <div>
        <p>Nothing to display</p>
    </div>
</ng-template>

ngSwitch

<div [ngSwitch]="data.val">
            <div *ngSwitchCase="1">1</div>
            <div *ngSwitchCase="2">2</div>
            <div *ngSwitchCase="3">3</div>
            <div *ngSwitchCase="4">4</div>
            <div *ngSwitchCase="5">5</div>
            <div *ngSwitchDefault>No value</div>
</div>

Named Inputs to Components

<app-example [data]="obj"></app-example>

and in example.component.ts

@Input() data:Obj = {...};

Dependency Injection

export class ExampleComponent implements OnInit {
    constructor(objService:ObjService) {
        this.obj = objService.getObj();
    }
}

Creating a custom Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name:'examplePipe'})  //that does no transformation
export class TruncatePipe implements PipeTransform {
    transform(): string {
        return value;
    }
}

Starting a new project

npm install -g @angular/cli
ng new <project_name>

Tools

ng help ng serve: Serve Angular project using a development server