Interview Questions.

Q1. We Already Use Angular 1, Why Do We Need An Angular 2?

Angular 2 is built for velocity : 

It has faster preliminary loads.

Faster exchange detection.

Improved rendering times.

Angular 2 is contemporary.

It takes benefit of features supplied within the state-of-the-art JavaScript standards and past(Such as lessons, modules, and decorators)

It leverages internet thing technology for constructing reusable person interface widgets.

It supports each Greenfield and Legacy browsers, Edge, Chrome, Firefox and Internet Explorer back to IE@

It has fewer integrated directives to learn less complicated binding.

Enhances our productivity to enhance our day-to-day workflow.

Q2. What Are The Core Differences Between Observables And Promises?

Promises vs Observables :

Promises:

returns a unmarried cost.

Now not cancellable.

Observables:

works with multiple values over the years.

Cancellable.

Supports map, clear out, reduce and comparable operators.

Proposed function for ES 20@

use Reactive Extensions (RxJS).

An array whose items arrive asynchronously over the years.

Q3. What Is Shadow Dom? How Is It Helping Angular 2 To Perform Better?

Shadow DOM is a part of the HTML spec which lets in developers to encapsulate their HTML markup, CSS patterns and JavaScript. Shadow DOM, together with a few other technology, gives developers the capability to construct their very own 1st class tags, net additives and APIs just like the <audio> tag. Collectively, those new tags and APIs are referred to as Web Components. Shadow DOM provides higher separation of subject along side lesser conflict of patterns and scripts with other HTML DOM factors.

Since shadow DOM are static in nature, it’s a great candidate to be cached as it isn't always handy to developer. The cached DOM could be rendered faster within the browser providing better performance. Moreover, shadow DOM can be managed relatively properly whilst detecting the alternate in angular 2 software and re-paint of view can be controlled correctly.

Q4. What Is An Angular 2 Component?

Each component is constituted of a template, that is the HTML for the person interface. Add to that a category for the code related to a view. The class contains the properties and methods, which perform actions for the view,A factor also has metadata, which presents extra information approximately the element to Angular.

Q5. What Are Differences Between Components And Directives?

Components : 

For sign in element we use @Component meta-data annotation.

Component is a directive which use shadow DOM to create encapsulate visual conduct called additives.Components are typically used to create UI widgets.

Component is used to break up the software into smaller additives.

Only one component may be gift in keeping with DOM element.  

@View decorator or templateurl template are obligatory within the issue.  

Directives : 

For register directives we use @Directive meta-facts annotation.  

Directives is used to feature behavior to an existing DOM element.  

Directive is find to design re-usable components.  

Many directive can be utilized in a in step with DOM detail.  

Directive don’t have View.  

Q6. What Is Traceur Compiler ?

Traceur is a JavaScript.Subsequent-to-JavaScript-of-nowadays compiler that lets in you to apply functions from the destiny today. Traceur helps ES6 in addition to a few experimental ES.Subsequent capabilities. Traceur's purpose is to inform the design of latest JavaScript features which are most effective valuable if they will let you write better code.

Q7. What Is

@NgModule is a decorator characteristic. A decorator characteristic permits customers to mark some thing as Angular 2 factor (may be a module or factor or some thing else) and it allows you to offer additional information that determines how this Angular 2 thing will be processed, instantiated and used at the runtime. So, whenever user writes @NgModule, it tells the Angular 2 module, what’s going to be blanketed and utilized in and the use of this module.

Q8. What Are The Advantages And Disadvantages Of Aot Compilation?

Advantages : 

Faster download: Since the app is already compiled, among the angular compiler related libraries are not required to be bundled, the app package deal length get decreased. So, the app can be downloaded quicker.

Lesser No. Of Http Requests: If the app is not bundled to guide lazy loading (or anything motives), for each related html and css, there may be a separate request is going to the server. The pre-compiled application in-strains all templates and styles with components, so the range of Http requests to the server could be lesser.

Faster Rendering: If the app isn't always AOT compiled, the compilation technique occurs within the browser as soon as the application is fully loaded. This has a wait time for all vital issue to be downloaded, and then the time taken through the compiler to compile the app. With AOT compilation, this is optimized.

