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”

Template

Welcome, {{userName}}

Some time we need maths expression

Conditions

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 Example We have to load one of the dynamic component on click.


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 when

  1. Input property reference change
  2. Browser Event triggered by component or it’s children.

If We need to trigger manually We have to use by changeDetectorRef methods

Detach: — Detach the view from CD tree.

MarkForcheck :- Mark view as change.

Reattach : — Reattach the View to CD tree

checkNoChange…


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 Child component and through Property Binding in Parent’s view.

Coding Example :

Child Component

import { Component, Input } from ‘@angular/core’;

@Component({

selector: ‘app-child’,

template: `

<h3>Hi:</h3>

<p>Welcome, {{name}}!</p>

`

})

export class HeroChildComponent {

@Input() name: String;

}

Now Parent Component

Parent Component

import { Component, Input } from…


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 : — trigger When data bound input property set or reset ( changes) first after create before ngOninit and then after that also. Methods received object contain previous and current value.

ngOnChanges(changes: SimpleChanges) {

for (const propName in changes) {

const chng = changes[propName];

const cur = JSON.stringify(chng.currentValue);

const prev =…


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’;

@NgModule({

imports: [

BrowserModule,

HttpClientModule,

],

declarations: [

AppComponent,

],

bootstrap: [ AppComponent ]

})

export class AppModule {}

Then make common communication service using http service

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

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

@Injectable()

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>(

this.configUrl);

}


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 :-

@Component({

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 non null type assertion operator?
  10. What is code folding?
  11. What is ivy ?
  12. How to disable type checking on template expression?
  13. How to make various environment build like development , staging , UAT , prod ?
  14. What is SSR ?
  15. What is Angular language service?

Mix and Advance

  1. What is annotation?
  2. 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 params in the request ?
  7. What are different type of response type available in angular?
  8. What is role of observe in request ?
  9. How get upload progress of file request ?
  10. How t request a typed response?
  11. How to read the full response?
  12. How to make and consume a jsonp…


My self in Fallachan Valley

Components

  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 in one property in parent, Will change reflect in the child component?

Like : — Employee = { name : ‘Anil’ , department:’Engineering’}

Templates

  1. Explain Styling precedence ?
  2. Difference between @Attribute() vs @Input()?
  3. How to use svg file as templates?
  4. Template type checking in custom directive?
  5. Describe 3 Mode of template…

ACHARYA ANIL SURYAVANSHI

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