Tag Archives: Angular

How to Lazy and Dynamically Load a Component in Angular

There are three ways you can use a component in an Angular app. Loading on route change Using as a child component Dynamically loading on demand However, this article focuses on loading a component dynamically and lazily. The main advantage of lazily loading a component is reducing the initial bundle size and only downloading theContinueContinue reading “How to Lazy and Dynamically Load a Component in Angular”

Required @Input properties in Angular

Angular 16 adds a new future of making an @Input() decorated property REQUIRED, which means that to use that component, the value of the required property has to be passed. @Input({required:true}) title? :string; To Understand it, let us assume that you have a component named ProductComponent with @Input() decorated properties as shown below, const templateContinueContinue reading “Required @Input properties in Angular”

Step-by-Step Understanding the Async Pipe

The async pipe can make a huge difference in your change detection strategy for your Angular app. If it’s been confusing to you so far, come work through this step-by-step explanation. We’ll understand it together! In Angular, the async pipe is a pipe that essentially does these three tasks: It subscribes to an observable or aContinueContinue reading “Step-by-Step Understanding the Async Pipe”

Making Angular Service – Always  Singleton

By default, Angular Services are Singleton. When you create a service using the CLI command, ng g s App Angular creates a service named AppService. https://gist.github.com/debugmodedotnet/17b2ff1a9050ae4d9530fd75b99d99ce The above service is SingletonTree-shakeableAvailable throughout the application Singleton means Angular creates only one object of the AppService, regardless of how many places you use it. However, if youContinueContinue reading “Making Angular Service – Always  Singleton”

The simplest way to disable console.log for Production build in Angular?

I work with different developers, and most of them rely on console.log () or other console methods for development. They use the console to print various values to debug while doing the development. I call this approach console-driven development. Cool name, right? These console functions become overwhelming in production as users can see many thingsContinueContinue reading “The simplest way to disable console.log for Production build in Angular?”