45+Top Angular 2 Interview Questions & Answers [ SOLVED ]

Last updated on 04th Jul 2020, Blog, Interview Questions

These Angular2 Interview Questions have been designed specially to get you acquainted with the nature of questions you may encounter during your interview for the subject of Angular2 . As per my experience good interviewers hardly plan to ask any particular question during your interview, normally questions start with some basic concept of the subject and later they continue based on further discussion and what you answer.we are going to cover top 100 Angular2  Interview questions along with their detailed answers. We will be covering Angular2 scenario based interview questions, Angular2  interview questions for freshers as well as Angular2  interview questions and answers for experienced.

Q1. What is CLI?

Ans:

CLI – short for Command Line Interface – is a text-based interface which can be used for creating the Angular JS application. CLI has simplified the process for quickly creating a unit and end-to-end tests for the Angular application.

Q2. Explain the usage of pipes in Angular 2?

Ans:

In Angular 2, the purpose of pipes is to convert templates into a content which is not only user-friendly but also readable within the interpolation braces, i.e., {{release| date}}. In this example, the symbol “|” denotes the pipe.

Q3. Point out two security threats that one should be aware of in angular 2 applications.

Ans:

Similar to any other client-side or web application, in order to mitigate any security risks, Angular 2 application follows some basic guidelines.
These are:

• Ensure that you avoid using or injecting dynamic HTML content to your component.
• If you happen to be using external HTML, which originates from the database or somewhere outside the application, do make sure that you sanitize it.

Q4. What are different kinds of directives supported in Angular 2?

Ans:

There are three different types of directives:

• Structural
• Component
• Attribute

Q5. What is routing in Angular 2?

Ans:

Routing is a technique which is used to separate the various parts of the app, in most cases by using the URL to denote the location.

Q6. What is component in Angular 2?

Ans:

Component can be described as a special kind of directive which makes use of a simpler configuration and is ideal for a component-based application structure.

   Q7. What is @Outputs in angular?

Ans:

By utilizing a combination of an @Output and an EventEmitter, components are used to push out events.  

Q8. Can you explain Angular 2’s hidden property?

Ans:

• In Angular 2, the hidden property is a special case. This property is said to be very powerful and its purpose is to bind any property of the elements.
• It is also regarded as the closest equivalent of the directives – ngshow and nghide.
• It is subsequently used to set the display property – “display: none”.

Q9.What are the key components of Angular 2?

Ans:

Angular 2 has the following components −

• Modules − This is used to break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task.
• Component − This can be used to bring the modules together.
• Templates − This is used to define the views of an Angular JS application.
• Metadata − This can be used to add more data to an Angular JS class.
• Service − This is used to create components which can be shared across the entire application.

Q10.Explain Modules in Angular 2.

Ans:

Modules are used in Angular JS to put logical boundaries in your application. Hence, instead of coding everything into one application, you can instead build everything into separate modules to separate the functionality of your application. A module is made up of the following parts −

• Bootstrap array − This is used to tell Angular JS which components need to be loaded so that its functionality can be accessed in the application. Once you include the component in the bootstrap array, you need to declare them so that they can be used across other components in the Angular JS application.
• Export array − This is used to export components, directives, and pipes which can then be used in other modules.
• Import array − Just like the export array, the import array can be used to import the functionality from other Angular JS modules.

Q11.Explain Components in Angular 2?

Ans:

Each application consists of Components. Each component is a logical boundary of functionality for the application. You need to have layered services, which are used to share the functionality across components.Following is the anatomy of a Component. A component consists of −

• Class − This is like a C or Java class which consists of properties and methods.
• Metadata − This is used to decorate the class and extend the functionality of the class.
• Template − This is used to define the HTML view which is displayed in the application.

Q12.What are Angular 2 directives? Explain with examples?

Ans:

• A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.

ngIf −

• The ngif element is used to add elements to the HTML code if it evaluates to true, else it will not add the elements to the HTML code.

Syntax

• *ngIf = ‘expression’ 
• If the expression evaluates to true then the corresponding gets added, else the elements are not added.

ngFor −

