Category Archives: 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?”

Video – Angular Interview : is Angular Service Singleton ?

One of the most popular Angular interview questions is, whether a service is singleton? By default, when you create a service using the below CLI command, ng g s app AppService is singleton, however it can be re-provided to create more objects of it. Say, you again re provide AppService in one of the components,ContinueContinue reading “Video – Angular Interview : is Angular Service Singleton ?”

Change Detection in Angular

Change Detection is the backbone of the Angular framework, and each component has its own change detector. This article explains change detection strategies and optimizations to help you write highly performant Angular applications. Angular can detect when data changes in the component, and can re-render the view to display the updated data. Angular makes sureContinueContinue reading “Change Detection in Angular”

How to use conditions in Angular Template using

There are various ways you can apply conditions on Angular Template. Usually, you apply conditions to show a particular value or render a specific element based on a condition. In this post, let us see, the simplest way of achieving the conditions in Angular Template using the <ng-container> and <ng-template>.  To start with consider data,ContinueContinue reading “How to use conditions in Angular Template using”

Why use exportAs Property in Angular

Have you used exportAs property of a directive? It could be instrumental in working with public methods of a directive. Let us say; you have created a custom directive to change the background colour of the host element on the mouse hover as below, import { Directive, Input, HostListener, ElementRef } from ‘@angular/core’; @Directive({ selector:ContinueContinue reading “Why use exportAs Property in Angular”

When to use viewProviders in Angular – Simplified

I have often seen developers are confused about viewProviders property of the @Componnet decorator.  This post explains to you about the viewProviders option. The viewProviders defines the set of injectable objects that are visible to its view, DOM children. They are not visible to the content children. At the component level, you can provide a service in two ways: Using the providers arrayUsing the viewProviders array. IfContinueContinue reading “When to use viewProviders in Angular – Simplified”