Detect error at construct time: Since compilation occurs beforehand, many bring together time mistakes can be detected, offering a higher diploma of stability of utility.

Disadvantages

Works handiest with HTML and CSS, different file kinds want a previous construct step.

No watch mode yet, need to be carried out manually (bin/ngc-watch.Js) and compiles all the documents.

Need to maintain AOT version of bootstrap file (may not be required at the same time as the use of equipment like cli).

Needs cleanup step earlier than compiling.

Q9. What Is Typescript ?

TypeScript is a typed tremendous set of JavaScript which has been constructed and maintained with the aid of Microsoft and chosen with the aid of the AngularJS group for development.

Q10. What Is Aot Compilation?

AOT compilation stands for Ahead Of Time compilation, in which the angular compiler compiles the angular components and templates to native JavaScript and HTML during the build time. The compiled Html and JavaScript is deployed to the net server so that the compilation and render time may be stored with the aid of the browser.

Q11. What Are The Advantages Of Using Angular 2 Over Angular 1?

Angular 2 is a platform no longer only a language:

Better Speed and Performance: No $Scope in Angular 2, AOT

Simpler Dependency Injection

Modular, pass platform

Benefits of ES6 and Typescript.

Flexible Routing with Lazy Loading Features

Easier to Learn

Q12. What Is Primeng? How Can It Be Used With Angular2?

PrimeNG is a set of rich UI components for Angular @PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces. All widgets are open supply and unfastened to use beneath Apache License 2.Zero, a business friendly license. PrimeNG is developed through PrimeTek Informatics, a organization with years of understanding in growing open source UI additives. AngularJS makes it possible to apply predefined additives for development like tables etc. This allows builders save time and efforts. Using PrimeNG developers can create extraordinary applications in no time

Q13. What Is The Languages That You Can Use To Build Angular2 Application?

ECMAScript, or ES.

ES three is supported with the aid of older browsers.

ES 5 is the model presently supported through maximum current browsers.

The ES 6 specification turned into currently approved and renamed ES 2015(Most browsers do not yet help ES 2015).

Q14. What Are The Security Threats Should We Be Aware Of In Angular 2 Application?

Just like another customer aspect or internet software, angular 2 utility ought to also follow some of the primary tips to mitigate the safety dangers. Some of them are:

Avoid the usage of/injecting dynamic Html content material to your issue.

If the use of outside Html, this is coming from database or somewhere outdoor the software, sanitize it.

Try not to put external urls in the software unless it's miles trusted. Avoid url re-path until it is relied on.

Consider the use of AOT compilation or offline compilation.

Try to prevent XSRF attack through proscribing the api and use of the app for acknowledged or at ease surroundings/browsers.

Q15. What Is The Need Of Angular2?

Angular 2 isn't just a traditional upgrade but a totally new development. The whole framework is rewritten from the floor. Angular 2 got rid of many such things as $scope, controllers, DDO, jqLite, angular.Module and so forth.

It makes use of additives for nearly the entirety. Imagine that even the complete app is now a component. Also it takes benefit of ES6 / TypeScript syntax. Developing Angular 2 apps in TypeScript has made it even greater effective.

Apart from that, many stuff have evolved and re-designed like the template engine and plenty of greater.

Q16. What Are The New Features Of Angular2?

Angular 2 is written entirely in Typescript and meets the ECMAScript 6 specification :

Component-Based- Angular 2 is absolutely aspect based totally. Controllers and $scope are no longer used. They have been replaced by means of additives and directives.

Directives- The specification for directives is considerably simplified, even though they're nonetheless concern to change. With the @Directive annotation, a directive can be declared.

Dependency Injection- Because of the stepped forward dependency injection version in Angular2 there are greater opportunities for component / item-based totally paintings.

Use of TypeScript-TypeScript is a typed exceptional set of JavaScript which has been built and maintained by means of Microsoft and selected through the AngularJS crew for improvement. The presence of sorts makes the code written in TypeScript much less liable to run-time errors. In recent instances, the support for ES6 has been substantially advanced and a few functions from ES7 had been added as well.