• The ngFor element is used to elements based on the condition of the For loop.

Syntax

• *ngFor = ‘let variable of variablelist’ 
• The variable is a temporary variable to display the values in the variablelist.

Q13.How will you handle errors in Angular 2 applications?

Ans:

Angular 2 applications have the option of error handling. This is done by including the ReactJS catch library and then using the catch function.

• The catch function contains a link to the Error Handler function.
• In the error handler function, we send the error to the console. We also throw the error back to the main program so that the execution can continue.
• Now, whenever you get an error it will be redirected to the error console of the browser.

Q14.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.

Q16.What is Dependency Injection? 

Ans:

Dependency injection is the ability to add the functionality of components at runtime. Let’s take a look at an example and the steps used to implement dependency injection.

Q17. What are the Benefits of Angular 2?

Ans:

• Faster rendering
• Built with mobile devices in mind
• Code is simpler
• Easier to read and learn
• Better performance
• Simplified architecture because it is component-based

Q18.What is the latest version of Angular?

Ans:

Angular 9.1.6 released on 8th May 2020

Q19.When did angular 6 release?

Ans:

14th September 2016

Q20.Who is the developer of Angular 2?

Ans:

Google

Q21.What language does Angular use?

Ans:

TypeScript

Q22. What is the Official website of Angular2?

Ans:

https://angular.io

Q23. What is the difference between directive and component in Angular 2?

Ans:

	Components	Directive
To register, use @Component meta-data annotation	To register, use @Directive meta-data annotation
Used to create UI widgets and break up app into smaller components	Use to design re-usable components and add behavior to existing DOM element.
Only one component allowed per DOM element	Many directives allowed per DOM element.
@View decorator is mandatory	Does not use View.

Q24. What is Traceur compiler in Angular 2?

Ans:

Traceur compiler takes classes, generators, and other features from ECMAScript edition 6 (ES6) and compiles it into JavaScript ES5 that runs on the browser. This means developers can use the code from a future version that has more features and encourages design patterns.

Q25. What is event emitters in Angular 2 and how it works?

Ans:

• Any change that occurs in the component gets propagated from the existing component to its children. If this change needs to be reflected its parent component, you can use using Event Emitter api to emit the event.
• EventEmitter is class in @angular/core module that is used by directives and components to emit events.
• @output() somethingChanged = new EventEmitter();

Q26. What is string interpolation Angular?

Ans:

String Interpolation is a special syntax in Angular 2 which is a more efficient alternative to property binding. It is used to display dynamic data on an HTML template while facilitating you to make changes on the component.ts file and fetch data for the HTML template.

Q27. How do you create a custom pipe in Angular?

Ans:

In Angular 2, you can create custom pipes. The simplest way is as follows.

Q28. What is directive in Angular?

Ans:

Directives are the extended HTML attributes and they are also the most important features of Angular applications. They introduce syntax or markup.

There are 3 kinds of directives-

• Components
• Structural
• Attribute

Q29. What is RouterOutlet in Angular 2?

Ans:

In Angular 2, the RouterOutlet is a directive present in the router library to be used as a component. It marks the spot in a template for the router to display the components for that outlet.

Q30. What is ViewEncapsulation in Angular?

Ans:

In Angular 2, View Encapsulation is used to define the template and style encapsulation variations available within a Component’s Component. In addition, it enables us to use Shadow DOM or maybe even emulate it as per requirements.

There are three view encapsulation types:

• ViewEncapsulation.None – No Shadow DOM, hence, no style encapsulation.
• ViewEncapsulation.Emulated – No Shadow DOM but emulated style encapsulation.
• ViewEncapsulation.Native – Proper Native Shadow DOM.

Q31. What is dependency injection in Angular?

Ans:

Angular has a robust DI framework that gives declared dependencies to a class upon instantiation. To inject a service, you must first create and register the injectable service.

Q32. What is pipes in Angular 2?

Ans:

• In all Angular version from 2 onwards, there is a common feature called Pipes. This feature helps developers create custom pipes.
• Pipes are used to write display-value transformations that developers can declare in their HTML. A pipe inputs data and transforms it into the required output.

There are some pipe provided by angularjs are given below-

• Uppercase/Lowercase Pipe
• Date Pipe
• Currency Pipe
• JSON Pipe
• Async Pipe

Q33. How to enable lazy loading in Angularjs?

Ans:

With lazy loading, JS components can be loaded asynchronously on activation on a specific route.

• Download and install ocLazyLoad.js
• Add the module in the application
• Load the file in the required controller
• Add to the router’s code as

Q34. What is lazy loading in angular 2?

Ans:

Lazy loading allows developers to load different code pieces on demand. For instance, if you have a retail application that has different departments like garments, groceries, electronics, etc. If you load all the sections, in the beginning, your application will be slow. This is when you need lazy loading. It helps the application load faster because it loads only parts that the user wants to see.

Q35. What is RxJS in Angular?

Ans:

In Angular, Reactive Extensions for the JavaScript (RxJS) is a reactive stream library that allows you to work with asynchronous data streams in Angular 2. RxJS can be used in the browser or on the server-side while using Node.js.

Q36. What’s the difference between Angular JS and Angular 2?

Ans:

Angular 2 is a complete rewrite of Angular JS. Angular 2 is geared more towards developing mobile applications.

Q37. What are the main advantages of Angular 2?

Ans:

Angular 2’s main advantages are:

• Mobile-Friendly: Angular 2 was created with the mobile app industry in mind.
• Browser Compatibility: Angular 2 supports Internet Explorer 9, 10, 11, Firefox, Chrome, Safari, Android 4.1, as well as Microsoft Edge.
• Cross-Platform Flexibility: When using Angular 2, developers can design applications that can run on desktop systems, Android-based devices, iOS-based devices, etc.
• High Performance: Angular2 uses a highly optimized superset of JavaScript that makes both the app and website load faster. Additionally, Angular2’s new component router results in faster loads.
• Code Generation: Templates are turned into code that’s highly optimized for today’s JavaScript virtual machines. This gives the developer all of the benefits of hand-written code, but with a framework’s productivity.
• Cost-Effective: And of course, Angular is open source, so the price is right!

Q38. Every tool has its downside, what are Angular 2’s disadvantages?

Ans:

The drawbacks of Angular 2 are:

• Confusing: Since there are numerous ways of doing a task, it can be difficult, especially for newcomers, to choose the right way to perform a task.
• Steep Learning Curve: On a related note, if you don’t know TypeScript, you better learn it, since it’s been introduced into Angular 2. Basic functions are easy, but when you move into advanced concepts, the curve gets steep.
• It’s A Whole Different Animal: If you like and are used to Angular, you’re in for a shock, as Angular 2 represents a total redesign.
• Slow User Interface: If you’re dealing with more than 2000 watchers, get ready for some major lag.
• Inconsistent Documentation: Due to a fragmented community, there’s a lack of clear, well-written, consistent documentation.

Q39. List the features of the Angular 2 Framework?

Ans:

The features are:

• Components – Used to build applications into assorted modules
• Services – Code sets that are shared between different codes within an application
• TypeScript – A JavaScript superset that’s maintained by Microsoft

Q40. What are the chief components of Angular 2?

Ans:

The main components are:

• Component- Brings the modules together
• Metadata– Adds more data to the Angular JS class
• Modules– Breaks up the application into logical pieces of code, each module performing a single task
• Service– Creates a component that can be shared across the whole application
• Templates- Defines an Angular JS application’s views

Q41. Name the three Module Arrays?

Ans:

Modules break your applications into logical boundaries. They are, in alphabetical order:

• Bootstrap array – Tells Angular which components to load so the functionality can be accessed
• Export array – Sends out components, directives, and pipes to be used in other modules.
• Import array – Brings in functionality from other Angular modules

Q42. What’s an EventEmitter?

Ans:

It’s a class in the Angular framework that emits custom events.

Q43. What’s an Angular 2 directive?

Ans:

Directives are custom HTML elements used to extend the HTML’s power.

Q44. What does Cli stand for, and what does it do?

Ans:

It stands for Command Line Interface and is used to create an Angular application. Additionally, it helps to create an application’s unit and end-to-end test.

Q45. Discuss the tsconfig.json file?

Ans:

The file is used to provide the options for Typescript that will be used for an Angular project.

Q46. Discuss the differences between ActivatedRoute and RouterState, in the context of Angular 2?

Ans:

The differences are as follows:

ActivatedRoute	RouterState
An ActivatedRoute is made up of the data about a route associated with a component that is loaded in an outlet.ActivatedRouteSnapchat is needed in order to traverse all the activated routes.ActivatedRouteSnapshot contains old data. When a route gets altered, ActivateRouteSnapshot keeps data from the original route.	The RouterState represents the writer’s actual state.The router creates a RouterStateSnapshot during navigation once all of the redirects have been applied.The RouterState, on the other hand, focuses on application components’ arrangements.

Q47. What’s a Pipe?

Ans:

Pipes edit, transform and format the data within the template. Bottom line, pipes takes input data and transforms it into output into something that we want.

Q48. How to create a component in Angular 2?

Ans:

• Import the top-level component using import { Component } from ‘@angular/core’;
• Describe the component using the @ symbol. Create instances of @Directive, @Injectable, @RouterConfig etc.
• Add meta-data like selector, providers, styles, template.
• Export the component
• Bootstrap the component

Q49. How do you declare a global variable in Angular 2?

Ans:

• The simplest way is to put the variables in a file and export them. In order to use global variables, you can use an import statement.
• ‘use strict’;
• export const name=’bestinterviewquestion.com’;
• After that, we can export this file where we want to use these global variables value.
  import * as myGlobalsFile from ‘./globalfile’;

Q50. How do observables differ from promises?

Ans:

Observable	Promise
Used from the library RxJS. import { Observable } from ‘rxjs’;	Built-in API.
Can show multiple values using setInterval() method	Can resolve only one async task and cannot be used again
Can unsubscribe from the observables no longer needed.	A promise cannot be canceled.
Lazy. Observable is called only when we subscribe.	Not lazy.
Rich set of operators in the library like map, filter, pipe, retry, etc.	No such additional features available

Q51. What is the need of Angular2?

Ans:

Angular 2 is not just a typical upgrade but a totally new development. The whole framework is rewritten from the ground. Angular 2 got rid of many things like $scope, controllers, DDO, jqLite, angular.module etc. It uses components for almost everything. Imagine that even the whole app is now a component. Also it takes advantage of ES6 / TypeScript syntax. Developing Angular 2 apps in TypeScript has made it even more powerful. . Apart from that, many things have evolved and re-designed like the template engine and many more.

Q52. What is TypeScript ? What is the need for it in Angular2?

Ans:

TypeScript is a typed super set of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS team for development.
Understanding the need for TypeScript file in Angular2 applications

Q53. What is ECMA Script ?

Ans:

ECMAScript is a subset of JavaScript. JavaScript is basically ECMAScript at its core but builds upon it. Languages such as ActionScript, JavaScript, JScript all use ECMAScript as its core. As a comparison, AS/JS/JScript are 3 different cars, but they all use the same engine… each of their exteriors is different though, and there have been several modifications done to each to make it unique. Angular2 supports ES6 and higher versions.

Q54. What is @NgModule?

Ans:

@NgModule is a decorator function. A decorator function allows users to mark something as Angular 2 thing (could be a module or component or something else) and it enables you to provide additional data that determines how this Angular 2 thing will be processed, instantiated and used at the runtime. So, whenever user writes @NgModule, it tells the Angular 2 module, what’s going to be included and used in and using this module.

Q55. How to perform CRUD operations using Spring Boot and Angular?

Ans:

We can develop a full stack application with angular as the frontend and the backend as Spring Boot.
Angular 7 + Spring Boot Application CRUD Example

Q56. What is Basic Authentication? How to implement it using Angular?

Ans:

Basic authentication is a simple authentication scheme built using the HTTP protocol. When using this protocol the HTTP requests have Authorization header which has the word Basic followed by a space and base 64 encoded string username:password.
Angular 7 + Spring Boot Application Basic Authentication Example

Q57. What is Traceur compiler ?

Ans:

Traceur is a JavaScript.next-to-JavaScript-of-today compiler that allows you to use features from the future today. Traceur supports ES6 as well as some experimental ES.next features. Traceur’s goal is to inform the design of new JavaScript features which are only valuable if they allow you to write better code.

Q58. Why are decorators used in Angular 2 ?

Ans:

In Angular 2, decorators allow developers to configure classes as particular elements by setting metadata on them. The most commons are the @Component one, for components and the @Injectable one, for classes you want to inject dependencies in.
Advanatges of using decorators are-

• Separation of concerns.
• Easy for tools to provide all kinds of support in templates like- error checking, auto-completion, graphical GUI designers
• Support multiple modifications

Q59. How can we achieve Internationalization using Angular 2 ?

Ans:

It can be achieved using the directive i18n. Internationalization (or i18n, which stands for i–n) is the process of adapting software and web applications to multiple languages, allowing their application to be used by multiple language-speaking users. By ensuring that your application supports multiple languages, you can reach a broader audience and ensure a smooth user experience for multilingual users. Q: What is component in Angular 2 ?
A: In angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

Q60. What is @Inputs in Angular 2? ?

Ans:

@Input allows you to pass data into your controller and templates through html and defining custom properties. This allows you to easily reuse components and have them display different values for each instance of the renderer.

Q62. What is Angular 4? Have you used Angular 4?

Ans:

angular4 Tutorials

Q63. What is primeng? How can it be used with Angular2?

Ans:

PrimeNG is a collection of rich UI components for Angular 2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces. All widgets are open source and free to use under Apache License 2.0, a commercial friendly license. PrimeNG is developed by PrimeTek Informatics, a company with years of expertise in developing open source UI components. AngularJS makes it possible to use predefined components for development like tables etc. This helps developers save time and efforts. Using PrimeNG developers can create awesome applications in no time
PrimeNG-UI Components for AngularJS 2 Basic Example

Q65. How to implement Datagrid Table with Angular 2 and PrimeNG ?

Ans:

Angular2 PrimeNG Tutorial- Create a Hello World application using DataTable Grid

Q66. Which other PrimeNG components have you used with Angular 2?

Ans:

Create a simple PrimeNG application using PrimeNG Components like PrimeNG Button, Confirmation Box, Text Box.

Q67. What are angular 2 hooks?

Ans:

In Angular apps, hooks are functions that are called on particular stages of a component’s life. Hooks are essential if your app is based on the component architecture. Example for hooks is $onInit, $onChanges, etc. which are properties pre-defined by Angular and can be exposed on component controllers.

Q68. Explain the steps for creating a services in Angular 2?

Ans:

Here are the steps:

• Import injectable member
• Add @Injectable Decorator
• Export Service class

Q69. What is CLI in Angular 2?

Ans:

It is a command-line interface which is used to build angular apps. We can construct & start a project very quickly with the help of CLI.

Q70. What are the difference between @injectable() vs. @inject() in angular 2?

Ans:

@Injectable	@Inject
Aims to set metadata of dependencies to be injected into constructor	Tells Angular what parameter must be injected
Without it, no dependency can be injected	Only needed to inject primitives

Q71.What is AOT Compilation?

Ans:

AOT compilation stands for Ahead Of Time compilation, in which the Angular compiler compiles the Angular components and templates to native JavaScript and HTML during the build time. The compiled HTML and JavaScript is deployed to the web server so that the compilation and render time can be saved by the browser.

Q72. What are the advantages of using Angular 2 over Angular JS?

Ans:

Following are the advantages of using Angular 2 over Angular JS:

• Angular JS uses only JavaScript but Angular 2 provides the possibility to use different languages like TypeScript, ES5, ES6, Dark etc.
• Angular JS was not built with mobile support in mind, where Angular 2 is mobile oriented.
• Angular 2 based on components, and it provides better performance than Angular JS.
• The use of dependency injection is enhanced in Angular 2.
• Angular 2 has the flexible routing with lazy loading features.
• Angular 2 is faster

