Explore topic-wise InterviewSolutions in .

Routing is what lets in you to create Single Page APPLICATIONS. AngularJS routes ALLOW you to create distinct URLS for ONE of a kind content material in your application. It helps in redirecting users to exceptional pages based totally on the alternative they pick out on the main page. AngularJS routes ENABLE one to show more than one content depending on which route is chosen. A route is unique in the URL after the # sign.

As services are reusable singleton objects in AngularJS which is USED to organize and share CODES across the APPLICATION, they can be injected into filters, controllers, and directives. Angular 2 offers three ways to create a service; factory, service, and provider.

The factory function allows developers to include some logic before creating the object and RETURNS the created object. The syntax for factory function is as follows.

app.factory('serviceName',function(){ return serviceObj;})

In Angular 2, deep linking is a process of the URL that will take to users to a SPECIFIC page or content DIRECTLY without crossing the application from the homepage. The deep linking process helps with website or application indexing so that search engines can EASILY crawl these links.

When a page containing Angular BASED application loads, these below-mentioned scenarios will be completed.

• The browser will load the HTML DOCUMENT and evaluate it.
• The file for AngularJS JavaScript will be LOADED and the Angular global OBJECT will be created.
• Finally, the JavaScript that registers controller function will be executed.

Angular 2 is the UPGRADED and evolved version of AngularJS, a JavaScript FRAMEWORK that was INVENTED by Google. Angular 2 is used for building single-page web or mobile applications.

Components are essential elements of Angular 2 apps, and an application can have a number of components. In Angular 2, components PERFORM all the tasks that were done by scopes, controllers and directives, such as creating or adding Data, logic, and CUSTOM elements.

• Template
• Class
• Metadata

In ANGULAR, lifecycle hooks are FUNCTIONS which will be called at specific POINTS of a component lifecycle in Angular applications.

They are HIGHLY crucial for a component architecture based application.

In Angular 2, the polyfills.ts file is used to MAKE user application compatible for VARIOUS browsers. The code we write in Angular 2 is mostly in ES6, which is not compatible with FIREFOX or IE, and requires few environmental setups before they wither get VIEWED or used in browsers.

Angular offers Polyfills.ts file to help users with the required setup.

Here is the steps to CREATE a singleton service-

• Import the injectable member using import {Injectable} from '@angular/core';
• Import the HttpModule, HTTP and Response members’ as import { HttpModule, Http, Response } from '@angular/http';
• Add the decorator @Injectable()
• EXPORT –
  export class UserService {
     constructor(private _http: Http) { }
  }

To ALLOW a load of external CSS styles in Angular 2 to affect component contents, we have to change view ENCAPSULATION which presents styles to COMPONENTS referring “bleed into”.

@Component({
   selector: 'some-component',
   template: '&LT;div&GT;</div>',
   styleUrls: [
      'https://bestinterviewquestion.com/style.css',
      'app/local.css'
   ],
   encapsulation: ViewEncapsulation.None,
})
export class SomeComponent {}

Shadow DOM is an integral PART of Web Components standard while enables users for style ENCAPSULATION and DOM tree. It helps users to hide DOM logic behind other elements. With the addition to it, we can also APPLY scoped styles to elements WITHOUT showcasing them to the outer world.

To avoid editor warning whilst defining CUSTOMIZED typings, we have to prolong the KIND DEFINITION for an external library as a accurate practice. Without ALTERING any node_modules or current typings FOLDER, we have to create a new folder named “custom_typings" and put all our customized kind definitions there.

The Tree SHAKING is a concept of dead code elimination from PROJECTS. The code PRESENT in your project but neither referenced nor USED will be dropped here. It will eliminate the unused modules during the BUILD process, making user application lightweight.

It allows us to specify the root level files. The compiler options required to compile a TypeScript project. It DETERMINES that the said DIRECTORY is the TypeScript project root. Here is a JSON file describing to define a tsconfig.json file containing different parameters of the compilerOptions property:

{

    "compilerOptions": {
    "noImplicitAny": true,
    "module": "system",
    "removeComments": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "allowUnreachableCode": false,
    "outFile": "../JS/TypeScript/BestInterviewQuestion.js"
  }
}

• target: It is used for the compiled OUTPUT.
• module: It is used in the compiled output. the system is for SystemJS, common for CommonJS.
• moduleResolution: It is used to resolve module declaration files (.d.ts files). With the NODE approach, they are loaded from the node_modules.
• sourceMap: generate or not SOURCE map files to debug your application.
• emitDecoratorMetadata: emitDecoratorMetadata emit or not design-type metadata for decorated declarations in the source.
• experimentalDecorators: It enables or not experimental support for ES7 decorators,
• removeComments: remove comments or not
• noImplicitAny: It is used to allow or not the use of variables.

Yes, Angular 2 is a TRUE object-oriented development framework.

To optimize an application for optimal performance in Angular 2, we have to follow the below-mentioned steps.

• USE of AOT compilation.
• With a large-size app, use lazy loading instead of the FULLY bundled app.
• Avoid un-necessary import STATEMENTS in the application.
• Remove unused and unnecessary 3rd party libraries from the application.
• If not required, consider REMOVING application dependencies.

PrimeNG is a rich UI component collection DEDICATED to ANGULAR. Widgets present here are completely open-source and FREE to use. It’s simple, lightweight yet powerful and optimized for RESPONSIVE cross-browser touch.

SPA in Angular 2 stands for Single Page Applications. This is a TYPE of web-application which fits into literally one page. All your code (JavaScript, HTML, CSS) is CALLED using a single page load at multiple points by adding new data parallelly from the backend. Navigation between pages PERFORMED can be DONE without refreshing.

Flex Layout in Angular 2 is a component engine that allows you to CREATE Flexbox page layouts with a fixed SET of directives to use in designing templates. The Flex-Layout has made styling EASY and user-friendly by having a TypeScript based Library, thus eliminating the need for external stylesheets/CSS Styling. In addition to this, it can be used along with Material Design for Design components and also providing intuitive BREAKPOINTS while development to AID in designing responsive layouts.

To DISPLAY error message in Angular 2 from BACKEND, we have to set the error message equal to an angular variable, and then check whether that variable exists to CONFORM whether to display it or not.

<div *NGIF="errors" class="alert alert-danger">
    {{ errors }}
</div>

Both @input and @output are decorators. The decorator @Input is used to bind a property WITHIN ONE child COMPONENT to receive value from the parent component, WHEREAS we use the @output decorator to bind the property of a component to send data from child component to parent component or calling component.

In Angular 2, hidden property or [hidden] is a special case binding USED to hide property. It can be compared CLOSE to ng-show and ng-hide, but more powerful to bind any property types of elements.

A filter is a NECESSARY phase of Angular 2 as well as Angular 4. It is basically used to filter an object from a crew of items, which are there in an array or an object array. It SELECTS a subset of the objects from an array and returns it as a new array and displayed on UI. Filters can be used with an expression USING pipe | sign. {{expression | filterName:parameter }} Angular 2 includes various filters to layout records of special fact types.

The router-link derivatives enable the navigation from any specific view to the other. It works immediately as a USER is performing application tasks. The link can directly arise from browser and navigation is done on the basis of user action like the click of an anchor TAG.

The router link directive gives control to the router for anchor tag elements. It also binds a clickable HTML to the route to enable the navigation. The routerlink directive can easily be bound to an array, E.g.

<a [routerlink] = "[ '/ heroes']" >Heroes</a>

During Development MODE, caching for static resources can be done through the Design of Tools. If you want to cache on the production stage, you need to CHECK and update the Server-End Settings accordingly.

Note: These are basic angular 2 interview questions that are asked for a position as SDE in Angular Development.

To CHECK this, you need to make SURE that node is INSTALLED and then check if angular CLI is installed.

• Open a command prompt using cmd.
• Type node -v and npm -v to ensure node is installed.
• Type ng -v

Advantages-

• Fast download
• Quicker rendering
• Reduces Http Requests
• Catches errors during the build phase

• Only works with HTML and CSS Not other file types.
• Must MAINTAIN bootstrap file AOT version
• Must clean-up before COMPILING.

The AOT COMPILATION converts Angular HTML and TypeScript codes into JavaScript code at some stage in the construct section earlier than the browser can down load and RUN the code.

Here are benefits of compiling with AOT:

• Lesser asynchronous requests
• Smaller download size of Angular framework
• Detects errors easily
• Fast rendering
• Improved security

It is a command-line interface which is USED to build angular apps. We can construct & START a project very QUICKLY with the help of CLI.

You can download CLI from its official website HTTPS://cli.angular.io

npm install –g angular-cli

Here are the steps:

• Import INJECTABLE member
• Add @Injectable Decorator
• Export Service CLASS

Here is the SYNTAX:

import { Injectable } from '@angular/core';
   @Injectable()
   export class MyCustomService {
}

In Angular apps, hooks are FUNCTIONS that are called on particular stages of a component’s life. Hooks are ESSENTIAL if your APP is based on the component ARCHITECTURE. Example for hooks is $onInit, $onChanges, etc. which are properties pre-defined by Angular and can be exposed on component controllers.

Advantages of Angular 2 over Angular are given below-

• Simpler to Learn
• Simpler Dependency Injection
• It’s is a platform not only a language:
• IMPROVED Speed and Performance: No $Scope in Angular 2, AOT
• Modular, cross-platform
• Flexible Routing with Lazy Loading Features
• Benefits of ES6 and Typescript.