Generics- TypeScript has generics which can be used inside the frontend.

Lambdas with TypeScript- In TypeScript, lambdas are to be had.

Forms and Validations- Forms and validations are an vital issue of frontend development. Within Angular 2 the Form Builder and Control Group are defined.

Q17. How Can We Setting Up Our Development Environment For Angular 2?

Setting up our development surroundings for Angular 2 calls for  basic steps:

Install npm, or node package deal supervisor.

Set up the Angular 2 utility.

Q18. What Is The Need For Typescript In Angular2?

Understanding the need for TypeScript document in Angular2 packages :  JavaScript rules in Web development. Its the most famous language for growing internet utility UI. For might also utility builders having publicity in languages like Java and C#, developing the the front cease of a Web utility in JavaScript is a completely cumbersome technique. For example if the consumer wants to create a class Employee in JavaScript. There isn't any magnificence key-word in JavaScript so the code might be as follows-

<html>

<head>

</head>

<body>

<script>

feature Employee()

this.Call="";

this.Id="";

this.Validate=function()

alert("Validate");

 

</script>

</body>

</html>

Same can be written the use of TypeScript as follows-

elegance Employee

public call : string = "";

public identity : string = "";

Validate()

alert("validate");

This Customer.Ts will compile to the above JavaScript code.

So TypeScript presents the subsequent blessings over JavaScript-

Structure the code- There have been many unique coding patterns for JavaScript. This leads to unstructured code. With TypeScript we create structured code.

Use object-oriented programming paradigms and techniques-  There is loss of object-orientated layout paradigms and strategies in JavaScript. This is not the case in TypeScript. It uses Objected Oriented functions like Polymorphism, Inheritance and so forth.

Standard Coding guidelines- There isn't any Type checking in JavaScript. The code fashion needs to be defined. Hard to put in force fashion manual. TypeScript overcomes this difficulty with features like Code Analysis and Navigation, Documentation, Intellisense and so on.

Q19. What Is

@Input allows you to pass information into your controller and templates thru html and defining custom residences. This lets in you to effortlessly reuse additives and have them show specific values for every instance of the renderer.

Q20. What Is Npm?

Npm, or node package manager: is a command line application that interacts with a repository of open supply initiatives, Become the bundle supervisor for JavaScript. Using npm we will install libraries, programs, and programs, at the side of their dependencies.

Q21. What Is The Use Of Codelyzer In Angular 2 Application.?

All corporation applications follows a hard and fast of coding conventions and tips to hold code in higher manner. Codelyzer is an open supply device to run and check whether the pre-defined coding suggestions has been followed or not. Codelyzer does best static code analysis for angular and typescript undertaking.

Codelyzer runs on top of tslint and its coding conventions are normally defined in tslint.Json record. Codelyzer may be run thru angular cli or npm immediately. Editors like Visual Studio Code and Atom additionally supports codelyzer just by means of doing a primary settings.

To installation the codelyzer in Visual Studio code, we can go to File -> Preferences -> User Settings and upload the path for tslint policies.

Hide   Copy Code

 

  "tslint.RulesDirectory": "./node_modules/codelyzer",

  "typescript.Tsdk": "node_modules/typescript/lib"

To run from cli: ng lint. 

To run from npm: npm run lint

Q22. What Is Component In Angularjs 2 ?

In Angular, a Component is a unique type of directive that uses a less difficult configuration that is suitable for a factor-primarily based utility shape.

Q23. What Is Ecmascript ?

ECMAScript is a subset of JavaScript. JavaScript is basically ECMAScript at its core however builds upon it. Languages together with ActionScript, JavaScript, JScript all use ECMAScript as its center. As a assessment, AS/JS/JScript are 3 special automobiles, however all of them use the identical engine... Each of their exteriors is distinct though, and there were several changes finished to every to make it specific. Angular2 helps ES6 and higher variations.

Q24. Difference Between Constructor And Ngoninit?