Q73. What is Module in Angular 2?

Ans:

In Angular 2, Module allows to put logical boundaries in our application. It is a fundamental feature of Angular 2 that groups related components, directives, pipe and services together.

Q74.What are the benefits of compiling with AOT?

Ans:

• Lesser asynchronous requests
• Smaller download size of Angular framework
• Detects errors easily
• Fast rendering
• Improved security

Q75. What’s a Directive?

Ans:

Directives add behavior to existing DOM elements. They design reusable components.

Q76. How do you handle Angular application errors?

Ans:

All Angular applications have an error handling option. Just include the ReactJS catch library, then use the catch function. The catch function, in turn, contains a link that sends you to the Error Handler function. When in the Error Handler Function, you send the error in question to the console, while also sending the error back to the main program in order to assure continued operation of the main program.

Q77. Define the role of a decorator in Angular 2?

Ans:

Decorators identify an object type or class that has been created by the TypeScript as an Angular component. The decorators provide additional metadata that dictates how the component should be processed and used when it’s run.

Q78. Can you convert a string into a date?

Ans:

This is what the syntax looks like:

<div> The date of this Tutorial is {{newdate | date:”MM/dd/yy”}}</div>

Q79.Explain the Life Cycle Hooks of Angular 2 Application

Ans:

Angular 2 component/directive has lifecycle events, managed by @angular/core. It creates the component, renders it, creates and renders its children, processes change when its data-bound properties change, and then destroys it before removing its template from the DOM. Angular provides a set of lifecycle hooks (special events) which can be tapped into this lifecycle and perform operations when required. The constructor executes prior to all lifecycle events. Each interface has a single hook method prefixed with ng. For example, ngOnint interface has Oninit method that must be implemented in the component.

Q80. What are the new features of Angular2

Ans:

Angular 2 is written entirely in Typescript and meets the ECMAScript 6 specification.

• Component-Based- Angular 2 is entirely component based. Controllers and $scope are no longer used. They have been replaced by components and directives.
• Directives- The specification for directives is considerably simplified, although they are still subject to change. With the @Directive annotation, a directive can be declared.
• Dependency Injection- Because of the improved dependency injection model in Angular2 there are more opportunities for component / object-based work.
• Use of TypeScript-TypeScript is a typed super set of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS team for development. The presence of types makes the code written in TypeScript less prone to run-time errors. In recent times, the support for ES6 has been greatly improved and a few features from ES7 have been added as well.
• Generics- TypeScript has generics which can be used in the frontend.
• Lambdas with TypeScript- In TypeScript, lambdas are available.
• Forms and Validations- Forms and validations are an important aspect of frontend development. Within Angular 2 the Form Builder and Control Group are defined.

Q81. What are the advantages & limitation of AOT compilation?

Ans:

Advantages-

• Fast download
• Quicker rendering
• Reduces Http Requests
• Catches errors during the build phase

Disadvantages-

• Only works with HTML and CSS Not other file types.
• Must maintain bootstrap file AOT version
• Must clean-up before compiling.

Q82. How do you check if angular CLI is installed?

Ans:

To check this, you need to make sure that node is installed and then check if angular CLI is installed.

• Open a command prompt using cmd.
• Type node -v and npm -v to ensure node is installed.
• Type ng -v

Q83. What is Router-link directive in Angular 2?

Ans:

• The router-link derivatives enable the navigation from any specific view to the other. It works immediately as a user is performing application tasks. The link can directly arise from browser and navigation is done on the basis of user action like the click of an anchor tag.
• The router link directive gives control to the router for anchor tag elements. It also binds a clickable HTML to the route to enable the navigation. The routerlink directive can easily be bound to an array, E.g.

<a [routerlink] = “[ ‘/ heroes’]” >Heroes</a>

Q84. What is the configuration required for caching of static resources like images, css and js in Angular 2?

Ans:

During Development Mode, caching for static resources can be done through the Design of Tools. If you want to cache on the production stage, you need to check and update the Server-End Settings accordingly.

