RxJS mergeMap

 flatMap is deprecated and replaced by mergeMap

import { of, mergeMap, interval, map, take } from 'rxjs';

const letters = of('a', 'b', 'c');

const result = letters.pipe(

mergeMap((x) =>

interval(1000).pipe(

take(4),

map((i) => x + i)

)

)

);

result.subscribe((x) => console.log(new Date().toISOString()x));

// Results in the following:

// a0

// b0

// c0

// a1

// b1

// c1

RxJS switchmap example

 RxJS switchmap example, easy to understand

https://stackblitz.com/edit/rxjs-switchmap-example-1-vslesu?file=index.ts

import { interval } from 'rxjs';

import { take, switchMap, map, flatmap } from 'rxjs/operators';

let outer$ = interval(5000).pipe(take(2));

let combined$ = outer$.pipe(

switchMap((x) => {

return interval(2000).pipe(

take(3),

map((y) => `outer ${x}: inner ${y}`)

);

})

);

/*

5 seconds: the inner observable is started

7 seconds: 0 0

9 seconds: 0 1

10 seconds (now the second outer$ comes, the inner observable is unsubscribed)

12 seconds: 1 0

14 seconds: 1 1

16 seconds: 1 2

*/

console.log(new Date().toISOString());

combined$.subscribe((result) =>

console.log(new Date().toISOString() + ' ' + `${result}`)

);

rxjs note - Angular - The Complete Guide

 

1. 

1. In order to follow along smoothly with the course examples, make sure you install RxJS v6 by running

   npm install --save rxjs@6

   In addition, also install the rxjs-compat package:

   npm install --save rxjs-compat
   2.

2. To get discount on Max's courses, go to https://academind.com/courses
3. 3.
4. https://www.learnrxjs.io/
5. 4.
6. Use Subject instead of EventEmitter, emit->subject.next
7. 5.
8. https://academind.com/learn/javascript/understanding-rxjs/

typescript

 Type script:

//union type

let course: string | number = 'Complete guide';

course = 1234;

//type alias

type Person = {

name: string,

age: number;

}

let person: Person;

//generics

function insertAtBeginning(origArray: any[],value: any){

const newArray = [value,...origArray];

return newArray;

}

const demoArray = [1,2,3];

const upadtedArray = insertAtBeginning(demoArray,-1);

upadtedArray[0].split('');

//to

function insertAtBeginning2<T>(origArray: T[],value: T){

const newArray = [value,...origArray];

return newArray;

}

const demoArray2 = [1,2,3];

const upadtedArray2 = insertAtBeginning2(demoArray,-1);

upadtedArray2[0].split(''); //error detected

let idStr: string = "2";

const id = +idStr;

console.log(id*8);

this.isAuthenticated = !user : false : true;

equals

this.isAuthenticated = !!user;

bootstrap

 1. bootstrap grid

https://mdbootstrap.com/learn/mdb-foundations/bootstrap/grid-system/

for the grid to work properly, you should always place columns in rows, and rows in containers.

Bootstrap grid allows you to add up to 12 columns in one line. If you add more than 12, the excess column will jump to the next line.

Breakpoints are the triggers in Bootstrap for how your layout responsive changes across device or viewport sizes.

<div class="container">

  <div class="row">

    <div class="col-md-4">First column</div>

    <div class="col-md-8">Second column</div>

  </div>

</div>

All we have to do is add a breakpoint -md (meaning "medium screen size") to the col class, so that the Bootstrap grid knows that we want 4/8 columns ratio only on screens bigger than medium size, and on other screens (medium and small size) the columns should be stretched to full width.

To sum up - by using class col-md-4, we tell grid the following command:

1. On screens smaller than 768px, I want this column to stretch to full width
2. On screens larger than 768px, I want this column to be 4 units wide

2. Forms

https://mdbootstrap.com/learn/mdb-foundations/bootstrap/forms/

Login forms

3.

could be interview question

how to control how many instances when service is injected? Say component constructor injected one log service, another component injected the log service? How to make them share the same instance?

providers, injectable

Angular - The Complete Guide Section 5 note

 @Input('srvElement') element : {type: string, name: string, content: string};

<app-server-element *ngFor="let serverElement of serverElements"

[srvElement]="serverElement"></app-server-element>

Go the error "ERR_OSSL_EVP_UNSUPPORTED"

  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],

  library: 'digital envelope routines',

  reason: 'unsupported',

  code: 'ERR_OSSL_EVP_UNSUPPORTED'

when run "ng serve"

The fix is:

export NODE_OPTIONS=--openssl-legacy-provider

https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported

Angular - The complete Guide Section 1 and 2 note

 package.json: the project dependencies

<input type="text" [(ngModel)]="name">

<p>{{ name }}</p>

npm install --save bootstrap

"styles": [

"node_modules/bootstrap/dist/css/bootstrap.min.css",

"src/styles.css"

],

dev tool->sources->styles.css: Bootstrap v5.2.3

<div>

<button class="btn btn-primary" (click)="onToggleDisplay()">Display Details</button>

<p *ngIf="showSecret">Secret Password = tuna</p>

<div *ngFor="let logItem of log;let idx=index"

[ngStyle]="{backgroundColor:(idx+1)>5?'green':'transparent'}"

[ngClass]="{'white-text':(idx+1)>5}"> {{logItem}} </div>

</div>

export class AppComponent {

showSecret: boolean = false;

log = [];

onToggleDisplay(){

this.showSecret = !this.showSecret;

this.log.push(new Date());

}

}