AngularJS Interview Questions And Answers
1. What is Angular 2?
Answer:
Angular 2 is a JavaScript framework for developing desktop as well as mobile application.
It is an open source framework which is built by the developer at Google. Angular 2 helps us to develop web application in HTML and JavaScript. It follows simpler, faster and modular design approach.
Angular 2 framework is written in ECMAScript 6 (ES6). The ES6 compiler manages the versioning related problem.
2. What are the advantages of using Angular 2 over Angular JS?
Answer:
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
3. What is routing in Angular 2?
Answer:
Routing in Angular 2 is a mechanism for navigating between pages and displaying an appropriate component/page on browser. The Router helps mapping application URL to application components.
Following are some of the main components used to configure routing:
- Routes
- Router Imports
- RouterOutlet
- RouterLink
4. What is Module in Angular 2?
Answer:
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.
Every Angular 2 application has at least one module, the root module, conventionally named AppModule. Some important features like lazy loading are done at the Angular Module level.
5. What is Component in Angular 2?
Answer:
In Angular 2 application everything is component. Components are a logical piece of code for Angular JS application. Each component is mainly used to build HTML elements and provides logical boundary of functionality for the Angular 2 application. The components encapsulate all the logic, allowing you to reuse them across your application.
6.Explain the life cycle hooks of the Angular 2 application.
Answer:
The lifecycle events of Angular 2 component/directive are managed by @angular/core. It creates the component and renders it, processes changes when it’s data-bound properties change, and then destroys it before removing its template from the DOM. Angular has a set of lifecycle events. These events can be tapped and perform operations when required. The constructor executes prior to all lifecycle events. The constructor is meant for light weight activities and usually used for dependency injection.
Following events are the applicable for both component and directive.
- ngOnChanges: It is called when the value of a data bound property changes.
- ngOnInit: This is called after the first ngOnChange events.
- ngDoCheck: This is called after every change detection run.
- ngAfterContentInit: It is called after every component content initialized.
- ngAfterContentChecked: It is called after every check of component content.
- ngAfterViewInit: This is called after angular initializes the component view’s and child view.
- ngAfterViewChecked: This is called after every check of a component’s view(s).
ngOnDestroy: It is called just before the component is destroyed.
7. What is Lazy loading?
Answer:
In lazy loading our application does not load everything at once. It loads only those things what the user expects to see when the app first loads. It helps us decrease the startup time.
Lazy loading enables us to load only the module user is interacting and keep the rest to be loaded at run time on demand.
8. How to handle error in Angular 2 application?
Answer:
In Angular 2 applications, error handling is done by including the RxJS catch library and then using the catch 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.
The catch function contains a link to the Error Handler function.
9. What are the event emitters in Angular 2 and how it works?
Answer:
EventEmitter is an angular 2 abstraction and its only purpose is to emit events in components.
Any change occurred in the component always gets propagated from the current component to all its children in hierarchy. If the change from one component needs to be reflected to any of its parent component in hierarchy, we can emit the event by using Event Emitter API.
In short, EventEmitter is used by components and directives to emit custom events.
The EventEmitter class is defined in ‘@angular/core’ module.
@output() somethingChanged = new EventEmitter();
We use somethingChanged.emit(value) method to emit the event.
10. What is Pipes in Angular 2?
Answer:
Filters in AngularJS 1.x are known as Pipes in Angular 2.
Pipes allow us to change the data inside the template. Normally, a pipe takes the data and transforms this input to the desired output. There are many built-in pipes in Angular 2.
There are multiple built-in pipes in Angular 2.
- DatePipe
- UpperCasePipe
- LowerCasePipe
- CurrencyPipe
- PercentPipe
11. What is dependency injection?
Answer:
Dependency injection is an important application design pattern and Angular has its own dependency injection framework. It provides the ability to add the functionalities to the components at runtime.
Angular 2 Dependency Injection consists of three things.
- Injector: The injector object provides us a mechanism by which the desired dependency is instantiated.
- Provider: A Provider is a medium by which we register our dependency that need to be injected.
- Dependency: The dependency is an object of the class that we want to use.
12. What are the differences between Constructors and OnInit?
Answer:
Constructor:
Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialization of fields in the class and its subclasses. It is a feature of a class rather than an Angular feature.
OnInit:
ngOnInit is purely there to give a signal that Angular has finished initializing the component. ngOnInit is called just after the constructor call. The constructor should only be used to initialize class members. But when we have tasks related to Angular’s bindings we should use ngOnInit life cycle hook.
Example:
import {Component, OnInit} from ‘@angular/core’;
export class App implements OnInit{
constructor(){
}
ngOnInit(){
}
}
13. What is the use of codelyzer in angular 2 applications?
Answer:
All the application follow the some coding conventions and guidelines to maintain code in better way. Codelyzer is the open source tool that check if the coding conventions and guidelines are followed or not in our application.
Angular CLI supports the codelyzer. So codelyzer can be run via Angular CLI or npm directly.
14. What are differences between Components and Directives?
Answer:
Followings are the difference between components and Directives.
| Components | Directives |
| A @Component requires a view. | @Directive does not require a view. |
| The components are used to split the application into smaller parts. | The directives are used to design reusable components. |
| A component, rather than adding/modifying behavior, actually creates its own view. | Directives add behavior to an existing DOM element or an existing component instance. |
| Only one component is used per DOM elements. | More than one directive can be used per DOM elements. |
| @Component meta-data annotation is used to register the components. | @Directive is used to register the directive. |
15. What are the security threats should we be aware of an Angular 2 application?
Answer:
In a web application, security is the major issue. Angular 2 has the built-in protections against common web application vulnerabilities and cross-site scripting attack.
Following are the some basic guidelines to mitigate security risk.
- Cross-site scripting (XSS)
- Consider to using AOT compilation or offline compilation.
- Try to avoid insecure direct object references.
- Try to avoid external URLs if not trusted.
- Avoid direct use of DOM API.
- Cross-site request forgery (CSRF or XSRF)
- Avoid using dynamic HTML content in our application.
16. What is an Angular 2 services?
Answer:
Angular 2 Services are JavaScript functions. It is used when a common functionality needs to be provided to various modules, i.e. database functionality that could be reused among various modules. Services allow for greater seperation of concerns for your application and better modularity by allowing you to extract common functionality out of components.
Following are the steps to create the services in Angular 2.
- Create the Service File
name.service.ts
- Import the injectable member
import { Injectable } from ‘@angular/core’;
- Add the Injectable Decorator
@Injectable()
- Export the Services Class
export class ExampleService {
someMethod() {
return ‘Welcome!’;
}
}
17. What are the features of Angular 2 Service?
Answer:
Following are the features of services in Angular 2.
- Services are singleton object i.e. only one instance of service exists throughout the application.
- Services are capable of returning the data in the form promises or observables.
- Service class is decorated with @Injectable() decorator.
18. What are the differences between Observables and Promises?
Answer:
Both Observables and Promises come with abstractions that help to deal with asynchronous nature of our application.
Observables:
Observable is just a function that takes an observer and returns a function. It is nothing more than a specific type of function with a specific purpose.
It accepts an observer: an object with ‘next’, ‘error’ and ‘complete’ methods on it. And returns a cancellation function.
Observer allows to subscribe/unsubscribe to its data stream, emit next value to the observer, notify the observer about errors and inform the observer about the stream completion
Observer provides a function to handle next value, errors and end of stream (ui events, http responses, data with web sockets).
Works with multiple values over time
It is cancel-able/retry-able and supports operators such as map, filter, reduce etc.
Promise:
A promise represents a task that will finish in the future
Promises is resolved by a value
Promises get rejected by exceptions
Not cancellable and it returns a single value
19. What is CLI in Angular 2?
Answer:
CLI stands for command line interface. The CLI makes it easy to create an Angular JS application.
Angular 2 CLI offers “generate” command. With “generate”, you can create perfect components, services, modules, directives, interfaces, and pipes in seconds using only one line of text.
The great thing about the CLI is that it will create some baseline test for your classes as you generate them, making it even easier to write unit tests.
20. How can we achieve Internationalization using Angular 2?
Answer:
It can be achieved using the directive i18n.
21. How to create and use a custom pipe?
Answer:
Pipes are used in templates to convert output to user friendly and readable form within interpolation braces i.e. {{ release | date }}. The ‘|’ is denoted as pipe.
A pipe takes in data as input and transforms it to a desired output.
We have a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe in Angular.
You can write your own custom pipes.
Steps to create custom pipe:
- Creates a TypeScript class.
- Decorate the class with “@Pipe” decorator.
- Implements PipeTransform interface in TypeScript class.
- Override the transform() method
- Configure the class with @NgModule
Example of custom pipe
import { Pipe, PipeTransform } from ‘@angular/core’;
@Pipe({name: ‘exponentialStrength’})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent: string): number {
let exp = parseFloat(exponent);
return Math.pow(value, isNaN(exp) ? 1 : exp);
}
}
22. Explain the data binding Angular 2.
Answer:
Data binding is the connection bridge between view and business logic in the application. It is the automatic synchronization between Model and the View.
Following are the types of data binding available in Angular 2.
- Interpolation
It is the easiest way for data binding.
Example: <h3>{{vm.student.name}}</h3>
- One Way Binding
In Angular 1, ng-bind directive is used for data binding. But in Angular 2, we use HTML DOM element property for one way binding.
Example: <h1 [innerText]=”student.name”></h1>
- Two Way Binding
Two-way data binding combines the input and output binding into a single notation using the ngModel directive.
Example: <input [(ngModel)]=”student.name”/>
Event Binding
Event binding can be done by using any valid HTML event like click, focus, blur etc.
Example: <button (click)=”sendForm()”>Send</h1>
