Angular 2

Following are some of the important Angular 2 Interview Questions and Answers

Describe important features of Angular 2?

Angular 2 is a JavaScript framework for developing web applications.Since it is a complete rewrite of Angular 1.0 ,so learning AngularJS 1.0 is not required for creating Angular 2 applications.

It is well suited for developing mobile applications unlike AngularJS 1.0 which was suitable for building desktop applications.It is also much faster than Angular 1.0.

It supports the modern browsers as well as the older browsers.Applications are better structured than previous versions of Angular.It supports server side rendering for faster rendering of views even on slow devices such as mobile.The size of Angular 2 library is smaller compared to previous versions.Also Angular 2 applications use ahead of time compilation which makes them faster.

What are the advantages of Angular 2 ?

Angular 2 being a complete rewrite of AngularJS provides several benefits over AngularJS.Some of the advanatages of using Angular 2 are:

• Cross platform Angular 2 applications can run on different platforms such as Mobile,Desktop.
• Server Side Rendering improves the page load time.This is specially useful for devices such as Mobiles.This is also better for SEO.
• Modular Applications developed using Angular 2 are modular as they are developed using TypeScript.TypeScript applications are organised using components.This results in better organisation of application.
• Lightweight Angular 2 applications are lightweight and faster compared to AngularJS.

Better performance because of these reasons:

• Better change detection.
• Ahead of Time compilation (AOT) improves rendering speed.
• Lazy Loading.
• TypeScript can be used for developing Angular 2 applications.
• Better syntax and application structure.

Which languages are used for developing Angular 2 applications?

Angular 2 applications can be developed in any of the following languages:

• Typescript   Prefered Language for developing Angular 2 applications.
• JavaScript
• Dart

Though any of the above languages could be used for developing Angular applications but Typescript is the preferred language for developing Angular 2 applications.. As Angular 2 is written in TypeScript so it is preferable to develop Angular 2 applications in TypeScript.

We don’t have to worry about the JavaScript or ECMAScript version as its the compiler’s responsibility to manage the version issues.

What are Components?

A component is a building block of Angular 2 application.Angular 2 application is created as a tree of components.A component is declared by using @Component() decorator function.To develop Component you first create a class and then decorate it with the @Component() decorator.

@Component({
selector: 'first-component',
template: `<p>Hello from first component</p>`
})
export class FirstComponent {
}

When we declare Component we define metadata for component.In this example we have defined selector and template metadata for the FirstComponent component.

Though we have defined inline html above ,we can declare html in a separate html file and use the the templateUrl property in the Component decorator:

templateUrl: './app.component.html'

Similarly we can define css in a separate css file and link to it from component as:

styleUrls: ['./app.component.css']

Also we usually use repository in a component class which is injected in the constructor of the component as:

constructor(private employeeRepository: Repository) { }

What is a Module?

Any application consists of various functionalities for different uses.For example there could be a functionality related to fetching employees from a database or a functionality for displaying those employee
details.If you have several features in your application then you can break those into different Angular modules to create an application which is easier to maintain.Modules are common in most of the languages.

Angular modules serves a similar purpose for creating a loosely coupled application.Angular modules are defined using the @NgModule() decorator.You use @NgModule as:

@NgModule({
providers: [EmployeeRepository],

})
export class FetchEmployee{

}

So Modules segregates application functionality.Module can consist of collection of components,directives and services.Every application has one root module which is bootstrapped to launch the application.Angular app usually consists of various modules for different functionalities.These are feature modules.

Angular modules are created using the NgModules() decorator function.

Angular application consists of a root module defined in app.module.ts.This defines the all the modules used in the application.

What is a JavaScript Module?

Often we need to define reusable logic in our application.

JavaScript ES2015 provides a way to define reusable logic using modules.Functionality which you want to reuse across your application you define in a module.So JavaScript file is a module.For example you can define a JavaScript file called Utility.js as:

export function displayTime() {
d=new Date();
alert(d.getTime());
}

then you can reuse the above function in a separate JavaScript file as:

import {displayTime} from './Utility.js';

displayTime();

What is app.module.ts file?

Application consists of different functionalities for different things.Any specific functionality in contained in an Angular module.
Angular module is defined using the NgModules decorator.

An angular application consists of a root module called AppModule which is defined in a file named app.module.ts.This module is
responsible for launching or bootstrapping Angular application.

What are Angular directives?

Directives are instructions which are specified in DOM. They add behaviour to existing HTML markup.

The different types of directives in Angular are :

• attribute directives Attached to an element and modifies its properties and appearance.An Attribute directive changes the appearance or behaviour of a DOM element.
• structural directives Modifies the HTML code.

Component is also a directive that has both view and behaviour

What is a Service?

Service defines functionality which could be shared by different components.
You define a service by annotating a class with the @Injectable() decorator as:

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

@Injectable({
providedIn: 'root',
})
export class TestService {

constructor() { }

}

Explain dependency injection in angular?

DI framework takes care of dependencies in Angular application.Angular DI framework is based upon providers, injectors, and tokens.
Injector registers all the dependencies using the providers.Suppose we have a class called class1.Now instead of creating he instance of Service1 we can pass it using the Angulars dependency injection as:

class class1
{

constructor()
{
let svc1=new Service1();
}
}

instead of writing the above logic we inject the service through the constructor:

class class1
{

constructor(svc:Service1)
{
let svc=new Service1();
}
}

Now for the service to be passed or injected using the constructor it has to be injectable or decorated using the @injectable() decorator.

we can declare a class using the Injectable decorator as:

@Injectable()
class Service1{
}

What is a Template?

Component represents both the logic as well as the view for that logic.View of a component is declared by using the template.It is the template which is rendered.

We can define template in line in the component template metadata property:

@Component({
selector: 'hello-component',
template: '{{Hello}}'
})

We can also define templates in separate html file and use the templateUrl property in component:

@Component({
selector: 'hello-component',
templateUrl: './hello.html'
})

What is the use of constructor in component?

constructor is a function which is called before any life cycle hook is called.It is called for injecting application dependencies.In the following example a service called ProductsService is being injected into the constructor.

class SimpleComponent {
products:Array<any>;
constructor(private productsService: ProductsService) {
this.products = productsService.getProducts();
}
}

Which Data bindings which are supported in Angular 2?

Interpolation   In interpolation binding we specify the binding using expressions

<h2>{{employee.name}}</h2>

Property Binding  In property binding we bind the custom property using square brackets

<h2 [innerText]="employee.name"></h2>

Event Binding   In event binding we enclose the event name in parenthesis and assign the event handler method to the event:

<button (click)="gotoDetail()">View Details</button>

Two-way Binding  In Angular 2 we define two way binding as:

<input [(ngModel)]="employee.name"/>

Input and output decorators in angular?

These are useful when we have child components.

Input() decorator 

When we want to pass value from parent to child then we declare input property in child:-

@Input() inputProp: string;

Output() decorator

Now if the child wants to pass some value to the parent component then it declares output property.This property is of type EventEmitter:-

@Output() outputProp = new EventEmitter<string>();

now in the parent component’s template we can declare the child component as:

<child-com (inputProp)="processMessage($event)"></child-com>

How Angular 2 application is launched?

There is a single root module in every Angular application.Angular application is launched by bootstrapping this root module.

What is Angular cli?

The Angular CLI is a tool which helps in the development,testing,build and deployment of  the application.You can install the CLI using npm:

npm install -g @angular/cli

• Generates new project structure with required files instead o manually creating those files
• It can generate specific components, services, routes, and pipes
• It serves a localhost development server which is used in development
• It sets up Karma for running unit tests

For generating a new app we use:

ng new myapp

to serve the application

ng serve

to see all the available commands

ng --help

What is router-outlet?

The route which is matched by the router is used display the component.The template defined by the component is displayed in an area defined by the router-outlet.You declare router-outlet in a  view as:

<router-outlet></router-outlet>

What is Angular Module or NgModule?

