Interview Questions

Angularjs Interview Questions and Answers

AngularJS Interview Questions and Answers

AngularJS Interview Questions and Answers

AngularJS Interview Questions and Answers for beginners and experts. List of frequently asked AngularJS Questions with answers by Besant Technologies.
We hope these AngularJS interview questions and answers are useful and will help you to get the best job in the networking industry. This AngularJS interview questions and answers are prepared by AngularJS Professionals based on MNC Companies expectation. Stay tuned we will update New AngularJS Interview questions with Answers Frequently. If you want to learn Practical AngularJS Training then please go through this Angular JS Training in Chennai

Besant Technologies supports the students by providing AngularJS interview questions and answers for the job placements and job purposes. AngularJS is the leading important course in the present situation because more job openings and the high salary pay for this AngularJS and more related jobs. We provide the AngularJS online training also for all students around the world through the Gangboard medium. These are top AngularJS interview questions and answers, prepared by our institute experienced trainers.

Best AngularJS Interview Questions and Answers

Here is the list of most frequently asked AngularJS Interview Questions and Answers in technical interviews. These Angular JS questions and answers are suitable for both freshers and experienced professionals at any level. The AngularJS questions are for intermediate to somewhat advanced AngularJS professionals, but even if you are just a beginner or fresher you should be able to understand the AngularJS answers and explanations here we give.

In this post, you will get the most important and top AngularJS Interview Questions and Answers, which will be very helpful and useful to those who are preparing for jobs.

AngularJS is the open source JavaScript framework and mainly used for front-end web applications and it’s completely used for Single Page Applications. AngularJS training in Chennai by Besant Technologies is the best training Institute and having more than 15+ branches. Besant Technologies has most experienced trainers and IT professional tutors who are having work experience as the developer, designers, and debuggers. Our trainers have prepared this top and best AngularJS interview questions and Answers.

These AngularJS interview questions and answers are mainly and completely prepared with complete analysis and these questions are very much important and also these are the questions which were asked in the interview in top MNC companies.

Q1) What is AngularJS?
  • It’s a framework and platform
  • It’s written in TypeScript
  • It’s use building a client application
  • It’s using HTML and TypeScript to build application
  • It has many future modules
Q2) Modules

Angular Application is defined by set of NgModules, the basic building block of Angular application NgModules, which provides compilation context of components and collecting related code into functional sets

  • Angular Application always has at least a root module and root component then enables bootstrapping
  • NgModules can import functionality from other NgModules
  • This technique lets you take advantage of lazy-loading
  • Every Angular app has at least one NgModuleclass, the root module, conventionally named AppModule
  • NgModuleis a decorator function that takes a single metadata object whose properties describe the module
  • The NgModule — a class decorated with @NgModule — is a fundamental feature of Angular.
Q3) Components
  • Every Angular application has at least one component
  • the root component that connects a component hierarchy with the page DOM
  • Each component defines a class that contains application data and logic and is associated with an HTML template that defines a view to be displayed in a target environment.
  • The @Component decorator identifies the class immediately below it as a component and provides the template and related component-specific metadata.
Q4) The most important properties are

1 – Declarations

2 – Exports

3 – Imports

4 – Providers

5 – Bootstrap

Q5) Angular has three set of view classes

1 – Components

2 – Directives

3 – Pipes

Q6) Angular Libraries
  • Angular Ships are collection JavaScript modules
  • Each Libraries name begin with the @angularprefix
  • import{Component} from ‘@angular/core’;


  • A component controls a patch of the screen called a view.
  • @Componentdecorator, which identifies the class immediately below it as a component class
  • The @Componentdecorator takes a required configuration object with the information Angular needs to create and present the component and its view.
  • Component configuration option
  • Selector
  • templateUrl
  • providers
  • The template, metadata, and component together describe a view.


  • A component’s view with its companion template. A template is a form of HTML that tells Angular how to render the component.


  • Metadata tells Angular how to process a class.
  • Apply other metadata decorators in a similar fashion to guide Angular behavior. @Injectable, @Input, and @Output are a few of the more popular decorators
Q7) What are the Directives?

Directive changes the appearance or behavior of a DOM element,

There are three kinds of directives

  • Components

Components are the most common of the three directives, we have seen more details.

  • Structural directives

Structural directives are responsible for HTML layout. They shape or reshape the DOM’s structure, typically by adding, removing, or manipulating elements.

  • Attribute directives

An attribute directive minimally requires building a controller class annotated with @Directive Decorator

Q8) What is @Inputs and @Output in Angular 5?

@Inputs – > It is an Input Decorator, and use to receive the input to component

@Output-> It is an Output Decorator, and use to emit the Output to which component use the corresponding thing

Example of @Input and @Output Decorator


selector: ‘app-list’,

templateUrl: ‘./list.component.html’,

styleUrls: [‘./list.component.css’]


export class ListComponent implements OnInit {

selectedFieldValue: string;

@Input(‘inputData’) inputData: any = [];

@Output() row = new EventEmitter<any>();


<app-list required [inputData]=’inputObj’(row)=selectedObj($event)></app-list>

Q9) How do components communicate with each other?

The components are interacting with the help of decorator @Input, The parent-child relationship establishing by the mentioned decorator

Q10) What is router-outlet directive in Angular 5?

A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed.


The routing Module will be displayed in a router-outlet tag in the corresponding component.

Q11) Explain component life cycle in Angular?



-Create and render children

-Check for bound data changes and re-render


Q12) List the types of Data Binding supported by Angular5?

String Interpolation

Property Binding

Event Binding


Q13) Explain Webpack?

Webpack is module bundler for Angular2 or above. It bundles, minifies and transpiles an Angular application.

Q14) Explain NPM

NPM stands for node package manager. It is used for installing dependencies for javascript packages.

Q15) What is Angular CLI? List the command to install Angular CLI?

Angular CLI is Command Line Interface for Angular that runs Webpack. You can use npm install -g @angular/CLI command to install angular CLI.

Q16) How to create a new project in angular js using CLI?

After installing Angular CLI run ng new project-name command to create a new Angular project.

Q17) What are Decorators?

Decorators are functions that adds metadata to class members and functions. It was proposed in ES2016 and implemented in Typescript.

Q18) List the types of Data Binding supported by Angular5?