The SIMPLEST WAY is to put the variables in a file and export them. In order to USE global variables, you can use an import statement.

'use STRICT';

export const name='bestinterviewquestion.com';

After that, we can export this file where we want to use these global variables value.
import * as myGlobalsFile from './globalfile';

Lazy loading allows developers to load different code pieces on demand. For instance, if you have a retail APPLICATION that has different departments like garments, groceries, electronics, etc. If you load all the sections, in the beginning, your application will be slow. This is when you need lazy loading. It helps the application load faster because it LOADS only PARTS that the USER wants to see.

This interview questions on angular 2 are always a level up and thus a little tough to crack.

With lazy LOADING, JS components can be LOADED asynchronously on activation on a specific route.

• Download and INSTALL ocLazyLoad.js
• Add the module in the application
• Load the file in the required controller
• Add to the router’s code as

resolve: {
     loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {return $ocLazyLoad.load('routerState');
}]}

In all ANGULAR version from 2 onwards, there is a common feature called Pipes. This feature helps developers create custom pipes.

Pipes are used to write display-value transformations that developers can declare in their HTML. A pipe INPUTS data and TRANSFORMS it into the REQUIRED output.

There are some pipe provided by angularjs are given below-

• Uppercase/Lowercase Pipe
• Date Pipe
• Currency Pipe
• JSON Pipe
• Async Pipe

Angular has a robust DI FRAMEWORK that gives declared DEPENDENCIES to a class upon instantiation. To inject a SERVICE, you must first create and register the injectable service.

import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root', })
export class SampleService { constructor() { } }

In ANGULAR 2, the RouterOutlet is a directive PRESENT in the ROUTER library to be used as a component. It marks the spot in a template for the router to DISPLAY the components for that outlet.

Every outlet can have its unique name, which is determined by the optional name ATTRIBUTE. The name once set cannot be changed dynamically. If no value has been set, the default value is "primary".

<router-outlet></router-outlet>

<router-outlet name="left"></router-outlet>

<router-outlet name="right"></router-outlet>

The router outlet emits an activate event during the instantiation of a new component. When the component is destroyed, it is deactivated.

<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>

DIRECTIVES are the extended HTML attributes and they are ALSO the most IMPORTANT FEATURES of Angular applications. They introduce syntax or markup.

• Components
• Structural
• Attribute

In Angular 2, you can create CUSTOM PIPES. The simplest way is as follows.

import { Pipe, PipeTransform } from '@angular/core';
    @Pipe({name: 'Pipename'})
    EXPORT class Pipeclass implements PipeTransform {
    transform(PARAMETERS): returntype { }
}

String Interpolation is a SPECIAL syntax in Angular 2 which is a more efficient alternative to property binding. It is used to display dynamic data on an HTML TEMPLATE while facilitating you to make changes on the component.ts FILE and fetch data for the HTML template.

Below is an example of a String Interpolation syntax. It should be between double curly braces {{ }} and hence also CALLED a moustache syntax:

class AppComponent
{
    propertyName: string;
    object: DomainObject;
}
{{ propertyName }}
{{ object.propertyName }}

Any change that occurs in the component gets propagated from the existing component to its children. If this change NEEDS to be reflected its parent component, you can use USING Event Emitter api to emit the event.

EventEmitter is class in @angular/core module that is used by DIRECTIVES and components to emit events.

@output() somethingChanged = new EventEmitter();

You can use somethingChanged.emit(VALUE) to emit any event. You can do this in setter when the value is changed in the class.

Traceur compiler takes classes, GENERATORS, and other FEATURES from ECMAScript edition 6 (ES6) and compiles it into JavaScript ES5 that runs on the browser. This means developers can use the code from a FUTURE version that has more features and encourages design patterns.

In Angular 6, a DI TOKEN means a Dependency Injection Token. It is basically a lookup token associated with a dependency provider, to be USED in the Dependency Injection SYSTEM.

There are three CASE types in ANGULAR 6:

• UPPER case Pipe
• Lower Case Pipe
• Title Case Pipe

HostListener in Angular 6 is basically a decorator which declares a DOM EVENT to LISTEN for and also provide a handler method to run if and when that specific event OCCURS. Host Listener is a SET of arguments that is USED to pass the handler method when an event occurs.

In Angular 6, a style FUNCTION is USED to declare a key or VALUABLE object which contains CSS properties and or styles that shall be used in an animation state or sequence. It can be used within styling data for calls to ANIMATE and keyframes.

In Angular 6, LINTING is a tool that is used to check the TYPESCRIPT code for programmatic and styling ERRORS. A JSON FILE is a CONFIGURATION for linting and this file contains all the default guidelines for linting.