angular interview questionsmustmoveon.com/wp-content/uploads/2019/07/angular...angularjs application...

https://mustmoveon.com

Angular Interview Questions

Angular is one of the most popular framework for building mobile & web application.

Angular web framework is written in Type Script and is developed by Google. It has become

one of the widely used framework and hence there is a demand. This has opened up lot of

opportunities in this area. Hence below are almost 100 Angular Interview Questions which

will help you prepare for the interview.

Q 1: Does NgModules have types? If yes, what are they?

Ans. Yes, NgModules also have following types.

1. Features Module

2. Routing Module

3. Service Module

4. Widget Module

5. Shared Module

Q 2: How does angular performs multiple operations in single pipe?

Ans: Angular can perform multiple operations with single expression. It is called chaining

pipe. Sometimes we need to perform multiple operations on single input. That can be done

with adding multiple pipes on the input.

Q 3: How to define transpilling? Is it related to angular?

Ans: It is the process of converting the typescript into javascript (using Traceur, a JS

compiler). Though typescript is used to write code in the Angular applications, the code is

internally transpiled into javascript. This is very helpful in code writing for developer. It’s

introduced with angular.

Q 4: How to start an angular application ?.

Ans: main.ts is the entry point of your application, compiles the application with just-in-time

and bootstrap the application.The Bootstrap is the root AppComponent that Angular creates

https://mustmoveon.com/


and inserts into the “index.html” host web page.The bootstrapping process creates the

components listed in the bootstrap array and inserts each one into the browser (DOM).

Q 5: How to start an angular application?

Ans: main.ts is the entry point of your application, compiles the application with just-in-time

and bootstrap the application.The Bootstrap is the root AppComponent that Angular creates

and inserts into the “index.html” host web page.The bootstrapping process creates the

components listed in the bootstrap array and inserts each one into the browser (DOM).

Q 6: Is there any difference between angularJs and Javascript expressions?

Ans: Yes, there are differences. Although angular is also a framework built on javascript, still

there are differences. Like, angular expressions can be written in HTML but not with js.

Loops,Iteration and conditional statements can be used in js but not in angular. Js doesn’t

support filters.

Q 7: Is there any difference between ng routing and UI routing?

Ans: The ng routing is deep linking services and directives for angular applications whereas

the UI routing is a 3rd party module routing and is very powerful. It does everything an ng

router does as well as has many other extra functions.

Q 8: What is changed with angular 7 for angular/core?

Ans: Unlike the previous versions of Angular, the 7th major release comes with splitting in

@angular/core. This is done in order to reduce the size of the same. Typically, not each and

every module is required by an Angular developer. Therefore, in Angular 7 each split of the

@angular/core will have no more than 418 modules.

Q 9: What is SPA?

Ans: SPA is Single Page Applications. They are web applications that use only one HTML

page. As the user interacts with the page, new content is dynamically updated on that master

page. Navigation between pages happens without refreshing the whole page. Angular uses

AJAX and to dynamically update HTML elements. Angular Routing can be used to make

SPAs. The result is an application that feels more like a desktop app rather than a webpage.



Q 10: How Constructor is different than ngOnInit?

Ans: The Constructor is a default method of the class that is executed when the class is

instantiated and ensures proper initialization of fields in the class and its subclasses. ngOnInit

is a life cycle hook called by Angular to indicate that Angular is done creating the

component. We have to import OnInit in order to use like this (actually implementing OnInit

is not mandatory but considered good practice).

Q 11: How to handle Events in Angular?

Ans: Any activity (button click, mouse click, mouse hover, mouse move, etc) of a user on a

frontend/web screen is termed as an event. Such events are passed from the view (.HTML)

page to a typescript component (.ts).

Q 12: What is @Component in the metadata?

Ans: This indicates that particular class is a component. It can be used write anything about

particular functionality. It also has the ability to render the view and take action for anything

done on UI. It can also read the data from services.

Q 13: What is templateUrl in the metadata?

Ans: This is the address for the HTML linked to the component. If we have small portion of

tags then it can be directly placed component but in case we want to put it in a separate html

file then templateUrl is used to pass the address of that file.

Q 14: What is DI in angular?

Ans: DI stands for Dependency Injection. It is a powerful pattern for managing code

dependencies. DI is a way to create objects that depend upon other objects. Angular has its

own DI framework pattern, and you really can't build an Angular application without

Dependency injection (DI).

Q 15: What is @angular/upgrade?

