Angular 2

This for all the web developer using Angular in the web framework. We have list down the important interview questions that can help you to lend a job.

Q.1 What are the primary components of Angular 2?
This is one of the most common interview questions asked in an interview. The primary components of Angular 2 are -
1. Component:− Used to bring the modules together.
2. Service: − Used to create components which can be shared across the entire application.
3. Modules: − Used to break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task.
4. Templates: − Used to define the views of an Angular JS application.
5. Metadata: − Used to add more data to an Angular JS class.
Q.2 Define host decorator in Angular 2.
One of the frequently asked Angular 2 interview questions which is used to bind the properties of components with UI elements values, such that these properties defined with @HostBinding inside the component class.
Q.3 What are Pipes in Angular 2?

Pipes are used in templates to convert the content into the desired output or as per business requirement Symbol for pipe is like this “|”,

For Example - {{appList[0] | lowercase}}.

Q.4 List the hidden property in Angular 2?
Some of the hidden property in Angular 2 are -
1. The property is more powerful and is used to bind any property of the elements.
2. It is considered the closest cousin of ngshow and nghide.
3. It sets the display property “display: none”.
Q.5 List the features of structural directive in Angular 2?
The features of structural derivates are -
1. Structural directives are primarily used to manipulate DOM in angular.
2. Structural directives are also responsible for HTML layout, such that by adding, removing, or manipulating LMNs in angular, they shape or reshape the structure of DOM.
3. This structural directive is applied to a host element with the help of other directives such that the directives then do whatever it is supposed to do with that host element and its descendants.
4. 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.
5. 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.
Q.6 What do you understand by CLI?

CLI is abbreviated for Command Line Interface, that can be used to create the Angular JS application.

Using CLI, such that we can also create a unit and end-to-end tests for the Angular application.

Q.7 State the reasons for using decorators in Angular 2?

Decorators are used in Angular 2, as an identifier of class or type of the object which is created by the TypeScript.

Angular 2 identifies the class below decorator call as the definition of the class and extends the decorator specific properties with the class definition.

Q.8 How will you handle errors in Angular 2 Applications?

Angular 2 Applications provide with the option of error handling. Such that the errors reported in Angular 2 are handled by including the ReactJS catch library and later using the catch function.

Firstly, the catch function, is used after adding the catch library contains the link to the Error handler function. After which this error, handler function, the errors are sent to the error console, and also the errors are thrown back to continue the execution.

Such that whenever an error occurs it will be redirected to the error console of the web.

Q.9 What do you understand by component specific hooks?
Some of the component specific hooks in Angular2 are -
1. ngafterContentinit: It initializes the component content
2. ngAfterConctentChecked: It checks the binding of the external content.
3. ngafterViewinit: It creates the component view.
4. ngAfterviewChecked: It checks the bindings of the component’s view.
Q.10 What do you understand by Angular 2 RouteParams?
RouteParams are used to map the given URL’s based on the route URLs such that they become optional parameters for that route.
Q.11 What do you understand by lazy loading in Angular 2?
Lazy loading is a module that is used to decrease the start-up time. Whenever Lazy loading is used, then the system application does not need to load everything at once. Such that it only needs to load what the user expects to see when the application first loads.
Also the modules that 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. 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. We can perform Lazy loading in the following 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.
Q.12 Define a template in Angular 2?
Template in Angular 2 is used to define the views of the AngularJS Application.
Q.13 What do you understand by AOT compilation?
AOT is abbreviated for Ahead of Time. AOT is the compilation in which Angular compiles the components and templates to JavaScript and HTML while developing.
Q.14 What are host decorator in Angular 2?
Host decorators in Angular 2 are used to bind the properties of components with UI element values. Such that the properties inside a component class definition are decorated with @HostBinding are accessed in a template from the assigned property that is @HostBinding()title=’Our title'( whatever the title is).
Q.15 What do you understand by .angular-cli.json?
angular-cli.json is used to configure a project in angular2. We can find it in the root folder of your angular2 Project.
Q.16 What do you understand by Event emitters?
Event emitter is a class defined in core module which is used by components and directives to emit custom events.
Q.17 Differentiate between constructor and ngOnlnit in Angular js?
The points of difference are -
1. ngonInit is a method in a class structurally is not different to any other method in a class. On the other hand 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, referred as constructor injection pattern. On the other hand 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 n the other hand ngOnInit is a life cycle hook referred by Angular 2 to indicate that angular is done creating the component.
4. ngOnInit relies on the binding of the component. On the other hand it is not the case when a constructor is used.
Q.18 What are the modern browsers supported by Angular 2?
Angular supports most of the recent browsers such as Google Chrome, Firefox, Edge, IE for versions 9-11, Safari, iOS 7.1, Android 4.1 and IE Mobile.
Q.19 What do you understand by Traceur Compiler?
Traceur is a compiler that takes ECMAScript and compiles it down to regular Javascript which runs in the browser. Traceur is primarily used in several ways like -
1. 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.
2. 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.
3. Traceur compilers are broadly used in Angular 2 platform. It also supports transpilling and type checking via type annotations.
Q.20 What is the use of angular 2?

The use of Angular2 is widespread.
Angular2 increases developer productivity by offering various facilities to quickly develop web applications and SPAs or single page applications.

Angular2 is a Typescript based open source Javascript framework.

  • Angular 2 has hierarchical dependency using providers, declarations, etc
  • Angular 2 has CLI or command line interface of their own
  • For data binding, Angular 2 has more intuitive syntax.
  • For heavy data intensive applications, Angular 2 is faster than predecessors
Q.21 What is the difference between AngularJS and angular 2?

The differences between Angular and AngularJS are

  • AngularJS supports MVC architecture whereas Angular uses components and directives
  • AngularJS uses JavaScript and Angular 2 onwards uses Typescript
  • Dependency injection in AngularJS is injected into various functions but in Angular, it is hierarchical dependency using providers, declarations, etc
  • Angular 2 onwards has CLI or command line interface of their own, which is absent in AngularJS
  • For data binding, correct syntax of ng directives for event or property in AngularJS, is needed whereas in Angular it is more intuitive.
  • For heavy data intensive applications, Angular is faster as compared to AngularJS
Q.22 What is current version of angular?
The latest version of Angular is 8.2.13 as on Oct, 2019
Q.23 What is angular and why angular?

Angular is a web open source Javascript framework, to develop software applications for internet especially dynamic web applications. Angular is used to develop single page applications or SPA.

The main advantage of using Angular being, ease of development as it uses HTML like syntax to declare various functionality of a web application.

Why Angular, because Angular makes it easy to quickly develop application  for both web and mobile. Angular hides the crude implementation and many things are provided, as

Angular offers

  • Component-based architecture offering Reusability, Maintainability
  • TypeScript giving better tooling, cleaner code, and higher scalability
  • RxJS for efficient, asynchronous programming
  • Hierarchical dependency injection
  • Ivy renderer
  • Angular Material for streamlining Material Design interface engineering
  • Seamless updates using Angular CLI
  • Angular elements

Q.24 Why do we need angular 2?

Angular 2 is needed to streamline web application development.  Angular 2 makes it easy to develop dynamic web applications especially single page applications or SPA.

Angular 2 is a web open source Javascript framework for quick development of applications both for mobile and web.

Angular 2 distinctive features due to which we need Angular 2, is

  • Angular2 is a Typescript based open source Javascript framework.
  • Angular 2 has hierarchical dependency using providers, declarations, etc
  • Angular 2 has CLI or command line interface of its own
  • For data binding, Angular 2 has more intuitive syntax.
  • For heavy data intensive applications, Angular 2 is more fast than predecessors


Q.25 What are the new features of angular 2 why you used angular 2?

The new features of angular 2 are

  • Angular 2 uses TypeScript
  • Angular 2 has built-in support for mobile application development
  • offline compilation and fast change detection in Angular 2 boosts performance
  • Has 3 directive types - component, decorator and template directives
  • improved support for dependency injection
  • Data binding in Angular 2 is improved and done by wrapping the element inside a square bracket
  • completely component based
  • Has improved routing by navigational model, location service and URL resolver

Angular 2 is used  to streamline web application development.  Angular 2 makes it easy to develop dynamic web applications especially single page applications or SPA.

Angular 2 is a web open source Javascript framework used for quick development of applications both for mobile and web.

Q.26 What is angular good for?

Angular is good for developing application for both web and mobile.  Angular  is a web open source Javascript framework from Google.

Angular is good for

  • Modular application development
  • Support for both mobile and web
  • RESTful API
  • Uses HTML type syntax and extends HTML
  • Data Binding
  • Dependency injection
  • MVC architecture
  • Directives, filters, modules, routes etc
  • Separation of data model from view and user interaction

Q.27 What is the advantage of using angular?