Differences - Constructor Vs. NgOnInit

Angular 2 Constructors:-

The constructor is a default approach runs while factor is being built.

The constructor is a typescript function and it's far used simplest for a class instantiations and nothing to do with Angular @

The constructor referred to as first time earlier than the ngOnInit().

Angular 2 ngOnInit:-

The ngOnInit occasion is an Angular 2 lifestyles-cycle event approach that is known as after the first ngOnChanges and the ngOnInit approach is locate to parameters described with @Input in any other case the constructor is OK.

The ngOnInit is called after the constructor and ngOnInit is called after the primary ngOnChanges.

The ngOnChanges is referred to as whilst an enter or output binding cost adjustments.

Q25. What Is

Components push out occasions the use of a combination of an @Output and an EventEmitter. This lets in a clean separation among reusable Components and alertness common sense.

Q26. What Are Event Emitters And How It Works In Angular 2?

Angular 2 doesn’t have bi-directional digest cycle, not like angular @In angular 2, any trade passed off in the factor constantly gets propagated from the modern element to all its children in hierarchy. If the alternate from one component desires to be contemplated to any of its discern thing in hierarchy, we are able to emit the occasion by using the usage of Event Emitter api.

In quick, EventEmitter is class described in @angular/core module which can be used by components and directives to emit custom occasions.

@output() somethingChanged = new EventEmitter();

We use somethingChanged.Emit(value) method to emit the occasion. This is generally executed in setter when the value is being changed within the magnificence.

This event emit can be subscribed by using any element of the module by using the use of subscribe approach.

MyObj.SomethingChanged.Subscribe(val) => this.MyLocalMethod(val));

Q27. How Routing Works In Angular 2.?

Routing is a mechanism which allows consumer to navigate among views/components. Angular 2 simplifies the routing and offer flexibility to configure and outline at module degree (Lazy loading). 

The angular software has single example of the Router provider and on every occasion URL modifications, corresponding Route is matched from the routing configuration array. On successful fit, it applies redirects and the router builds a tree of ActivatedRoute gadgets and incorporates the cutting-edge kingdom of the router. Before redirection, the router will take a look at whether or not new kingdom is allowed by way of running guards (CanActivate). Route Guards is clearly an interface technique that router runs to test the course authorization. After guard runs, it will solve the path statistics and spark off the router kingdom by way of instantiation the desired additives into <router-outlet> </router-outlet>. 

Q28. How Would You Define Custom Typings To Avoid Editor Warnings?

Well, in most of the cases, the 3rd party library comes with its very own .D.Ts report for its kind definition. In some cases, we want to extend the existing type via presenting some extra homes to it or if we want to outline additional types to avoid Typescript warning.

If we need to extend the kind definition for external library, as an awesome practice, we must not touch the node_modules or existing typings folder. We can create a new folder, say “custom-typings” and hold all custom designed type definition in that.

To outline typings for application (JavaScript/Typescript) items, we should outline interfaces and entity lessons in fashions folder inside the respective module of the software.

For the ones instances, we can define or increase the sorts by developing our personal “.D.Ts” report.

Q29. How Would You Optimize The Angular 2 Application For Better Performance?

Ell, optimization depends on the type and length of software and plenty of other factors. But in general, I would recall the subsequent points even as optimizing the angular 2 app:

Consider AOT compilation.

Make positive the utility is bundled, uglified, and tree shaking is achieved.

Make sure the application doesn’t have un-necessary import statements.

Make positive that any 3rd birthday party library, which is not used, is eliminated from the application.

Have all dependencies and dev-dependencies are absolutely separated.

I would keep in mind lazy loading instead of completely bundled app if the app length is greater.

Q30. How Can We Setting Up Angular 2 Application?

Create an application folder.

Create the tsconfig document(To configure the TypeScript compiler).

Create the package.Json report(To outline the libraries and scripts we want).

Create the typings.Json file(That specifies a lacking TypeScript kind definition document).

Install the libraries and typing files.

Create the host Web page.(Normally index.Html).

Create the principle.Ts record(To bootstrap the Angular software with the basis thing).