Ans: @angular/upgrade: This is the ngUpgrade library, which allows us to migrate our

AngularJS application to Angular.



Q 16: What are the steps to configure an angular application?

Ans: To set up an Angular App we must follow certain steps as mentioned below:

1. module will be created at first.

2. A controller will be assigned to the module.

3. The module will be linked with the HTML template(i.e. UI or View) with an

angular app(ng-app).

4. The HTML template will be linked with the controller(i.e JS) with an ng-

controller directive.

Q 17: What is @angular/compiler?

Ans: This is Angular's template compiler. It takes the templates and converts them into the

code that makes your application run and render. You almost never need to actually interact

with it.

Q 18: What are angular expressions?

Ans: Angular js Expression is JavaScript alike code snippets used to bind expression data in

view or HTML. Angular expressions are written inside two curly braces.

{{x+y}}

Q 19: What is End-to-end testing in angular applications?

Ans: End-to-end (e2e) testing involves testing an application from start to finish to determine

whether all the components are working properly. It catches issues within an application

related to integration and flow.

Q 20: What is @angular/core package used for?

Ans: @angular/core: is the critical runtime parts of Angular needed by every application. It

has things like the metadata decorators (e.g. Component, Injectable), all the dependency

injection stuff, and the component life-cycle hooks like OnInit.

Q 21: What is data binding and how many ways are there in angular to do it?



Ans: Data binding is assigning the values to variables. It happens between the HTML

(template) and typescript (component). Data binding can be done in 3 ways:

(i) Property Binding (ii) Event Binding (iii) Two-Way Data Binding.

Q 22: What is angular complier and why we need it?

Ans: The Angular compiler converts our applications code (TypeScript) into JavaScript code

+ HTML before browser downloads and runs that code. It converts whole code into 3 to 4

files which we use to render the page in browser. Launching typescript code directly in

browser is not possible.

Q 23: What is ngOnChanges and when should we use it?

Ans: Responds when angular sets its data-bound property which receives the current and

previous object values. It can be used whenever there is a requirement to take any action on

object value change.

Q 24: How to transfer data between components?

Ans: First, we have to create a service. Service is used to share the data between components

in Angular in a very easy and fast way. Service can share the data at component as well as

module level. Angular application makes call to webservices through angular service and

store the data.

Q 25: How does parent and child interact in angular?

Ans: When passing data from Parent to Child component, you can use the @Input decorator

in the Child component. When passing data from Child to Parent component, you can use the

@Output decorator in the Child component.

Q 26: What are directives and when to use it?

Ans: Directives are special markers on a DOM element that tell the html compiler to attach a

specified behavior to the DOM element. Directives start with ng-prefix. Some of the built-in

directives include ngInit, ngApp, ngRepeat, ngModel, ngBind and ngClass.



Q 27: What is a cookie and how to use it in angular?

Ans: A cookie is a small piece of data sent from a website and stored on the user's machine

by the user's web browsers while the user is browsing. In angular also we can read/write the

information from cookie. It is done with the help of javascript methods.

Q 28: What is AOT in angular?

Ans: Ahead-of-Time (AOT) – It is one of the angular compilers and compiles our app at

build-time (compiles while running). As it complies the application ahead of time so it makes

the application loading little faster and increases the build time. It is good for application

where requirement is to load the first page sooner.

Q 29: What is the sequence of angular hooks lifecycle?

Ans: OnChange() - OnInit() - DoCheck() - AfterContentInit() - AfterContentChecked() - Aft

erViewInit() - AfterViewChecked() - OnDestroy().

Q 30: What is @angular/platform-browser used for?

Ans: This is everything dom and browser related, especially pieces that help render the dom.

This is the package that includes bootstrapStatic, which is the method that we use for

bootstrapping our applications for production builds.

Q 31: What does ngOnDestroy used for?

Ans: It cleanup just before Angular destroys the directive/component. Unsubscribe

observables and detach event handlers to avoid memory leaks. If there is a requirement to

perform any operation just before the component is destroyed then this method is the best

place to do it.

Q 32: What Is HttpClient in Angular?

Ans: HttpClient is performing HTTP requests and responses.

Most of all web applications communicate with backend services over the HTTP protocol

and all modern browsers support two different APIs for making HTTP requests i.e.



1. XMLHttpRequest interface

2. fetch() APIs

Q 33: How do Observables differ from Promises?

Ans: As soon as a promise is made, the execution takes place. However, this is not the case

