Angular 4 Interview Questions and Answers

13 Jan 2023, 65 Questions

Angular 4, released in March 2017, is a JavaScript framework for building apps in HTML, JavaScript, and TypeScript. Angular 4 offers built-in features for HTTP service, animation, and materials. This is an essential topic in the Angular 4 Interview Questions for experienced professionals. The unique feature in Angular 4 is that starting from Angular 4, developers will be able to query ParamMap in the router.

Quick Facts About Angular 4
What is current angular version? Angular 11.0. released on 11th November 2020
Angular4 is Developed by Google
What language does Angular use? TypeScript
When was Angular first released? 20th October 2010
When was Angular4 released? 23rd March 2017
Which is the best free IDE for Angularjs? Sublime Text, Visual Code, Atoms, etc
What is the best Angular version of web development? For the development, Angular 2 and 4 both are good.

Most Frequently Asked Angular 4 Interview Questions

Here in this article, we will be listing frequently asked Angular 4 Interview Questions and Answers with the belief that they will be helpful for you to gain higher marks. Also, to let you know that this article has been written under the guidance of industry professionals and covered all the current competencies.

Q1. How to handle HTTP error response in Angular 4?

Here are the best practices for HTTP error handling on Angular:

  • Using a client-side solution for error handling, like HTTPClient or HTTPInterceptor
  • Using Rollbar to effectively track errors.
  • Viewing the errors on Rollbar.

class MyErrorHandler implements ErrorHandler {
    handleError(error) {
       // do something with the exception
    providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
class MyModule {}

16 6
Q2. What does a subscribe method do in Angular 4?

The subscribe method in Angular comes from the RxJS library using Angular internally as an observable. It is used to synchronously and asynchronously stream data into components or services which have subscribed to the same observable type.

Here’s an example of subscribe method being used to subscribe to users to any new magazines published by the Magainze Store.

Our aim while creating Angular 4 Interview Questions and Answers, is to help you grow as a Frontend Developer. The questions mentioned here have been asked by leading organizations during technical rounds of the interview process.


let subscription = magazineStore.getMagazines().subscribe(

5 3
Q3. Why angular 4 is faster?

Angular 4 is fast compared to its previous versions due to various reasons. Here are some of them mentioned below:

  • It reduces the size of generated code bundle up to 60%.
  • The animation part moved out to a separated package @angular/animations
  • It is backward compatible.
  • Introduction of proper disapproval phases for easy adjustment of codes.
13 1
Q4. How many types of directives are there in angular 4?

There are basically three types of directives in Angular 4, they are::

  • Attribute Directives
  • Structural Directives
  • Components
12 0
Q5. What is the dependency injection in Angular 4?

In Angular 4, Dependency Injection refers to an important application design pattern that is used to increase the efficiency and modularity of an application. It is basically a coding pattern in which the class requests for dependencies from external or third-party sources rather than actually creating them itself.

21 4
Q6. How do you create a custom pipe in Angular 4?

Here’s an example of creating a pipe which reverses the order of letter within a string. Following is the code to be found in the reverse-str.pipe.ts file.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'reverseStr'})
export class ReverseStr implements PipeTransform {
   transform(value: string): string {
      let newStr: string = "";
      for (var i = value.length - 1; i >= 0; i--) {
         newStr += value.charAt(i);
      return newStr;

Now, including the custom pipe as a declaration within the Angular app module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ReverseStr } from './reverse-str.pipe.ts';
declarations: [
imports: [
providers: [],
bootstrap: [AppComponent]
export class AppModule { }

Here’s how to use the custom pipe in your templates:

{{ | reverseStr }}

20 1
Q7. What are the @NgModule Metadata Properties?

The @NgModule decorator is a method that takes a single metadata object that tells Angular how to compile the application.

Important Metadata Properties
  • imports
  • exports
  • providers
  • schemas
  • entryComponents
  • declarations
  • id
  • bootstrap
8 0
Q8. What is the difference between DOM and BOM?
Is Browser Object Model Is Document Object Model
Used for access and manipulation of the browser window Used to manipulate the HTML document.
No standard set of rules, each browser has its own standards for implementing BOM Has a set standard of rules to be used across documents.
5 0
Q9. What is data binding? Explain its types.

One of the most important and powerful features of any software programming language is Data Binding. Data binding is the automatic and instantaneous synchronization between two different layers of AngularJS i.e., model and view. There may be a situation in which the developer may have to transfer data from component(model) to view or vice versa. This problem can be easily tackled through the concept of data binding.

Types of Data Binding
  • Property Binding: Updating the value of a certain variable in the model layer and then displaying it in view is the presentation layer, this is known as Property binding.
  • Event Binding: Updating or sending the information or the values of certain variables from the view layer that is also known as the presentation layer to the component that means the model layer, this is what Event binding is.
  • Two Way Binding: It is the combination of both Property and Event binding.
12 1
Q10. What are the features of Angular4?

Angular 4 has several new feature additions. As most of the changes are implemented to the background rather than its core functionality of coding, it’s being called an invisible makeover to its previous version. The compiler error messages have improved as well as the code generation. According to the Angular team, patches will be released every week. It also has the potential to improve performance when used appropriately.

Features of Angular 4.
  • TypeScript Compatibility
  • Dynamic Components
  • Source Maps for Templates
  • Router ParamMap
  • AOT Compilation
  • Revamped *ngIf and *ng For
  • Animations Package
  • Angular Universal
  • Flat ES Modules
  • Smaller and Quick
8 1
Q11. What is unit testing in Angular 4?

Unit testing or private testing is used to test the system’s components. This process is s best practice to test small separate pieces of code. If the unit testing depends on any of the external resources such as networks, APIs and databases, then it won’t be listed as a unit test.

16 3
Q12. What is ElementRef in angular 4?

ElementRef is basically a class or reference types used for abstraction. The class structure holds the native elements and ElementRef is used to access the native elements

selector: 'sample',
...export class SampleComponent{
constructor(private hostElement: ElementRef) {

ElementRef is used to break the abreaction rather than using specific API DOM like textContent

4 0
Q13. What is the use of services in angular 4?

Angular 4 services contain functions or methods that consistently maintain the data of an application throughout its life which implies that data will remain secure and available at all times. The main aim of angular 4 services is to share business logic, data, information, models with several components of angular 4 applications.

2 0
Q14. What is the difference between interpolation and property binding?
Interpolation Property Binding
It can be implemented using {}. It can be implemented with [].
It supports the concatenation of string inside a variable. Property Binding does not support the concatenation of String.
Interpolation does not support working with a boolean type. Property Binding supports working with all boolean types.
3 0
Q15. What is the difference between pure and impure pipes?
Pure Pipes Impure Pipes
By default, all pipes are pure. It has to be changed from pure to impure.
Used when angular detects a change in value or parameter. Used in every detection cycle independent of changes in value or parameter.

Note: Our aim while creating Angular 4 Interview Questions, is to help you grow as a Angular Developer. The questions mentioned here have been asked by leading organizations during technical rounds of the interview process.

1 1
Q16. What is deep linking in angular 4?

In general, deep linking takes a specific page directly without searching and traversing application from the landing page. It helps in generating and getting indexes so that the specific links can be easily searched by the search engines.
Angular 4 support deep linking using ‘#’

6 2
Q17. What are the difference between Angular 4 and Angular 5?
Angular 4 Angular 5
Angular 4 is fast and more compact It is widely used to build optimized applications
It is Angular Universal. It is Angular universal as well as state transfer.
Angular 4 uses TypeScript 2.1 and TypeScript 2.2 Angular 5 uses TypeScript 2.5.
4 1
Q18. How to send and set cookies in Angular 4?

We can use the ngx-cookie-service node package to save cookies in Angular 4.

Use the following steps:
  • Install the node package with the following syntax:
    npm install ngx-cookie-service –save
  • Now, we have to add the cookies service to app.module.ts as a provider.
        providers: [ CookieService ]
  • Further, continue by importing and injecting it into a component.
    import { CookieService } from 'ngx-cookie-service';
    constructor( private cookieService: CookieService ) { }
    ngOnInit(): void {
    this.cookieService.set( 'Test', 'Hello World' );
    this.cookieValue = this.cookieService.get('Test');

9 0
Q19. What is eager loading in angular 4?

There are three types of loading namely eager loading, lazy loading, and preloading. In general, eager loading is a module that needs to import into the Angular 4 application module by importing metadata of @NgModule decorator. Additionally, eagerly loading is useful for small size angular applications in which all feature modules will be loaded before starting of the application.

2 0
Q20. What is the difference between JavaScript and ECMAScript?

JavaScript is a programming language designed for web pages. It is developed by Netscape and Sun and it is initiated by Netscape and called LiveScript. It is used to enhance web pages with dynamic and interactive features.


ECMA is an abbreviated form of European Computer Manufacturer's association. In general, ECMAScript is a standard used in scripting languages such as Jscript, JavaScript.

3 1
Q21. What do you mean by observables and promises?

Promises help to function with asynchronous operations. They work in two conditions. They either return a single value when the promise resolves or an error message when the promise gets rejected. Whenever a request is made from a promise, it becomes a non-cancellable command.

On the other hand, observable can be regarded as a stream. It can be anything, a stream of data or events. It can be canceled, unlike promise. An observable can be easily converted into a promise by specifying a command “toPromise( )” with the command to do so.

1 0
Q22. Explain different types of component decorators In Angular 4?
In Angular 4, there are four types of component decorators:
  • Class decorators
  • Property decorators – used for properties inside classes
  • Method decorators – used for methods inside classes
  • Parameter decorators – used for parameters inside class constructors

This information is usually asked in interview questions on Angular 4.

1 0
Q23. What is the template statement Angular? Explain with a syntax.

A template statement in Angular is used to respond to an event raised by a binding target, element, component or directive. Here is the syntax of a template statement:



2 0
Q24. How do you use string interpolation Angular 4?

String interpolation in Angular is a one-way data-binding technique used to take the output data from a typescript code and into an HTML template. It uses the template expression through double curly braces {{ }} displaying the data from a component to view.

Here’s an example to show you how to use String Interpolation:

import {Component} from ‘@angular/core’;
selector: ‘app-root’,
styleUrls: [‘./app.component.css’]
export class AppComponent {
title=’string interpolation in tutorialandexample’;

1 0
Q25. How to install Angular 4?
There are various ways available to install Angular 4.
  • Install the Angular CLI
    npm install -g @angular/cli
  • Create a Project
    ng new MyApp
  • Serve the application
    cd MyApp
    ng serve --open

This information can be asked during angular 4 interview questions.

6 0
Q26. What is the use of TypeScript in Angular 4?
TypeScript is the native language for Angular Development. It has Design-time support for Tooling and Type Safety and is basically a superset of JavaScript.
0 0
Q27. What is routing in Angular 4?

Routing essentially means navigation in-between pages. Sites having links redirecting you to another page is called routing in Angular 4.

2 0
Q28. What is guard in Angular 4?

In Angular 4, functionalities, logic and code which are executed before the loading of a route is called Guards. Guards check the route access, child route access, new feature in a module and prompt the user of any unsaved changes.

0 0
Q29. What is the use of CanActivate in angular 4?

CanActivate is a feature in the Angular Interface focused on security. It prompts the user to login to the application during the routing of a page.

0 0
Q30. What is lazy loading?

Lazy Loading is a popular method used in Angular 4 which is used to load JavaScript components asynchronously when a specific routing feature is activated. Its main use is to increase performance during the initial load within a complex routing scheme involving multiple components.

2 2
Q31. How to add external js file in angular 4?

To add an external js file into Angular 4, follow these steps:

  • Refer the scripts inside the angular-cli.json file like this:
    "scripts": [ "../path" ];
  • Add this into typings.d.ts :
    declare var variableName:any;
  • Import the above onto your js file as:
    import * as variable from 'variableName';
0 0
Q32. What is JWT interceptor?

The JWT Interceptor is used in Angular 4 to intercept Http requests from the application itself when the user logs in to add a JWT auth token in the Authorization header. The interceptor is implemented using the HttpInterceptor class.

Note: These are basic Angular 4 interview questions and answers to provide a brief insight into Angular Development.

0 0
Q33. What is JIT and AOT in angular 4?

During compilation of code in Angular 4, Just-in-Time (JIT) compilation (also known as dynamic translation or run-time compilations) is used to execute computer code involving compilation during the run time of a program, precisely, prior to execution.


In Angular 4, Ahead-of-Time(AOT) compilation is used to convert your code during the build time before it loads on the browser. This creates a scope for faster rendering in your browser.

0 0
Q34. What is Transpiling in Angular 4?

A Transpiler, which runs on TypeScript is used in Angular 4 to compile all the TypeScript code created in the development process and convert them into JavaScript for rendering into the browser.

0 0
Q35. How to handle Events in Angular 4?

When a user interacts with an Angular 4 application through keyboard movement, mouse click, or a hover, they generate an event. These events are handled in order to perform a specific action via Event Binding. Event Binding is basically one-way data binding which sends information within the view and component class.

Note: These are fundamental interview questions on angular 4 to give you an overview of the subject.

0 2
Q36. What is the use of angular material?

Angular Material is a User-Interface component library that is used in Angular 4 to help in developing attractive, stable and functional web pages and applications while maintaining the best practices involved such as browser portability, device independence, and graceful degradation. Its main use is to create beautiful and responsive websites that are optimized for speed in browser-rendering.

0 0
Q37. Explain filters in Angular 4?

The filter is a vital aspect in AngularJS as well as Angular 4. It is the method of separating an item from a group of items inside an array or object arrays by specifying a particular type to it.


currency: This filter is used to format a number to a currency format.
date: This filter is used to format a date to a specified format.

0 0
Q38. What does CDK stand for?

In Angular 4, the CDK stands for Component Dev Kit which is a set of tools to implement common interaction patterns throughout the code.

0 0
Q39. What is flex in Angular material?

In Angular Material, Flex is a layout which basically is a component engine allowing you to easily create Flexbox-based page layouts with a specific set of directives available for your template. In addition, it eradicates the need for a separate styling sheet.

0 0
Q40. How to use primeng in angular 4?
Following steps will provide you the proper direction to use priming in angular 4
  • In order to install primeng UI libraries or primeng UT components: Install primeng using the command- npm install primeng-save
  • In dependencies section include package.json
  • Goes to the setting, and configure PrimeNG in app.module.ts
  • Include import { DataListModule } from ‘primeng/primeng;
  • Import DataListModule and include primeng components using command bikes.component.html
1 0
Q41. What is the difference between Angularjs 4 and AngularJS?

Angular 4 is the upgraded version of AngularJS, which is the very first introduction of AngularJS. The newer version Angular 4 has fulfilled several drawbacks of its predecessor and introduced excellent features such as Router ParamMap support, Dynamic Components with NgComponentOutlet, latest TypeScript functions, simplified HTTP request, better Animation package, mobile-oriented framework, server-side run and more, which were are not available with the AngularJS.

2 1
Q42. What is shadow dom?

While creating an Angular 4 component, a shadow DOM is created by default and our template gets loaded into it. It’s a DOM element subtree which renders as part of the document but not into the present main document DOM tree. It is used by browsers to determine the rendered object on the page. JavaScript programs use it to modify content, page styling and structuring.

2 0
Q43. How to debug angular 4 projects from visual studio 2017?
To debug Angular 4 projects using visual studio 2017, we have to follow the below-mentioned steps.
  • Create our project as Asp.Net Core Web Application and use the “Angular” project template.
  • Next to "IIS Express", click the down-arrow to set the web browser to Google Chrome.
  • Run debugging and the script debugging being enabled message will pop up by Chrome.
  • Continue further by setting a breakpoint on "this.currentCount++;"in counter.component.ts.
  • Now visit the Counter screen to click Increment and the breakpoint set will be hit.
  • While performing this, make sure to turn off the Chrome Developer Tool running

Note- make sure that your chrome developer tools will run on the same time during the process of debugging

0 0
Q44. Why we need Ngmodel in angular 4?

We need Ngmodel in angular 4, as it possesses the property of binding and encapsulating the input elements of DOM. In short, we need Ngmodel in angular 4 for two –way-data-binding process.

2 0
Q45. What is Angular 4 and why it is used?

Angular 4 is an advanced JavaScript framework which uses HTML, JavaScript, and TypeScript web applications and APK apps. It’s a superset of JavaScript and offers excellent built-in features for HTTP service, animation, navigation, menus, toolbar, materials, etc.

2 0
Q46. What are the difference between angular 2 and 4?
Here are a few significant differences between Angular 2 and 4 which developers are going to notice.
  • Angular 4 has many inbuilt animation packages which were missing in Angular 2.
  • Angular 4 has its template tag called “ng-template.” The previous version uses only “template.”
  • Compared to Angular 2, in the newest version, developers can use else syntax with Nglf for excellent UI handling.
  • A new template syntax addition “as keyword” in Angular 4 which can be used to simplify to the “let” syntax.
  • Simplified “HTTP request” and application testing in Angular 4.
2 1
Q47. Explain the difference between angular and AngularJS?

AngularJS is the very first version of the Angular. A tool named AngularCLI is used to generate Angular components. Angular JS which is a client-side framework works with JavaScript and still supported but not compatible with Angular any more. Simplifying it, AngularJS is the old version and Angular is the newest one.

0 0
Q48. How we can set Http Request Header in Angular 2 and Angular 4?

To set Http Request Header in Angular 2, create the HTTP Client Injectable class and inject the HttpClient object in the Component. Developers use HTTP Interceptors to set Http Request Header in Angular 4. To achieve this. Write an interceptor for adds a header for every request and after creating the interceptor, register it using HTTP_INTERCEPTORS in the @NgModule().

1 0
Q49. How to create a new component using CLI in Angular 4?
To create a new component in Angular 4 using CLI,
  • Open Project Directory
  • Run any one of the below mentioned the syntax

We have the most extensive question bank to help you answer Angular 4 interview questions and answers.


ng component name


ng generate component componentname

2 0
Q50. How to upgrade angular 2 project to angular 4? Explain

No coding level changes are required to enhance a project present in Angular 2 to Angular 4. Users only have to update the tsconfig.json and package.json files. Some minor adjustments may be needed depending on project types. After updating the data, clean out your node_modules directory, run npm install and npm start and you will be started with the Angular 4.

0 0
Q51. How to write If Else and Then Conditions in Angular 4?
If Else statement in Angular 4 can be written using following syntax-
Open /src/app/app.components.ts:
Export class AppComponent {
Title – ‘app works!;

Open /src/app/app.component.html
<div *ngIf = “ title; else login”>
The user is logged in. </div>
<ng-template #login> in order to login pleae continue. </ng-template>
Then statement can be write using following syntax-
<div *ngIf = “title; then logout else login “> </div>
<ng-template #login> please login to continue . </ng-template>
<ng-template #logout> Hi abc, <button> logout now </button> . </ng-template>
4 2
Q52. What is the use of forRoot Method in Angular?

In Angular 4, the ForRoot method is used when the module is "eager," not lazy-loaded. Except for lazy modules that loaded on-demand with their factory, Angular creates a factory for all other modules. The ForRoot method allows users to access providers from any point in the application that is not lazy-loaded. This ultimately will enable users to have different configurations for different load cases.

1 1
Q53. What's New features In Angular 5?
Angular 5 has plenty of new features. Few of the most important ones are mentioned below:
  • Addition of a build optimizer which removes unnecessary applications and codes.
  • Support for DOM and Angular Universal State Transfer API.
  • Optimized standardization across various browsers.
  • Addition of a new HttpClient and lifecycle events router.
  • Creation of Angular 5 projects by default with CLI 1.5.
  • Multiple name support for directives and components.
1 0
Q54. What are the difference between directive and component in angular 4?

In Angular 4, components have their view, whereas directives are just “behavior” added to the existing components and elements. Simplifying it, components extend directives. There can be many directives on a host element, but only one component.

0 0
Q55. What is template reference variable in angular 4?

In Angular 4, template reference variables allow users to access an instance of a directive or component or a DOM present in the template. These are defined by a hash sign (#) combined with a name as an additional DOM element’s attribute.

0 0
Q56. What is json web token in angularjs?

In AngularJS, JSON Web Token is used to send information that can be trusted and verified using a digital signature. The JSON Web Token comprises a URL-safe and compact JSON object, which is cryptographically signed to verify its authenticity. This also can be encrypted if the payload contains any sensitive information.

0 0
Q57. Is angular 4 services which traverse the DOM looking for attributes?

Yes, angular 4 services is a compiler which transverse the DOM looking for attributes. The process of compilation is partitioned into two phases namely-

Compile- means to traverse the DOM and gather all directives such as ng-repeat.

Link- means to produce a live view by combining the directives with a scope.

0 0
Q58. What is embedded view in Angular?
The embedded view is a component or it is a hosting component which is used to define the template.

abstract class EmbeddedViewRef<C> extends ViewRef {
      abstract context: C abstract rootNodes: any[]

3 0
Q59. What is the use of the MAP in Angular 4?

In Angular 4, Map is a data structure used for mapping keys to values without the limitations involved in using objects. A Map can be created with the help of a new keyword and then various entries can be added to increase the functionalities with the help of a set method. This data structure is also chainable. A map can be initialized with the help of an array of key-value pairs.

0 0
Q60. What is the traceur compiler?

Traceur compiler is compilers which use ECMAScript Edition 6 (ES6) that compiles the regular javascript which runs on user’s search engine.

Number of ways to use traceur compiler.
  • Typing ES6 code in the page Read-eval-print-loop.
  • In web page include Traceur and compile ES6 script content on the fly.
  • Use node to compile ES6 to ES5 offline.
  • Include the result in Web pages or just execute the result in angular 4.
1 0
Q61. What is used for code bundler in angular 4?

The Angular CLI uses a JavaScript module bundler known as Webpack for bundling all code to production.

0 0
Q62. What are reducers in angular 4?

In Angular 4, a Reducer is a function that specifies how a particular state changes in response to an action/event. The function, without making any itself making any changes to state, returns a new state object with the updates included.

1 0
Q63. What is application state in Angular 4?

Technically speaking, the Application state is the entire memory of an application built in Angular 4. But as per working terminologies, it represents data received via API calls, user inputs, presentation UI State and basically that data which could be used to differentiate multiple instances within the same application.

0 0
Q64. What is the use of Webpack in Angular 4?

In Angular 4, Webpack (open-source JavaScript module banner) is used to bundle JS files, transform, bundle or package any resource or asset within the application. It takes modules having dependencies and generates static resource blocks representing the selected modules.

0 0
Q65. How to create a block component dynamically on click of drop down?

In order to create block component dynamically, it is important to import following AppComponent such as-

  • ViewContainerRef, ComponentFactoryResolver and ViewChild from @angular/core
  • MessageComponent from message.component.
  • ComponentFactory and ComponentRef [email protected]/core

import {

from '@angular/core';
import { MessageComponent } from './message.component';
   selector: 'app-root',
   templateUrl: './app.component.html'
export class AppComponent {
  title = 'app';

3 0

This means a request for the route- and the query parameter can be assigned to a route. Until Angular 2, route parameters were stored in a key-value object and were accessible through standard JavaScript syntax. Do you want to succeed in your Angular 4 Interview Questions and Answers? Read on!

Another unique feature is that the functions that were necessary for animations are placed in their package. This has been done to avoid creating unnecessary bundles of significant size. Until Angular 2, these functions were offered as part of the core module and were always included even if they were not getting used in apps.

In angular 4, the use of decorators is done extensively for compiling the code. There are four types of decorators – Class, Property, Method, and Parameter.

Type security and speed ngc-Compilerhave improved in Angular 4 as compared to Angular 2. If you are scrolling on the web for angular 4 interview questions and answers pdf, then this guide will gonna help you.

About Best Interview Question
Best Interview Question
Technical Consultant

With our 10+ experience in PHP, MySQL, React, Python & more our technical consulting firm has received the privilege of working with top projects, 100 and still counting. Our team of 25+ is skilled in distinct programming languages such as Python, Java, React.js, Angular, Node.js, PHP, HTML, CSS, Designing, iOS and Android apps, Database, .net, QA, Digital Marketing and Govt. jobs, etc. We are helping 10+ companies in solving their technical problems. When not found coding, our technical consultants can be seen helping out others.