The advantage of using angular, are

  • Angular enables Modular application development
  • Angular support application development for both mobile and web
  • Angular provides RESTful API
  • Uses HTML type syntax and extends HTML
  • Angular uses TypeScript  hence concise code
  • Angular has built-in support for mobile application development
  • offline compilation and fast change detection in Angular boosts performance
  • Has 3 directive types - component, decorator and template directives
  • improved support for dependency injection
  • Data binding in Angular is improved and done by wrapping the element inside a square bracket
  • completely component based
  • Has improved routing by navigational model, location service and URL resolver

Q.28 Why should I use angular?
You should use Angular to - Develop application for both mobile and web - Save time in application development - Have modular application - Use MVC architecture - Easily test the application being developed from early stages - Have less code while getting desired functionality
Q.29 What are the new features of angular 2?

The new features of angular 2 are

  • Angular 2 uses TypeScript
  • Angular 2 has built-in support for mobile application development
  • offline compilation and fast change detection in Angular 2 boosts performance
  • Has 3 directive types - component, decorator and template directives
  • improved support for dependency injection
  • Data binding in Angular 2 is improved and done by wrapping the element inside a square bracket
  • completely component based
  • Has improved routing by navigational model, location service and URL resolver

Q.30 Is angular 2 mobile oriented?

Yes, angular 2 is mobile oriented.

You can use Ionic or Nativescript for developing mobile applications or porting web application in Angular to a mobile application. Hence, angular 2 is mobile oriented.

Q.31 What is the difference between angular 2 and angular 5?

The difference between angular 2 and angular 5, is

  • Angular 2 was released in 2016 and Angular 5 in 2017
  • Angular 2 supports up to Typescript 1.8 and Angular 5 supports TypeScript 2.3 version
  • Angular 5 has a build optimizer
  • Angular 5 has Angular Universal State Transfer API to share the application state between server and client side
  • Angular 5 has extensive support of incremental compilation of an application
  • Angular 5 can remove unnecessary white space for reduced bundle size
  • Angular 5 has increases the internationalization across all the browsers and no need for i18n polyfills
  • Angular 5 has exportAs feature
  • Angular 5 has HttpClient
  • Angular 5 has new router Life-cycle Events
  • Angular 5 has improved faster Compiler support

Q.32 Is angular 2 Object Oriented?

Yes, angular 2 is Object Oriented. Angular 2 is based on Typescript.

Typescript is a strict syntactical superset of JavaScript and is an object oriented programming language. TypeScript compiles to JavaScript code in any JavaScript engine that supports ECMAScript 3 (or newer).

TypeScript Objects helps to model real world similar to that in OO programming.

Q.33 What is the difference between angular 2 and angular 4 and angular 5?

The differences between angular 2 and angular 4, are

  • Angular 2 was released in 2016 and Angular 4 in 2017
  • Angular 2 supports up to Typescript 1.8 and Angular 4 supports TypeScript 2.1 and 2.2 version
  • Angular 4 is next iteration of Angular 2 as Angular 3 was skipped.
  • Core concepts and inheritance is same in Angular 4 and Angular 2
  • Angular 4 has extensive changes in core library as compared to Angular 2
  • Angular 4 has reduced size of AOT compiler generated code
  • In Angular 4 animation is in @angular/animation
  • Angular 4 has, Else block in *ngIf introduced

The differences between angular 2 and angular 5, are

  • Angular 2 was released in 2016 and Angular 5 in 2017
  • Angular 2 supports up to Typescript 1.8 and Angular 5 supports TypeScript 2.3 version
  • Angular 5 has a build optimizer
  • Angular 5 has Angular Universal State Transfer API to share the application state between server and client side
  • Angular 5 has extensive support of incremental compilation of an application
  • Angular 5 can remove unnecessary white space for reduced bundle size
  • Angular 5 has increases the internationalization across all the browsers and no need for i18n polyfills
  • Angular 5 has exportAs feature
  • Angular 5 has HttpClient
  • Angular 5 has new router Life-cycle Events
  • Angular 5 has improved faster Compiler support

Q.34 Are there breaking changes between angular 2 and angular 4?

Yes, there are breaking changes between angular 2 and angular 4

Breaking changes between angular 2 and angular 4, are

  • Angular 4 supports TypeScript 2.1 and 2.2 version
  • Angular 4 has reduced size of AOT compiler generated code
  • In Angular 4 animation is in @angular/animation
  • Angular 4 has, Else block in *ngIf introduced
  • Angular 4 has extensive changes in core library
Q.35 Why is angular 2 used?

Angular 2 is used  to streamline web application development.  Angular 2 makes it easy to develop dynamic web applications especially single page applications or SPA.

Angular 2 is a web open source Javascript framework used for quick development of applications both for mobile and web.

Angular 2 is used as

  • Angular 2 uses TypeScript
  • Angular 2 has built-in support for mobile application development
  • offline compilation and fast change detection in Angular 2 boosts performance
  • Has 3 directive types - component, decorator and template directives
  • improved support for dependency injection
  • Data binding in Angular 2 is improved and done by wrapping the element inside a square bracket
  • completely component based
  • Has improved routing by navigational model, location service and URL resolver

Q.36 What Core Differences Observables have from the Promises?

Core difference Observables have from the Promises , as


Promises:

  • returns a single value.
  • They are non-cancellable.

Observables:

  • works with multiple values over time.
  • They are cancellable.
  • supports map, filter, reduce and similar operators.
  • proposed feature for ES 2016.
  • use Reactive Extensions (RxJS).
  • an array whose items arrive asynchronously over time
Q.37 What is the difference Between Constructor And Ngoninit?

Differences - Constructor Vs. ngOnInit
Angular 2 Constructors:-

  • The constructor: it is a default method runs when component is being constructed.
  • The constructor: it is a typescript feature and it is used only for a class instantiations and nothing to do with Angular 2.
  • The constructor: it is called first time before the ngOnInit(). The ngOnInit is called after the constructor, while ngOnInit is called after the first ngOnChanges. When an input or output binding value changes, the ngOnChanges is called.
Q.38 What Is AOT Compilation?

An AOT compilation stands for Ahead Of Time compilation, in which the angular components and templates to compile by the angular compiler 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.

Q.39 How can we set up our Development Environment For Angular 2?

Setting up our development environment for Angular 2 requires two basic steps:

  • Install npm, or node package manager.
  • Set up the Angular 2 application.
Q.40 What Is Npm?

Npm, or node package manager:

  • is a command line utility interacting with a repository of open source projects
  • Is the package manager for JavaScript.

Using npm we can install packages, libraries, and applications, along with their dependencies.

Q.41 How Can We Setting Up Angular 2 Application?
  • Create an application folder.
  • Create the tsconfig file(To configure the Typescript compiler).
  • Create the package.json file(To define the libraries and scripts we need).
  • Create the typings.json file(That specifies a missing Typescript type definition file).
  • Install the libraries and typing files.
  • Create the host Web page.(Normally index.html).
  • Create the main's file(To bootstrap the Angular application with the root component).
Q.42 In an Angular 2 Application What Are The Security Threats Should We Be Aware Of?

Angular 2 application has many security threats.

Angular 2 application should also follow some of the basic guidelines to mitigate the security risks.

Some of them are

  • Avoid using/injecting dynamic Html content to your component.
  • If using external Html, that is coming from database or somewhere outside the application, sanitize it.
  • Unless it is trusted try not to put external urls in the application. Avoid url re-direction unless it is trusted.
  • Consider using AOT compilation or offline compilation.
  • Try to prevent XSRF attack by restricting the api and use of the app for known or secure environment/browsers.
Q.43 State the Advantages Of Using Angular 2 Over Angular 1?
  • Angular 2 is not only a language it's a platform
  • Better Performance and speed: No $Scope in Angular 2, AOT
  • Simpler Dependency Injection
  • Modular, cross platform
  • Benefits of ES6 and Typescript.
  • Flexible Routing with Lazy Loading Features
  • Easier to Comprehend
Q.44 What differences do Components hold from the Directives?

Differences do Components hold from the Directives

Components :

  • For register component we use @Component meta-data annotation.
  • Component may be a directive that use shadow DOM to make encapsulate visual behavior referred to as parts.
  • Components are typically used to create UI widgets.
  • Component is employed to interrupt up the appliance into smaller parts.
  • Only one part will be gift per DOM component.
  • @View decorator or modelurl template are obligatory within the part.

Directives :

  • For register directives we use @Directive meta-data annotation.
  • Directives is employed to feature behavior to AN existing DOM component.
  • Directive is use to design re-usable components.
  • Many directive will be employed in a per DOM component.
  • Directive don’t have View.
Q.45 What Is Component In Angularjs 2 ?
In Angular, a Component is a special kind of directive using a simpler configuration which is suitable for a component-based application structure.
Q.46 What Is @inputs In Angular 2?

@inputs In Angular 2, allows you to pass data into your controller and templates through html and defining custom properties.

Thus this permits you to easily reuse components and have them display different values for each instance of the renderer.

Get Govt. Certified Take Test