Angular Theory
Published: 2021-04-17 10:36:11

Summary of Angular theory stuff for myself.

Some stuff to know

### HTML DOM
HTML Document Object Model.
DOM is object-orientated representation of webpage which can be modified with scripting language like JS. [Further reading](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)

## TOC
  <u> Angular Intro </u>
  * [What is angular](#chapter-1)
  * [Angular VS AngularJS](#chapter-2)
  * [What is a SPA?](#chapter-14)

 <u> npm + typescript </u>
  * [NPM and node_modules folder](#chapter-4)
  * [package.json file](#chapter-5)
  * [package.json VS package.lock](#chapter-6)
  * [What is Typescript?](#chapter-7)
  * [Advantages of angular CLI](#chapter-8)

<u> angular CLI questions </u>
  * [ng serve VS ng build](#chapter-25)
  * [--prod flag](#chapter-26)

<u>Angular Architecture questions</u>
  * [What is the architecture of Angular?](#chapter-13)
  * [What are directives in Angular?](#chapter-3)
  * [Component & Module in Angular](#chapter-9)
  * [What are decorators in angular](#chapter-10)
  * [What is a template in Angular?](#chapter-11)
  * [What is Data Binding in Angular?](#chapter-12)
  * [How is a SPA achieved in Angular?](#chapter-15)
  * [What is routing in Angular?](#chapter-16)
  * [How to implement routing in angular?](#chapter-17)
  * [What is lazy-loading?](#chapter-18)
  * [How to implement lazy loading?](#chapter-19)
  * [What are services in Angular?](#chapter-20)
  * [Service VS Component](#chapter-21)
  * [What is dependency Injection](#chapter-22)
  * [How to implement dependency injection](#chapter-23)
  * [Benefits of Dependency Injection](#chapter-24)

<u>Children stuff (ViewChild, ViewChildren, ContentChild, ContentChildren)</u>
  * [ViewChild & ViewChildren](#chapter-31) 
  * [Template reference variable](#chapter-32)
  * [What is content projection?](#chapter-30)
  * [ContentChild & ContentChildren](#chapter-33)
  * [Static flag](#chapter-34)
  * [ViewChild, ViewChildren VS ContentChild, ContentChildren](#chapter-35)

<u>Angular Lifecycle questions</u>
  * [Importance of component lifecycle?](#chapter-27)
  * [Events & sequence of component lifecycle?](#chapter-28)
  * [constructor VS ngOnInit?](#chapter-29)

<u> HTTP </u>
  * [How to make HTTP calls in angular?](#chapter-36)
  * [Need for subscribe function](#chapter-37)
  * [How to handle errors in HTTP calls?](#chapter-38)

<u> Passing Data</u>
  * [Pass Data between components & routes](#chapter-39)
  * [Passing data via service?](#chapter-40)

<u> Pipe </u>
  * [What is Angular Pipe?](#chapter-41)
  * [How to make custom pipe in Angular?](#chapter-42)
  * [Change Detection in Angular pipe](#chapter-43)
  * [Pure VS impure angular pipe](#chapter-44)

<u> RxJS</u>
  * [Synchronous VS Asynchronous ](#chapter-46)
  * [What is RxJS?](#chapter-47)
  * [What are Observables & observers?](#chapter-48)
  * [Importance of subscribe in RxJS](#chapter-49)
  * [How to unsubscribe?](#chapter-50)
  * [Concept of operators](#chapter-51)




### What is angular <a name="chapter-1"></a>
Javascript framework. 
Main help: 
Helps bind view (HTML) to model (object). this helps developer implement MVC framework. Pure JS requires lots of code.
Main features:
1. SPA. angular helps developer implement single page application with routing. (url will change but only 1 index.html)
2. Dependency Injection. (Angular helps developer instantiate components) eg. to inject service into component just put it into constructor method.

### Angular VS AngularJS <a name="chapter-2"></a>
<small> tbh im not very sure about this, I try not to work with AngularJS lmao </small>

1. Javascript VS Typescript 
2. CLI Builder
- can use Angular CLI to build components & services
3. lazy-loading
- load only certain modules when needed. loading is only done when user navigates to route of respective module [see more](https://medium.com/@thiago.reis/how-to-implement-lazy-loading-in-angular-c8dcbf165561)
 
### What are directives in Angular? <a name="chapter-3"></a>
Instructions in HTML that tells angular how to transform the HTML DOM 

3 main directives (SAC)
1. **C**omponent Directives
2. **S**tructural Directives
3. **A**ttribute Directives

Take note: **a component is technically a directive**

#### Component Directives
directives with templates. its like user control

A component is technically a directive. `@Component` extends the `@Directive`.

e.g. declare a custom component my-grid. component directive is then `<my-grid></my-grid>`

More information in [documentation](https://angular.io/guide/architecture-components#directives)


#### Structural Directives
Change structure of elements (add / remove DOM) 
eg. NgIf, NgFor NgSwitch (switch case for ngif)
#### Attribute Directive 
Change behaviour & appearance of elements
eg. NgStyle, NgClass

<small>Read more in this [article](https://blogpedia.org/blogs/28/angular-directive-vs-components#:~:text=Components%20are%20typically%20used%20to,to%20design%20re%2Dusable%20components.)</small>

### NPM & node_modules folder <a name="chapter-4"></a>
NPM = node pacakge manager.
Helps make installization of JS framework  libraries easy.
node_modules = folder where all packages are installed. 
It also acts like a cache. when developer imports libraries without specific path nodeJs will look at node_modules folder
Taken from [sitepoint](https://www.sitepoint.com/npm-guide/#:~:text=Node%20Packaged%20Modules,owned%20by%20the%20current%20user.) & [SO](https://stackoverflow.com/a/63294579)
<u>global VS local 

### package.json file <a name="chapter-5"></a>
states all the JS references (i.e. dependencies of the project, library name). So developer can quickly install all dependencies at one shot with `npm install`. 
node_modules can be re-created from scratch by doing `npm install`

### package.json VS package-lock.json <a name="chapter-6"></a>
package.json record minimum version of libraries your application requires. It also defines project properties, author etc.
package-lock only used to lock dependencies to specific version number. It records exact version of each installed package.


### What is Typescript? <a name="chapter-7"></a>
superset of Javascript. 
- adds types to JavaScript
- Object-oriented programming environment which compiles to JS

This results in 
- less errors
- better code quality / productivity ???

** at the end of the day, TS will be compile to JS**

more information on [guru99](https://www.guru99.com/typescript-vs-javascript.html#:~:text=TypeScript%20and%20JavaScript.-,KEY%20DIFFERENCE,doesn't%20need%20to%20compile.)
- errors are pointed out at compile time (code needs to be compiled)
- TS uses concepts like types and interfaces to describe data
- TS needs compilation. must compile to JS. 

### Importance / Advantages of angular CLI <a name="chapter-8"></a>
Helps developer generate boiler plate code as opposed to starting from scratch

- generate ready made project `ng new my-app` (make src files, module file) 
- generate ready-made schematics (eg. components / services / directives) `ng generate service/component` [documentation](https://angular.io/cli/generate)

### Importance of Component & Module  in Angular <a name="chapter-9"></a>
Components are the main building blocks in angular. Each component consists of : 
1. HTML template (declares what renders on page)
2. typescript class that defines behaviour
3. CSS selector that defines how component is used in a template
4. CSS styles applied to template
<small>From [documentation](https://angular.io/guide/component-overview)</small>

#### Component VS Module
Component:
1. controls view (html) 
2. communicate with other components and services to bring functionality to applucation

Modules are:
1. logical groups of components 

<small> Reference: [SO answer](https://stackoverflow.com/a/40074319) </small>

### What is Decorator(Annotation / Metadata) in angular <a name="chapter-10"></a>
tells Angular what kind of class it is.
Above the class declaration
eg. `@Component` -> Angular Component. `@NgModule` -> Angular Module
** may also be asked how to create component and module in angular) **

must be decorators when declaring components and modules in angular

### What is a Template in Angular? <a name="chapter-11"></a>
HTML view of Angular where you can write directives

There are two ways you can write templates:
1. inline (define it in `@Component({template: <<here>>})` directive)
2. separate HTML file  (define it in component templateUrl)

Further reading [here](https://www.c-sharpcorner.com/article/template-vs-templateurl-in-angular/)

### What is Data Binding in Angular? <a name="chapter-12"></a>
How component and view communicate with each other.
[Documentation](https://angular.io/guide/architecture-components#data-binding) and [more details](https://angular.io/guide/binding-syntax#types-of-data-binding)

1. Interpolation ------ `{{expression}}`
2. property binding-----`[target]=expression`
3. event binding--------`(target)=statement`
4. two-way binding-----`[(ngModel)]`

#### interpolation
one-way from component to view
Data flows from component to view. can stick it with HTML (one-way)

#### property
one-way biding from component. 
Data flow from component to viewsets specific element property. 

#### event binding
one-way. from event / view to component.
event in view triggers a function in component. Listends for an element change event 

#### two-way binding
two-way. combines property binding with event binding

set event in component. if some event happens in view it can trigger function in component.
e.g. most commonly used in template forms

<small>More details in [documentation](https://angular.io/guide/two-way-binding)</small>

For two-way binding to work, `@Output` must use pattern `inputChange` where `input` is name of `@Input` property
e.g. 
```
export class SizerComponent {

  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();
  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}
```
using the two-way binding looks lie this:
```
<app-sizer [(size)]="fontSizePx"></app-sizer>
```

### Explain architecture of Angular? <a name="chapter-13"></a>

Angular consists of 7 main building blocks:

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxx4rwcx8hzyahqa58h5.png)
 

1. Template (HTML view)
2. Component (binds view an model)
3. Binding (how component & template talk to each other)
4. Module  (groups components logically)
5. Directives (change style / behaviour of DOM)
6. Service (share common logic across the project project)
7. Dependency Injection (injects instances into constructor) (e.g. injecting services into component - just put into component constructor)

Further explanation in [documentation](https://v2.angular.io/docs/ts/latest/guide/architecture.html)

### What is SPA? <a name="chapter-14"></a>
Single page application
A Single page application is a web application /website taht ineracts with uer by dynamically rewriting current web page with new data from webserver. [wiki](https://en.wikipedia.org/wiki/Single-page_application)
This means the main UI gets loaded once and the other features are loaded on demand  / depending on user actions. 
In production, this means that there is just 1 index.html file with CSS bundle and JavaScript bundle. 
This is [advantageous](https://docs.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/choose-between-traditional-web-and-single-page-apps#:~:text=SPAs%20can%20support%20rich%20client,full%20page%20reloads%20are%20rare.) especially when there is rich client-side functionality. SPA can load more quickly since full page reloads are rare. 

e.g. page with header, footer, drawer. in SPA only the stuff in between is loaded instead of the entire page. This gives performance improvements

<small> More information about SPA on [angular university blog](https://blog.angular-university.io/why-a-single-page-application-what-are-the-benefits-what-is-a-spa/) </small>

### How to implement SPA in Angular <a name="chapter-15"></a>
Routing

Angular routing is a  simple collection with two things:
1. URL 
2. Component to load when URL is called

helps to define navigation for angular application. It maps URL-like paths to views instead of pages. So when user moves from one screen / url to another, the application loads components not an entirely new page.  

### What is routing in Angular <a name="chapter-16"></a>
In Angular, routes comprise of :
1. path (URL path)
2. Component
3. (optional) redirectTo path 

Routes map a URL path to a component. 
It helps users navigate from one view to another as users perform tasks on application
Helps developer respect SPA since only components in page are changing, entire page is not reloaded.

<small> Taken from: [pluralsight](https://www.pluralsight.com/guides/understanding-purpose-routing-angular) & [smashingmagazine](https://www.smashingmagazine.com/2018/11/a-complete-guide-to-routing-in-angular/#:~:text=Routes%20are%20definitions%20(objects)%20comprised,be%20associated%20with%20a%20path.)

### How to implement routing in angular. <a name="chapter-17"></a>
1. define collection of routes in angular --> map url paths to components
2. define router outlet --> where the component will be displayed
3. [routerLink] in HTML OR this.router.navigate(url) in TS file --> allows user to navigate to different route / view 

### What is lazy loading <a name="chapter-18"></a>
Loading on demand.
Loading only the necessary HTML, CSS & JS files when needed. Loading other components only when needed (i.e. when user performs certain actions) 

### How to implement lazy loading? <a name="chapter-19"></a>
1. Divide project into separate modules
2. declare `loadChildren` property in route object

### What are services in Angular? <a name="chapter-20"></a>
Service helps developer share common logic / common functionality across components

### Service VS Component <a name="chapter-21"></a>
<small> From [documentation](https://angular.io/guide/architecture-services)</small>
Components is to enable the user experience & **nothing more**
Component should: present properties and methods for data binding to mediate between template (*view*) & application logic (*model*)

Components should delegate other tasks (o.e. fetching data from server, validating user input) to a service. 
The tasks in service can also be shared with other components vis *dependency injection*

### What is dependency Injection? <a name="chapter-22"></a>
application design pattern
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4s7l393wvpw6y4picq0.png) 
Developer does not need to create object instances (no need to instantiate service `let service: ExampleService = new ExampleService()` instead, Angular injects is via the constrcutr
```
export class ExampleComponent{
  constructor (private service: ExampleService) {
    this.service.doSomething();
  }
}
```
<small> taken from [documentation](https://angular.io/guide/architecture-services#dependency-injection-di) </small>

### How to implement dependency Injection in Angular? <a name="chapter-23"></a>
There are 3 ways to [provide a service](https://angular.io/guide/architecture-services#providing-services)
1. root 
service is provided at root level, angular creates a *single, shared*  (i.e. **singleton**) instance of service & injects it into any class asking for it. 

Injectable root decorator is provided in service class
```
@Injectable({
 providedIn: 'root',
})
```
this is auto-generated with `ng generate service`
TO only provide service to certain module change `root` to `ExampleModule`

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

@Injectable({
  providedIn: 'any',
})
export class UserService {
}
```
With `providedIn: any` all eagerly loaded instance share singleton instance, but lazily loaded modules each get their own unique instance
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpp6niz67bfim5kaftx5.png)
 

2. provide in module
register service in `providers` array in NgModule 
```
@NgModule({
  providers: [
  ExampleService,
  Logger
 ],
 ...
})
```
If NgModule is root AppModule, 
`ExampleService` will be singleton and available throughout the app. 
[Reference](https://angular.io/guide/singleton-services#ngmodule-providers-array)

Importing service in `AppModule` **AND** lazily loaded module, the app can generate multiple instance of a service.

3. Component level
registering provider at component level, you get a **new instance of service** with **each new instance of component**
```
@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
```
<small>Further reading in [documentation](https://angular.io/guide/singleton-services#ngmodule-providers-array)</small>

### Benefits of Dependency Injection <a name="chapter-24"></a>
Decouples class dependencies. 
can change dependencies of service class without changing code in all component classes. If instantiation of service class is in component, must change all the service instantiation code.

i.e. just change arguments in service constructor. no need to change anywhere else

### ng serve VS ng build  <a name="chapter-25"></a>
`ng serve` - builds angular application in memory
`ng build` - builds application in harddisk. put all the compiled code in the `/dist` folder


### --prod flag? <a name="chapter-26"></a>
`--prod` flag ensures you build applciation for production. compresses JS files, removes comments. makes application ready for production.


### Importance of component lifecycle? <a name="chapter-27"></a>
*directives have lifecycle too*

tldr;
Developers can tap into key events of component lifecycle and write custom code by implementing *lifecycle hook* interfaces. (eg. `ngOnInit()`)
<small> Greater details in [documentation](https://angular.io/guide/lifecycle-hooks) </small>

Component instance has lifecycle when angular instantiates component class & renders component view till angular destroys component and removes rendered template from DOM.

Dev can use lifecycle hook methods to tap into key events of lifecycle to init new instances / clean up before deletion of instances.

### events & sequence of component life cycle? <a name="chapter-28"></a>
Here is a great [medium article](https://nalawadeshivani98.medium.com/angular-lifecycle-d34c57bf147) by Shivani that goes in-depth into the angular lifecycle.

Angular Documentation offers list of [lifecycle event sequence](https://angular.io/guide/lifecycle-hooks#lifecycle-event-sequence)

Two types of events
1. Events fired when component is first loaded
2. Events fired on change detection

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fhai5vjf2ssnw6gmwog.png)

List of lifecycle events
(events called ONCE are *italicized*)

1. constructor (more of a typescript event, not an angular event)
2. ngOnChanges (also called when data bound input property `@Input` changes). This event happens **very frequently**
3. *ngOnInit* (data bound properties displayed on screen / sets component's `@Input` properties)
4. ngDoCheck() (fires immediately after ngOnChanges() on every change detection run)
5. *ngAfterContentInit* (after Angular projects external content into component's view) related to `<ng-check>`
6. ngAfterContentCheck (check content projected)
7. *ngAfterViewInit* (after angular initializes component's views & child views)
8. ngAfterViewChecked (after angular checks component's view & child views)
9. *ngOnDestroy* (cleanup before angular destroys component)
 
<u> three parts </u>
1. kick start event (change detection) (ngOninit, ngDoCheck)
2. projected content event fires (ngAfterContentInit, ngAfterContentChecked)
2. events of component view fires (ngAfterViewInit, ngAfterViewChecked)

### constructor VS ngOnInit()? <a name="chapter-29"></a>
1. constructor - typescript concept, invoked by typescript
2. ngOnInit - angular concept / event, invoked by angular framework

Sequence:
1. constructor is fire.
2. view and component initialized, binding happens
3. ngOnInit (after component is initializes, access to DOM elements)

<u>Constructor:</u>
1. initialize class variables
2. dependency injection

<u>ngOnInit:</u>
1. access to class variables
3. access to `@Input` variables

Accessing, `@Input` or from constructor will give `undefined`.

<small> More information in this [SO answer]
(https://stackoverflow.com/a/48705981)</small>
<small> `@ViewChild` only access in `ngAfterViewInit` </small>




### ViewChild & ViewChildren <a name="chapter-31"></a>
`@ViewChild` : Reference **ONE** HTML element / DOM element in the component
`@ViewChildren`: Reference a collection of elements

If multiple elements detected by `@ViewChild`, it will only reference the first element.

### Template Reference Variable <a name="chapter-32"></a>
Template variables help developer use data from one part of template in another part of template

```
<input #phone placeholder="phone number" />

<!-- lots of other elements -->

<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>
```

To use template reference variable with ViewChild

```
<div #div1> this div </div>

@Viewchild('div1',{static: false}) div: ElementRef
```

Further reading [here](https://angular.io/guide/template-reference-variables)

### What is content projection? <a name="chapter-30"></a>

Projection: project HTML content / component content from parent to child. 

`<ng-content></ng-content>`
Allows you to insert a shadow DOM as Input to a component.

`@Input` only allows you to pass simple string / objects to components. `<ng-content>` allows you to pass things HTML elements, another component.
```
<app-component>
  <h1>Header</h1>
  <p>paragraph</p>
</app-component>
```

<u> Multi content projection: content projection slot</u>
GreetComponent
```
<div class="container">
  <ng-content> </ng-content>
  <ng-content select="h1"></ng-content>
  <p>welcome text</p>
  <ng-content select=".content"></ng-content>
</div>
```
Parent Content
```
<div>
  <greet>
    <h3> everything else </h3>
    <h1> Header </h1>
    <span class="content"> something </span>
  </greet>
</div>
```
output after content projection is
```
<div>
  <div class="container">
    <h3> everything else </h3>
    <h1> Header </h1>
    <p>welcome text</p>
    <span class="content"> something </span>
</div>
</div>
```
[reference](https://dzone.com/articles/simplifying-content-projection-in-angular#:~:text=Content%20projection%20allows%20you%20to,.)

### Content Child & Content Children <a name="chapter-33"></a>
access projected content

CardComponent.html
```
<div class="card">
   <ng-content select="header"></ng-content>
   <ng-content select="content"></ng-content>
   <ng-content select="footer"></ng-content>
</div> 
```
CardComponent.ts
```
@ContentChild("header") cardContentHeader: ElementRef;
```
ParentComponent.html
```
<card>
  <header><h1 #header>Angular</h1></header>
  <content>One framework. Mobile & desktop.</content>
  <footer><b>Super-powered by Google </b></footer>
</card>
```
<small>[tektutorialshub](https://www.tektutorialshub.com/angular/contentchild-and-contentchildren-in-angular/) provides a concise write-up</small>

### Static flag <a name="chapter-34"></a>
static is false as default behaviour.
static is false because we would like query to be [resolved every change detection](https://www.tektutorialshub.com/angular/contentchild-and-contentchildren-in-angular/#static)

[Angular documentation](https://angular.io/guide/static-query-migration#how-do-i-choose-which-static-flag-value-to-use-true-or-false) & [SO](https://stackoverflow.com/a/56359612) describes the flag in greater details 

### ViewChild, ViewChildren, ContentChild, ContentChildren <a name="chapter-35"></a>
ViewChild: access DOM elements from its **own** view
ContentChild: access DOM elements from **another** view, access DOM elements projected by someone else
(e.g. `@ContentChild` is on CardComponent.ts, but the project content is from ParentComponent.html)

ViewChildren: collection of ViewChild
ContentChildren: collection of ContentChildren


### Make HTTP calls in Angular <a name="chapter-36"></a>
1. import HttpClient from `@angular/common/http`
2. import HttpModule in Angular Module
2. create HttpClient object via dependency injection `constructor(public http:HttpClient)`
3. make post / get class with HttpClient `this.http.post(URL, data).subscribe(res => successfunc(res), err => errfunc(err)`
4. subscribe to Http.post / Http.get. Subscribe takes 2 inputs: success function and error function

### Need of Subscribe function <a name="chapter-37"></a>
Provide success / error methods if HTTP calls are successful / fail. 
Also, if there is no async pipe, subscribe is needed for an observable to execute

### Handling errors in HTTP calls <a name="chapter-38"></a>
1. error callback of subscribe method
2. `catchError` function in pipe. (catchError must return a new observable or throw an error)
when throwing new error, error thrown will propate to subscriber
<small> More details on [tekturotials](https://www.tektutorialshub.com/angular/angular-catcherror/) </small>

The second method achieves [separation of concern](https://stackoverflow.com/a/54790621) in Angular
Additionally,
<u> Chaining multiple observables (one after another </u>
- `catchError` keeps observable alive. If inner observable has errors, outer observable will still continue (coz it received an observable)
<u> Combinging multiple observables (execute multiple observables) </u>
- allows arrays of observables to complete. Else if only 1 observable fail, all will fail, with `catchError` it will allow observable to complete and emit something.

### Pass Data between components & routes <a name="chapter-39"></a>
1. Parent Child component 
`@Input` : Parent -> child
`@Output` : Child -> parent
`@ViewChild`: 

2. Data between routes -> Routing Query Params
```
this.route.navigate(['url'],
  {queryParams: {
    name: 'myname'
    }
   });
```

3. Services
**more of global data / storing** 
more of **sharing global data** via singleton service
- create service
- inject service into components
- access service data 

4. Browser
**global data **
Local Storage / temp storage 

### Good practice to pass data using services <a name="chapter-40"></a>
**Sharing data** VS **passing data**
If you are just passing data from one component to another, should avoid using service / global variables. 
Other components may modify global variables. Code can become quite messy.

### What is the need for Angular Pipes? <a name="chapter-41"></a>
Pipes transform data on Angular UI expressions
Angular has some inbuilt pipes:
1. AsynPipe : read object from asynchronous source (impure by default)
2. JsonPipe: convert object to json string
3. KeyValuePipe: can use in ngFor to iterate keys and values of object
3. DatePipe: fomat date
4. CurrencyPipe: number -> currency string

Example:
```
<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
```

You can also chain pipes (will implement first pipe then second pipe to the output of first pipe)
```
{{ birthday | date | uppercase}}
```

### How to make custom pipes in Angular? <a name="chapter-42"></a>
1. Use `@Pipe` to mark class as a pipe
1. Implement PipeTransform interface
2. Implements transform method.
```
@Pipe({name: 'uselessPipe'})
export class uselessPipe implements PipeTransform {
  transform(value: string, before: string, after: string): string {
    let newStr = `${before} ${value} ${after}`;
    return newStr;
  }
}

{{ user.name | uselessPipe:"Mr.":"the great" }}
```

### Change detection in angular pipe. <a name="chapter-43"></a>
1. Data is primitive input value (string, number) OR object reference as input (Date / Array)
Angular executes pipe whenever it detects change for the input value of reference 

2. Change something *inside* a composite object (e.g. month of a date, element of array, object property)
use `impure` pipe

<small> Referenced from Angular [documentation](https://angular.io/guide/pipes#detecting-changes-with-data-binding-in-pipes) </small>

### Detecting pure changes to primitives and object references<a name="chapter-44"></a>
Angular pipes are **pure** by **default**. Angular executes pipe only when it detects *pure change* to input value. Pure change is either:
1. change to pimitive input value (`string`, `number`, `boolean`, `symbol`)
2. changed object reference (`Date`, `Array`, `Function`, `Object`)

In Pure pipe, Angular ignore changes within component object (eg. new added elemtn of existing array) because object reference did not change. 

Example:
```
<div *ngFor="let hero of (heroes | flyingHeroes)">
  {{hero.name}}
</div>

@Pipe({ name: 'flyingHeroes' })
export class FlyingHeroesPipe implements PipeTransform {
  transform(allHeroes: Hero[]) {
    return allHeroes.filter(hero => hero.canFly);
  }
}
```
If user adds flying heroes, it will not be updated becuase *reference* to the array has not changed so angular does not update display. there are two ways to cirucmvent this
1. change object reference
replace array with new array containing new changed elements, input new array to pipe.
2. make pipe detect impure changes
set pure flag to false
```
@Pipe({
  name: 'flyingHeroesImpure',
  pure: false
})
```

### What is change detection <a name="chapter-45"></a>
Mechanism by which Angular sychronizes state of application UI with state of data

When component data is updated (e.g. from user event/ application logic), values  bound to DOM properties in the view can change. The change detector is responsible for updating the view to reflect the current data model. 

<small> Reference: Angular [documentation](https://angular.io/guide/glossary#change-detection) </small>

### Synchronous VS Asynchronous <a name="chapter-46"></a>
Synchronous code is executed in sequence.
When one statement is executing nothing else can happen.

Asynchronous code doesn’t have to wait – your program can continue to run. 
Asynchronous code is hard to achieve in Synchronous JS, developer is unsure how long code will take to finish (how long will it take to download image from API?)
So code like this:
```
let response = fetch('myImage.png'); // fetch is asynchronous
let blob = response.blob();
// display your image blob in the UI somehow
```
blob may be undefined. 
Async JS has 2 main code styles:
1. callbacks (old-styles)
2. promise (new-style)

Async JS has two models: (<small> more details on [RxJS](https://rxjs-dev.firebaseapp.com/guide/observable#pull-versus-push) </small>
1. Pull mode (consumer is king, consumer decides when it receives data from producer, producer is unaware when data will be delivered)
2. Push model (producer is king, it determines when to send data to consumer)

Promises & observable follow the push model.
Promise (producer) delivers resolved value to registered callbacks (consumer)


<small> more information [here](https://rowanmanning.com/posts/javascript-for-beginners-async/#:~:text=In%20Summary,waiting%20time%20for%20the%20user.) and on [MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing) </small>

### What is RxJS? <a name="chapter-47"></a>
RxJS stands for **Reactive Extensions for JavaScript**

It is to *handle asynchronous data streams*
eg. async data source(HTTP data, timer) may take 1 second or 15 seconds to come. Then application should have listener
(e.g. http response, data comes in small time intervals)

RxJs helps you to handle asynchronous data streams easily.

### What are Observables & observers? <a name="chapter-48"></a>
Observable is a Push system for Javascript. It is a producer of multiple values "pushing" them to observers (consumers).

Observable can give multiple values either synchronously or asynchronously. 

<small>this [freecodecamp](https://www.freecodecamp.org/news/what-are-observables-how-they-are-different-from-promises/) article has a very comprehensive introduction </small>

Observable has [4 main stages](https://rxjs-dev.firebaseapp.com/guide/observable#anatomy-of-an-observable)
1. Creation
2. Subscription
3. Executing
4. Disposing

### Importance of subscribe in RxJS <a name="chapter-49"></a>
*Each call to `observable.subscribe` triggers its own indepdendent set up for that given subscriber*.
[RxJS](https://rxjs-dev.firebaseapp.com/guide/observable#subscribing-to-observables): starts an "Observable execution" an deliver values / events to observer of execution.
[Angular](https://angular.io/guide/observables#subscribing): Observable instance only begins publishing values when someone subscribes to it. 


### How to unsubscribe (Destroy phase of Observable) <a name="chapter-50"></a>
<small> Taken from [RxJS](https://rxjs-dev.firebaseapp.com/guide/observable#disposing-observable-executions) documentation </small>
```
const subscription = observable.subscribe(x => console.log(x));
subscription.unsubscribe();
```
Since Observable exeuctions may be infinite and its common for observer to abort execution in finitetime, we need API for cancelling execution. When execution is stopped / cancelled, we can avoid wasting computation power / memory resources. 


### Explain concept of operators with sample code <a name="chapter-51"></a>
Operators are functions.
There are 2 types of operators:
1. Pipeable operator
takes in observable as input and output is also an observable.
pre-processing logic, can transform data in observable.
2. creation operator
can be called as standalone functions to create new Observable

<small> Taken from [RxJS](https://rxjs-dev.firebaseapp.com/guide/operators#creation-operators) documentation </small>