Angular 4 interview questions and answers for experience

Angular.io is official good resource to lean Angular.

And For Angular 2-4 you can used this one of best i have see here

https://www.tutorialspoint.com/angularjs/ is a good platform for learning the basics of AngularJS. You can download the pdf file for every tutorials that are available in it.

What is AngularJS 2/4?

- Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop

-created by google development team.

What is the difference between Angular 1(AngularJS) and Angular 2/4?

-Angular 2/4 is complete re-created of Angular 1.In other word,it was completely rewritten from the ground-up.

-Angular 1(AngularJS) is controller and $scope based and Angular 2/4 is based on an architecture of component hierarchy, dependency injections and directives.

-Angular 2/4 is much focus towards Mobile development and In Angular 1 as mobile development is much bug prone. 

-Angular 2/4 is written in Typescript Which gives u features like Class-based OO Programming, Generics and Static Typing to framework, which makes it more excited to developers from non-JavaScript background and leading to shorter development time.

What are the features of Angular 4?

-Router ParamMap

ParamMap in the router, meaning a request for the route- and queryparameter assigned to a route.route parameters were stored in a simple key-value object structure, therefore being accessible by using the standard JavaScript syntax.

-Animations

Removed Animations part from "@Angular/core",To avoid creating bundles with unnecessary large sizes. Animations are to be provided in the module BrowserAnimationsModule from @angular/platform-browser/animations.

-ngIf: Can also be used with “else”

"conditional rendering" frequently used in any application therefor added ng-if-else.

-Dynamic Components with NgComponentOutlet

The new *ngComponentOutlet-Directive makes it possible to build dynamic components in a declarative way.

-TypeScript 2.1/2.2

Type security of Angular applications and the speed of ngc-Compiler have been improved because of Typescript. 

-Dependencies update

Versions of Angular-Modules can be updated via npm:

npm install @angular/{common, compiler, compiler-cli, core, forms, http, platform-browser, platform-browser-dynamic, platform-server, router, animations}@next –save

What are ng-components in Angular 2/4?

-Components are the logical piece of code, which consists of Classes, Template and Metadata.

Components are just simple classes which are declared as components with the help of component decorators.

What are ng-modules in Angular 2/4?

-The purpose of a NgModule is to declare each thing you create in Angular, and group them together (like Java packages or PHP / C# namespaces).

What are lifecycle hook of angular 4?

-After creating a component/directive by calling its constructor, Angular calls the lifecycle hook methods in the following sequence at specific moments:

-ngOnChanges()

-ngOnInit()

-ngDoCheck()

-ngAfterContentInit()

-ngAfterContentChecked()

-ngAfterViewInit()

-ngAfterViewChecked()

-ngOnDestroy()

What is Routing and how does it work in Angular 2/4? How is it done?

 -An navigate between different views(via components)  without reloading the entire application and allowing us to configure it to make it more flexible while providing us with features like lazy loading to ease load times and increase performance.

Below is list of steps to implements routing in Angular

-Create a module to store routing paths and define different paths and routes in it.

-Import the routing module to your app.module.ts and add routing module name to the imports of @NgModule.

-Add routing selector tags to your appcomponent's html.

-Adding router links for navigation.

Explain component decorators in Angular4?

-Decorators are used extensively and are also used to compile a code. There are 4 different types of decorators:

1). Class decorators

2). Property decorators

3). Method decorators

4). Parameter decorators

Write the CLI command to generate a component in Angular4?

-ng generate component [component_name];

Write the difference between directive and component in angular js?

-A directive is used to add behavior to an existing element. Whereas, a component is used to create a component with attached behavior.

-A directive is used to attach different behaviors to an existing DOM element. Whereas, with the help of component, we can break our application into smaller components.

-A directive does not require a view. Whereas, a component needs a view via @view.

-A directive is used to create reusable behavior. Whereas, a component is used to create reusable components.

What are DSL Animation Functions in Angular js?

-DSL Animation functions are used for crafting animations in Angular js. Below are list of DSL Animation functions in angular js.

trigger()

state()

transition()

group()

sequence()

style()

animate()

keyframes()

What is @inputs In Angular?

-The “inputs” property passed to the @Components decorator lists “myname” as a component property that can receive data. We also declare “myname” as a public property within ParentComp class. If you don’t declare it, the TypeScript compiler might issue a warning.

What is @output In Angular?

-The “outputs” property lists “myevent” as a custom event that ParentComp can emit which its parent will be able to receive. Within the ParentComp class, “myevent” is declared as and set to be an EventEmitter. EventEmitter is a built-in class that ships with Angular that gives us methods for managing and firing custom events.

What are pipes in Angular 2/4?

-Pipes are used in Angular to edit/transform and format our data, Also filter our data in the template itself. Angular has built-in pipes for dates, currency, percentage and character cases.In Addition to this we can create custom pipes ourselves and use them in angular.

What is lazy loading?

-Lazy loading creates multiple bundles and loads them on demand in runtime.

What is ECMA Script?

-ECMAScript is at the core of JavaScript and JavaScript just builds up on it. all brower mostly understand ECMAScript.

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.

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.

What is dependency injection in angular 2/4?

-dependency injection gives us the ability to add functionality of a component at runtime.

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 is Webpack for angular 2?

-Angular 2 Webpack optimizes module loading in the browser by minimizing the number of requests, and reducing the overall size. Module bundling is the process of combining a group of modules along with their dependencies together into a single file (or a bunch of files).

What are services in Angular 2/4?

-Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service.

What is Transpiling in Angular?

-Transpiling is the process of converting the typescript into javascript (using Traceur, a JS compiler). Though typescript is used to write code in the Angular applications, the code is internally transpiled into javascript. 

What is ng-content Directive? 

-if we want to have some custom text or content between the angular tags like  <app-tax>some tax-related content</app-tax> This will not work the way it worked for HTML elements.  Now, in such cases, the <ng-content> tag directive is used. 

What is a RouterOutlet?

-RouterOutlet is a substitution for templates rendering the components. or it represents or renders the components on a template at a particular location. 

In how many ways the Data Binding can be done?

-Data Binding happens between the HTML (template) and typescript (component). Data binding can be done in 3 ways:

(i) Property Binding (ii) Event Binding (iii) Two-Way Data Binding. 

What does a Subscribe method do in Angular 4? 

-It is a method which is subscribed to an observable. Whenever the subscribe method is called, an independent execution of the observable happens. 

What is AOT Compilation?

-Every angular application gets compiled internally. The angular compiler takes javascript code, compiles it and produces javascript code again. Ahead-of-Time Compilation does not happen every time or for every user, as is the case with Just-In-Time (JIT) Compilation. 

What is Redux? 

-It is a library which helps us maintain the state of the application. Redux is not required in applications that are simple with the simple data flow, it is used in Single Page Applications that have complex data flow. 

Why Typescript with Angular? 

-Typescript is a superset of Javascript. Earlier, Javascript was the only client side language supported by all browsers. But, the problem with Javascript is, it is not an Object Oriented Programming Language. Typescript was thus developed by Microsoft in a way that it can work as Javascript and also offer what javascript cannot; i.e., OOPS. 

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.