Angular 5 supports four types of Data Binding They are
String Interpolation
Property Binding
Event Binding

Q19) How to run Angular5 application locally during development?

ng serve command is used to run Angular5 application locally during development. To start development server on specific port ng serves -p aPortNumber command is used.

Q20) What an Angular5 component made of? How do you generate a new component?

Angular2 component is made of a Component decorator and a component definition of a class.
ng generate component component_name command is used to generate a component in Angular2.

Q21) How do we import a module in Angular5?

Simply use below syntax to import a module in Angular5.
import { ModuleName } from ‘someWhere’;

Q22) Explain $event in Angular5?

In Angular5 $event is a reserved keyword that represents the data emitted by an event (event data).
It is commonly used as a parameter for event based methods.

Q23) What do double curly brackets are used in Angular5?

double curly brackets are used form data interpolation in Angular5.

Q24) What is *ngFor directive used for?

*ngFor directive is used for Iterating over a list of items and for Generating a new DOM element for each one.

Q25) What is transpiling?

Transpiling is a process of converting code from one language to another. In Angular, Traceur compiler is used for converting TypeScript to JavaScript so that browsers can understand.

Q26) What is HttpClient?
  • Most front-end applications communicate with backend services over the HTTP protocol
  • The HttpClient in @angular/common/HTTP offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers
  • HttpClient include testability features,
  • typed request and response objects,
  • request and response interception,
  • Observable APIs,
  • streamlined error handling
  • HttpClient supports mutating requests, that is, sending data to the server with other HTTP methods such as PUT, POST, and DELETE.

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

Q27) What is two different type of HTTP requests by supporting by modern browsers?
  • XMLHttpRequest interface
  • fetch() AP
Q28) What is Routing in Angular 5?

The Angular Router enables navigation from one view to the next view

It can interpret a browser URL as an instruction to navigate to a client-generated view

It can pass optional parameters along to the supporting view component that help it decide what specific content to present

You can bind the router to links on a page and it will navigate to the appropriate application view when the user clicks a link

You can navigate imperatively when the user clicks a button

Selects from a drop box, or in response to some other stimulus from any source. And the router logs activity in the browser’s history journal so the back and forward buttons work as well.

import { Routes, RouterModule } from ‘@angular/router’;

Q29) What is Router Configuration?

A routed Angular application has one singleton instance of the Router service. When the browser’s URL changes, that router looks for a corresponding Route from which it can determine the component to display.

Configures the router via the RouterModule.forRoot method, and adds the result to the AppModule’simports array.

The Routes array of routes describes how to navigate. Pass it to the router module.forRoot method in the module imports to configure the router.

Each Route maps a URL path to a component

There are no leading slashes in the path

The router parses and builds the final URL for you, allowing you to use both relative and absolute paths when navigating between application views.

Router path can define by path variable (Example: id)

The data property is accessible within each activated route

Use it to store items such as page titles, breadcrumb text, and other read-only, static data.

The empty path in the fourth route represents the default path for the application

The place to go when the path in the URL is empty, as it typically is at the start. This default route redirects to the route for the URL and, therefore, will display the Component

The ** path in the last route is a wildcard. The router will select this route if the requested URL doesn’t match any paths for routes defined earlier in the configuration. This is useful for displaying a “404 – Not Found” page or redirecting to another route.

The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes

If you need to see what events are happening during the navigation lifecycle, there is the enable tracing option as part of the router’s default configuration. This outputs each router event that took place during each navigation lifecycle to the browser console. This should only be used for debugging purposes. You set the enable tracing: true option in the object passed as the second argument to the router module.forRoot() method.

Q30) What is Router Outlet?

When the browser URL Changing, the router matches that URL to the route path and displays the Component after a RouterOutlet that you’ve placed in the host view’s HTML.


Q31) What is Router Link?

When the browser URL Changing, the router matches that URL to the route path and displays the Component after a RouterOThe RouterLink directives on the anchor tags give the router control over those elements.

The navigation paths are fixed, so you can assign a string to the routerLinktlet that you’ve placed in the host view’s HTML.

Had the navigation path been more dynamic, you could have bound to a template expression that returned an array of route link parameters. The router resolves that array into a complete URL.

The RouterLinkActive directive on each anchor tag helps visually distinguish the anchor for the currently selected “active” route

<button routerLink=”new” routerLinkActive=”active”>Navigate</button>

Q32) What is Router State?

After the end of each successful navigation lifecycle, the router builds a tree of ActivatedRoute objects that make up the current state of the router.

You can access the current RouterState from anywhere in the application using the Router service and the routerState property.

Each ActivatedRoute in the RouterState provides methods to traverse up and down the route tree to get information from parent, child and sibling routes

Q33) What is Active Route?

The route path and parameters are available through an injected router service called the ActivatedRoute

Q34) What is Properties of Active Router?
  • url
  • data
  • paramMap
  • queryParamMap
  • fragment
  • outlet
  • routeConfig
  • parent
  • firstChild
  • children
Q35) What is Router Events?

The Router emits navigation events through the Router. events property.

These events range from when the navigation starts and ends to many points in between

Q36) What are the types of Router Events?
  • navigation start
  • RoutesRecognized
  • RouteConfigLoadStart
  • RouteConfigLoadEnd
  • NavigationEnd
  • NavigationCancel
  • NavigationError
Q37) What is DI (Dependency Injection)?

Dependency Injection (DI) is a way to create objects that depend upon other objects. A Dependency Injection system supplies the dependent objects (called the dependencies) when it creates an instance of an object.

Q38) What is Hierarchical Dependency Injectors?

Angular has a Hierarchical Dependency Injection system. There is actually a tree of injectors that parallel an application’s component tree

Q39) What is Angular 5?

Ans : Angular is a framework for building client applications in HTML and either JavaScript or a language like a TypeScript that compiles to JavaScript.It is best suited for Single Page Application(SPA).

Q40) What is name of a special function of class which gets called when object is created and it’s syntax in Typescript?

Ans : constructor() {}

Q41) _____ keyword is used to access class’s member variables and functions inside class member function.

Ans : this

Q42) In Angular, you can pass data from parent component to child component using

Ans : @Input

Q43) In Angular, you can pass data from child component to parent component using

Ans : @Output

Q44) Write a syntax for ngFor with < li > example

Ans : < li *ngFor=”let val of vals”>{{val}}< /l i >

Q45) We must import ____________ module to use (ngModel)

Ans : FormsModule

Q46) Import ____________ module to use reactive form

Ans : ReactiveFormsModule

Q47) How to create local HTML reference variable

Ans :

Q48) In routing, which tag is used to show selected route component dynamically

Ans :

Q49) Which method of RouterModule for providing all routes in AppModule

Ans : RouterModule.forRoot

Q50) Write an example to define custom event

Ans : objEvent = new EventEmitter();

Q51) Write a syntax to bind custom CSS class

Ans :

Q52) What is angualr cli, how to install it

Ans : The Angular CLI (Command Line Interface) is a tool to initialize, develop, scaffold and maintain Angular applications.

npm i @angular/cli -g

Q53) What Is Modules

Ans : The NgModule is a TypeScript class marked by the @NgModule decorator. The Angular module helps you to organize an application into associative blocks of functionality.

Q54) What is component?

Ans : omponents are the most basic building block of a UI in Angular applications and it controls views (HTML/CSS). They also communicate with other components and services to bring functionality to your applications.

Q55) What is Dependency Injection?

Ans : Dependency Injection is a powerful pattern for managing code dependencies. DI is a way to create objects that depend upon other objects.

Q56) What is service?

Ans : A service is used to provide an easy way to share the data between the components and with the help of dependency injection (DI) you can control how the service instances are shared.
Services use to fetch the data from the RESTful API.

Q57) What Is HttpClient in Angular?

Ans : HttpClient is performing HTTP requests and responses.The HttpClient is more modern and easy to use the alternative of HTTP.

Q58) How To Angular 5 generate Component?

Ans : ‘ng generate component my-new-component’ or in short ‘ng g c my-new-component’

Q59) How To Angular 5 generate Directive?

Ans : ‘ng generate directive my-new-component’

Q60) How To Angular 5 generate Pipe?

Ans : ‘ng g pipe my-new-pipe’

Q61) How To Angular 5 generate Service?

Ans : ‘ng g service my-new-service’

Q62) How To Angular 5 generate Class?

Ans : ‘ng g class my-new-class’

Q63) How To Angular 5 generate Module?

Ans : ‘ng g module my-module’

Q64) What Is the Angular Compiler?

Ans : The Angular offers two ways to compile our application code-
Just-in-Time (JIT) – JIT compiles our app in the browser at runtime (compiles before running).
Ahead-of-Time (AOT) – AOT compiles our app at build-time (compiles while running).

Q65) Some of the the life cycle hooks of Angular 5 application?

Ans : ngOnChanges,ngOnInit,ngDoCheck,ngOnDestroy,ngAfterContentInit,ngAfterContentChecked,ngAfterViewInit,ngAfterViewChecked

Q66) What is Lazy Loading and How to enable Lazy Loading

Ans : Lazy loading speeds up the application initial load time by splitting the code into multiple bundles and loading them on demand.
Ex : {path : ‘admin’, loadChildren: ‘./admin/admin.module#AdminModule’},

Q67) What are the core differences between Observables and Promises?

Ans :Promises:
returns a single value
not cancellable
works with multiple values over time
supports map, filter, reduce and similar operators

Q68) What are differences between Constructors and OnInit?

Ans :Constructors:-
1. The constructor is a default method runs when a component is being constructed.
2. The constructor is a typescript feature and it is used only for a class instantiations.
3. The constructor called first time before the ngOnInit().
1. The ngOnInit event is an Angular 5 life-cycle event method that is called after the first ngOnChanges and the ngOnInit method is use to parameters defined with @Input otherwise the constructor is OK.
2. The ngOnInit is called after the constructor and ngOnInit is called after the first ngOnChanges.

Q69) Explain package.json file.

Ans : All npm packages contain a file, usually in the project root, called package.json – this file holds various metadata relevant to the project.

Q70) What is routing?

Ans : Routing helps in directing users to different pages based on the option they choose on the main page. Hence, based on the option they choose, the required Angular Component will be rendered to the user.

Q71) What is the difference between Angular 5 components and directives?

Ans : A component is a directive with a view whereas a directive is a decorator with no view. A component can use pipes whereas directives can’t.

Q72) What are Pipes in Angular 5?

Ans : Pipes in Angular 5 are used in templates in order to convert them into a content that is user-friendly and readable one within the interpolation({{}}).
“|” denotes the pipe

Q73) What Are Inbuilt Pipes in Angular?

Ans :

Q74) What Is Chaining Pipe?

Ans :The chaining Pipe is used to perform the multiple operations within the single expression. This chaining operation will be chained using the pipe (I).
Ex : {{ birthday | date | uppercase}}

Q75) Optional parameter syntax?

Ans : Fun(name?:string)

Q76) Directive can listen to host/target events?

Ans : @HostListener

Q77) wild card for page not found route?

Ans : **

Q78) To use HttpClient component you need to import below module

Ans : HttpClientModule

Q79) What is ViewEncapsulation?

Ans :ViewEncapsulation decides whether the styles defined in a component can affect the entire application or not. There are three ways to do this in Angular:
Emulated: styles from other HTML spread to the component.
Native: styles from other HTML do not spread to the component.
None: styles defined in a component are visible to all components.

Q80) What does a Subscribe method do in Angular?

Ans :It is a method which is subscribed to an observable. Whenever the subscribe method is called, an independent execution of the observable happens.

Q81) What is Observable?

Ans : Observable is a data stream over time, which is a key concept of Functional Reactive Programming. It can be subscribed to get the data.

Q82) What is Rxjs?

Ans : RxJS or Reactive Extensions for JavaScript is a library for transforming, composing, and querying streams of data. We mean all kinds of data too, from simple arrays of values, to series of events (unfortunate or otherwise), to complex flows of data.

Q83) What will be the output of below program?
function fun(input: boolean) {
let a = 100;
if (input)
let b = a + 1;
return b;
return b;
Reference error on b

Q84) What is Semantic Versioning and Package-Lock JSON?

Semantic Versioning (SEMVER), when we are building an application with other applications interface, SEMVER communicate how the changes you make will affect the third party’s ability to interact with your application.

Package-lock.json: This is added in NPM version 5.x.x and higher, when we are installing modules from package.json sometimes it may install latest version of module without removing earlier installed version, package-lock.json make sure to avoid above mentioned situation.