Angular module is class decorated with the @NgModule decorator function.

Its a decorator function which has one argument ,a metadata object with properties describing the module.
Some of its important properties are:

• declarations views which belong to this module.
• exports declarations which are visible in the components of other modules.
• imports other modules whose classes are needed in this module.
• providers services which are provided by this module
• bootstrap This property is set by the root module

@NgModule({ 
providers: list of providers, 
exports:list of components, 
imports:list of components })

What is package.json?

The package.json file is core to the Node.js and is also part of the Angular project.It consists of metadata about the project such as the name and version of the project and any project dependencies.The dependencies are the modules on which the project depends.

You can create a package.json file by using the npm command as:

npm init

Following are the important contents of example package.json file:

"name": "CodeCompiled",
"version": "1.0.0",
"description": "SamplePacakge",
"author": "User",
"dependencies": {
},
"devDependencies": {},
}

dependencies and devDependencies specifies the modules which are required by your application.devDependencies section specifies the dependencies that are required only in the development.

What is a tsconfig.json file?

TypeScript is a language in which Angular 2 applications are written.It is a superset of JavaScript.Since browsers understand only JavaScript so TypeScript code need to compiled to JavaScript.This is done by the TypeScript transpiler. Using tsconfig.json file we specify the settings for the TypeScript transpiler. Main property in tsconfig.json file is compilerOptions property which is used to specify options to the TypeScript compiler.

Difference between promise and observable?

Promise returns a single value while observable returns multiple values

The calling function calls the asynchronous function which returns a promise.The calling function specifies what should happen when the calling function gets the promise object:

objectPromise.then(value => console.log(value));

If we have single values then we use promise objects.

Observable is also used for calling a function asynchronously but the calling function can return multiple values:

observableObject.subscribe(value => console.log(value));

So if your asynchronous function returns multiple values then you use observable and if it returns single value then you use promise.

New features in Angular 8 ?

Differential loading This improves performance as the appropriate bundles are loaded for the browsers,for browsers that support ES2015+ and for older browsers that support the ES5.

Dynamic imports for lazy routes Improves TypeScript and linters

CLI workflow improvements ng build, ng test and ng run are extended to 3rd-party tools.

How can you do Angular 7 to Angular 8 upgrade?

ng update @angular/cli @angular/core

Check which version of Angular you are using?

ng --version

this command will list the current version of angular and the current version of cli

Generate component and service using cli?

component:

ng generate component <component_name>

service:

ng generate service <service_name>

directive:

ng generate directive <directive_name>

What is lazy loading in Angular2?

Angular 2 application is a collection of modules and components.There are two ways we can load Modules:

• Eager Module loading  Loading module at application startup
• Lazy loading  Loading Module only when required

Module which is required can be loaded instead of loading all the modules at application initialization.This has the obvious advantage of improving the application startup time.

We enable lazy loading in Angular 2 by using the loadChildren property in route

{ path: 'URL', loadChildren: 'modulePath#ClassName' }

What is LifeCycle hook?

Each Angular component has a life cycle which is composed of different phases.You can handle methods to implement functionality when certain lifecycle event happens

• ngOnInit when component’s properties have been initialized
• ngDoCheck for implementing functionality related to change detection
• ngOnDestroy when component is destroyed

What is @Injectable ?

In Angular a service is a class decorated with the @Injectable decorator.

What is AOT compilation?

AOT compilation stands for  Ahead Of Time compilation, in it angular compiles  components to native JavaScript and HTML during the build time instead of runtime.

This drastically improves the performance of the Angular 2 application.With Just in time compilation ,the compilation happens on the users browser at runtime.In the case of Ahead of time compilation ,the application is compiled and optimized at the build time instead of run time.So this improves the rendering of the application UI.This approach should be used in production builds.

Follow on:

Decorators in Angular 2 are used extensively.Decorators are used to attach metadata to program elements such as class and properties.Metadata is used to specify details about program entities.Decorators give special meaning to program elements.Here we will look at some of the most commonly used Decorators in Angular 2.

Decorators are a feature of TypeScript and are implemented as functions.The name of the decorator starts with @ symbol following by brackets and arguments,since decorators are just functions in TypeScipt.Following are the benefits of using decorators in Angular 2:

• Since decorators add information declaratively,so extra information about the program elements can be obtained without execution.
• Appropriate JavaScript Code is generated depending upon the declarative information provided by the decorators.
• Helps separation of concerns,since declarative information is separated from the implementation.

We pass the metadata as JSON object argument to the decorator.This JSON object specifies the properties or metadata of the decorator.To know more about decorators in TypeScript please refer Decorators in TypeScript.

There are four types of program elements on which decorators can be applied.They are class,methods,parameters and method arguments.

Following are some of the commonly used decorators in Angular 2:

@NgModule Specifies that a class is Angular module.

@Component Specifies that a class is Angular class.

@Directive Attaches behaviour to HTML DOM or changes its appearance.

@Injectable Informs Angular that decorated class can be used with dependency injector.

@ViewChild Parent component can access child component by using this decorator.

If we take the example of @Component decorator, then it is used to specify that the decorated class is a component.It is one of the most commonly used decorator in Angular2.Since Angular 2 applications is composed of components so you will be using this directive extensively while developing an Angular 2 application.Actually Angular 2 application is just a tree of components ,which has some hierarchy.

We use Component decorator as:

@Component(
selector:'home-comp',
templete:'<span> Home </span>'

)
export class HomeComponent
{

}

The Component decorator is a class decorator.Here the selector and template specifies the metadata for the component.

As of now most browsers doesn’t support decorators natively.So the TypeScript code must be transpiled to javascript when using decorators.

Follow on:

Two of the main parts of any angular 2 application are

• Component
• Module

Module is a container of other application elements such as component,directives.We create a module in angular 2 application using NgModule decorator as we have seen in  Developing a Module in Angular 2.

To create component we use the NgComponent decorator.We pass the metadata in the NgComponent decorator function.
Following are the steps to create a component in Angular 2.

1. Declare a class.This class represents our component.In the following class we are setting a message property in the constructor.

export class ComponentClass
{
message:string;

constructor(){
this.message="Hello World!";
}
}

2. Attach the @Component decorator function to this class.The NgComponent  decorator here attaches some data to the class.

This decorator function makes the class an angular component.Without this decorator function ,our class is just like any other class.In the following @Component decorator we are passing to meta data properties  selector and template.The selector property is the html tag which we need to use in our html page to call the component.

@Component({
selector: 'my-first-component',
template: '<div>Message {{message}}. </button></div>'
})

export class ComponentClass
{
message:string;

constructor(){
this.message="Hello World!";
}
}

Here we just need to use the <my-first-component></my-first-component>  to call our component.

So we need to follow the above two steps to Create Component in Angular 2.

The use of NgComponent is:

• To inform Angular that the class represents a component
• The provided metadata helps Angular generate the appropriate JavaScript for the component class

 

Follow on:

Angular 2 applications are designed for better application organization.Two of the main concepts related to organization of code in Angular 2 are components and modules.Both Components and modules are created by using the decorator functions.NgModule in Angular 2 is used to create a module.

Here we will see how to implement a simple module in Angular 2.

To create Angular 2 module we use the decorator function @NgModule().To this function we  pass metadata information in the form of a metadata object.

Following are the main steps to implement a simple module in Angular 2 application

1.Import the NgModule which is required to create a new module

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

2. Declare  a new class.This is the class which will represent our module.

export class AppModule{ }

We have named our class as AppModule since it represents the root module in our application.

3.Decorate this class with the @NgModule() decorator function,

@NgModule({

})
export class AppModule{ }

4.Add the metadata in the @NgModule().Here we are adding bootstrap.This metadata represents the bootstrap component.

@NgModule({
 bootstrap:    [ AppComponent ]
})

If required we can include import declarations in the @NgModule decorator function as:

@NgModule({
 bootstrap:    [ AppComponent ],
imports: [ // put all your modules here
BrowserModule, // Angular 2 out of the box modules
TranslateModule, // some third party modules / libraries
]
})

