Angular 2 Interview Questions

Angular 2 is a completely revived component-based Javascript framework in which an application is a tree of loosely coupled components. It is a more advanced version of angularJS. It is more of an "all in one" framework so it also helps in creating a single website without getting trapped into different JS frameworks. An Angular 2 is a modular framework in which our code is divided into individual procedures that offer a similar kind of functionality, hence improving the testing, up gradation and maintenance of the application. It has a lot of useful features such as- server-side rendering, cross-platform, and supports more languages than any other framework. It is a new typescript framework built around the concept of components which is paving the way for a better and spacious development. We can even make hybrid applications using Angular 2 which gives us a sharp edge by providing us the flexibility to use the same standard codes for developing other applications.

Angular 2 is a platform that encompasses a wide range of capabilities. Some new features were added in Angular 2 which includes:

• Universal server rendering- It is the library which is used to make building universal apps a smooth experience. It is an important feature of Angular 2.
• A mobile toolkit- It provides all the mobile toolkit and techniques to build high-performance mobile applications. The web applications which are developed using the mobile toolkit can be loaded on any device with or without internet connection which is a great advantage.
• A command line interface-it can generate components, routes, services, and pipes with the help of commands.
• Data binding- data binding has been improved in Angular 2. So, whatever DOM element property you need to bind, you just wrap it in square brackets. E.g.-

  <img[src]='product.image' />

• Modular- various modules have been removed from angular’s core, which has resulted in better performance.
• Modern- Angular 2 has been targeted as modern browsers in which various hacks that make angular harder to develop have been removed.

Components in Angular 2 are simply directives that are always associated with a direct template. Angular 2 components have an extremely well defined life-cycle. When working with angular components, we can make use of interfaces which allows us to implement functionality for different times in a components lifecycle. A component must belong to an NgModule in order for it to be usable by another component or application. Components can even control their runtime behaviour by implementing various Life-cycle hooks.

Declaration of component:

@component ({selector: 'great', template: 'hello {{name}}!'})

Class greet{

Name: string = 'world';

}

Components always have a template and only one component can be instantiated per an element in a template. When a component is instantiated, angular creates a change detector, which is responsible for propagating the component’s building.

Constructors are used for initializing class members and also for dependency injection. Ngonlnit is used for the initialization work. Both of these methods are called when the component is created. It is really important that we should know, when to and how to use them. These are used for providing the best structure for your component’s code. A constructor method is a pre-defined method in the constructor class which is only called when the class is instantiated. It is also used for properly initializing the fields. The constructor in Angular 2 is used to create a new instance of the class. Ngonlnit is the class we import when we implement the constructor in order to use it in a class. The method used in this case is ngOnlnit(). This method helps in initializing the directive or the component after the data-bound properties are displayed and the directive or components input is set.

Lazy loading is a module which is used to decrease the start-up time. When lazy is used, then our system application does not need to load everything at once. It only needs to load what the user expects to see when the application first loads. The modules which are lazily loaded will only be loaded when the user navigates to their routes. Lazy loading improves the performance of our system applications. It keeps the initial payload small and these smaller payloads lead to faster download speeds. It helps in lowering the resource cost, especially on mobile networks. If a user doesn’t visit a section of the application, they won’t ever download those resources. The concept of lazy loading in angular requires us to format the application in a certain way. All the assets that are to be lazy loaded should be added to its own module. Lazy loading is setup in the main routing file. Lazy loading overcomes the problem of slow loading of applications in their own way which hence improves the loading time of the application.

Lazy loading can be done only in four steps:–

1. Update your route file
2. Install angular-router-loader and add the loader to your webpack configuration file.
3. Define the lazy routes
4. Import the routes to the module.

The Angular 2 comprises of the following key components:

• Module – This is used to break the application into the logical pieces of the program code and each piece of code or module is designed to perform a single and unique task.
• Component – This is used to bring the modules together.
• Templates – This is used to define the Views of an Angular JS application.
• Metadata – This is used to add more data to an Angular JS application.
• Service – This component is used to develop the components, which can be used to share in the entire application.

For iterating over a collection in Angular 2, the ngFor directive is used which instantiates a template once per item from the collection. If a data needs to be changed at some point in the collection, then a problem occurs because angular cannot keep a track of items in the collection and has no knowledge of the items which were added or deleted. This results in the deletion of all the DOM elements that are associated with the data and are again created. If the collection is big, then it becomes more complicated because a lot of DOM manipulation occurs which are expensive. So, to solve this problem, a trackBy function is used which takes the index and the current item as arguments and returns the unique identifier for this item.

The template in Angular 2 is used to define the views of the AngularJS Application.

Below are few component specific hooks in Angular2.

• ngafterContentinit: It initializes the component content
• ngAfterConctentChecked: It checks the binding of the external content.
• ngafterViewinit: It creates the component view.
• ngAfterviewChecked: It checks the bindings of the component’s view.

Angular supports most of the recent browsers some of which are:

• Google Chrome
• Firefox
• Edge
• IE for versions 9-11
• Safari
• iOS 7.1
• Android 4.1
• IE Mobile

The RouteParams are used to map the given URL’s based on the route URLs and they become optional parameters for that route.

The hidden property in Angular 2 is a special case.

• The property is more powerful and is used to bind any property of the elements.
• It is considered the closest cousin of ngshow and nghide.
• It sets the display property “display: none”.

In Angular 2, decorators are used as an identifier of class or type of the object that is created by the TypeScript.The Angular 2 identifies the class below decorator call as the definition of the class and extends the decorator specific properties with the class definition.

Angular 2 is a re-written version of Angular1 and not an update. The best way to compare Angular 2 and Angular 1 is by finding out the new features in Angular 2. This way we will be able to find out the advantages of Angular 2 over Angular1 precisely. So, some of the advantages of Angular 2 are:-

Angular 2 directly uses the valid HTML DOM element properties and events which reduces the usage of many available built-in directives.

Transitions between two states take place so that we can build simple animations between two states driven by a model attribute. Transition basically means navigating from the current state to a new state. In angular, the transition is an animation-specific function which is used in angular’s animation DSL language. Transition declares the sequence of animation steps that will be executed when the entered value is satisfied. A function is provided an argument for a transition and it will be executed each time a state change occurs. In this, if the function is true, then the animation will run else it won’t get executed.

These animation transitions are placed within the animation triggers. The transition depends upon what the animation was in the previous state and what it will become in the next state. In other words, if a transition is defined that matches the old/current state criteria then the associated animation will be triggered.

Syntax:

function transition (stateChangeExpr: string,steps: AnimationMetadata | 
	 AnimationMetadata []):AnimationTransitionMetadata;

The differences between observable and promises are:

1. Observable is a more powerful way of handling HTTP asynchronous requests. Whereas, A promise handles a single event when an asynchronous operation completes or fails.
2. An observable is like a stream which allows passing zero or more events where the callback is called for each event. Whereas, A promise eventually calls the success or failed callback even when you don’t need the notification or the result it provides anymore.
3. Observable works with multiple values for a particular time. Whereas, Promises works with and even returns a single value at a time.
4. Observables can be canceled. Whereas, Promises cannot be canceled.
5. Observable supports map, filter, reduce and similar operators. Whereas, Promises have more readable codes with try/catch and async/await.
6. In observable, one operator ‘retry’ can be used to retry whenever needed. Whereas, Promises cannot be retried. A promise should have access to the original function that returned the promise in order to have a retry capability.

Apart from components, directives are also used in Angular 2 which allows us to attach behavior to elements in DOM. There are certain differences between the components and directives in Angular 2. They are:

1. In Angular 2, a component is a directive with a view whereas a directive is a decorator with no view. Components are the specific type of directive that allows us to utilize web component functionality throughout our application. Whereas, Directive is the mechanism by which we attach behavior to elements.
2. A component is used to break up the application into smaller components. Whereas, Directive is used to design the re-usable components.
3. Components can be used to define pipes. Whereas, We cannot define pipes using directives.
4. Components can be present per DOM element. Whereas, Directive is used to add behavior to an existing DOM element.

ECMAScript is a standard for scripting languages. It is a subset of Javascript. Languages such as ActionScript, JavaScript use ECMAScript as its core. ECMA stands for European Computer Manufacturer’s Association. Coders commonly use ECMAScript for client-side scripting on the World Wide Web. It is also used for server applications and services. It includes structured, dynamic, functional, and prototype-based features. The ECMAScript was developed by Brendan Eich of Netscape. The ECMAScript is standardized by the ECMA international standards organization in the ECMA-262 and ECMA-402 specifications. It is a programming language which is designed specifically for acting on an existing entity or system. It provides the rules, details, and guidelines that a scripting language must observe to be considered ECMAScript compliant.

Traceur is a compiler that takes ECMAScript and compiles it down to regular Javascript that runs in your browser. Traceur can be used in several ways like- typing or pasting the ES6 code into the read-eval-print-loop page, or by including traceur in the web page and compiling ES6 code content on the fly, or many other ways. Even traceur is written in ES6, compiled to ES5. The main goal of a traceur compiler is to inform the designs of Javascript features and allows us to write the code in a better manner. Nowadays, traceur compilers are broadly used in the Angular 2 platform. It also supports transpiring and types checking via type annotations.

Caching of an observable data is done with the help of “observable.cache”. We can use caching in order to cache the response in the memory and then, on the next subscription, instead of requesting the remote server again. This operator is used at the end of the string. Caching is important for the performance, especially on bandwidth restricted devices and slow networks. You should have a good understanding of caching while working with promises but while translating it to observable, it is a bit difficult. Therefore, when interacting with observables, we typically set up a subscription on the consumer side and react to values coming through the pipe. We can easily add caching to the observables by adding publishReplay(1) and refCount.