Q85) What are difference between Angular 2 and 4 in HTTP module declaration?

HTTP module is replaced with HTTPClient in Angular 4 which had few performance improvements listed below:

  • The HTTP Interceptors implementation allows middleware logic to be inserted into the pipeline.
  • HTTP request/response objects changed to Immutable.
  • Both request upload and response download implemented Progress events.
Q86) What are different developer tools available to debug UI application?

To debug Angular code we mostly use Browser Development tools like Chrome, Firefox, Edge and etc.

Node JS Inspector to debug node requests.

Postman helps to troubleshoot application requests and response from backend.

JS Bin is popular JavaScript debugging tool which supports collaborative debugging.

JSON Formatter and Validator to validate json data.

Webpack is npm package bundling tool which helps developers to bundle all declared dependencies.

SessionStack is a monitoring software that provides you with a set of monitoring tools.

Q87) Name all Angular life cycle hooks in sequential based on initial component loading?

Below starting Angular Life Cycle the typescript compiler will start first.

  • ngOnInit
  • ngOnChanges
  • ngDoCheck
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked
  • ngOnDestroy
Q88) What is service and component, key differences between them?

Component is just like a class file with added features such as binding HTML content, importing necessary dependencies like SASS and Services.

Services are simple classes with functions and members not html content. Services is a singleton property which reduce duplication of code and to access or store data.

When we access the method of one component into another need to create the object and access it. Because of Service is Singleton, @Injectable indicates methods of Service by Injecting Service in Constructor() i.e. only one object instance of each service is created for whole application.

Q89) What is ChangeDetector in Angular, will it call implicitly or explicitly?

A change-detection tree collects all views that are to be checked for changes. initiate changedetection method and explicitly mark views as dirty, which means they need to be changed and rerendered.

Q90) What is Angular material design?

Angular Material is a collection of Design components for Angular. Angular Material Design can be implemented easily by using below components:

  • @angular/material:materialDashboard: Create a card-based dashboard component
  • @angular/material:materialTable: Create a component that displays data with a data-table
  • @angular/material:materialNav: Create a component with a responsive sidenav for navigation
Q91) How compile-time and runtime configuration works in Angular?

Compile-time configuration means that you compile your configuration into your app, at the time when you compile and bundle it. In Angular CLI we already have a preconfigured setup for having such compile-time configuration options. Inside the environments folder we have environment.ts and file which can be configured as per our project setup.

Runtime configuration is useful when you need to be able to change your app’s configuration settings or maybe you even expose them via an API. When we run application, HTTP request will call to the JSON file and read the settings.

Q92) What are the new changes in looping implementation?

*ngIf and *ngFor loops are changed syntactically from Angular 4 which have significant improve in performance. Below are the changes:

*ngIf: <div *ngIf=”isLoggedIn; else loggedOut”> </div>

<ng-template #isLoggedIn> You logged In. </ng-template>

<ng-template #loggedOut> You logged out. </ng-template>

*ngFor : <ng-template ngFor let-item [ngForOf]=”items” let-i=”index”> </ng-template>
Q93) What are different ways to communicate between the components?

We basically have four ways to communicate between the components:

  • Parent to Child: Sharing Data via Input.
  • Child to Parent: Sharing Data via ViewChild.
  • Child to Parent: Output() and EventEmitter to share data.
  • Unrelated Components: Sharing Data with a Service.
Q94) What are different building blocks of Angular?

Below are the main building blocks of Angular:

  • Module
  • Component
  • Metadata
  • Template
  • Data Binding
  • Services
  • Directives
Q95) What are different ways to save data locally in Angular?

We can save data in two ways: Local Storage and Session Storage.

Q96) Which hook will call first while loading angular component?

In initial loading Typescript constructor will call first and then Angular ngOninit() will call.

Q97) How to implement custom pipes in Angular2?

We need to declare @Pipe decorator and implement PipeTransform to the class then declare transform() function with necessary arguments and import custom pipe file to the Application main Module as a Service.

In component we can view Pipe in HTML (View) as {{ duplicateData | unique }}

Q98) What is difference between directive and component?

Directives: Directives add behaviour to an existing DOM element or an existing component instance.

Component: A component, rather than adding/modifying behavior, actually creates its own view (hierarchy of DOM elements) with attached behavior.

Q99) What are different frameworks used for unit testing in Angular?

We have lot of frameworks for unit testing, below are the quite often used:

  • Mocha
  • Jasmine
  • Karma
  • Aurelia
Q100) How to inject a service in Angular Component?

Declare Service file in component class constructor and if service is not imported in application main module then need to import under Providers as Metadata.

Q101) What are frequently used methods to convert JSON data?

JSON.stringify: It will convert the object to String format

JSON.parse: It will convert again data to JSON object.

Q102) Can we use multiple modules in Angular 1 for the same project, justify your explanation?

Yes, we can use multiple modules but need to declare one module as a main one from where initialize of application starts.

Q103) What are different status in Angular Forms?

In Angular, the following four statuses are commonly used by forms:

  • Valid – It will check state of the validity of all form controls and return true if they are valid.
  • Invalid – It will check state of the validity of all form controls and return true if they are invalid.
  • Pristine – It will check state of the validity of all form controls and return true if no control is modified.
  • Dirty – It will check state of the validity of all form controls and return true if control is modified.
Q104) How to use JQUERY in Angular 2?

Answer: To use JQUERY you need to install the dependency using “npm install jquery –save” and need to add JQUERY path under scripts in angular-cli.json. Once dependency installed you can import it to the required component as “import * from ‘jquery’”.

Q105) What are the main key features in Angular 7?

Below are the main features of Angular 7:

  • Angular material and component dev kit (CDK).
  • New drag-drop module.
  • Virtual Scrolling
  • Angular Application size restriction.
Q106) How can we identify the version of your Angular code?

Below are the ways to check the Angular version:

  • Go into node_modules/@angular/core/package.json and check version field.
  • Check main application entry where Angular adds the version to the main component element:

<my-app ng-version=”version”>

  • If you want to do from code, you can import it from the @angular/core: import { VERSION } from ‘@angular/core’;
Q107) How do you implement routing in Angular 1?

AngularJS ngRoute module provides routing, deep linking services, and directives for angular applications, load the ngRoute module in your AngularJS application by adding it as a dependent module: angular.module(‘appName’, [‘ngRoute’]);

