What is interpolation in angular ?

Templates always need text or string to be dynamic at runtime. So angular given us

Interpolation technique to title, username, error messages etc

We put inside {{text }} double curly braces

Class file

userName = “Anil”


Welcome, {{userName}}

Some time we need maths expression


Real Count Wins {{ total + 56 == 200 ? “Winner”: “Loser”}}

Can’t use javascript expression

+= , new , instanceof , typeof , ;

Angular runs template expressions after every change detection cycle runs.

Angular boon us component factory for doing the same. Component Factory is base class for creating components dynamically. It have method resolveComponentFactory .And viewContainerRef for creating componentWe will use the viewContainerRef of base of the dynamic component.Which will create component using componentFactoryResolver.For …

Angular default Change Detection runs on every change it is also called as Check Always. So changing it for optimizing performance to OnPush (also called CheckOnce).

In Default Strategy CD triggers at following times

  1. Input Event
  2. Browser Event
  3. SetTimeout
  4. SetInterval
  5. XHR Api request
  6. Promise

For OnPush Main change only trigger…

Parent Child Component

For Communicating in Parent Component and Child Component. There are many ways to do so. Whenever We use any component as selector inside view of Another component it become child component. So most of time we need to provide some data to child component.

Angular given us @Input() decorator in…

In An Angular app have lifecycle so its Unit also have. When component load its lifecyle start and lifecycle have hooks. Hooks are functions(events) triggered at various stage of Angular Change Detection.

We can respond to lifecycle hooks ( events) by using interfaces as create, update and destroy.

  1. ngOnChanges …

A Rest api is accessible by any server path that communicates to the server from any client browser in case of angular. Angular provides us http service of Http module. Service have feature to request, error handling, interceptor, Rxjs observables and operators.

We need to Inject http module in the main module.

import { NgModule } from ‘@angular/core’;

import { BrowserModule } from ‘@angular/platform-browser’;

import { HttpClientModule } from ‘@angular/common/http’;


imports: [




declarations: [



bootstrap: [ AppComponent ]


export class AppModule {}

Then make common communication service using http service

import { Injectable } from ‘@angular/core’;

import { HttpClient } from ‘@angular/common/http’;


export class ConfigService {

constructor(private http: HttpClient) { }


Then make any kind of request get , post , put, delete

GET Request

getResponse(): Observable<HttpResponse<T>> {

return this.http.get<T>(



Component is an element of the Angular app. They are the main building blocks. Each component is a type of directive. Component is made of class with Component metadata, html template, css selector and optionally css style apply to html template. Component have lifecycle hooks.

Cli command

ng g c app-component-overview

Syntax :-


selector: ‘app-component-overview’,

templateUrl: ‘./component-overview.component.html’,

styleUrls: [‘./component-overview.component.css’]


export class ComponentOverviewComponent {


Performance and optimization

  1. How to support accessibility ?
  2. How to check version of angular app?
  3. How to update old angular third party libraries?
  4. What is a lightweight injection token?
  5. Step to deploy angular app?
  6. How to configure differential loading?
  7. What is AOT ?
  8. What are the phases included in compilation ?
  9. What is…

HTTP Client

  1. How to consume an JSON REST api (server)?
  2. Which service is used for hitting an api?
  3. Differentiate between get and post?
  4. What is a header?
  5. In Auth 2 how to manage token expire scenario by renew it using refresh token without impact of user experience?
  6. Where do we put http…

My self in Fallachan Valley


  1. How is changing the CD strategy to onPush impact component?
  2. How to make child component data two way data binding?
  3. What is the dynamic component?
  4. What is an angular element?
  5. What is a component factory resolver?
  6. In Parent to child component communication. Suppose an object have two properties only change…


Software Engineer | Bharat Swabhiman Patanjali Social Activist | Speaker | Motivator | Yoga Trainer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store