Open in app

Sign In

Write

Sign In

Ole Ersoy
Ole Ersoy

326 Followers

Home

About

5 days ago

Creating a Standalone Self Initializing Angular Asset Service

Scenario We have an asset service that loads SVG assets for us and makes them available in the MatIconRegistry . In the pre Angular 15 version of the service the initialization was done in the service module’sconstructor . constructor(private a: AssetService) { a.init() } The writeup for the first version is…

UX

1 min read

Creating a Standalone Self Initializing Angular Asset Service
Creating a Standalone Self Initializing Angular Asset Service
UX

1 min read


5 days ago

Lazy Loading Angular Standalone Components

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

UX

1 min read

Lazy Loading Angular Standalone Components
Lazy Loading Angular Standalone Components
UX

1 min read


5 days ago

Generating Standalone Angular Components

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.

UX

1 min read

Generating Standalone Angular Components
Generating Standalone Angular Components
UX

1 min read


6 days ago

Rendering Custom Standalone Angular Material Select Components with Storybook

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…

UX

1 min read

Rendering Custom Standalone Angular Material Select Components with Storybook
Rendering Custom Standalone Angular Material Select Components with Storybook
UX

1 min read


6 days ago

Turning on ScrollTop Restoration for the Standalone Angular Router

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)], });

UX

1 min read

Turning on ScrollTop Restoration for the Standalone Angular Router
Turning on ScrollTop Restoration for the Standalone Angular Router
UX

1 min read


May 23

Using RouterLink in Angular Standalone Components

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…

UX

1 min read

Using RouterLink in Angular Standalone Components
Using RouterLink in Angular Standalone Components
UX

1 min read


May 23

Adding Static Classes to Our Angular Host Element

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…

UX

1 min read

Adding Static Classes to Our Angular Host Element
Adding Static Classes to Our Angular Host Element
UX

1 min read


May 21

Getting the Local Network IP Address of Your MacBook

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

Computer Science

1 min read

Getting the Local Network IP Address of Your MacBook
Getting the Local Network IP Address of Your MacBook
Computer Science

1 min read


May 18

Theming Pattern for Extending Angular Material Components

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…

UX

3 min read

Theming Pattern for Extending Angular Material Components
Theming Pattern for Extending Angular Material Components
UX

3 min read


May 18

Spices and Herbs for Optimal Health

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

Health

1 min read

Spices and Herbs for Optimal Health
Spices and Herbs for Optimal Health
Health

1 min read

Ole Ersoy

Ole Ersoy

326 Followers

Founder of Firefly Semantics Corporation

Following
  • Dr Mehmet Yildiz

    Dr Mehmet Yildiz

  • nancy

    nancy

  • Matt Lillywhite

    Matt Lillywhite

  • Tom Smykowski

    Tom Smykowski

  • Zack

    Zack

See all (126)

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech