Learning Angular - Third Edition Section 2 note

 1.

=== checks not only whether values are equal but also whether types match. For example, 0 == '0' is truthy, whereas 0 === '0' is falsy.

2. Directives

*ngIf/*ngFor/ngSwitch

3. Pipes

| uppercase, | lowercase, | slice, | json, 

4. Building custom pipes

ng g pipe sort

<ul>

  <li *ngFor="let hero of heroes | sort:'name'; index as myIndex">

  </li>

</ul>

5.

If we need a template, we create a component; otherwise, make it a directive.

ng g directive copyright

A directive is a TypeScript class marked with the @Directive decorator. The only required property in the decorator is the selector of the directive.

6.

ng g module heroes

The main application module, AppModule, does not need to import CommonModule. Instead, it imports BrowserModule, which is used to run Angular applications in a browser platform that exports CommonModule by itself.

ng g component heroes/heroList --module=heroes

need exports in the child module, and import in the app.module.ts

Lazy loaded modules are not declared in the imports property of a module.

7.

When we run the ng build --configuration=production command, the Angular CLI replaces the environment.ts file with the environment.prod.ts file.

the component should only be concerned with presentation logic.

Delegating complex tasks to services.

ng g service heroes/hero

An Angular service is a TypeScript class marked with the @Injectable decorator. The decorator identifies class as an Angular service that can be injected into an Angular component or another Angular service. 

the constructor injection pattern is the one enforced by Angular. 

8.

A Promise object accepts two parameters; a resolve method to indicate that the promise completed successfully and optionally return a result, and a reject method to indicate that an error occurred during execution and optionally return the cause of the error.

To summarize the limitations of promises, note the following:

They cannot be canceled.

They are immediately executed.

They are one-time operations only; there is no easy way to retry them.

They respond with only one value.

9.

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.

  private setTitle = () => {

    const timestamp = new Date().toString()

    this.title = `Hello Angular 10 (${timestamp})`;

  }

  title$ = new Observable(observer => {

    setInterval(() => {

        observer.next();

    }, 1000);

  });

  constructor(){

    this.title$.subscribe(this.setTitle);

  }

10. RxJS

We have already learned how to create an observable from a DOM event using the fromEvent operator. Two other popular operators that are concerned with observable creation are the of and from operators.

const values = of(1, 2, 3);

values.subscribe(value => console.log(value));

The from operator is an excellent way to start migrating from promises to observables in your Angular application if you have not done so already!

11.

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