$routeProvider is used to configure the routes. We use ngRoute config() to configure the $routeProvider. The config() takes a function which takes the $routeProvider as a parameter and the routing configuration goes inside the function.

Q108) How to upgrade Angular to the latest version?

The upgrade should be done in below-mentioned process:

  • Installing Latest Angular CLI
  • Ng update
  • Updating other dependencies
  • Updating RxJS
  • Simplifying dependency injection for core services.
  • Update any other dependencies like @angular/material
Q109) What are typings and define its usage?

Typings is the simple way to manage and install TypeScript definitions.

  • Typings allows compiler to use existing TypeScript classes, properties and so on…
  • Typings can be installed from a repository using typings command.
  • The typings package manager is used to install type definitions into project. Third-party libraries should not ship with their own type definitions.
Q110) What is NgModule and how to declare different components and services in Module?

NgModule is to declare each thing you create in Angular and group them together. There is two kind of main structures:

  • All components (views: the classes displaying data), directives and pipes should be imported under ‘Declarations’.
  • All services should be imported under “providers” (models: the classes getting and handling data).
Q111) Can I have multiple directives in one view?


Q112) Can I develop the mobile friendly site using Angular?

Yes, Angular 2 and further versions are completely supported for mobile websites. If need to develop mobile application then need to use the Ionic framework with Angular.

Q113) Name key features of Angular 4, 5 and 6?

Below are the key features of Angular 4:

  • Router ParamMap.
  • Dynamic components with NGComponentOutlet.
  • Animation module.
  • *ngIf else statement added.

Below are the key features of Angular 5:

  • Build Optimizer
  • Compiler Improvements
  • New Router LifeCycle events
  • HTTPClient

Below are the key features of Angular 6:

  • Introduced new lvy render
  • Bazel compiler
  • Multiple validators for array method of FormBuilder
Q114) What is version control and explain version control which you used in your project?

Version Control is a subset of Configuration Management which typically is used for keeping track of source code overtime as it evolves. We have different version controls which are used namely GIT HUB, Tortise SVN and etc. Based on your project specification you should explain how you maintain code versions.

Q115) What are the new Router Life cycle events introduced in Angular 5?

Below are the new router life cycle events:

  • GuardsCheckStart,
  • GuardsCheckEnd,
  • ResolveStart and
  • ResolveEnd
Q116) What is AOT in Angular?

The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browse

Q117) What are node modules in Angular?

When you deploy your app, you only distribute the resulting build, not any of the source files or build tools, The node_modules directory is only for build tools.

The node package manager (NPM) which installs packages locally into project by creating node_modules folder for all dependencies. From there the package code can be included into a project, the browser has no way to include modules in code (yet), so you need to use a library that can expose node’s commonJS style modules.

Q118) Which Angular version is better for developer to start and why?

Angular JS is scope based and Angular 2 is component based and completely rewritten, as a developer it is better to know the concepts of Angular 1 and should have complete hands on experience in Angular 2/4. After that need to know the bug fixes, improvements, deprecated packages and enhancements of latest version.

Q119) What are advantages of Lazy Loading in Angular 6?

Lazy loading modules in Angular 6 allows applications to load modules only when they are needed i.e when you first visit the route(s) corresponding to component(s) belonging to the lazy loaded module. It have many benefits on Angular 6 application such as the performance and size.

To implement lazy loading in Angular 6 application need to setup routing to use the loadChildren() method and add components you want to lazy-load inside feature modules i.e outside the main application module app-main.module.ts.

Q120) How you overcome bug fixes when upgrading latest Angular?

Developer need to check and try to fix all compile and build time errors which come across in upgradation and after that need to test every component of application and make sure there is no functional flow breakage. We should prioritize the bug fixes and perform impact analysis before implementation.

Q121) Can I use JavaScript instead of TypeScript in Angular?

Answer: No, Angular 2 or greater are component based application with class based which supports only TypeScript language. Javascript libraries can be used as external dependencies.

Q122) How to check backend database compatibility for Angular?

Angular is a front end application and ideally we can use any backend database but angular supports Mongo DB database officially. Usually to connect any relational database we should use some middleware service like Rest API.

Q123) Which directive need to use for one way data binding in Angular Js?

Ng Bind

Q124) What Angular.copy will do?

It will create deep copy of the variable. It doesn’t point to the same memory reference of the original variable.

Q125) What we use to validate the form input?

Ng-Validate is used to validate text inputs like  phone numbers , email , barcodes.

Q126) What is the migration change for Angular 1.4 -Angular 1.5 ?

Changed .directive to .component.

Q127) What is interceptor in AngularJS?

An interceptor is a regular service factory that is registered to the array. Interceptors are used when we want to capture the every request and manipulate it before sending it to the server.

Q128) How will you declare $watch?
  • By declaring it in template via expression.
  • By creating your own watches.

var watch = $scope.$watch(‘watchvariable’ ,function(){

alert(“watch Created”);


Q129) what is the use of $apply?

$apply is used to trigger digest cycle explicitly and see the changes propagate normally.

Q130) what is @inject?

@inject is a manual mechanism of injecting a paramter.

Eg : import(inject) from ‘@angular/core’;

constructor(@inject(Angular) private Angular){};

Here we injected Angular as  paramter.

Q131) Does AngularJS application expressions are pure JavaScript expressions?


Q132) what is rootscope?

$rootScope is the parent scope. This is available in the entire application.

Q133) How can we create AngularJS module?


Q134) Does Scope contains the model data in AngularJS.


Q135) what is ng-app?

The ng-app directive is for bootstrapping your application. The element with ng-app is the root element. It wraps the other directives of your application.” open=”no” style=”default” icon=”plus” anchor=”” class=””]

Q136) which directive that can be used to include HTML fragments from other files into the view of HTML template?


Q137) What are the types to create custom directive?
  • Element directive
  • Attribute directive
  • CSS directive
Q138) Can we have nested controllers in AngularJS?

Yes, we can have nested controller.

Q139) Do AngularJS provide reusable components?


Q140) what is $injector ?

$Injector is responsible for identifying and retrieving the dependencies as defined by the provider. It creates an instance of the provider.

Q141) what is dirty checking in Angular?

AngularJS compares a value with its previous value. If there is a change, a change event is fired.

