Learning Angular third edition reading note

 Learning Angular

1. Source code:

https://github.com/PacktPublishing/Learning-Angular--Third-Edition

2.

install VS Code extension "Angular Essentials"

In public methods and properties, we can omit the keyword public.

Remember, no more var; use the let keyword wherever possible.

number defines a floating-point number, as well as hexadecimal, decimal, binary, and octal literals.

you can come up with your own type:

type Animal = 'Cheetah' | 'Lion';

const animal: Animal = 'Cheetah';

3.

function sayHello(name: string): string {

    return 'Hello, ' + name;

}

to annoymous function:

const sayHello = function(name: string): string {

    return 'Hello, ' + name;

}

4.

TypeScript defines that a parameter is optional by adding the ? symbol as a postfix to the parameter name we want to make optional (place last):

function greetMe(name: string, greeting?: string): string {

    if(!greeting) {

        greeting = 'Hello';

    }

    return greeting + ', ' + name;

}

5.

default parameter (put last)

function greetMe(name: string, greeting: string = 'Hello'): string {

    return `${greeting}, ${name}`;

}

6.

rest parameter (put last)

function greetPeople(greeting:string,...names: string[]): string {

    return greeting + "," + names.join(" and ") + "!";

}

console.log(greetPeople("Hello","Ahri","Ashe"));

7.

const oldPerson = { name : 'John' };

const newPerson = { ...oldPerson, age : 20 };

9.

class Car {

    make: string;

    model: string;

    constructor(make: string, model: string) {

        this.make = make;

        this.model = model;

    }

}

TypeScript eliminates this boilerplate by using accessors on the constructor parameters.

class Car {

    constructor(public make: string, public model: string) {}

}

TypeScript will create the respective public fields and make the assignment automatically. 

10.

Can create an instance from an interface

interface A {

    a

}

const instance = <A> { a: 3 };

instance.a = 5;

console.log(instance.a);

This means you can create a mocking library very easily.

11.

To use it, we need to place the ? postfix in the nullable property, as follows:

for (let i = 0; i < hero.powers?.length; i++) {

}

Now, the if-else statement to check for nullable values is not needed anymore.

12.

Each member marked with the export keyword becomes part of the module's public API.

my-service.ts

export class MyService {

    getData() {}

}

export const PI = 3.14;

To use this module and its exported class, we need to import it:

import { MyService, PI } from './my-service';

13.

<span>{{ title }}</span>

same as 

<span [innerText]="title"></span>

while <span [innerText]="'My title'"></span> innerText property is a static string, not a component property.

14.

<p [class.star]="isLiked"></p>

The star class will be added to the paragraph element when the isLiked expression is true. Otherwise, it will be removed from the element. 

15.

template referance variable

<app-hero [name]="hero" #heroCmp (liked)="onLike(true)"></app-hero>

<span {{heroCmp.name}}></span>

16.

When using expressions that evaluate to a boolean value, it is best to use triple equality, ===, over the usual == because === checks not only whether values are equal but also whether types match. For example, 0 == '0' is truthy, whereas 0 === '0' is falsy.

17.

When we define an observable variable, we tend to append the $ sign to the name of the variable. This is a convention that we follow so that we can identify observables in our code efficiently and quickly.

18.

https://github.com/PacktPublishing/Learning-Angular--Third-Edition/tree/master/ch07

npm install angular-in-memory-web-api --save-dev

19.

By default it's for development.

ng build --prod