Here are some of the differences between ActivatedRoute and RouterState with reference to Angular 2:-

1. ActivatedRoute consists of the information about a route associated with a component loaded in an outlet. Whereas, RouterState represents the state in which the writer actually is.
2. We need ActivatedRouteSnapchat to traverse all the activated routes. Whereas, during a navigation, after redirects have been applied, the router creates a RouterStateSnapshot.
3. ActivatedRouteSnapshot has old data. When route changes, ActivateRouteSnapshot has data from previous route. Whereas, the RouterState cares about application components, or, to be more specific, about their arrangements.

Shared module is used to import the services in both eager and lazy loaded module. We all know that lazy loaded modules create their own branch on the dependency injection tree. Shared module consists of the services that are registered by the angular in the root app injector. For this, we need not import it in the lazy module because lazy loaded modules already have access to the services defined at the root. Components, pipes and directives are also defined in the shared module. Other modules that import the shared module can use it in their templates. This means that the modules can be imported normally in the lazy loaded module. The shared module contains the code that will be used across the applications and featured modules. It also consists of the common template components. “Dumb components” should also be present in the shared module. It typically consists of some common angular modules too. When you are importing the shared module, you will also need to import the module with its providers, because there is no app module in the test.

Structural directives are used to manipulate DOM in angular. Structural directives are responsible for HTML layout. By adding, removing, or manipulating LMNs in angular, they shape or reshape the structure of DOM. This structural directive is applied to a host element with the help of other directives. The directives then do whatever it is supposed to do with that host element and its descendants. Structural directives can be easily recognized. It can also delay the instantiation of a component or an element. It can also be used for cosmetic effect or manually handling the timing of the loading of components. Structural directives are bound to a template. The two most common structural directives are “ngIf” and “ngFor”. The process occurring in a structural directive is dynamic.

A template in Angular 2 is used to instantiate embedded views. A template variable can be accessed in two ways. Either by placing a directive on an element and have the template variable for this embedded view injected into the constructor of the directive using the template variable token, or you can query for the template variable from a component or a directive via the query. A template variable in Angular 2 is a reference to a DOM element or directive within a template. Template variables are used to access the values of DOM element properties. It is declared with the help of “#” and “ref-“as a prefix. For example: – #myVar and ref-myVar. Template variable names cannot be made duplicate as in this way, it might give unpredictable values. The scope of a reference variable is the entire template. It can be used anywhere inside a template. In Angular 2, a component needs to have a view and to define a view, a template variable is used. It allows us to express data and property binding, event binding and template concerns.

The comprehensive comparison that taps into components initialization process is given below:-

1. ngonInit is just a method in a class which structurally is not different to any other method in a class. Whereas, a constructor is a completely different thing. It will be called when an instance of a class is created.
2. A class constructor in angular is used to inject dependencies, which is called constructor injection pattern. Whereas, when ngOnInit is called, it has finished creating a component DOM, injected all required dependencies through constructor and processed input bindings.
3. A constructor is a default method of the class that is executed when the class is instantiated. Whereas, ngOnInit is a life cycle hook called by Angular 2 to indicate that angular is done creating the component.
4. ngOnInit relies on the binding of the component. Whereas, it is not the case when a constructor is used.

The component lifecycle hooks overview the life cycle sequence and the interfaces. Angular manages the life cycle of a component. Angular creates it, renders it. It can also create and render its children. It also checks when its data-bound properties change. It can even destroy it before removing it from the DOM. The life cycle hook offered by angular provides the visibility into these key life moments and the ability to act when they occur. The components go through an entire set of processes or life cycle right from its initiation to the end of the application.

There are a number of lifecycle hooks which are listed below:–

1. ngOnChanges
2. ngOnInit
3. ngDoCheck
4. ngAfterContentInit
5. ngAfterContentChecked
6. ngAfterViewInit
7. ngAfterViewChecked
8. ngOnDestroy

To convert a string into a percentage format, a percent filter is used.

CLI is the acronym of Command Line Interface, which can be used to create the Angular JS application.Using CLI, you can also create a unit and end-to-end tests for the Angular application.

AOT stands for Ahead of Time. It is the compilation in which Angular compiles the components and templates to JavaScript and HTML while developing.

An Event emitter is a class defined in core module that can be used by components and directives to emit custom events.

The host decorators in Angular 2 bind the properties of components with UI element values.The properties inside a component class definition which are decorated with @HostBinding are accessed in a template from the assigned property that is @HostBinding()title=’Our title'( whatever the title is).

