25 Essential Angular Interview Questions with Code Demonstrations

Welcome to questpond's youtube channel Today we will be covering 25 Important Angular Interview questions and answers with code demonstrations This is part 1 of this video series and we have also developed other parts of this.

Share this video on linkedin, twitter or on facebook. Send that us shared link at [email protected] you can get access to the other parts of the questions as well.

Question 1 : - What is Angular? This tip applies to all the questions which we will discuss in this video. Whenever you are giving any answer in an interview

please try to elaborate not just say Angular is a simple data application or UI framework. Try to convey to the interviewer you are the right candidate for this job.

Angular is a JavaScript UI binding framework which helps to bind the view To bind the view with the model then we write lot of binding code in between we type on the UI. It should send message to the Model. If something changes in this Model we again update the UI

This binding code in between, lot of people say that this is a View Model is taken care by Angular. Angular is a Binding Framework which helps to bind the view with the Model. Lot of people say that Angular helps you to implement the MVVM package.

Some people also say that this is MVVM some people also say this is MVC of JavaScript some people say this is MVP of JavaScript and that's why lot of people rather than getting into all these things they say MVW.

MVW stands for whatever. We can say that Angular is a JavaScript UI framework which helps to implement MVW architecture

inside the browser. Question 2 - Differentiate between AngularJS VS Angular. This is a very important question. It looks simple and not main.

If you are not able to answer this question the interviewer feels that you have no idea of Angular. When it comes to simple questions like what are the versions of Angular, the difference if you are not able to answer them it sense a very wrong message to the interviewer.

In the market out there whenever they refer the old Angular they say AngularJS and whenever they refer the new Angular version they say Angular.

Whenever the interviewer says AngularJS it means by Angular 1.x We have old Angular which has Angular 1.1, 1.2, 1.5 i.e. old Angular and the new angular which has Angular 2, 4, 5, 6, 7, 8 and the recent version is 9. The first thing is the Language

in the old Angular we use JavaScript Try to make the answers small, precise and to the point. Question 3 : - What re directives in Angular?

Directives help to attach behavior--- or in simplify words we can say that

directives are angular syntaxes which we write inside HTML On the html code out here there are couple of directive syntaxes

ngModel, hidden and value is the directive If we look at the simple HTML textbox which has There are three kinds of directives

the first one is Structural Directive the second one is

an Attribute directive and third one is Component directive

To remember this in the interview remember the word or attribute SAC On the code out here we created our own grid here called as my-grid we can put this my-grid out here with some data to it.

NPM stands for Node Package Manager. to install anything say here npm install jquery, that's the command for it. Once Jquery is downloaded from the github

Typescript is superset of JavaScript Have seen variation of the question as well in interview. If somebody ask that question then say

to create a module in Angular we use @NgModule decorator and to create a component use @Component decorator. Decorator says what kind of class is this to the Angular framework. Some developer also terms decorator as Annotations or MetaData

If in interview you are asked what is MetaData, Annotations and Data Annotations the answer remains absolutely same. Whatever answer we have answered fro decorator the same answer holds to. Question 12 - What are templates in Angular?

Templates are html view of Angular. This template url is pointing towards the HTML.

In this HTML view we can write angular syntaxes or angular directives like expressions we can use pipes, directives like formGroup, ngModel and so on. There are two ways of defining a template one is we can define inline.

Go to the component decorator and define it right inside the component code or we can have a different physical file

and then connect to the templateUrl, the templateUrl is pointing towards an HTML this is again a template. There are two ways of defining a template one is inline

where we can write html right inside the TypeScript code and second is we can define separate physical file. like CustApp.Component.html

then link it by using @Component decorator in the TYpeScript code.

Question 13 - What are the different types of Data binding? Before answering the question will define what exactly is data binding? Data Binding in Angular defines how the view and component

communicate with each other. That what exactly Data binding is all about. The different kind of Data Binding

The first one is an expression or we can also term it as an interpolation. Expression binding or an interpolation binding the data flows from the controller to the view

then we can mix that data inside html. This is a customer name but how smoothly it is mixing with the td tag. This expression CustomerId which is getting mixed with the br tag.

Interpolation or expression is wherein the flows from the controller to the view and then we can stick or mix that data inside The second kind of Data binding is the property binding

In this case the data flows from the controller to the view but then it gets attached to some user input like a textbox. This ngModel in this case the CustomerId data can flow from the controller to the view

