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…

--

--

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));

--

--

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>…

--

--

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…

--

--