Q142) What is ngRoute?

Ng Route routes your application to different pages without reloading the page.

Q143) What is $routeprovider?

To configure different routes in application.

Q144) What we use to transmit data between parent controller to child controller?


Q145) what is $emit?

$emit is used to transmit data between child to parent controller.

Q146) what is $on?

$on is used to handle events.

Q147) Definition scope in AngularJS?

The scope is called as represents by the “model” of the object your web form application. It includes domains that store the data value and in which the presented to the user value via the template web application, as well the functions which can be called to be when the user selects the value of the certain actions such as clicking a button.

Q148) What is the controller function in AngularJS?

The controller function is a generally the empty scope object parameter and if it adds to a fields value function that will be later exhibited to the user the controller function via the view.

Q149) Explain about from Bootstrapping in Angular Js?

  Bootstrapping in AngularJS is nothing but the just initialization that value fields of Angular app. Totally, two ways of bootstrapping AngularJS that’s One is the Automatic Initialization and then added one is Manually using Script. When the AngularJS finds that the ng-app directive value function, it loads to the module associated and then compile the DOM.

Q150) Explain about from the basic steps to set up an AngularJS app?

To Create the value of angular.module ? To Assign a controller function to the module ? To create Link your module value to HTML tags with ng-app ? Link the controller value function to HTML with the ng-controller directive function.

Q151) Difference between ng-routing and UI-routing?

The ng-routing is deep link combining to services and the directive’s value for angular forms applications whereas the UI designer routing is a 3rd party module routing use and is very powerful. It makes to everything ng-router function performs to be various other extra functions.

Q152) How to different AngularJs and JQuery?

AngularJS is a framework including with important features of like to models, two-way binding value, directives value, routing value function, and it’s dependency injections, unit tests value etc.The Jquery is a library function used to the DOM manipulation value with no two-way binding features.

Q153) Explain about from the Angular implement two-way binding?

Data-binding in Angular web apps is the automatic synchronization function from data within the model and design components. The method that Angular means data-binding performs you accept that form as that single-source-of-truth in your application. The show is any projection of particular model at all times.

Q154) What is the provider in Angular JS?

The provider in AngularJS is used to internally create a factory, services, etc. this phase value of configuration. The provider continues that particular system factory which signifies is done to indicate the service/value/factory.

Q155) Explain about from DDO in AngularJs?

DDO is defined us Directive Definition Object. DDO is used to while creating a value customize directive in AngularJs.

Q156) How is it different from the scope?

The $rootscope and $scope main difference is $rootscope is possible of data global value to across to the controller’s function value  ? whereas a $scope is available only in controllers function value that has to create it along with its children function controllers.

Q157) Definition of $rootscope?

In AngularJS $rootScope and the $scope is defined as a both are objective value and is used for the sharing the data value form the function controller to view the data.

Q158) What is the use of Template in AngularJS?

The web page template is the HTML tags portion of the angular app. It is specifically like to a static HTML tag page, save that templates receive additional syntax it allows data value to be included in it in order to give a customized user experience.

Q159) Defined by is Angular JS?

AngularJS is one of the JavaScript web frameworks that is used to making rich, extensible web page applications. It runs at plain JavaScript and HTML tags. The AngularJS is complete to Single Page Applications (SPA). It is essentially done for binding JavaScript objects program by HTML UI design elements.

Q160) How to create an isolate scape value?

It is a reach that exists independently including no prototypal inheritance. It gives these components reusable also permits to control this required either one-way or two-way.

Q161) What are the means by internationalization in Angularjs?

Internationalization is one idea to show locale-specific data at a website. It is done to create multilingual language websites.

Q162) How to format a date value in Angular js?

The AngularJS it provides that the date value function and it’s filtered through you can tobe format the date function value into the required form.


{{ today | date:’MM/dd/yyyy’}}

Q163) What is a locale ID in Angularjs?

A locale is defined as a particular geographical region value function of a web app. That’s commonly used to the locale ID comprises of main things two parts, that one part is a language code, and then the other one part is a country code.

Q164) Explain about from the architecture of AngularJS?

They are Three Main components of then AngularJS is architecture. They are

The Template (View) ? The Scope (Model) ? The Controller (Controller)

AngularJS extends to the HTML attributes with the Directives and binds to data value with HTML with E

Q165) Explain from the Routing in Angular Js?

Routing is one of the core features of AngularJs framework that is helpful in building the single page web application and its multiple views. In Angular ngRoute Module is used to implement the Routing value. The ngView,$routeProvider,$route, and then the $routeParams are many components of the ngRoute Module that supports to configure and mapping for the web page  Url to views.

Q166) Explain from the Angular’s prefixes $ and $$?

AngularJs used to these prefixes to limit accidental code contact with users code.$ the prefix is done with public objects value use whereas $$ prefix is applied with a private object.

Q167) What is AOT compilation?

AOT stands for Ahead of Time. This is the compilation in which Angular assembles these components also templates to JavaScript including HTML while developing.

Q168) What about the template in Angular 2?

The AngularJs2 template is used to defines us the views of the AngularJS Application.

Q169) Define by the transition between two states in Angular?

Transition basically means operating from this modern state on each new state. In angular, this development is an animation-specific function value and which is used in angular’s animation DSL signal.  A function is provided in exchange for a change also it order be executed any terms a state change occurs.

Q170) How the module does is required for every Angular 2 app?

Every application has to least one the Angular module framework, the root module that the pages will inform you at the need to add additional modules angular framework value to this array value function. AppModule is required for every one Angular 2 apps.

Q171) List some advantages of Angular 2 over Angular1.

Angular 2 is a mobile-oriented framework  Whereas Angular1 was no increased including any mobile station in mind.

Angular 2 is a convenient framework, i.e. us become more opportunities for languages. We can take ES5, ES6, Typescript or Dart to read an Angular 2 code    Whereas an Angular1 system can be written by using only ES5, ES6, and Dart.

Q172) What is IVY Renderer using Angularjs 7?

Angular will be delivering a new set of rendering pipeline and view engine.

Q173) How to IVY Renderer is supported into by Angular 7?

The purpose of angular view generator is to change the templates and details that we have read into that usual HTML and JavaScript so it involves easy to the browser to remember it comfortably. Ivy does suppose to be great for the Angular Renderer.