whenever some change happens in the component in the CustomerId the data will be replicated onto the view and displayed inside the textbox this is termed as a property binding.

This is termed as an expression or interpolation binding. The third kind of binding what we have here is the event binding. Event means

when somebody clicks on a button somebody goes and track some events from the view to the component or send some events from the view to the component that's where we have event binding. Event binding we use the round bracket.

A click event will go from the view to the component. This is termed as Event Binding. The last one is termed as two way binding.

We are using both of them, we are using the square bracket as well as round bracket. In this case we can send the data from the controller to the view

also if some event happens that will also go from the view to the controller. In this case it is a two way binding.

There are four kinds of data binding one is the interpolation which gets mixed with html second one is the square bracket where the data flows from the component to the view

then we have the round bracket which is the Event binding which flows from the view to the component and then we have two way binding where the data or the events can flow to and fro from the view to the component and from the component to the view. Question 14 - Explain the architecture of Angular

or explain the important pillars which comprises the Angular architecture or explain different blocks which represent Angular. Whenever going for interview would really suggest to carry

a notepad and pen because while answering any complicated answer would suggest you to draw diagrams. If you are serious about job try to impress the interviewer.

Stand out from the crowd by drawing diagrams, explaining it---- manner, explaining proper vocabulary and so on. When we talk about the architecture in Angular there are like 7 or 8 components which we should discuss about.

The first thing is the Template. Template is the html View.

This View talks with a component the second important pillar in Angular architecture is Component.

A group of component is logically put into Modules.

The third important thing we discussed is Modules. The binding between the View and the Components are done by the bindings.

We have the [ ] bracket the ( ) bracket the ( ) bracket sends events from view to the component. the [ ] bracket sends from the Component to the View.

The next fourth important things we discussed about Binding. The fifth thing is the directives. Inside the View we have different directives like interpolation

we can have ngModel Click and so on.

The fifth point is Directives. In a project we always want to share common logic

or have some common things which want to share for that we need to create a service. The sixth thing is which we will discuss in Angular

is a Service. When this service is consumed inside component the object not created it is injected.

When we have services which we want to put across all the components then they use Dependency Injection the injector.

The seventh thing which we should discuss about is Dependency Injection. When talking about Angular architecture talk about these seven things

First is Template which is the View. The view talks to the component This component is actually for binding, it talks with CSS

with Model The third thing is Module, the module groups the components The fourth thing is the Binding

which says how the data will flow from the View to the Component. The fifth thing is Directives Directives help to change

the behavior. The sixth thing is a service which is a common logic which we want to inject all across the project. Common logic can be validation, logging utility, http services and so on.

that is done via Dependency Injection that's the seventh. When discussing this answer with the interviewer try to draw diagram and try emphasis these seven points. Question 15 - Explain the term SPA.

SPA stands for Single Page Application. Single Page Application is a concept wherein we load the UI once

and we do not reload it again and again. When we talk about a typical website, it has a left menu and have a footer and Banner.

In Single Page Application these sections are loaded only once. When end user clicks on any hyperlink of the left menu

only that section or the necessary UI will be loaded from the server. By this we will get performance improvement.

Single Page Application is a concept wherein we have single page and in that page whatever is the necessary UI is loaded only once and then depending on what the end user wants to see At that time only the necessary UI is loaded.

How do we implement Question 16 - Single Page Application using Angular To implement Single Page Application in Angular we need to use the Angular Routing.

what exactly is Routing in Angular and how do we actually implement it. Routing is a very simple collection in Angular. And the main goal of routing is to define navigation of the

Angular application. We have a HomeRoutes which has two things one is

url and this url says where we will be navigating. For example if somebody hits a login it will go to the login component.

The login component will go to the login view. If we navigate to Home url it will go to the Home component and load the home page.

Routing helps to define the navigation of the application and it has two things, one is it has url and what exactly that url will load.

How exactly routing implemented in Angular? the first step for routing is that we need to define a collection and say for which url component will be loaded.

If somebody tries to navigate to login it will load the LoginComponent. If somebody will try to navigate to Home it will load the HomeComponent.

Then in the html we need to define router-outlet. This router-outlet is a place where the page will be loaded. We also need to define router-link

When somebody clicks on this home it will first go to this collection and say Home and for Home we have

the HomeComponent. then it will load this Home.html inside the router-outlet.

When we click on Customer/Add in this route it will load the customer page inside the router-outlet To implement routing we need three things

