Creating a custom Storybook Decorator for Angular components with Storybook v6 & Angular v11 A decorator in Storybook is a function that can modify a story’s HTML, CSS and JavaScript to make it look or act differently from the default. This article covers: Where to put your decorator code How…

Making a quick note of this, because figuring it out took me far too long… This project is an Angular app and Angular library in one project. The app consumes the library directly, not via npm. The app uses the paths in tsconfig to configure importing of the lib: //…

Install the fonts via npm: npm i -S material-icons-font Add the font stylesheet to angular.json: "styles": [ "src/styles.css", "node_modules/material-icons-font/material-icons-font.css" ],

app/app-routing.module.ts: import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { SignInComponent } from 'app/sign-in/sign-in.component'; const routes: Routes = [ // lazy-loaded route, a module with its own sub-routes { path: 'admin', loadChildren: './reports/reports.module#AdminModule', }, // component route, to show a specific component { path: 'sign-in', component: SignInComponent, },

npm is confusing, that’s what. If you’re only just venturing beyond HTML and CSS (and maybe some jQuery) then npm is a bit of a jump! Here’s the basics… What is npm and what are packages? The letters npm stand for “node package manager”. When you are working on a JavaScript project, you can use npm to…

… if you want :) With NgRx 5 you can provide an action class to the ofType operator to get a strongly typed payload without using map. You can also use ofType as a pipeable operator. @Effect() public loadAllData$: Observable<Action> = this.actions$.pipe( ofType<LoadAction>( ActionTypes.Load ), concatMap( loadAction => [ new LoadUserData( loadAction.payload.userId ), new LoadGroupData( loadAction.payload.groupId ) ]) );

NgRx Store provides us a single stream of actions where we can either dispatch or subscribe any action across our whole app. This action stream is an Observable. NgRx Effects allow us to listen for particular action types, and “do something” when that action happens. …

Implementing a sequence-fade animation for a router outlet (Ng4.4.4) This implementation has three parts: an animation, a binding, and a little CSS. …

Understanding the basics of RxJS5 RxJS is freakin’ awesome, and I want you to also understand that it is freakin’ awesome. It took me a while to get the hang of it, especially with a lot of the documentation and examples out there being either full of maths (I am…