Q85. What are filters in Angular 2?

Ans:

A filter is a necessary phase of Angular 2 as well as Angular 4. It is basically used to filter an object from a crew of items, which are there in an array or an object array. It selects a subset of the objects from an array and returns it as a new array and displayed on UI. Filters can be used with an expression using pipe | sign. {{expression | filterName:parameter }} Angular 2 includes various filters to layout records of special fact types.

Q86. What is the difference between constructor and ngOnInit?

Ans:

Constructor	ngOnInit
This one is a default class method which gets called when we create new objects.	It’s an Angular managed life cycle hook to indicate the completion of the component.
A constructor is mostly used to inject dependencies.	We use this to perform initialization logic even if the logic doesn’t depend on DOM, DI and input bindings.

Q87. What is hidden property in Angular 2?

Ans:

In Angular 2, hidden property or [hidden] is a special case binding used to hide property. It can be compared close to ng-show and ng-hide, but more powerful to bind any property types of elements.

Q88. What is @input and @output in Angular 2?

Ans:

Both @input and @output are decorators. The decorator @Input is used to bind a property within one child component to receive value from the parent component, whereas we use the @output decorator to bind the property of a component to send data from child component to parent component or calling component.

Q89. How to display the error message from backend in angular2?

Ans:

To display error message in Angular 2 from backend, we have to set the error message equal to an angular variable, and then check whether that variable exists to conform whether to display it or not.

Q90. What is tree shaking?

Ans:

The Tree Shaking is a concept of dead code elimination from projects. The code present in your project but neither referenced nor used will be dropped here. It will eliminate the unused modules during the build process, making user application lightweight.

Q91. What is the use of polyfills.ts file in Angular 2?

Ans:

In Angular 2, the polyfills.ts file is used to make user application compatible for various browsers. The code we write in Angular 2 is mostly in ES6, which is not compatible with Firefox or IE, and requires few environmental setups before they wither get viewed or used in browsers.

Q92. What are lifecycle hooks and why it is important?

Ans:

In Angular, lifecycle hooks are functions which will be called at specific points of a component lifecycle in Angular applications.

Q93. What is Angular 2 and also explain its components?

Ans:

Angular 2 is the upgraded and evolved version of AngularJS, a JavaScript framework that was invented by Google. Angular 2 is used for building single-page web or mobile applications.Components are essential elements of Angular 2 apps, and an application can have a number of components. In Angular 2, components perform all the tasks that were done by scopes, controllers and directives, such as creating or adding Data, logic, and custom elements.In Angular 2 a component consists of the following:

• Template
• Class
• Metadata

Q94. What happens when the page containing Angular based application loads?

Ans:

When a page containing Angular based application loads, these below-mentioned scenarios will be completed.

• The browser will load the HTML document and evaluate it.
• The file for AngularJS JavaScript will be loaded and the Angular global object will be created.
• Finally, the JavaScript that registers controller function will be executed.

Q95. What is deep linking in Angular 2?

Ans:

In Angular 2, deep linking is a process of the URL that will take to users to a specific page or content directly without crossing the application from the homepage. The deep linking process helps with website or application indexing so that search engines can easily crawl these links.

Q96. What is SPA in Angular 2?

Ans:

SPA in Angular 2 stands for Single Page Applications. This is a type of web-application which fits into literally one page. All your code (JavaScript, HTML, CSS) is called using a single page load at multiple points by adding new data parallelly from the backend. Navigation between pages performed can be done without refreshing.

Q97. How to define custom typings to avoid editor warnings?

Ans:

To avoid editor warning whilst defining customized typings, we have to prolong the kind definition for an external library as a accurate practice. Without altering any node_modules or current typings folder, we have to create a new folder named “custom_typings“ and put all our customized kind definitions there.

Q98. How to redirect to 404 or other path if the path does not exist in Angular 2?

Ans:

Using angular routing you can navigate from one view or page to another while performing your tasks. You can configure a URL to redirect to the next URL. This feature can be handled to address the “404 Not Found” problem. Using location services in Angular routing you can go back and forward through the history of pages.

Syntax : We can use