The pipes are used to transform the input data into the desired output. There are some built-in pipes provided by the Angular such as DatePipe, UpperCasePipe, LowerCasePipe, Currency Pipe, and PercentPipe. You can also create your own pipe in Angular using the following syntax.

The syntax for creating custom pipes

import { Component } from '@angular/core';

@Component({
  selector: 'app-happy-birthday',
  template: `<p>Yours birthday is {{ birthday | date }}</p>`
})
export class HappyBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

The Angular 2 Applications provide with the option of error handling.The errors in Angular 2 can be handled by including the React JS catch library and later using the catch function.

• The catch function, which is used after adding the catch library contains the link to the Error handler function.
• And in this error, handler function, the errors are sent to the error console, and also the errors are thrown back to continue the execution.
• So, whenever an error occurs it will be redirected to the error console of the web.

No, currently there is not any such tool available that ports the Angular 1 code to the Angular 2 code.
In the process of porting, the Angular 1 code to Angular 2, the side by side manual conversion of Angular 1 directives to the Angular 2 components takes place because they are two different frameworks and hence requires different approaches to solve the same problem.

Also, Read: 80 Best AngularJs interview Questions

AppModule is required for every Angular 2 app.

angular-cli.json is used to configure a project in angular2. You can find it in the root folder of your angular2 Project.

No, Both are different.

Multicasting in the Angular 2 is the practice of broadcasting to multiple subscribers in a single execution. Multicasting is a type of observable where you re-use the first listener and send values out to each subscriber without registering multiple listeners on the document.

Annotations are used to create annotations attribute to store the array and pass the metadata to the constructor of the annotated class. Annotations are hard-coded and are used by the Traceur compiler.

Major Components of Angular 2 are

• A TypeScript Class
• An Html template
• Metadata.
• Stylesheet
• Components
• Modules
• Services

A typing in Angular 2 is used to describe the contract of the libraries that you use. It is used because the Multicasting in the Angular 2 is the practice of broadcasting to multiple subscribers The TypeScript throws an error when it happens so the Typings are used to tell the compiler about the JavaScript libraries that you load. The Typings are defined in the type definition files called d.ts files.

The Lifecycle hooks are provided by the Angular JS to provide visibility into key moments of the Angular Lifecycle. Angular component goes through a different process of the lifecycle from creation to destruction. These different stages of the lifecycle are called the lifecycle of a component. Angular JS provides visibility into these different stages component through the lifecycle hooks.

There are eight lifecycle hooks in Angular

• ngOnChanges()
• ngOnInit()
• ngDoCheck()
• ngAfterContentInit()
• ngAfterContentChecked()
• ngAfterViewInit()
• ngAfterViewChecked()
• ngonDestroy()

Multiple HTTP calls in the Angular 2 can be chained using the mergeMap operator.

//example
import { mergeMap } from 'rxjs/operators';
this.http.get('./customer.json').pipe(
  mergeMap(customer => this.http.get(customer.contractUrl))
).subscribe(res => this.contract = res);

This merge operator is used by the Angular version above 4.3.

Angular 2 is written in Typescript Programming language.

The HTTP Interceptor service is used to handle the errors specific in Angular 2. The HTTP Interceptor service can be created and registered globally at the root module using the Angular Providers. Once it is defined at the root module, the HTTP Interceptor will intercept all the HTTP requests and the responses. So it makes an ideal place to catch all the common errors and handle them.

The EventEmitter class in Angular 2 is used to emit custom events synchronously or asynchronously. It has the emit method to emit these custom events.

//syntax
class EventEmitter<T> extends Subject {
  constructor(isAsync: boolean = false)
  emit(value?: T)
  subscribe(generatorOrNext?: any, error?: any, complete?: any): Subscription
}

The Hashtags in Angular 2 is a syntax that is used to declare the DOM elements as variables. These templates render as an HTML and # is used to declare local variables that reference DOM objects in a template.

The @ViewChild() is a decorator that is used to configure a view query. It can be used to get the first element or the directive matching the selector from the view DOM. The @ViewChild also provides an instance of other components or directive in a parent component so the parent component can access the methods of that component or directive.

The ng_content tag is used as a placeholder to display dynamic content. This placeholder tag is replaced with the original content as the template is parsed. The ng-content creates components that can be configured depending on the needs of the user.

Decorators are functions that are invoked with a prefixed @ symbol and immediately succeeded by a class, parameter, method or property. The decorator function is supplied data about the class, parameter or method, and the decorator function returns something in its place or manipulates its target in some way. Usually, the "something" a decorator returns is the same thing that was passed in, but it has been augmented in some way.

Decorators are designed for a future version of JavaScript, but the Angular team wanted to use them, and they have been included in TypeScript.

.subscribe is a method of rxjs library that Angular uses internally to observe the Observable objects. Calling .subscribe() method returns a Subscription object that has an unsubscribe() method, which can be used to stop receiving notifications.