killerchip

Setup Bootstrap with Angular

The instructions here are based on this blog... https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a

The method here is using Bootstrap 4 (beta.2) with ng-bootstrap package.

Install ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

killerchip

Reactive Forms

A quick reference guide on how to setup.

How to setup

import ReactiveFormsModule

import { ReactiveFormsModule } from '@angular/forms';
@NgModule ({

killerchip

Map HttpClient results to model

When you use remote APIs, you might not have the model of the reponse JSON object, or it might not match to your app model. Don't be afraid to use map operator to transform the results.

Example

If you query https://jsonplaceholder.typicode.com/posts/ you will receive an array of articles. An article has the following format:

killerchip

Template Driven Forms

How to setup

import FormsModule

import { FormsModule } from '@angular/forms';
  
@NgModule ({
 ...

killerchip

Enums

Defining an Enum

// Simple Enum
enum Role {Employee, Manager, Admin}

// Custom start value
enum RolesCustomStart {Employee = 3, Manager, Admin}

killerchip

NgNonBindable

Helps you 'disable' bidding in HTML so you can use the {{ content }} double brackets as is.

  <div ngNonBindable>
    {{ this should be rendered as is and not interpolated. }}
  </div>

killerchip

NgClass

  <div [ngClass]="{bordered: true, 'white-background': false}"></div>
  <div [ngClass]="['class1','class2','class3']"></div>

tip: You can use a classes object in your code and bind it to template

component code

killerchip

NgStyle

Single property

  <div [style.background-color]="'black'"></div>

Multiple properties at once

killerchip

NgSwitch

ngSwitchDefault is optional.

<div [ngSwitch] = "position">
  <div *ngSwitchCase = "1">You are 1st!</div>
  <div *ngSwitchCase = "2">You are 2nd!</div>
  <div *ngSwitchCase = "3">You are 3rd!</div>
 You are not worth mentioning!

killerchip

NgFor

In this example we also demonstrate how to print an array of strings with a comma separator in between them.

in component

public values = ['one','two','three'];

in HTML template