Top 10 Angular Interview Questions for Beginners and Juniors

Hello friends today I'm going to cover the top 10 angular interview question that are most likely to be asked from a

candidate who has experience from0 to 2 years if you are new to angular then don't miss it and if you are experienced

then revise the questions at least one time because sometimes we know only half of the answer and sometimes even we know

the incorrect answer okay hey my name is happy and I help candidates in cracking interviews so let's start with the first

question and yes for a real interview experience first hear the question pause the video then think about your own

answer then play my answer and compare it with [Music]

yours now this question is related with angular history and Everyone likes history what is the difference between

angular and angularjs by the end of this video you will understand why Google replaced angularjs with angular here is

the interesting short story Google first released angularjs in 2010 and then they realized that there are some

shortcomings of it and therefore they rewrite rewrite the whole framework and named it angular they removed Js from

the name because JS stands for JavaScript and now the new version can use use types script also so the name of

the new version is angular only now now in 2 minutes I will show you some main differences between angular and

angularjs first difference is angularjs only supports JavaScript whereas angular supports both JavaScript and typescript

one benefit of this is you can see errors in typescript at compil time only which is not there in the JavaScript

second benefit is typescript support class classes interfaces which is good way of programming but JavaScript don't

support them second difference is angular framework has a model view controller architecture whereas angular

has a component based architecture and component based architecture is much much faster than MVC

architecture then angularjs does not have CLI tool but angular has CLI tool with with which you can easily create

component services and other things with the templates the next difference and Advantage is angularjs does not use

dependency injection whereas angular uses dependency injection and dependency injection is a very good design pattern

and I will cover a separate question on this soon then next difference is angularjs does not support mobile

browsers but angular support mobile browser and the last advantage or the difference you can see is angularjs is

not so fast that's why Google replaced it with angular angular is much faster because of its datab banding technique

and the component based architecture you can see angular is like an upgrade over angularjs in upcoming

questions we will see questions on components typescript CLI tool and dependency injection in angular if you

have any query about this question then please ask me and I will be very happy to answer your

queries here is the question what is typescript what are the advantages of typescript over JavaScript after

watching this video you can easily tell any interviewer that why we need typ script in this world let's let's

understand with the help of a diagram see here we have TS as the typescript and you can see typescript have type

system enums generic interfaces and many more things but JavaScript do not have those things so this is the most

important advantage of typescript over JavaScript but the thing is browser do not understand typescript code so

angular compile or convert all the typescript code in JavaScript first and then run it on browser because browser

do not understand Java uh typescript and it understand Java JavaScript only now let's see all the points about

typescript what is typescript and why we need typescript see typescript is a strongly

typed language while JavaScript is Loosely typed language typescript is a super set of JavaScript which means all

the JavaScript code is also a valid typescript code typescript has objectoriented features like classes

interfaces Etc whereas JavaScript do not have objectoriented features typescript detect errors at

compile time whereas JavaScript detect errors at runtime only now let me show you the reasons behind all these

points first point is typescript is a strongly typed language see this is a typescript file a strongly type. TS here

we have declared a string with let keyword and then assigned a a string value to it now if I will try to assign

an integer value to it like this then type script will show compile time error that means this variable is a strongly

typed to a string now and cannot be converted to any other type this is a very good thing otherwise in future

anyone can assign any different type value to it and that will not show any compile time error but will break the

application in runtime because that is not the correct way right now JavaScript is not strongly typed and it is Loosely

typed let me show you this first compile and convert this typescript file to JavaScript file for that open Terminal

type TSC strongly type. TS strongly typed.js this will convert this typescript file

to JavaScript file yes there is an error in this typescript file but still the Javascript

file will be created now see here in the Javascript file which is created there is no

compile time error and you can assign any integer value or any other type to it which is not a good thing and which

means JavaScript is Loosely typed that means typescript is a strongly typed language and that has the advantage over

JavaScript second point is typescript is a super set of JavaScript which means typescript have all the things which

JavaScript have in addition typescript have some extra things see here is the JavaScript code inside the typescript

file main.ts right this is the JavaScript code right now let me compile this typescript file to JavaScript file

open Terminal type TSC main.ts main.js and press enter and here the main.js file is created right and if you see the

code of the main.js file this is similar to the main.ts file so that means that valid JavaScript code is also valid

typescript code and in add addition to that typ script provides some additional features like classes interfaces over

JavaScript which means typescript is a super set of JavaScript third point is typescript has

objectoriented features see this is test.ts file and we have a class and a method inside it now who all are from C

Java background for them it will be way very easy to understand if I will convert this typescript file to

JavaScript file for that open Terminal type TSC test.ts test.js press enter and then this test.js file which is created

see this is bit complex code to understand that's why we say typescript has objectoriented features like classes

inheritance encapsulation etc etc which is a very good thing from building software's point of

view now the last point is type script detect errors at compile time this I already explained in strongly typed

language point right typ script here detect errors at compile time and JavaScript don't that is another

advantage of typescript over JavaScript see here I covered all all the main advantages of type script if

you have any queries about this question then please post in the comment section all right friends before moving

to the next question if you have not yet accepted the never give up challenge then accept it promise yourself you will

never give up until you crack the interview start and accept this challenge by writing never give up in

the com comments right now and feel the confidence here is the interview question what are components in angular

after watching this video you can give a detailed answer about the components to the interviewer so let's start suppose

we have a website interview happy.com now here we will have menu component where all the menu items are present

login component where user can enter username and password then product list component where all the products are

displayed so this is the idea of the component in the single page there can be many components and based on the

request the components will be updated so the page will remain same but the components will be replaced or re

refreshed time to time now the definition of the components is components are the most basic UI

building block of an angular app let me show you in the code also see here inside the app folder we

have four files these four files together will make a single component these files are CSS file HTML file spc.

TS file and the component.ts file do CSS file used for keeping the CSS code for the component see the CSS

code for the component here then HTML file used for modifying the HTML template of the component you will see

all the HTML code here for the component then the spec file is used for writing unit test for your component DS means it

will accept both typescript and JavaScript language then we have the most important file that is component.ts

file component.ts is the file which link all other component files like CSS HTML all it will link together see this is

the way to decorate the component and setting the metadata metadata are selector template URL which is the HTML

file and the style URLs which is the CSS file we will discuss the selector in detail later when you will generate a

new angular project then angular will create first component for you like this only so this is the default component

provided by the angular framework so this is the short story of the component it is a basic building block of angular

application we will discuss selector decorator and meta dat in upcoming questions see you in the next

question here is a short and simple question now what is selector and template you might be already know the

answer of this question but let's revise it quickly here you can see the app component screenshot see the first

attribute of component is selector what is this the definition is a selector is used to identify each component uniquely

into the component tree for example in your application you might have hundreds of components now to identify them

easily we assign them this unique selector value so when the single page index.html will load then this app Root

tag will be replaced by the app Root component HTML this is selector now the next part is what is

template here is the template URL attribute this is the URL of the HTML of this particular component which is app.

component. HTML file you can also use direct template attribute to write the inline HTML here for example you can

directly put the HTML code here therefore the on line answer is a template is a HTML view of an angular

component this is the answer of this question now let's move to the another question what is module in angular what

is app. module. TS file after watching this video you can explain module to anyone let's first see the definition

and then explore the module in detail module is a place where you can group the components directives pipes and

services which are related to the application now let's see the module code see this is our app. module. TS

file when you will create the angular project then this file will comes with the project this file is the root module

and we will call It app module also see the module is registered by this NG module decorator then inside it we have

declarations where we can declare multiple components which can be part of this module so a module can have

multiple components this app component is the default component of this module the next thing is Imports with this

Imports keyword we can use the services of other modules inside this app module for example by default browser module

will be present in app module and as the name suggest this browser module provides services that are essential to

launch and run a browser application and that's why it is necessary to add this browser module in the app module so a

module module can import other modules and then can use their services if you place this export

keyword with any module like this then that module will be available for import in other modules otherwise not after

this we have providers in the modules which I will explain later in a separate question because it is related to

dependency injection and it is slightly complex and I and I don't want to confuse you right now then we have this

bootstrap which we which will set that out of the declared components which component will be

bootstrapped if we have multiple components here then you can you you can set any one of them as

bootstrap with all this information we will again repeat the definition module is a place where you can group the

components directives pipes and services which are related to the application if you are building a small

application then root app module is enough for your application but if it is a big client site application then you

might have to create more modules and there are different types of modules which I will cover in upcoming questions

that's it if you have any queries about this question then ask me in the comment section and I will be very happy to

answer it hi friends just a small notification this video is part of my full course top

100 angular interview questions including topics like observable typescript angular forms Etc all

questions PDF book link is also present Below in the description so like these candidates if you don't want to miss

anything for your interviews then try it otherwise no problem let's continue here is a very good question

how an angular app gets loaded and started what are index.html Appo selector and main.ts

file I will share the theoretical answer first so that you can explain it in the interview and then I will show you the

practicality behind it see this is the process and just remember that when client send the request then it first

hit index.html page now angular is used to create single page applications index.html file is that single page then

index.html will invoke main.js file which is the JavaScript version of main.ts file so what is

main.ts file like every other application main.ts file is the entry point of web app it compiles the web app

and bootstraps the app module to run in the browser then app module file will then bootstrap the app component and

then app component or app root app Root component is the HTML which you will see finally in your browser so this is the

theoretical answer and you have to remember the sequence now let me give you the proof of above sequence see here

is the code of index.html file here we have this loading string but when we look at the

browser the string loading is not here so what happened actually this app Root tag is not a not

an HTML tag it's an angular component let's look at the browser again let's inspect here see at the end these JS

files are there one of them is main.js so what happen is when client hit index.html then angular CLI load these

JS files with the HTML file and now the main JS which is the typescript version of the main.ts file will execute now

let's see the code of main.ts file what it is exactly doing here is the main.ts file here the

main point is this bootstrap module method which is right now bootstrapping the app module we can now we can change

this to any other module also here then this app module code we are bootstrapping the app component which is

also called app Root component we can also change this to any other component from the components available in the

Declaration part now let's see the definition of app component finally here you can see that

Appo tag which was present in index.html file so that tag now will be replaced with the app. component. HTML file

because this is the HTML file for the app Root selector property so finally the summary is

browser will first load index.html page then index.html will call main.ts file then main.ts will boot strap app module

and then app module will boot strap app component and in in the browser you will see app component HTML file as the final

output so this is the whole story and that is the answer of this question I hope you enjoyed it and if you have any

queries then please ask me in the comment section and I will be very happy to answer them as my name is

happy here is a very important question what is datab binding in angular first the definition datab banding is the way

to communicate between your typescript code of your component and your HTML view so in our angular project we have

our typescript code written in app. component.ts file all the business logic like receiving data from the apis is

written here right but after processing the data we have to display this in the HTML file which is also called view

right and angular provide us this app app. component. HTML template file for

displaying this data now the question is how to transfer data from typescript code to H HTML template and then from

template to type script code so for that reason we have data binding technique which does this job of passing data now

there can be three ways to pass data from component to HTML template which is output data for this we have two data

binding techniques string interpolation and property binding Technique we will discuss them in detail in separate

questions then from view to component which is input data for this we have this even binding technique and sometime

we need data to travel both sides for which we have two-way data bending technique the first three are one-way

data bending techniques and the last one is two-way datab bending technique one thing here HTML template

and view are same thing also typescript code and component are same thing uh C originally component is mixed of HTML

template CSS and typescript file but for simplification we mostly say that this app. component.ts file is component so

do not get confused by the name so this is the four types of data banding technique which we will discuss

in upcoming questions if you have any question on this question then please ask me in the comment

section what are directives what are the types of directives I have broken this question in several small questions so

that you can easily understand it here is the simplest definition of directive directive are classes that add

additional Behavior to elements in your angular applications for example suppose you have an element button like this now

the color of this button can be changed by the help of directives like this now directives are of many types here are

the types of directives structur structural directives attribute directives and component directives

these are all built-in directives which are provided by angular you can create an add your own custom directives but

that is a different case the first one is structural directive structural directives change appearance of dome by

adding or remove any elements in it for example now suppose here is a list of some weekday in your web page now adding

one more item in this list can be done with the help of a structur directive ngf ng4 and NG switch are the types of

structural directives we can discuss this in separate questions later now attribute directives the

definition of attribute directive is attribute directives change the appearance or behavior of the

element above the color chain submit button example I gave already is the example of attribute directives only NG

class and NG styles are the types of attribute directives which I will discuss in detail in upcoming questions

then the last one is component directives component directives are the directives with its own templates it

means the all the components where you have the HTML template are the types of directives only so component is a type

of directive only this is the most used directive because components are used to display the first view so this is the

basic understanding of the directives in upcoming questions we will see more questions on different types of

directives if you have any question about this question then please ask me in the comment

section now let's do a recap of directives with differences question because differences are the favorite

questions of interviewers what is the difference between component attribute and structural directives let's see the

first difference the first difference is component directive is responsible for showing the first view of the component

it is the most used one see this is the component directive and here is the template attached to it

if you will remove this component directive then the first view of component will not be displayed and

that's why it's the most used one then structural directive is responsible for adding and deleting HTML elements in The

View displayed by the component directive and at last attribute directive is

responsible for changing the appearance of You by adding or removing style CSS classes of the HTML elements so all the

three directives are related to each other by helping each other in creating a good and editable

component next difference is about representation component directive starts with at theate sign like at

theate component structural directive starts with estri sign like estri NG if estri ng4 and estri NG switch and then

attribute directive set inside square brackets like square brackets NG glass NG style so this is the quick answer of

this question if you have any question then please ask me in the comment section here is the question question

what is decorator this is a very important question let's see the simplest definition which you can tell

to any interviewer angular decorators store metadata about a class method or property now what is metadata metadata

is data that provides information about other data for example suppose you have a book then things like author name

title price publisher extra extra all these information information about the book is metadata only meaning it is

giving you information about the book but but it is not the main content or data of the book this is

metadata similarly here we have this component file now the main logic and data of this component file component

will be inside this class app component class right but the information like selector is a metadata similarly

template you URL and style URLs will be the metadata so decorator store all the metadata of the component similarly in

module case it is at the rate NG module decorator which stores all the metadata like declarations Imports providers

bootstrap I hope now you understand what is metadata and what is decorator one more thing about angular decorator is

all decorators are represented represented with at the rate symbol so this is all about this

question if you have any queries then my name is happy you can ask me any question what are the types of decorator

let's see quickly we have four types of decorators class decorators property decorators method decorators and

parameter decorators now this class decorator is just a category the actual decorators are at the NG module and at

theate component these are the actual decorators here in the diagram the decorators which are in bold words are

the important ones so you can remember them the rest are not so important and they are slightly complex also to

understand so we will cover them in upcoming questions one thing you noticed about the decorators that all these

decorators start with at the rate sign only this is the short story of this

question here is the question what are life cycle hooks in angular this question is very important and it is

asked in many interviews so what is life cycle hooks basically in simple English a component from creation to destruction

goes through several stages and these stages are the life cycle hooks these stages will cover activity ities like

component instantiating rendering the component HTML view creating the child components

if required and finally destroying the components now why as a developer we need life cycle hooks because might be

we want to add some behavior in the component when it is instantiating for that purpose we need

particular a component hook inside which we will code for this particular thing so that is why a developer need

component Hooks and here is the list of component hooks provided by angular you can code inside them to change the

component Behavior at any point of time here note that the first one the this Constructor is not the part of the life

cycle hook but it's a very important thing to know that's why I have included it we cannot ignore this this is a very

important part of uh a typescript class now let me give you some theoretical overview about some

important hooks uh which you can tell in the interview after that we will pick those hooks and we'll understand them in

detail in separate questions so quickly start with the first thing as that is Constructor this is the default method

of the typescript class that is executed when the class is instantiated it always run before any angular hook

and it is not a part of life cycle Hook second is NG on changes it is called when the input property of the

component changes uh you remember input decorator yes this is related to that we will discuss this in upcoming question

third is NG on init this is the most important hook and it is called when the component is finally created created

after this we have this NG do check this is not so important but the purpose is when component is finally created via

this NG on in it and if angular is not able to detect some changes in the component until then then that thing can

be hel handled in this NG do check uh hook so that is the its purpose after this we have these four hooks which run

only for child components and if a component do not have any child components then none of them is required

and finally the last one is NG on Destroy This is called when the component is destroyed so that is the

whole quick overview of the hooks now in upcoming question we will focus on the most important ones if you have any

queries then please ask me in the comment section before coding observable let's quickly

see what is the relation of rxjs and observable what is rxjs rxjs is nothing but the father of

observable now here is the screenshot of definition from the rxjs website rxjs is a library for composing asynchronous and

event based program programs by using observable sequences we already know what is

asynchronous operations it means multiple tasks in a request can run parall now event based programs means

when you are sending the request then you should get immediate and continuous response from the server and that is

done with the help of observables you remember streaming of data yes that is the continuous response I know it is

little hard to remember this definition so here is a simple definition rxjs is a JavaScript library that allows us to

work with a synchronous data stream with the help of observables so this is like little much modification of the actual

definition now why we as an angular developer need rxjs the answer is very simple because observable in is

introduced by rxjs Library only it is like rxjs is the father of observables angular has not created

observables so there is a misconception that observables are part of angular this is not right RX we use rxjs in

angular to use observables similarly plain JavaScript or any other client framework other than angular also can

use observables so this is the next important thing now here rxjs stands for

reactive extensions for JavaScript now rxjs has two main players the observable which streams the data or you

can say send the data in chunks and the Observer or subscriber which receives the data which is sent by the observable

or you can say subscribe the data so basically Observer and subscriber are the same things in upcoming questions we

will see how it works in code so this is the short and very basic idea of rxjs now we will move to the next

question here is a practical question now what is observable how to implement observable if you have seen my previous

questions then you easily understand that observables are used to stream data to multiple components in angular in

other words you can say it emit multiple values over a period of time now the question is how to implement obser

observable it's a simple three-step process import observable from rxjs library then create observable and emit

data and the last step is subscribe the data in the component now let's go to the code and do some

practical here the first step is to import observable like this in app component file see very simple second

step is to create observable this is the the way we call observable function now what this observable will do this will

emit emit the data for some subscriber or obser Observer right so here we will pass the Observer as an argument and

then we will emit the data like this emit meaning just releasing the data here first we have printed observable

start message so that we know that this my observable has started and then we just printed a b and c in console now

the last step is to subscribe the data this is the way we will subscribe the observable this subscribe is now

subscribing this observable and now we have to display the values sent or emitted by the observable for that we

will use this Arrow function to print those values via this console.log method now let me show you the changes in the

browser here in the the console you can see the messages observable is started then printed a b and c so the observable

is working so basically observable sending the message and then the subscriber is receiving them and

printing them here now one very important thing let's go back to the code here if we will not subscribe the

data then this observable will not even generate the data let let me show you this let's delete this subscriber from

here now go to the browser again here in the console you can see observable start message has not been printed and no ABC

printed because because observable will not start if there is no subscriber so this is the basic idea when observable

will work and when it will not work now just quickly look how the promise will work work if we go back to the

code and here we just paste the promise like this now here we are printing a promise start message that which let us

know that okay this promise has been started and here the subscription code should be deleted so promise are not

subscribed now go back to the browser again go to the console and see the Promise see start message promise start

message is is printed this means promise do not need subscription promise will anyway send the data and will start

without any subscriber whereas observable must need at least one subscriber to start them and this is the

beauty of observable because if there are no subscribers then why to even create or generate the message for

example in real world if a press is printing newspapers but there is no one reading or subscribing these newspapers

then why to even print the newspapers means there is no sense right that is the wastage of resources and time in and

in technology it is the wastage of memory right uh I hope now you have a clear understanding about the concept of

observable in upcoming questions we will see how observables work with sttp client to get the data from the web API

and then it will send the data to the various components where it will be subscribed so that is the actual way of

working with the observable in uh angular because this is a real scenario now if you have any questions or

feedback please write in the comment section and I will be very happy to answer

them here is the question what what is authentication and authorization in angular let's quickly see it both these

authentication and authorization concepts are common in every web technology authentication is the process

to verify the user's identity in 99% of cases users's identity meaning is to validate the username and password of

the user meaning if you are accessing any website then you have to enter the usern name and password right and then

the website will authenticate you who you are and then only it will allow or disallow you to enter in the application

this is authentication if you are allowed then only authorization is the next step then

authorization is the process of allowing a user to access the resources or data as per the role for example if there are

three menus inside the website site and after login if you are a normal user then you can see only two menu items but

if you are a admin user then you can see all the three menu items so that is because of authorization only whether

you are a normal user or an admin user this will be identified based on your username which you have provided during

the authentication so in a way authentication is always done before

authorization ation so this is the information about the authentication and authorization let me show you quickly

how we will do authentication in angular here in the browser we have this username and password so if I enter

wrong username and password then if I press login and then see in console we will get this error 401

unauthorized and the user authentication is failed here and user is not moved forward so this is an error here but if

I will enter correct username and password and then Press login uh ignore this Google Chrome automatic password

store messages so now the user is authenticated and validated and moved forward to this home component also you

can see a JWT token here in the conso console which is received from the server API

now we will discuss this JWT token in the upcoming question and this is the information about the authentication and

authorization and the answer of this question if you have any queries ask me in the comment

section here is the question what is token authentication process in angular in this question we will see the JWT

authentication process in angular the actual code implementation we will see in upcoming question here are the

main players in authentication process first is the browser which will act as the front end and the client framework

we are using is angular then we have the API which you can also call the middleware server side or the back end

this API can be in many Technologies for example nodejs esp.net core Jango Etc ET ET now there are eight steps in the

authentication process first user will open the browser at client site and enter the username and password and send

it to the API with the post request then in the Second Step API will receive the credentials and then will

authenticate or validate the username and password if credentials are valid it will create a jwd token and send it back

to the client has the response if credentials not valid it will return the authentication error only without

creating any JWT token then as a Next Step client will store this JWT token in the local storage of the browser in the

client machine and now for every future or subsequent request of data this token

will be send in the header of the every request so the client will request some data from the

API with that data request the header in the header the token is also attached now when the API will receive this token

it will check and validate the token with the help of some algorithms and if it is a valid and same JWT token then

API will send the data to the client that is why for any website we have to enter the username and password only

once because after receiving the token the only the token will be sent back not the username or password from

the client machine that is the thing that is how angular JWT token authentication work with most apis there

are other authentication technique also but this is the very popular one this is the answer of this question and if you

have any queries then please ask me in the comment section and I will be very happy to help as my name is happy in

other questions next questions we are going to see how to implement this JWT authentication in

code congratulations for completing all the questions as I always said most students study to just learn but you

don't have to just learn you also have to crack the interview and facing interviews need courage for that courage

and spirit all the best from my side and yes if if you have now not yet accepted the never give up challenge until you

crack the interview then accept the challenge Now by writing never give up in the comment section and yes don't

forget to like And subscribe the channel thank you