Ole Ersoy

Image by augustfinster from Pixabay

Scenario

We want the path b to route to HelloBComponent inside the named router outlet o . This is the route configuration contained app.module.ts in within our Stackblitz demo.

const routes: Routes = [{ path: 'a', component: HelloComponent },{ path: 'b', outlet: 'o', component: HelloBComponent },];

Approach

Configure the routerLink like this.

<button [routerLink]="[{ outlets: { o: ['b'] } }]">router link b</button>

Demo

--

--

Scenario

RxJS combineLatest is deprecated, so we need to upgrade to combineLatestWith.

Approach

Here’s a simple example. We take observables of the strings hello and world and combine them into hello-world .

const hello$: Observable<string> = of('hello').pipe(combineLatestWith(of('world')),map(([hello, world]) => hello + ' - ' + world));hello$.subscribe((v) => console.log(v));

Note that if we have more than 2 streams to combine, combineLatestWith will nest the arrays, so we need to dereference the nested array structure.

Here’s an example.

const helloLoud$: Observable<string> = of('hello').pipe(combineLatestWith(of('world')),combineLatestWith(of('!')),map(([[hello, world], exclamation]) => hello + ' - ' + world + exclamation));helloLoud$.subscribe((v) => console.log(v));

Demo

--

--

Image by Bich Nguyen Vo from Pixabay

Scenario

We want to use outline, filled, rounded, sharp, two-tone variations of the home mat-icon .

Approach

Include all the icon variations in the material icons link.

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"/>

And declare the icons.

<mat-icon>home</mat-icon>
<mat-icon fontSet="material-icons-outlined">home</mat-icon>
<mat-icon fontSet="material-icons-two-tone">home</mat-icon>
<mat-icon fontSet="material-icons-round">home</mat-icon>
<mat-icon fontSet="material-icons-sharp">home</mat-icon>

Demo

--

--

Image by Monika Helmecke from Pixabay

Scenario

We have an array containing the values [1,2,3,4,5] . We want to find the unique value 3 and then stop looking.

Approach

We’ll be using some to iterate over the array. The some function stops iterating after the first match that is true , which in our case is 3 .

let arr: number[] = [1, 2, 3, 4, 5];var unique: number = NaN;function findThree(value: number) {
console.log(value);
unique = value;
return value == 3;
}
arr.some((v) => findThree(v));

We console log the value to see that we are only executing the loop 3 times.

Demo

--

--

Image by experimentMR from Pixabay

Scenario

We have an array of numbers .

const arr: number[] = [1, 2, 3, 4, 5];

We only want to log the even numbers.

Approach

The modulo expression i % 2 will return zero for all even numbers, and and the continue statement causes the for loop to begin the next iteration, skipping the console.log(i) statement.

for (let i of arr) {
if (i % 2) {
continue;
}
console.log(i);
}

Demo

--

--

Image by Jevgeni Fil from Pixabay

Scenario

We have the code console.log("Hola!") .

Is this an expression or a statement?

Approach

An expression returns a value. The statement console.log("Hola!") does not return a value so it is not an expression.

The below code illustrates an expression.

const greeting = spanish ? "Hola!" : "Hi!";

If spanish is true greeting is assigned Hola! otherwise Hi! is assigned.

The expression part of the statement is spanish ? “Hola!” : “Hi!” .

Demo

--

--

Image by Ulrike Leone from Pixabay

Scenario

We have a header within a flex container that we want to expand as space allows and also to have a minimum width of 200px.

<div style="display: flex">
<div id="header">this is the header</div>
</div>

Approach

Style the header div with flex: 1 0 200px; , which means flex-grow: 1 and so it will expand to fill space and flex-shrink: 0 , which turns shrinking off after the item reaches the minimum size of 200px;

Demo

--

--