with observables because they are lazy. This means that nothing happens until a subscription

is made. While promises handle a single event, observable is a stream that allows passing of

more than one event. A callback is made for each event in an observable.

Q 34: What is JIT in angular?

Ans: Just-in-Time (JIT) – it is one of the angular compilers. It compiles our app in the

browser at runtime (compiles before running). It reduces build time but increases the time of

application loading. This is good for small applications but for big applications it may

increases the load time.

Q 35: What Is Parameterizing Pipe?

Ans: A pipe can accept any number of optional parameters to achieve output. The parameter

value can be any valid template expressions. To add optional parameters, follow the pipe

name with a colon (:). Its looks like- currency: USD.

Q 36: What is ng-If directive and what is the use of it?

Ans: ng-if directive is used as if clause which removes the HTML element if the expression

becomes false.

Syntax

<element ng-if=”expression”></element>

Q 37: What is routing and how angular routes between components?

Ans: An Angular router is responsible for interpreting a browser URL as an instruction to

navigate to a client-generated view. The router is bound to links on a page to tell Angular to

navigate the application view when a user clicks on it. @angular/router package has the

information about the routing.



Q 38: What Is PathLocationStrategy?

Ans: A LocationStrategy is used to configure the location service that represents its state in

the path of the browser's URL and the PathLocationStrategy is a default routing

strategy.When you are using the PathLocationStrategy, you must provide APP_BASE_HREF

in the module or base element in the app document.

Q 39: What is @Input in angular and how it works?

Ans: @Input decorator binds a property within one component (child component) to receive

a value from another component (parent component). This is one-way communication from

parent to child. The component property should be annotated with a @Input decorator to act

as input property. A component can receive a value from another component using

component property binding.It can be annotated at any type of property such as number,

string, array or user-defined class. To use an alias for the binding property name we need to

assign an alias name as.@Input(alias)

Q 40: What is the purpose of using package.json in the angular project?

Ans: With package.json, it is easy to manage the dependencies of the project. If we are using

typescript in the angular project then we can mention the typescript package and version of

typescript in package.json.

Q 41: What is @angular/common?

Ans: These are the commonly needed services, pipes, and directives for Angular. This

package also contains the new HttpClient as of version 4.3, so we no longer need

@angular/common.

Q 42: What is ViewEncapsulation?

Ans: ViewEncapsulation determines whether the styles defined in a particular component

will affect the entire application or not. It has 3 types.

Emulated – Styles used in other HTML spread to the component.

Native – Styles used in other HTML doesn’t spread to the component.

None – Styles defined in a component are visible to all components of the

application.



Q 43: What is ng-show directive?

Ans: ng-show directive is used to show the HTML element if the expression becomes true.

And if the expression becomes false then the HTML element will be hidden.

Syntax : <element ng-show=”expression”></element>

Q 44: How to update the view if data model changes outside ‘zone’?

Ans: There are multiple ways to do it.

1. Using the ApplicationRef.prototype.tick method, which will run change

detection on the entire component tree.

2. Using NgZone.prototype.run method, which will also run change detection on

the entire tree. The run method under the hood itself calls tick, and the

parameter takes the function you want to perform before tick.

3. Using the ChangeDetectorRef.prototype.detectChanges method, which will

launch change detection on the current component and its children.

Q 45: What is link function? Is it same as compile?

Ans: The link function combines the directives with a scope to produce a live view. It is

different than compile. Compile function is responsible for template DOM manipulation as

well as the collection of all the directives.

Q 46: What is Component in Angular?

Ans: A web page in Angular has many components involved in it. A Component is basically

a block in which the data can be displayed on HTML using some logic usually written in

typescript.

Q 47: What is subscribe method and when to use it?

Ans: It is a method which is subscribed to an observable. Whenever the subscribe method is

called, an independent execution of the observable happens. Observable cannot work without

subscribe.



Q 48: What is a shared module?

Ans: A Shared module serves as a generic module for all modules, components, directives,

pipes, etc., which are not required to be in a single copy for the application but need to be

imported into many different modules.

Q 49: What is ng-hide directive?

Ans: ng-hide directive is used to hide the HTML element if the expression becomes false.

Syntax

<element ng-hide=”expression”></element>

Q 50: What is core module?

Ans: A Core module is a place to store services that you need to have in the form of singleton

for the entire application (for example, a user authorization service with data storage about

it).

Q 51: Which package is broken in angular 7 ?