first is we need the collection saying which url will go to which component. Second one is we need to have the router outlet where exactly

that navigation will load. We need to define the routerLink incase of html. and say the url name.

To do routing from code behind or from the component then we need to say

router.navigate To do routing from html use routerLink

in the anchor tag or in the button. To do it from the component we need to say this.route.navigate and the UI.

Question 18 - What exactly is Lazy Loading in Angular? Lazy Loading means on demand loading or loading what is essential and necessary.

This is dummy website we have when we load this website it has loaded certain js files

but has still not loaded the customer user interface. When we click on customer only at that time it will load the customerjs

When we click on Customer then it loads the Customerjs but in the first

time when we logged in it did not load the customer module. Question 19 - How can we implement Lazy Loading in Angular?

To implement Lazy Loading we need at least two things, the first is we need to divide the project into separate separate modules. If that is not there then Lazy Loading is not possible. We have divided the project into the Customer module and Home module. The first step is we need divide the project into separate separate modules

Then the module which we want to do lazy loading use the loadChildren in the routes collection. It says loadChildren and load the CustomerModule on demand or on the fly-- We need to use loadChildren

and divide the project modules. Question 20 - What are Services?

When we talk about enterprise application we can have lot of Views, Components, Models and multiple Modules. You can see on the screen

this is one Module which is grouping multiple components. We can have another module which again

groups some other components. For that we need to create a Service.

To share common functionality across the modules create a Service.

The Service can be common functionality like validations, logging, loggers, http

service. This service then can be used by this module and this module and so on. To share common functionality across the projects

use Service. One of the patterns which we noticed in Angular interviews is

once the interviewer asks questions around Services the next question is around Dependency Injection. Question 21 - What exactly is Dependency Injection?

How to implement the same using Angular? Dependency Injection is an application design pattern wherein the class

rather than instantiating the dependencies from the class it prefers to get injected from outside or somebody else will instantiate and send it to the class.

Over here we have the class MasterPageComponent and it is trying to use the logger class for logging Rather than creating a instance from here

in the constructor we are telling Angular to inject it. Rather than instantiating

the dependencies from the class itself in Dependency injection Angular injects it from outside. The next connected question comes in it

Question 22- How do we implement Dependency Injection in Angular? To implement Dependency injection in Angular we need to use

the Provider attribute. We have this providers attribute belongs to the ngModule

decorator. to create a module we use this ngModule In this we have the provider, over here we will say

provide If somebody asking in the constructor this BaseLogger inject HttpLogger

Over here we will use the providers collection in that we will provide

that for this class what instance to be injected. To do dependency injection in Angular

we need to use the providers property which belongs to the ngModule Metadata or to the Decorator

In component it will give BaseLogger and Angular will inject the BaseLogger depending on what we have provided here.

The next connected question around dependency injection is Question 23 - What is the benefit of using Dependency Injection? Different developers perceive Dependency Injection in different ways.

The biggest benefit of dependency injection is decoupling or when we change at one place we do not have to change at lot of places. Basically when we talk about good software architecture

if we change something we change at one place and it should be reflected all across the project. Here we are using BaseLogger assume that in this application

at this moment the BaseLogger is a base class we are using AlertLogger across the project. Whenever there is any logging errors and warnings it is showing it in a Alert box of JavaScript.

Everywhere this BaseLogger injects the AlerLogger instance. Lets say we do not want to use AlertLogger change it to HttpLogger

Now we have to change just over here in the providers. Everywhere across the components it will inject HttpLogger. The biggest benefit of Dependency Injection is change at one place and

the object instances are injected all across the project We do not have to say new new keyword. If we do not use DI then we have to say here

and if someone says change it to AlertLogger then we have to again go to all the components and say AlertLogger. One of the biggest disadvantage of instantiating the class by using the new keyword is

it does tight coupling. The class will be tightly coupled as soon as we start instances within the class but when we use dependency injection

that means we have given this work to someone else. In this case it is Angular and Angular will ensure that we inject the instance.

Question 24 - What is the difference between ng serve and ng build? Normally working with Angular we have ng serve and ng build.

ng serve builds angular application in-memory inside RAM. For doing development ng serve is good when we want to go into production---

then we need to use ng build ng build builds angular application into the hard disc It creates a dist folder

It puts down all the binaries or whatever the final compile code into dist folder. while ng serve builds in-memory. Question 25 - What does --prod flag in ng build ?

People who are in production will see --prod