Scenario We want to lazy load a standaloneProfileComponent . Approach { path: 'profile', loadComponent: () => import('./admin/profile.component').then(m => m.AdminComponent) } If the profile component needs a provider , it that can be included like this. { path: 'profile', providers: [ProfileService], loadComponent: () => import('./admin/profile.component').then(m => m.AdminComponent) }

Scenario We wish to generate a standalone CustomerComponent using the Angular CLI. Approach ng g component --standalone Customer To generate all components with the standalone flag without having to specify it update angular.json . "schematics": { "@schematics/angular:component": { "standalone": true } } This also works for directive and pipe schematics.

Scenario We have created a custom standalone Angular Material select component and want to render it with Storybook. When we try we get the error: ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that: - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application. And this is because we…

Scenario We want the Angular Router to always scroll back to the top of the viewport after navigation. Approach While bootstrapping the app component configure the router like this. const scrollConfig: InMemoryScrollingOptions = { scrollPositionRestoration: 'top', anchorScrolling: 'enabled', }; const inMemoryScrollingFeature: InMemoryScrollingFeature = withInMemoryScrolling(scrollConfig); bootstrapApplication(App, { providers: [provideRouter(routes, inMemoryScrollingFeature)], });

Scenario We want to route to view2 like this. <button routerLink="/view2"> Go to View 2 </button> Approach Import RouterLink and add it to the imports array of the decorator of the component doing the routing, shown here from the main app component in the below demo. import 'zone.js/dist/zone'; import { Component } from…

Scenario We are creating a application-container element for our Angular application and we want to have the Angular styling classes mat-typography mat-app-background to the host element. Approach Add them via the host property within the Angular @Component decorator. host: {'class': 'mat-typography mat-app-background'}, A complete decorator might look like this: @Component({ standalone…

Scenario We need to rsync data between two MacBooks and therefore need the IP Address of one on the local network. Approach Press cmd + space and select terminal. Then type: MacDaddy-MacBook % ipconfig getifaddr en0 192.168.4.89

Scenario We want to create a SASS mixin for the for extending the colors of the Fab Button with success , danger , and info colors following a simple repeatable pattern. Approach We will extend the theming of Angular Material per component allowing us to import theme extensions in a minimal fashion…

Two Step Approach to High Energy and Focus Step 1fireflysemantics.medium.com