The above decorator specifies AppComponent in the bootstrap property.What this means is that there is a component called AppComponent which will launch our application.

There is AppComponent in App in app.module.ts file.

In the app.module.ts we launch the application by calling the bootstrapModule() function.

//app.module.ts
platformBrowserDynamic().bootstrapModule(AppModule);

 

Follow on:

HTML is the primary language of the web since the inception of web technologies.It is also one of the easiest languages to learn.But it has a very specific purpose ,which is to create the static documents for the web.

But software development has come a long way since its inception.From browsers serving static HTML pages , dynamic web applications ,single page applications there have been several milestones in web development technologies.

AngularJS was developed to make applications more interactive for the end user.It was designed to overcome the limitations of HTML.HTML is suitable for creating applications to just display the documents. AngularJS  framework also helps in development of single page applications.

AngularJS  was developed in 2009 ,but web has changed a lot since then.There are new web standards such as web components and shadow DOM.Angular 2 supports these features.

Lot of things have changed since the first release of AngularJS. Angular 2 is a complete rewrite of AngularJS which addresses these changes in web development.

Angular 2 is a platform for building web and mobile applications.So we can build variety of applications in angular 2 from web applications to mobile applications.

Advantages of Angular JS 2.0

Following are some of the distinguishing features of Angular 2.These advantages of Angular JS 2.0 are introduced considering the changing nature of the web.Web has changed a lot since the initial release of AngularJS. Angular2 is designed considering the current nature of the web.

Applications developed in Angular 2 have wider reach:

Cross platform

Though you could develop mobile applications in AngularJS but there were few challenges which needs to be addressed.When building mobile applications using AngularJS you need to address issues such as:

• Low memory footprint
• Touch support

Angular JS 2.0 is designed with mobile first approach.We can create applications for the web using Angular 2 which will work on different platform such as iOS and windows.

Angular 2 applications can run across different browsers  since angular 2 applications are transpiled to ES 5. Transpiling coverts from one version of ES to another.

Since ES 5 is supported in all the browsers so angular 2 applications can run on all the browsers.

Responsive applications for web and mobile

Angular 2 web applications are responsive so that they will work on different devices.

Native applications for ios and android

Native mobile applications are optimized for specific mobile platforms such as iOS and Android.So native mobile applications build with angular are better in terms of performance.

Faster rendering

Angular 2 supports server side rendering.Server side rendering improves the speed of page rendering since the rendering happens on the server instead of client.So if the page is being rendered on a mobile device then server side rendering could have significant impact on the page load time.

Server side rendering means that the HTML is generated on the server rather the browser which results in improved application response time.

Server side rendering improves the initial page load time on the server.Also in these scenarios  initial page loading could be very slow:

• if there is a slow web service call
• if the rendered html is complicated

Server side rendering is useful in these scenarios.Also server side rendering is better from SEO perspective.

Faster web applications.

Angular 2 is 2.5 times faster than angular 1

Change Detection

There is no digest cycle in angular 2.Digest cycle means that even for a change in single expression all the expressions in our application are re-evaluated.This impacts the performance of the application.Angular 2 has better mechanism for handling such changes ,using change detection mechanism.

Every component in angular 2 has a change detector which re renders the view whenever the component gets changed.

Less learning curve

Angular 2 is easy to learn than angular 1.Less learning curve than angular 1.If you are just starting with angular you can start with angular 2.0 instead of angular 1.0.Since angular 2 uses several new features such as components and language typescript which is a superset of javascript ,developer need not learn Angular 1 to learn Angular 2.

For learning how to develop application in Angular 2 refer Starting with Angular 2

Supports TypeScript

Angular 2 supports ES 5 and ES 6 compliant languages.This includes Dart and TypeScript. TypeScript is a language which is developed by Microsoft.It has lots of useful features such as compile time type checking , support for decorators.The main advantage of TypeScipt is that you have access to ES 6 and ES 7 features even if the browser doesn’t support it.

Follow on: