What is Angular 2?

ABCDEFG
AngularJS is a framework to build large scale and high performance web application while
keeping them as easy-to-maintain. Following are the features of AngularJS framework.

 Components − The earlier version of Angular had a focus of Controllers but now has
changed the focus to having components over controllers. Components help to build the
applications into many modules. This helps in better maintaining the application over a
period of time.

 TypeScript − The newer version of Angular is based on TypeScript. This is a superset of

JavaScript and is maintained by Microsoft.

 Services − Services are a set of code that can be shared by different components of an
application. So for example if you had a data component that picked data from a
database, you could have it as a shared service that could be used across multiple
applications.

What are the key components of Angular 2?

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.

Explain Modules in Angular 2.

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.

Explain Components in Angular 2.

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.

What are Angular 2 directives? Explain with examples.

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.

How will you handle errors in Angular 2 applications?

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

 What is routing?
 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.
 What is CLI?
 Command Line Interface (CLI) can be used to create our Angular JS application. It also
helps in creating a unit and end-to-end tests for the application.
 What is Dependency Injection? Explain with example.
 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.
 Step 1 − Create a separate class which has the injectable decorator. The injectable
decorator allows the functionality of this class to be injected and used in any Angular JS
module.
 @Injectable()
 export class classname {
 }

 Step 2 − Next in your appComponent module or the module in which you want to use
the service, you need to define it as a provider in the @Component decorator.
 @Component ({
 providers : [classname]
 })

Explain tsconfig.json file.

This file is used to give the options about TypeScript used for the Angular JS project.

Following are some key points to note about the above code.

 The target for the compilation is es5 and that is because most browsers can only
understand ES5 typescript.

 The sourceMap option is used to generate Map files, which are useful when debugging.
Hence, during development it is good to keep this option as true.

 The "emitDecoratorMetadata": true and "experimentalDecorators": true is required

for Angular JS decorators. If not in place, Angular JS application will not compile.

Explain package.json file.

This file contains information about Angular 2 project. Following are the typical settings in the
file.

Some key points to note about the above code −

  There are two types of dependencies, first is the dependencies and then there are dev
dependencies. The dev ones are required during the development process and the
others are needed to run the application.

 The "build:watch": "tsc -p src/ -w" command is used to compile the typescript in the
background by looking for changes in the typescript files.

Explain systemjs.config.json file.

 This file contains the system files required for Angular JS application. This loads all the
necessary script files without the need to add a script tag to the html pages. The typical
files will have the following code.

Some key points to note about the above code −

 'npm:': 'node_modules/' tells the location in our project where all the npm modules are
located.

 The mapping of app: 'app' tells the folder where all our applications files are loaded.

Explain app.module.ts file.

Let's go through each line of the code in detail .

 The import statement is used to import functionality from the existing modules. Thus,
the first 3 statements are used to import the NgModule, BrowserModule and
AppComponent modules into this module.

 The NgModule decorator is used to later on define the imports, declarations, and
bootstrapping options.

 The BrowserModule is required by default for any web based angular application.

 The bootstrap option tells Angular which Component to bootstrap in the application.

How will you get a substring from a string?

The first Topic is {{appList[0] | slice:1:2}}

How will you convert a string into a date?

The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}

How will you convert a string into a currency?

The currency of this Tutorial is {{newValue | currency}}

How will you convert a string into a percentage?

The percentage of this Tutorial is {{newValue | percent}}

Differentiate between Angular 2 Component Constructor vs. OnInit event?

The constructor is a typescript feature. The constructor is only related to class instantiation and
it’s nothing to do with Angular 2 and it is use to some initialization processing with respect to
class hierarchies for the newly created instance.

The ngOnInit event is an Angular 2 life-cycle event/ method that are called after the
first ngOnChanges. The ngOnInitmethod is use to parameters defined with @Input otherwise the
constructor is OK.

11. What is Angular 2 Directives?

* Angular 2 directives meta-data annotation is used to register the directives.
* The directives are used to add behaviour to existing DOM elements.
* The directives are used to design a reusable component.
* More than one directive is used per DOM element.
* The directive does not have @View etc.

Example

import {Component, View} from 'angular2/core'';

@Component({
selector: 'user-detail'
})

@View({
template: "<div> <h1>{{userName}}</h1> <p>{{phone}}</p>"
 })

class userDetail {
constructor(public userName: string, public phone: string) {}
}

<user-detail></user-detail></div>

@Components @Directive

@Component meta-data annotation is used to register the @Directive meta-data annotation is used to
components. register the directives.

The directives are used to add behavior to existing

The components are used to create UI widgets.
DOM elements.

The directives are use to design a reusable

The components are used to split to application into smaller parts.
components.

More than one directive are used per DOM

Only one component is used per DOM element.
element.

In the components, @View, template and templateUrl are

The directive do not have @View etc.
mandatory in the components.

. What is Angular 2 RouteParams?

The Route Params :- The route parameter is used to map given URL's parameters based on the
rout URLs and It is an optional parameters for that route.

Syntax :-

params : {[key: string]: string}

Example,

@RouteConfig([
{path: '/employ/:id', component: employe, name: 'emp'},
])

Router-outlet directive :- Router-outlet directive is used to render the components for specific
location of your applications. Both the template and templateUrl render the components where
you use this directive.

Syntax :-
<router-outlet></router-outlet>

Router-link directive :- Router-link directive is used to link a specific parts of your

applications.

Syntax :-

<router-link></router-link>

Example,

<a [router-link]="['/AboutMe']">About Me</a>

The Route-Config :- The route config is used to map components to URLs.

Syntax :-

@RouteConfig([
{path: '/', component: Home_Component, as: 'Home'},
{path: '/AboutMe', component: AboutMe_Component, as: 'AboutMe' }
{path: '/ContactMe', component: ContactMe_Component, as: 'ContactMe' }
])

. What is Dependency Injection (DI) in Angular 2?

Angular 2 Dependency Injection consists of three things.

1.Injector
2.Provider
3.Dependency

Injector :- The injector object use to create instances of dependencies.

Provider :- A provider is help to injector for create an instance of a dependency. A provider

takes a token and maps that to a factory function that creates an object.

Dependency :- A dependency is the type of which an object should be created.

Model–View–ViewModel (MVVM) is a softwarearchitectural pattern. MVVM is used to two-way

bind data within views. This is usually a client-side implementation (e.g. using
Knockout.js). MVC on the other hand is a way of separating concerns on the server-side.
What problem is Angular 2 trying to solve?

Angular 2 is providing MVVM and MVC architecture for browser Javascript code
management. It provides modules for isolating application code, routing between controllers,
dynamic template loading and extending HTML markups in terms of components and
directives.’

How can we bind a variable with DOM element in Angular 2?

By using # symbol

What are pipes in Angular 2

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.
What is Host Decorators in Angular 2

Host decorators bind properties of component with UI element values. The properties inside
component class definition decorated with @HostBinding can be accessed in template from
assigned property i.e. @HostBinding() title = ‘My Title’

What are Observables in Angular2

Observables in Angular 2 are similar to promises but with major differences that make them
better. Observables handle multiple values over time which makes them a good candidate for
working with real-time data. Observables can also be cancelled and this gives a better control
when working with in-flow of values from a stream. Observables is an ES7 feature which
means you need to make use of an external library to use it today.
What is AOT Compilation? Explain its advantages and disadvantages?

➔ AOT stands for Ahead of Time, There is no different compiler used in AOT just the sequence
of process is changed.
Instead of compiling at runtime in the browser like JIT compilation.
The components and templates are compiled at built time and converted to native JavaScript
and html.
So the browser does not have compile the application so it can directly render it and save time
and system resources.
Advantages:AOT provides build time error detection so many compile type errors are detected
before it running the application.
Faster download times as the application is compiled and bundled at build time, which
eliminates the need of loading the angular compiler and its libraries leading to a lesser runtime.
Faster Rendering time as the application is already compiled and only needs to be rendered on
the browser.
Disadvantages: Angular version lower than 4 produces large JavaScript bundles after
compilation, which defeats the purpose of AOT.
It only works only with HTML and CSS, other file types need to be built previously.
It needs a clean-up step before compiling.

What is lazy loading?

➔ Lazy loading modules speeds up our applications startup time.

Lazy loading creates multiple bundles and loads them on demand in runtime.
If we had loaded all our components and templates into one big bundle, it would lead to a large
performance penalty.

What is Change detection?

➔ Change detection basically is the process of detecting the changes in the internal state of our
application which might be caused due to Events, XHR and Timers and make it visible in the
user interface.
Change detection work on the principle of zone.js in Angular 2/4.

What are Directives in Angular 2/4?

➔ Directives in Angular are used to add behavior to our existing DOM elements.
We use @Directive meta-data annotation to register directives.
Directives in angular are used to design reusable components.
Directives do not have their own views.
What Are Event Emitters in Angular 2/4?

➔ If the change in one of the child components needs to be reflected to any of its parent
component, we can emit the event by using Event Emitter API in Angular.
EventEmitter is class present in @angular/core module, which is used by components and
directives to emit custom events.

What is dependency injection in angular 2/4?

➔ In Angular 2/4, dependency injection gives us the ability to add functionality of a component
at runtime.
It also provides us a way to create a service that is a reusable piece of code, which can be used
across our application to perform a particular function.

What are typings in Angular 2/4?

➔ Typings is a way of installing the Typescript definitions using typings.json file, as it is

necessary as the browser does not understand typescript natively and hence it must be
transpiled first before rendering.

What are module loaders in Angular 2/4?

➔ Module loaders in Angular are used to bundle different modules that contain their
dependencies along with angular components into one bundle or multiple bundles (For lazy
loading) and load them in the browser.

What is the use of systemjs? How is webpack better to use in Angular 2/4?

➔ Systemjs is a client side module bundler in angular as it loads modules (components and
other files) on demand instead of loading an entire application at startup.
This largely reduces load times while starting up the app.
The up side of Webpack over Systemjs is that it bundles and creates a single file called
bundle.js, which contains HTML, CSS and JS etc.
While the initial load time might take a few seconds once the app is cached it becomes lightning
fast and will lead to a large boost in performance.

What are services in Angular 2/4?

➔ In Angular 2/4 services are reusable function which include their properties used to perform
some common functionality which can be used by different components instead of writing the
same code again and again for different components a data service can be used by multiple
components (via dependency injection).
How to enable lazy loading in Angular 2/4?

➔ Steps to enable lazy loading in Angular 2/4 are as follows:

Add loadChildren in place of components in the routes in the exported class in the Main Routing
module of your application.
Now change forRoot to forChild in the module or feature level router config module and you are
done.

What is viewchild?

➔ @ViewChild decorator is used when a parent component needs to communicate with and
pass data to the child component.
We need to pass the class name of the child component to @Viewchild decorator function.

How to share global data across components?

➔ In Angular 2/4, services are used to communicate data between different components.
As one component could pass, the data to the service while another component could read from
it.
Therefore, this data service could pass the data from one components to multiple components.

List out the differences between ActivatedRoute and RouterState, with reference
to Angular 2.
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.

Difference
Animation in Angular 4 is available as a separate package and needs to be
imported from @angular/animations. In Angular2, it was available with
@angular/core. It is still kept the same for its backward compatibility
aspect.

Template
Angular 4 uses <ng-template> as the tag instead of <template>; the
latter was used in Angular2. The reason Angular 4
changed <template> to <ng-template> is because of the name conflict
of the <template> tag with the html <template> standard tag. It will
deprecate completely going ahead. This is one of the major changes in
Angular 4.

TypeScript 2.2
Angular 4 is updated to a recent version of TypeScript, which is 2.2. This
helps improve the speed and gives better type checking in the project.

Pipe Title Case

Angular 4 has added a new pipe title case, which changes the first letter of
each word into uppercase.
<div>
<h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

The above line of code generates the following output – Angular 4

Titlecase.

Http Search Parameters

Search parameters to the http get api is simplified. We do not need to
call URLSearchParams for the same as was being done in Angular2.

Smaller and Faster Apps

Angular 4 applications are smaller and faster when compared to Angular2.
It uses the TypeScript version 2.2, the latest version which makes the final
compilation small in size.