1. @angular/core

2. @angular/http

3. @angular/broken

4. @angular/service

Ans: 1

Q 52: What is the name of the element where HTML content will live?

1. .html file with name as a component

2. It is a tag with user defined name

3. selector

4. This is a metadata

Ans: 3

Q 53: What makes availability of other module components in a current module?



1. package

2. declaration

3. providers

4. imports

Ans: 4

Q 54: Does angular support two-way binding?

1. False

2. True

3. With a binding package only

4. Only angular 7 supports it

Ans: 2

Q 55: Where do we pass services required for a component?

1. In Imports

2. In module

3. In provides

4. No need to provide anywhere, services are accessible in every component.

Ans: 3

Q 56: Which one is not a valid pipe in angular?

1. DatePipe

2. CurrencyPipe

3. SlicePipe

4. StringPipe

Ans: 4

Q 57: Which directive is used to initialize an angular app?

1. Ng-app

2. Ng-controller

3. Ng-if

4. Ng-model



Ans: 1

Q 58: Which one is a valid compiler?

1. Away of time (AOT)

2. Just in time (JIT)

3. Just Into Time (JIT)

4. Ahead of Transfer (AOT)

Ans: 2

Q 59: Which variable is declared with ‘#’ symbol?

1. ‘#’ indicates that it is a child variable.

2. ‘#’ is used for comments

3. Integer type

4. Template reference

Ans: 4

Q 60: Pure pipe works on the following?

1. Primitive types

2. Non-Primitive types

3. Both Primitive and non-primitive

4. It doesn’t care about the type; it works for all even user defined and enum.

Ans: 3

Q 61: Which browser is not supported by angular?

1. Mozilla

2. Chrome

3. Internet Explorer

4. Romio

Ans: 4

Q 62: What is lazy loading?



1. This is a process to load the application little slowly.

2. As the name suggest, it is a package which loads really slowly.

3. This is a method that used to load JavaScript components asynchronously when a

specific route is activated.

4. It is a loading pop-up which displays a running wheel during the processing.

Ans: 3

Q 63: Who puts the root component in index.html?

1. bootstrap

2. ts

3. ts

4. module.ts

Ans: 1

Q 64: Which one is not a valid directive in angular?

1. Component Directives

2. Structural Directives

3. Attribute Directive

4. Parametrized directive

Ans: 4

Q 65: How to generate a module in angular?

1. Npm generate module_name

2. Ng g module module_name

3. Ng create module module_name

4. Npm module module_name

Ans: 2

Q 66: Which is good to optimize the angular application?

1. Consider lazy loading

2. Run ng optimize

3. Build with webpack

4. Use angular 3 instead of 6/7



Ans: 1

Q 67: What is an Injector?

1. It injects the template in component.

2. It is a service locator.

3. This injects typescript in webpack.

4. This is used in bootstrap not in angular.

Ans: 2

Q 68: Command to build an application for production?

1. Ng build -production

2. Npm build -productionReady

3. Ng build –prod –aot

4. Npm webpack -prod

Ans: 3

Q 69: Which one is invalid styling form for ngModel to CSS classes?

1. Ng-pristine

2. Ng-divine

3. Ng-dirty

4. Ng-invalid

Ans: 2

Q 70: Is angular a mvc framework?

1. Yes

2. No

3. It depends on the design

4. Decided by the developer

Ans: 1



Q 71: Which one is a angular testing dependency?

1. Groovy

2. NGTest

3. Karma

4. Testing

Ans: 3

Q 72: Which one is not a ngModule?

1. Service Module

2. Widget Module

3. Shared Module

4. Ionic Module

Ans: 4

Q 73: Which one is full-form for SPA?

1. Server Page Application

2. Single Page Application

3. Shared Page Application

4. Simple Page Application

Ans: 2

Q 74: Does angular support singleton design pattern?

1. Yes

2. No

3. Only for components

4. Only angular 6 supports it

Ans: 1

Q 75: What is the command to set the cookie?

1. add(“cookieName”, “cookieValue”);

2. put(“cookieName”, “cookieValue”);

3. set(“cookieName”,"cookieValue");



4. New Cookie(“cookieName”,"cookieValue");

Ans: 3

Q 76: Can we write our own custom pipe in angular?

1. Yes

2. No

3. Yes, only angular 6 allows it.

4. Yes, you can use only for loops in custom pipes.

Ans: 1

Q 77: How to create a class in angular?

1. Ng create class ClassName

2. Ng generate class ClassName

3. Ng init class ClassName

4. No way to create a class with commands.

Ans: 2

Q 78: Which set of brackets are valid in angular?

1. {[]}

2. (~~)

3. (<>)

4. {{}}

Ans: 4

Q 79: Whose project is traceur compiler?

1. Google

2. Microsoft

3. Angular

4. Amazon

Ans: 1



Q 80: Which one is not a part of angular?

1. Component

2. Module

3. Threading

4. Pipe

Ans: 3

Q 81: is angular compatible with all browsers?

1. No

2. Yes

3. No, it supports at only Chrome and Mozilla.

4. No, it doesn’t support the pocket browser

Ans: 2

Q 82: What does ngFor directive do?

1. Iterate all the items of the list.

2. This directive initiate the node module.

3. This directive it to apply CSS on elements.

4. Used for conditional operations.

Ans: 1

Q 83: Which language is supported by angular?

1. Php

2. JavaScript

3. Java

4. TypeScript

Ans: 4

Q 84: Does angular support enum data types?

1. Yes

2. No

3. Yes, it supports enum with length 10.



4. Supported only for mobile applications.

Ans: 1

Q 85: What is the command to get the cookie?

1. value(“cookieName”);

2. read(“cookieName”);

3. get(“cookieName”);

4. New Cookie().pull(“cookieName”);

Ans: 3

Q 86: What will happen if a <script> tag is added in template?

1. Angular will recognize and sanitize it.

2. Angular will throw error at run time.

3. Error will be thrown during build.

4. Angular will consider it as a string and display on screen.

Ans: 1

Q 87: Which one is life cycle hook?

1. Ng

2. NgBuild()

3. NgFor()

4. NgOnInit()

Ans: 4

Q 88: ngZone is wrapper for which file?

1. js

2. js

3. js

4. js

Ans: 2



Q 89: What is the syntax for constructor?

1. No Constructor in angular.

2. Class_name(){}

3. Constructor(){}

4. NgInit(){} works as constructor.

Ans: 3

Q 90: What is an observer?

1. It is an interface for a consumer of push-based notifications delivered by an

Observable.

2. it is used to monitor the streaming response from the REST services.

3. It is used to handle the promise.

4. It is not a valid term in Angular.

Ans: 1

Q 91: Why Typescript for angular?

1. JavaScript is not fully object oriented.

2. TypeScript is super-set of javascript.

3. Typescript can work on any browser.

4. It is easy to convert from TypeScript to Java.

Ans: 2

Q 92: Broadcasting to a list of subscriber called?

1. Mob-Subscription

2. Multi-Threading

3. Multi-tasking

4. Multi-casting

Ans: 4

Q 93: how to create directive with CLI?

1. Ng create directive

2. Ng generate directive



3. Ng put directive

4. Ng push directive

Ans: 2

Q 94: What is dynamic component?

1. Those component for which location is not defined at build time.

2. Components which change very frequently.

3. Components which contains the information returned by REST services.

4. Which don’t have any hard coded value.

Ans: 1

Q 95: What is the command to clear the cookie?

1. add(“cookieName”, “cookieValue”);

2. put(“cookieName”, “cookieValue”);

3. set(“cookieName”,"cookieValue");

4. New Cookie(“cookieName”,"cookieValue");

Ans: 3

Q 96: What is parametrized pipe?

1. A pipe which takes parameters as input and perform operations.

2. There is nothing like parametrized pipe in angular.

3. User defined pipes are called parametrized.

4. Pipe handles REST service response called parameterized.

Ans: 1

Q 97: What is the command to install angular cli?

1. Node install @angular/cli

2. Ng update @angular/cli

3. npm install -g @angular/cli@latest

4. Npm install @angular/console

Ans: 3



Q 98: What is the Syntax for decorator?

1. Decorate () {}

2. @() optional parameters.

3. @Component (#Decorator)

4. @{}

Ans: 2

Q 99: Do we need to bootstrap custom elements?

1. No

2. Sometimes

3. Yes

4. No, if they are part of app.ts

Ans: 1

Q 100: What is rxJs?

1. This is nothing in angular, it is a java terminology.

2. It is a user defined js file

3. It is a library of regular expressions.

4. it is a library for composing asynchronous and callback-based code in a functional,

reactive style using Observables

Ans: 4


angular interview questionsmustmoveon.com/wp-content/uploads/2019/07/angular...angularjs application...

Documents