Q174) How can you create a decorator in Angular?

They are two ways to read decorators in Angular. These are:

$provide.decorator, and


Q175) How to generate a class in Angular 7 using CLI?

Create a class using below code:

ng generate class <name> [options]

ng g class <name> [options]

Where name refers to the name of a class.

Options include to the specific project name, spec use in Boolean or type of a file

Q176) Explain about from AngularJS digest cycle?

AngularJS digest cycle is that means after Angular JS data binding. In each digest cycle, Angular connects the old more the latest version of the scope form values. The digest cycle involves triggered automatically. We can further use $apply() if we require to trigger the condensation cycle manually.

Q177) What’s new in Angular 7?

The purpose of angular view generator is to convert the templates that the including parts that we have written into this normal HTML also the JavaScript so it means easy to one browser to view them comfortably. Ivy remains supposed to mean high for special Angular Renderer.

Q178) Explain about from Bazel?

Bazel is a search tool really like the Make, Maven, and Gradle and it is an open-source build tool. Bazel utilizes single also high-level build language. It manages the design in any great number from languages also makes this product on a large number from platforms. Moreover, it supports multiple users and on a high number like codebases over several repositories.

Q179) What is ng-directives?

This is used for building the reusable components.

Q180) What are the various types of directives?
  • ngFor
  • ngSwitch
  • ngClass
  • ngStyle
Q181) what do you mean by component in ANGULAR?

A component is part of the web application. Collections of several parts of web application is formed various modules.

Q182) What is data binding?

It is a process of how data is exchanged between the html and typescript.

Q183) What is Metadata?

Processing a class is done by metadata.

Q184) What are modules?

Collection of various components is called modules. There will always be at least one module present.

Q185) What is ROUTING?

It is a process of navigation between various clients.

Q186) What is Template?

It is a form of HTML tag that let ANGULAR to render the components.

Q187) What is angular material?

A UI component library used for creating attractive, consistent and fully functional web application.

Q188) What is Data binding types?
Q189) What is Transpiling?

It is basically a process where typescript code is converted into JavaScript code.

Q190) What are the advantages of Angular?
  • RESTFULL SERVICES.” open=”no” style=”default” icon=”plus” anchor=”” class=””]
Q191) How string interpolation is achieved in Angular?

{{ expression }}

Q192) What are the types of life cycle in angular?
  • ngOnchanges
  • ngOninit
  • ngDocheck
  • ngOnDestroy
Q193) How to do animation in Angular?

In order to perform animation in ANGULAR we need several library called ANIMATE LIBRARY.

Q194) What are some features added in ES6 JavaScript?

Arrow Functions, let, const, classes, import, export etc…

Q195) What is the difference between var, let and const?

var has the function scope whereas the let has blocked scope. By giving const,  the variable become immutable, and cannot be changed .

Q196) By declaring an object using const, is the values inside the object changeable?

Yes, values inside the objects can be changed however the entire object cannot be changed.

Q197) How is arrow functions different from normal functions?

Arrow functions use the context of the window unlike normal function which uses the parent context.

Q198) How do you remove duplicates in an array?

using new Set(…array)

Q199) What is notation?

notation is caled spread operation and is used to make all the arguments into a collective array.

Q200) How can a multi-dimensional array be converted to normal array?

using flat method flat()

Q201) How does inheritance work in JavaScript and give us an example?

The properties of the parent object can be used by the children by inheriting them  String. Trim() can be used by all the strings which are children (subset) of String.

Q202) What is a closure in JavaScript?

In a scenario where a function is inside another parent function, the child function will have accessibility to the parent function. This is called closure.

Q203) Reduce is used to sum up all the elements in an array?

filter uses a condition basing on which it returns a filtered array.

Q204) What are import and Export in JavaScript?

Import and Export are the ES6 purgation of what we use require and modules. Export in ES5 respectively. Any object, function or variable can be exported from one file on an application to another using Import and Export.

Q205) what is the difference between map, reduce and filter in JavaScript?

Map function loops the given array which are majorly used in looping the elements and returning to DOM in frameworks like react.

Q206) In Angular, you can pass data from parent component to child component using?

A. @Output()

B. @Input()

C. Output()

D. InputAnswer: B

Q207) In Angular, you can pass data from child component to parent component using?

A. @Output()

B. @Input()

C. Input()

D. Output

Answer: A

Q208) When Should You Use Json Web Tokens?

A. Authentication

B. Information Exchange

C. A & B

D. Application

Answer: C

Q209) What is decorator?

Decorator is one of the typescript features which provides meta data to angular about clas, property etc. It always presents with symbol @.

Q210) What ‘s the basic syntax of a Decorator in Angular?

A. @() with optional parameters.

B. @() with parameter

C. Character

D. Parameter

Ans: A

Q211) What is (ngModel) used for?

A. Data binding

B. One-way data binding

C. Two-way data binding.

D. B & C

Ans: C

Q212) Difference between JavaScript and angular?

JavaScript is client-side scripting language while angular js is a framework. In JavaScript modification is easier. while angular it is difficult to apply. JavaScript generally based on DOM.Angular is based on MVC.

Q213) What modules should you import in Angular to use (ngModel) and reactive forms?

A. FormsModule

B. Reactiveforms Module

C. A & B.

D. None

Ans: C

Q214) What is AOT compilation in Angular?

AOT (Ahead of Time) compilation is the new feature added by angular to boost the application performance.

You can achieve AOT compilation by executing

ng bulid –aot or ng build –prod

Q215) What is View Encapsulation in Angular?

View Encapsulation enable us to use shadow dom in angular. View encapsulation determines whether the styles written in particular component will affect the entire application or not.

Q216) What are the advantages of SSR in Angular?

Server-side rendering can be implemented in Angular by using Angular Universal.

  • Performance Optimization
  • Consistent SEO performance
Q217) How to Generate class and Component by using angular-cli?

To generate class in Angular by Angular-cli is

Ng generate class <nameOfClass>

To generate a component in angular by Angular-cli is

Ng generate component <nameOfComponent>


Ng g c <nameOfComponent>

Q218) Difference between constructor and ngOnInit in angular component lifecycle?

Constructor is the default for every class or object, it will run first when class is instantiated.

NgOninit is first lifecycle method that will call after all the input bindings are done. It is the best place to make API requests.

Q219) How many ways we can communicate between two components?
  • @Input
  • @output
  • Services
  • Local storage
  • session storage
Q220) What is data binding and what are the different types of data binding?

Data binding is the process that creates the connection between Ui and the data.

Data binding supported by Angular are

  1. Interpolation
  2. Property binding
  3. Event binding
  4. Two-way data binding
Q221) How to update the angular 6 projects to angular 7?

Need to use ng update to update angular projects to new versions.

Ng update @angular/cli @angular/core

Q222) What is the difference between Angular1.x and Angular2+?

In Angular 1.x there is no built-in support for mobile, but Angular 2 was designed fully supports for mobile.

You can use any of ES6, ES7, Typescript or Dart to write angular2 code. But in Angular 1.x we can use ES6, ES7 only. Typescript is the great addition for Angular2.They have removed controllers and $scope. Implemented components.

Q223) What is the use of trackBy in Angular *ngFor?

When rendering list of elements in Angular by using *ngFor, Arrays and objects are compared by reference. This is fast but causes unwanted DOM manipulations.

You can avoid this by using trackBy in *ngFor.

Q224) How to handle events in angular2+ ?

Method:1 For handling click events

<button (click)=”handleClick()”>Click me</button>


<input (keyup)=”handleInput($event)” type=”text” />

Q225) What is component?

Component is the key of angular without that angular is not working, it is essential while write typescript.

Q226) Difference between promise and obserables?

Promise and obserables are always used for abstraction purpose that directly deal with asynchrounous application.Promise always return single value and obserables return multiple values.

Q227) What is string interpolation?

While compiler matches two process simultaneously at that time it is known as interpolation, which uses text and attributes.

Q228) Difference between constructor and ngOninit?

Constructor is always been used with class to initilize member variables.ngOninit is a function of angular..which run piece of code at different stages.

Besant Technologies – Chennai & Bangalore Branch Locations

Besant Technologies - Velachery Branch

Plot No. 119, No.8, 11th Main road, Vijaya nagar,

Velachery, Chennai - 600 042

Tamil Nadu, India

Landmark - Reliance Digital Opposite Street

Besant Technologies - Tambaram Branch

No.2A, 1st Floor, Duraisami Reddy Street,

West Tambaram, Chennai - 600 045

Tamil Nadu, India

Landmark - Near By Passport Seva

Besant Technologies - OMR Branch

No. 5/318, 2nd Floor, Sri Sowdeswari Nagar,

OMR, Okkiyam Thoraipakkam, Chennai - 600 097

Tamil Nadu, India

Landmark - Behind Okkiyampet Bus Stop,

Besant Technologies - Porur Branch

No. 180/84, 1st Floor, Karnataka Bank Building,

Trunk Road, Porur, Chennai - 600 116

Tamil Nadu, India

Landmark - Opposite to Gopalakrishna Theatre

Besant Technologies - Anna Nagar Branch

Plot No:1371, 28th street kambar colony,

I Block, Anna Nagar, Chennai - 600 040

Tamil Nadu, India

Landmark - Behind Reliance Fresh

Besant Technologies - T.Nagar Branch

Old No:146/2- New No: 48,

Habibullah Road,T.Nagar, Chennai - 600 017

Tamil Nadu, India

Landmark - Opposite to SGS Sabha

Besant Technologies - Thiruvanmiyur Branch

22/67, 1st Floor, North mada street, Kamaraj Nagar

Thiruvanmiyur, Chennai 600041

Tamil Nadu, India

Landmark - Above Thiruvanmiyur ICICI Bank

Besant Technologies - Siruseri Branch

No. 4/76, Ambedkar Street, OMR Road, Egatoor, Navallur,

Siruseri, Chennai 600130

Tamil Nadu, India

Landmark - Near Navallur Toll Gate, Next to Yamaha Showroom

Besant Technologies - Maraimalai Nagar Branch

No.37, Ground Floor, Thiruvalluvar Salai,

Maraimalai Nagar,Chennai 603209

Tamil Nadu, India

Landmark - Near to Maraimalai Nagar Arch

Besant Technologies - BTM Layout Branch

No 2, Ground floor, 29th Main Road,

Kuvempu Nagar,BTM Layout 2nd Coming from Silkboard,

AXA company signal, Stage, Bangalore - 560 076

Karnataka, India

Landmark - Next to OI Play School

Besant Technologies - Marathahalli Branch

No. 43/2, 2nd Floor, VMR Arcade,

Varthur Main Road, Silver Springs Layout,

Munnekollal, Marathahalli, Bengaluru - 560037

Karnataka, India

Landmark - Near Kundalahalli Gate Signal

Besant Technologies - Rajaji Nagar Branch

No. 309/43, JRS Ecstasy, First Floor,

59th Cross, 3rd Block, Bashyam Circle,

Rajaji Nagar, Bangalore - 560 010

Karnataka, India

Landmark - Near Bashyam Circle

Besant Technologies - Jaya Nagar Branch

No. 2nd Floor,1575,11th Main Road,

4th T-Block, Pattabhirama Nagar,

Jaya Nagar, Bangalore - 560 041

Karnataka, India

Landmark - Opposite to Shanthi Nursing Home

Besant Technologies - Kalyan Nagar Branch

No.513, 4th Cross Rd

2nd Block, HRBR Layout,

Kalyan Nagar, Bangalore - 560 043

Karnataka, India

Landmark - Opposite to kalayan nagar Axis Bank

Besant Technologies - Electronic City Branch

No. 7, 3rd Floor, Ganga Enclave,

Neeladri Road, Karuna Nagar, Doddathoguru Village,

Electronics City Phase 1, Electronic City,

Bangalore - 560100, karnataka, India

Landmark - Adjacent to HDFC Bank and State Bank Of India

Besant Technologies - Indira Nagar Branch

No.54, 1st Floor,

5th Main kodihalli,

Bengaluru, Karnataka 560008, India

Landmark - Behind Leela Palace Hotel,

Besant Technologies - HSR Layout Branch

Plot No. 2799 & 2800, 27th Main,

1st Sector, HSR Layout,

Bengaluru, Karnataka 560102, India

Besant Technologies - Hebbal Branch

No.29, 2nd Floor, SN Complex,

14th Main Road, E-Block Extention, Sahakara Nagar,

Bengaluru, Karnataka -560092, India

Scroll Up