Angular Application is defined by set of NgModules, the basic building block of Angular application NgModules, which provides compilation context of components and collecting related code into functional sets

• Angular Application always has at least a root module and root component then enables bootstrapping
• NgModules can import functionality from other NgModules
• This technique lets you take advantage of lazy-loading
• Every Angular app has at least one NgModuleclass, the root module, conventionally named AppModule
• NgModuleis a decorator function that takes a single metadata object whose properties describe the module

• The NgModule — a class decorated with @NgModule — is a fundamental feature of Angular.

• Every Angular application has at least one component
• the root component that connects a component hierarchy with the page DOM
• Each component defines a class that contains application data and logic and is associated with an HTML template that defines a view to be displayed in a target environment.

• The @Component decorator identifies the class immediately below it as a component and provides the template and related component-specific metadata.

1 – Declarations

2 – Exports

3 – Imports

4 – Providers

5 – Bootstrap

1 – Components

2 – Directives

3 – Pipes

• Angular Ships are collection JavaScript modules
• Each Libraries name begin with the @angularprefix
• import{Component} from ‘@angular/core’;

Component

• A component controls a patch of the screen called a view.
• @Componentdecorator, which identifies the class immediately below it as a component class
• The @Componentdecorator takes a required configuration object with the information Angular needs to create and present the component and its view.
• Component configuration option
• Selector
• templateUrl
• providers
• The template, metadata, and component together describe a view.

Templates

• A component’s view with its companion template. A template is a form of HTML that tells Angular how to render the component.

Metadata

• Metadata tells Angular how to process a class.

• Apply other metadata decorators in a similar fashion to guide Angular behavior. @Injectable, @Input, and @Output are a few of the more popular decorators

Directive changes the appearance or behavior of a DOM element,

There are three kinds of directives

• Components

Components are the most common of the three directives, we have seen more details.

• Structural directives

Structural directives are responsible for HTML layout. They shape or reshape the DOM’s structure, typically by adding, removing, or manipulating elements.

• Attribute directives

An attribute directive minimally requires building a controller class annotated with @Directive Decorator

@Inputs – > It is an Input Decorator, and use to receive the input to component

@Output-> It is an Output Decorator, and use to emit the Output to which component use the corresponding thing

Example of @Input and @Output Decorator

@Component({

selector: ‘app-list’,

templateUrl: ‘./list.component.html’,

styleUrls: [‘./list.component.css’]

})

export class ListComponent implements OnInit {

selectedFieldValue: string;

@Input(‘inputData’) inputData: any = [];

@Output() row = new EventEmitter<any>();

}

<app-list required [inputData]=’inputObj’(row)=selectedObj($event)></app-list>

The components are interacting with the help of decorator @Input, The parent-child relationship establishing by the mentioned decorator

A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed.

<router-outlet></router-outlet>

The routing Module will be displayed in a router-outlet tag in the corresponding component.

-Create

-Render

-Create and render children

-Check for bound data changes and re-render

-Destroy

String Interpolation

Property Binding

Event Binding

Two-way-binding

Webpack is module bundler for Angular2 or above. It bundles, minifies and transpiles an Angular application.

NPM stands for node package manager. It is used for installing dependencies for javascript packages.

Angular CLI is Command Line Interface for Angular that runs Webpack. You can use npm install -g @angular/CLI command to install angular CLI.

After installing Angular CLI run ng new project-name command to create a new Angular project.

Decorators are functions that adds metadata to class members and functions. It was proposed in ES2016 and implemented in Typescript.

Angular 5 supports four types of Data Binding They are
String Interpolation
Property Binding
Event Binding
Two-way-binding

ng serve command is used to run Angular5 application locally during development. To start development server on specific port ng serves -p aPortNumber command is used.

Angular2 component is made of a Component decorator and a component definition of a class.
ng generate component component_name command is used to generate a component in Angular2.

Simply use below syntax to import a module in Angular5.
import { ModuleName } from ‘someWhere’;

In Angular5 $event is a reserved keyword that represents the data emitted by an event (event data).
It is commonly used as a parameter for event based methods.

double curly brackets are used form data interpolation in Angular5.

*ngFor directive is used for Iterating over a list of items and for Generating a new DOM element for each one.

Transpiling is a process of converting code from one language to another. In Angular, Traceur compiler is used for converting TypeScript to JavaScript so that browsers can understand.

• Most front-end applications communicate with backend services over the HTTP protocol
• The HttpClient in @angular/common/HTTP offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers
• HttpClient include testability features,
• typed request and response objects,
• request and response interception,
• Observable APIs,
• streamlined error handling
• HttpClient supports mutating requests, that is, sending data to the server with other HTTP methods such as PUT, POST, and DELETE.

import { HttpClient, HttpParams } from ‘@angular/common/http’;

• XMLHttpRequest interface

• fetch() AP

The Angular Router enables navigation from one view to the next view

It can interpret a browser URL as an instruction to navigate to a client-generated view

It can pass optional parameters along to the supporting view component that help it decide what specific content to present

You can bind the router to links on a page and it will navigate to the appropriate application view when the user clicks a link

You can navigate imperatively when the user clicks a button

Selects from a drop box, or in response to some other stimulus from any source. And the router logs activity in the browser’s history journal so the back and forward buttons work as well.

import { Routes, RouterModule } from ‘@angular/router’;

A routed Angular application has one singleton instance of the Router service. When the browser’s URL changes, that router looks for a corresponding Route from which it can determine the component to display.

Configures the router via the RouterModule.forRoot method, and adds the result to the AppModule’simports array.

The Routes array of routes describes how to navigate. Pass it to the router module.forRoot method in the module imports to configure the router.

Each Route maps a URL path to a component

There are no leading slashes in the path

The router parses and builds the final URL for you, allowing you to use both relative and absolute paths when navigating between application views.

Router path can define by path variable (Example: id)

The data property is accessible within each activated route

Use it to store items such as page titles, breadcrumb text, and other read-only, static data.

The empty path in the fourth route represents the default path for the application

The place to go when the path in the URL is empty, as it typically is at the start. This default route redirects to the route for the URL and, therefore, will display the Component

The ** path in the last route is a wildcard. The router will select this route if the requested URL doesn’t match any paths for routes defined earlier in the configuration. This is useful for displaying a “404 – Not Found” page or redirecting to another route.

The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes

If you need to see what events are happening during the navigation lifecycle, there is the enable tracing option as part of the router’s default configuration. This outputs each router event that took place during each navigation lifecycle to the browser console. This should only be used for debugging purposes. You set the enable tracing: true option in the object passed as the second argument to the router module.forRoot() method.

When the browser URL Changing, the router matches that URL to the route path and displays the Component after a RouterOutlet that you’ve placed in the host view’s HTML.

<router-outlet></router-outlet>

When the browser URL Changing, the router matches that URL to the route path and displays the Component after a RouterOThe RouterLink directives on the anchor tags give the router control over those elements.

The navigation paths are fixed, so you can assign a string to the routerLinktlet that you’ve placed in the host view’s HTML.

Had the navigation path been more dynamic, you could have bound to a template expression that returned an array of route link parameters. The router resolves that array into a complete URL.

The RouterLinkActive directive on each anchor tag helps visually distinguish the anchor for the currently selected “active” route

<button routerLink=”new” routerLinkActive=”active”>Navigate</button>

After the end of each successful navigation lifecycle, the router builds a tree of ActivatedRoute objects that make up the current state of the router.

You can access the current RouterState from anywhere in the application using the Router service and the routerState property.

Each ActivatedRoute in the RouterState provides methods to traverse up and down the route tree to get information from parent, child and sibling routes

The route path and parameters are available through an injected router service called the ActivatedRoute

• url
• data
• paramMap
• queryParamMap
• fragment
• outlet
• routeConfig
• parent
• firstChild
• children

The Router emits navigation events through the Router. events property.

These events range from when the navigation starts and ends to many points in between

• navigation start
• RoutesRecognized
• RouteConfigLoadStart
• RouteConfigLoadEnd
• NavigationEnd
• NavigationCancel
• NavigationError

Dependency Injection (DI) is a way to create objects that depend upon other objects. A Dependency Injection system supplies the dependent objects (called the dependencies) when it creates an instance of an object.

Angular has a Hierarchical Dependency Injection system. There is actually a tree of injectors that parallel an application’s component tree

Ans : Angular is a framework for building client applications in HTML and either JavaScript or a language like a TypeScript that compiles to JavaScript.It is best suited for Single Page Application(SPA).

Ans : constructor() {}

Ans : this

Ans : @Input

Ans : @Output

Ans : < li *ngFor=”let val of vals”>{{val}}< /l i >

Ans : FormsModule

Ans : ReactiveFormsModule

Ans :

Ans :

Ans : RouterModule.forRoot

Ans : objEvent = new EventEmitter();

Ans :

Ans : The Angular CLI (Command Line Interface) is a tool to initialize, develop, scaffold and maintain Angular applications.

npm i @angular/cli -g

Ans : The NgModule is a TypeScript class marked by the @NgModule decorator. The Angular module helps you to organize an application into associative blocks of functionality.

Ans : omponents are the most basic building block of a UI in Angular applications and it controls views (HTML/CSS). They also communicate with other components and services to bring functionality to your applications.

Ans : Dependency Injection is a powerful pattern for managing code dependencies. DI is a way to create objects that depend upon other objects.

Ans : A service is used to provide an easy way to share the data between the components and with the help of dependency injection (DI) you can control how the service instances are shared.
Services use to fetch the data from the RESTful API.

Ans : HttpClient is performing HTTP requests and responses.The HttpClient is more modern and easy to use the alternative of HTTP.

Ans : ‘ng generate component my-new-component’ or in short ‘ng g c my-new-component’

Ans : ‘ng generate directive my-new-component’

Ans : ‘ng g pipe my-new-pipe’

Ans : ‘ng g service my-new-service’

Ans : ‘ng g class my-new-class’

Ans : ‘ng g module my-module’

Ans : The Angular offers two ways to compile our application code-
Just-in-Time (JIT) – JIT compiles our app in the browser at runtime (compiles before running).
Ahead-of-Time (AOT) – AOT compiles our app at build-time (compiles while running).

Ans : ngOnChanges,ngOnInit,ngDoCheck,ngOnDestroy,ngAfterContentInit,ngAfterContentChecked,ngAfterViewInit,ngAfterViewChecked

Ans : Lazy loading speeds up the application initial load time by splitting the code into multiple bundles and loading them on demand.
Ex : {path : ‘admin’, loadChildren: ‘./admin/admin.module#AdminModule’},

Ans :Promises:
returns a single value
not cancellable
Observables:
works with multiple values over time
cancellable
supports map, filter, reduce and similar operators

Ans :Constructors:-
1. The constructor is a default method runs when a component is being constructed.
2. The constructor is a typescript feature and it is used only for a class instantiations.
3. The constructor called first time before the ngOnInit().
ngOnInit:-
1. The ngOnInit event is an Angular 5 life-cycle event method that is called after the first ngOnChanges and the ngOnInit method is use to parameters defined with @Input otherwise the constructor is OK.
2. The ngOnInit is called after the constructor and ngOnInit is called after the first ngOnChanges.

Ans : All npm packages contain a file, usually in the project root, called package.json – this file holds various metadata relevant to the project.

Ans : 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.

Ans : A component is a directive with a view whereas a directive is a decorator with no view. A component can use pipes whereas directives can’t.

Ans : Pipes in Angular 5 are used in templates in order to convert them into a content that is user-friendly and readable one within the interpolation({{}}).
“|” denotes the pipe

Ans :
1)DatePipe
2)CurrencyPipe
3)AsyncPipe
4)DecimalPipe
5)PercentPipe
6)UpperCasePipe
7)LowerCasePipe
8)TitleCasePipe
9)JsonPipe
10)SlicePipe

Ans :The chaining Pipe is used to perform the multiple operations within the single expression. This chaining operation will be chained using the pipe (I).
Ex : {{ birthday | date | uppercase}}

Ans : Fun(name?:string)

Ans : @HostListener

Ans : **

Ans : HttpClientModule

Ans :ViewEncapsulation decides whether the styles defined in a component can affect the entire application or not. There are three ways to do this in Angular:
Emulated: styles from other HTML spread to the component.
Native: styles from other HTML do not spread to the component.
None: styles defined in a component are visible to all components.

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

Ans : Observable is a data stream over time, which is a key concept of Functional Reactive Programming. It can be subscribed to get the data.

Ans : RxJS or Reactive Extensions for JavaScript is a library for transforming, composing, and querying streams of data. We mean all kinds of data too, from simple arrays of values, to series of events (unfortunate or otherwise), to complex flows of data.

Semantic Versioning (SEMVER), when we are building an application with other applications interface, SEMVER communicate how the changes you make will affect the third party’s ability to interact with your application.

Package-lock.json: This is added in NPM version 5.x.x and higher, when we are installing modules from package.json sometimes it may install latest version of module without removing earlier installed version, package-lock.json make sure to avoid above mentioned situation.

HTTP module is replaced with HTTPClient in Angular 4 which had few performance improvements listed below:

• The HTTP Interceptors implementation allows middleware logic to be inserted into the pipeline.
• HTTP request/response objects changed to Immutable.
• Both request upload and response download implemented Progress events.

To debug Angular code we mostly use Browser Development tools like Chrome, Firefox, Edge and etc.

Node JS Inspector to debug node requests.

Postman helps to troubleshoot application requests and response from backend.

JS Bin is popular JavaScript debugging tool which supports collaborative debugging.

JSON Formatter and Validator to validate json data.

Webpack is npm package bundling tool which helps developers to bundle all declared dependencies.

SessionStack is a monitoring software that provides you with a set of monitoring tools.

Below starting Angular Life Cycle the typescript compiler will start first.

• ngOnInit
• ngOnChanges
• ngDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngOnDestroy

Component is just like a class file with added features such as binding HTML content, importing necessary dependencies like SASS and Services.

Services are simple classes with functions and members not html content. Services is a singleton property which reduce duplication of code and to access or store data.

When we access the method of one component into another need to create the object and access it. Because of Service is Singleton, @Injectable indicates methods of Service by Injecting Service in Constructor() i.e. only one object instance of each service is created for whole application.

A change-detection tree collects all views that are to be checked for changes. initiate changedetection method and explicitly mark views as dirty, which means they need to be changed and rerendered.

Angular Material is a collection of Design components for Angular. Angular Material Design can be implemented easily by using below components:

• @angular/material:materialDashboard: Create a card-based dashboard component
• @angular/material:materialTable: Create a component that displays data with a data-table
• @angular/material:materialNav: Create a component with a responsive sidenav for navigation

Compile-time configuration means that you compile your configuration into your app, at the time when you compile and bundle it. In Angular CLI we already have a preconfigured setup for having such compile-time configuration options. Inside the environments folder we have environment.ts and environment.prod.ts file which can be configured as per our project setup.

Runtime configuration is useful when you need to be able to change your app’s configuration settings or maybe you even expose them via an API. When we run application, HTTP request will call to the JSON file and read the settings.

*ngIf and *ngFor loops are changed syntactically from Angular 4 which have significant improve in performance. Below are the changes:

*ngIf: <div *ngIf=”isLoggedIn; else loggedOut”> </div>

<ng-template #isLoggedIn> You logged In. </ng-template>

<ng-template #loggedOut> You logged out. </ng-template>

*ngFor : <ng-template ngFor let-item [ngForOf]=”items” let-i=”index”> </ng-template>

We basically have four ways to communicate between the components:

• Parent to Child: Sharing Data via Input.
• Child to Parent: Sharing Data via ViewChild.
• Child to Parent: Output() and EventEmitter to share data.
• Unrelated Components: Sharing Data with a Service.

Below are the main building blocks of Angular:

• Module
• Component
• Metadata
• Template
• Data Binding
• Services
• Directives

We can save data in two ways: Local Storage and Session Storage.

In initial loading Typescript constructor will call first and then Angular ngOninit() will call.

We need to declare @Pipe decorator and implement PipeTransform to the class then declare transform() function with necessary arguments and import custom pipe file to the Application main Module as a Service.

In component we can view Pipe in HTML (View) as {{ duplicateData | unique }}

Directives: Directives add behaviour to an existing DOM element or an existing component instance.

Component: A component, rather than adding/modifying behavior, actually creates its own view (hierarchy of DOM elements) with attached behavior.

We have lot of frameworks for unit testing, below are the quite often used:

• Mocha
• Jasmine
• Karma
• Aurelia

Declare Service file in component class constructor and if service is not imported in application main module then need to import under Providers as Metadata.

JSON.stringify: It will convert the object to String format

JSON.parse: It will convert again data to JSON object.

Yes, we can use multiple modules but need to declare one module as a main one from where initialize of application starts.

In Angular, the following four statuses are commonly used by forms:

• Valid – It will check state of the validity of all form controls and return true if they are valid.
• Invalid – It will check state of the validity of all form controls and return true if they are invalid.
• Pristine – It will check state of the validity of all form controls and return true if no control is modified.
• Dirty – It will check state of the validity of all form controls and return true if control is modified.

Answer: To use JQUERY you need to install the dependency using “npm install jquery –save” and need to add JQUERY path under scripts in angular-cli.json. Once dependency installed you can import it to the required component as “import * from ‘jquery’”.

Below are the main features of Angular 7:

• Angular material and component dev kit (CDK).
• New drag-drop module.
• Virtual Scrolling
• Angular Application size restriction.

Below are the ways to check the Angular version:

• Go into node_modules/@angular/core/package.json and check version field.
• Check main application entry where Angular adds the version to the main component element:

<my-app ng-version=”version”>

• If you want to do from code, you can import it from the @angular/core: import { VERSION } from ‘@angular/core’;

AngularJS ngRoute module provides routing, deep linking services, and directives for angular applications, load the ngRoute module in your AngularJS application by adding it as a dependent module: angular.module(‘appName’, [‘ngRoute’]);

$routeProvider is used to configure the routes. We use ngRoute config() to configure the $routeProvider. The config() takes a function which takes the $routeProvider as a parameter and the routing configuration goes inside the function.

The upgrade should be done in below-mentioned process:

• Installing Latest Angular CLI
• Ng update
• Updating other dependencies
• Updating RxJS
• Simplifying dependency injection for core services.
• Update any other dependencies like @angular/material

Typings is the simple way to manage and install TypeScript definitions.

• Typings allows compiler to use existing TypeScript classes, properties and so on…
• Typings can be installed from a repository using typings command.
• The typings package manager is used to install type definitions into project. Third-party libraries should not ship with their own type definitions.

NgModule is to declare each thing you create in Angular and group them together. There is two kind of main structures:

• All components (views: the classes displaying data), directives and pipes should be imported under ‘Declarations’.
• All services should be imported under “providers” (models: the classes getting and handling data).

Yes

Yes, Angular 2 and further versions are completely supported for mobile websites. If need to develop mobile application then need to use the Ionic framework with Angular.

Below are the key features of Angular 4:

• Router ParamMap.
• Dynamic components with NGComponentOutlet.
• Animation module.
• *ngIf else statement added.

Below are the key features of Angular 5:

• Build Optimizer
• Compiler Improvements
• New Router LifeCycle events
• HTTPClient

Below are the key features of Angular 6:

• Introduced new lvy render
• Bazel compiler
• Multiple validators for array method of FormBuilder

Version Control is a subset of Configuration Management which typically is used for keeping track of source code overtime as it evolves. We have different version controls which are used namely GIT HUB, Tortise SVN and etc. Based on your project specification you should explain how you maintain code versions.

Below are the new router life cycle events:

• GuardsCheckStart,
• GuardsCheckEnd,
• ResolveStart and
• ResolveEnd

The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browse

When you deploy your app, you only distribute the resulting build, not any of the source files or build tools, The node_modules directory is only for build tools.

The node package manager (NPM) which installs packages locally into project by creating node_modules folder for all dependencies. From there the package code can be included into a project, the browser has no way to include modules in code (yet), so you need to use a library that can expose node’s commonJS style modules.

Angular JS is scope based and Angular 2 is component based and completely rewritten, as a developer it is better to know the concepts of Angular 1 and should have complete hands on experience in Angular 2/4. After that need to know the bug fixes, improvements, deprecated packages and enhancements of latest version.

Lazy loading modules in Angular 6 allows applications to load modules only when they are needed i.e when you first visit the route(s) corresponding to component(s) belonging to the lazy loaded module. It have many benefits on Angular 6 application such as the performance and size.

To implement lazy loading in Angular 6 application need to setup routing to use the loadChildren() method and add components you want to lazy-load inside feature modules i.e outside the main application module app-main.module.ts.

Developer need to check and try to fix all compile and build time errors which come across in upgradation and after that need to test every component of application and make sure there is no functional flow breakage. We should prioritize the bug fixes and perform impact analysis before implementation.

Answer: No, Angular 2 or greater are component based application with class based which supports only TypeScript language. Javascript libraries can be used as external dependencies.

Angular is a front end application and ideally we can use any backend database but angular supports Mongo DB database officially. Usually to connect any relational database we should use some middleware service like Rest API.

Ng Bind

It will create deep copy of the variable. It doesn’t point to the same memory reference of the original variable.

Ng-Validate is used to validate text inputs like  phone numbers , email , barcodes.

Changed .directive to .component.

An interceptor is a regular service factory that is registered to the array. Interceptors are used when we want to capture the every request and manipulate it before sending it to the server.

• By declaring it in template via expression.
• By creating your own watches.

var watch = $scope.$watch(‘watchvariable’ ,function(){

alert(“watch Created”);

});

$apply is used to trigger digest cycle explicitly and see the changes propagate normally.

@inject is a manual mechanism of injecting a paramter.

Eg : import(inject) from ‘@angular/core’;

constructor(@inject(Angular) private Angular){};

Here we injected Angular as  paramter.

True.

$rootScope is the parent scope. This is available in the entire application.

angular.module()

True

The ng-app directive is for bootstrapping your application. The element with ng-app is the root element. It wraps the other directives of your application.” open=”no” style=”default” icon=”plus” anchor=”” class=””]

ng-include.

• Element directive
• Attribute directive
• CSS directive

Yes, we can have nested controller.

Yes.

$Injector is responsible for identifying and retrieving the dependencies as defined by the provider. It creates an instance of the provider.

AngularJS compares a value with its previous value. If there is a change, a change event is fired.

Ng Route routes your application to different pages without reloading the page.

To configure different routes in application.

$broadcast

$emit is used to transmit data between child to parent controller.

$on is used to handle events.

The scope is called as represents by the “model” of the object your web form application. It includes domains that store the data value and in which the presented to the user value via the template web application, as well the functions which can be called to be when the user selects the value of the certain actions such as clicking a button.

The controller function is a generally the empty scope object parameter and if it adds to a fields value function that will be later exhibited to the user the controller function via the view.

  Bootstrapping in AngularJS is nothing but the just initialization that value fields of Angular app. Totally, two ways of bootstrapping AngularJS that’s One is the Automatic Initialization and then added one is Manually using Script. When the AngularJS finds that the ng-app directive value function, it loads to the module associated and then compile the DOM.

To Create the value of angular.module ? To Assign a controller function to the module ? To create Link your module value to HTML tags with ng-app ? Link the controller value function to HTML with the ng-controller directive function.

The ng-routing is deep link combining to services and the directive’s value for angular forms applications whereas the UI designer routing is a 3rd party module routing use and is very powerful. It makes to everything ng-router function performs to be various other extra functions.

AngularJS is a framework including with important features of like to models, two-way binding value, directives value, routing value function, and it’s dependency injections, unit tests value etc.The Jquery is a library function used to the DOM manipulation value with no two-way binding features.

Data-binding in Angular web apps is the automatic synchronization function from data within the model and design components. The method that Angular means data-binding performs you accept that form as that single-source-of-truth in your application. The show is any projection of particular model at all times.

The provider in AngularJS is used to internally create a factory, services, etc. this phase value of configuration. The provider continues that particular system factory which signifies is done to indicate the service/value/factory.

DDO is defined us Directive Definition Object. DDO is used to while creating a value customize directive in AngularJs.

The $rootscope and $scope main difference is $rootscope is possible of data global value to across to the controller’s function value  ? whereas a $scope is available only in controllers function value that has to create it along with its children function controllers.

In AngularJS $rootScope and the $scope is defined as a both are objective value and is used for the sharing the data value form the function controller to view the data.

The web page template is the HTML tags portion of the angular app. It is specifically like to a static HTML tag page, save that templates receive additional syntax it allows data value to be included in it in order to give a customized user experience.

AngularJS is one of the JavaScript web frameworks that is used to making rich, extensible web page applications. It runs at plain JavaScript and HTML tags. The AngularJS is complete to Single Page Applications (SPA). It is essentially done for binding JavaScript objects program by HTML UI design elements.

It is a reach that exists independently including no prototypal inheritance. It gives these components reusable also permits to control this required either one-way or two-way.

Internationalization is one idea to show locale-specific data at a website. It is done to create multilingual language websites.

The AngularJS it provides that the date value function and it’s filtered through you can tobe format the date function value into the required form.

Syntax

{{ today | date:’MM/dd/yyyy’}}

A locale is defined as a particular geographical region value function of a web app. That’s commonly used to the locale ID comprises of main things two parts, that one part is a language code, and then the other one part is a country code.

They are Three Main components of then AngularJS is architecture. They are

The Template (View) ? The Scope (Model) ? The Controller (Controller)

AngularJS extends to the HTML attributes with the Directives and binds to data value with HTML with E

Routing is one of the core features of AngularJs framework that is helpful in building the single page web application and its multiple views. In Angular ngRoute Module is used to implement the Routing value. The ngView,$routeProvider,$route, and then the $routeParams are many components of the ngRoute Module that supports to configure and mapping for the web page  Url to views.

AngularJs used to these prefixes to limit accidental code contact with users code.$ the prefix is done with public objects value use whereas $$ prefix is applied with a private object.

AOT stands for Ahead of Time. This is the compilation in which Angular assembles these components also templates to JavaScript including HTML while developing.

The AngularJs2 template is used to defines us the views of the AngularJS Application.

Transition basically means operating from this modern state on each new state. In angular, this development is an animation-specific function value and which is used in angular’s animation DSL signal.  A function is provided in exchange for a change also it order be executed any terms a state change occurs.

Every application has to least one the Angular module framework, the root module that the pages will inform you at the need to add additional modules angular framework value to this array value function. AppModule is required for every one Angular 2 apps.

Angular 2 is a mobile-oriented framework  Whereas Angular1 was no increased including any mobile station in mind.

Angular 2 is a convenient framework, i.e. us become more opportunities for languages. We can take ES5, ES6, Typescript or Dart to read an Angular 2 code    Whereas an Angular1 system can be written by using only ES5, ES6, and Dart.

Angular will be delivering a new set of rendering pipeline and view engine.

The purpose of angular view generator is to change the templates and details that we have read into that usual HTML and JavaScript so it involves easy to the browser to remember it comfortably. Ivy does suppose to be great for the Angular Renderer.

They are two ways to read decorators in Angular. These are:

$provide.decorator, and

module.decorator

Create a class using below code:

ng generate class <name> [options]

ng g class <name> [options]

Where name refers to the name of a class.

Options include to the specific project name, spec use in Boolean or type of a file

AngularJS digest cycle is that means after Angular JS data binding. In each digest cycle, Angular connects the old more the latest version of the scope form values. The digest cycle involves triggered automatically. We can further use $apply() if we require to trigger the condensation cycle manually.

The purpose of angular view generator is to convert the templates that the including parts that we have written into this normal HTML also the JavaScript so it means easy to one browser to view them comfortably. Ivy remains supposed to mean high for special Angular Renderer.

Bazel is a search tool really like the Make, Maven, and Gradle and it is an open-source build tool. Bazel utilizes single also high-level build language. It manages the design in any great number from languages also makes this product on a large number from platforms. Moreover, it supports multiple users and on a high number like codebases over several repositories.

This is used for building the reusable components.

• ngFor
• ngSwitch
• ngClass
• ngStyle

A component is part of the web application. Collections of several parts of web application is formed various modules.

It is a process of how data is exchanged between the html and typescript.

Processing a class is done by metadata.

Collection of various components is called modules. There will always be at least one module present.

It is a process of navigation between various clients.

It is a form of HTML tag that let ANGULAR to render the components.

A UI component library used for creating attractive, consistent and fully functional web application.

• EVENT BINDING.
• PROPERTY BINDING.
• TWO – WAY BINDING.

It is basically a process where typescript code is converted into JavaScript code.

• MVC CONTROLLER.
• RESTFULL SERVICES.” open=”no” style=”default” icon=”plus” anchor=”” class=””]
• ANIMATION AND EVENT HANDLERS.

{{ expression }}

• ngOnchanges
• ngOninit
• ngDocheck
• ngOnDestroy

In order to perform animation in ANGULAR we need several library called ANIMATE LIBRARY.

Arrow Functions, let, const, classes, import, export etc…

var has the function scope whereas the let has blocked scope. By giving const,  the variable become immutable, and cannot be changed .

Yes, values inside the objects can be changed however the entire object cannot be changed.

Arrow functions use the context of the window unlike normal function which uses the parent context.

using new Set(…array)

notation is caled spread operation and is used to make all the arguments into a collective array.

using flat method flat()

The properties of the parent object can be used by the children by inheriting them  String. Trim() can be used by all the strings which are children (subset) of String.

In a scenario where a function is inside another parent function, the child function will have accessibility to the parent function. This is called closure.

filter uses a condition basing on which it returns a filtered array.

Import and Export are the ES6 purgation of what we use require and modules. Export in ES5 respectively. Any object, function or variable can be exported from one file on an application to another using Import and Export.

Map function loops the given array which are majorly used in looping the elements and returning to DOM in frameworks like react.

A. @Output()

B. @Input()

C. Output()

D. InputAnswer: B

A. @Output()

B. @Input()

C. Input()

D. Output

Answer: A

A. Authentication

B. Information Exchange

C. A & B

D. Application

Answer: C

Decorator is one of the typescript features which provides meta data to angular about clas, property etc. It always presents with symbol @.

A. @() with optional parameters.

B. @() with parameter

C. Character

D. Parameter

Ans: A

A. Data binding

B. One-way data binding

C. Two-way data binding.

D. B & C

Ans: C

JavaScript is client-side scripting language while angular js is a framework. In JavaScript modification is easier. while angular it is difficult to apply. JavaScript generally based on DOM.Angular is based on MVC.

A. FormsModule

B. Reactiveforms Module

C. A & B.

D. None

Ans: C

AOT (Ahead of Time) compilation is the new feature added by angular to boost the application performance.

You can achieve AOT compilation by executing

ng bulid –aot or ng build –prod

View Encapsulation enable us to use shadow dom in angular. View encapsulation determines whether the styles written in particular component will affect the entire application or not.

Server-side rendering can be implemented in Angular by using Angular Universal.

• Performance Optimization
• Consistent SEO performance

To generate class in Angular by Angular-cli is

Ng generate class <nameOfClass>

To generate a component in angular by Angular-cli is

Ng generate component <nameOfComponent>

Or

Ng g c <nameOfComponent>

Constructor is the default for every class or object, it will run first when class is instantiated.

NgOninit is first lifecycle method that will call after all the input bindings are done. It is the best place to make API requests.

• @Input
• @output
• Services
• Local storage
• session storage

Data binding is the process that creates the connection between Ui and the data.

Data binding supported by Angular are

1. Interpolation
2. Property binding
3. Event binding
4. Two-way data binding

Need to use ng update to update angular projects to new versions.

Ng update @angular/cli @angular/core

In Angular 1.x there is no built-in support for mobile, but Angular 2 was designed fully supports for mobile.

You can use any of ES6, ES7, Typescript or Dart to write angular2 code. But in Angular 1.x we can use ES6, ES7 only. Typescript is the great addition for Angular2.They have removed controllers and $scope. Implemented components.

When rendering list of elements in Angular by using *ngFor, Arrays and objects are compared by reference. This is fast but causes unwanted DOM manipulations.

You can avoid this by using trackBy in *ngFor.

Method:1 For handling click events

<button (click)=”handleClick()”>Click me</button>

Method2:

<input (keyup)=”handleInput($event)” type=”text” />

Component is the key of angular without that angular is not working, it is essential while write typescript.

Promise and obserables are always used for abstraction purpose that directly deal with asynchrounous application.Promise always return single value and obserables return multiple values.

While compiler matches two process simultaneously at that time it is known as interpolation, which uses text and attributes.

Constructor is always been used with class to initilize member variables.ngOninit is a function of angular..which run piece of code at different stages.

Angular is an open-source front-end web structure. It is one of the most famous JavaScript structures that is for the most part kept up by Google. It gives a stage to simple improvement of online applications and engages the front end designers in curating cross-stage applications. It incorporates incredible highlights like explanatory formats, a start to finish tooling, reliance infusion and different other best rehearses that smoothens the advancement way.

A couple of the significant focal points of utilizing Angular structure are recorded beneath:

• It bolsters two-way information authoritative
• It pursues MVC design engineering
• It underpins static layout and Angular format
• You can include a custom mandate
• It additionally bolsters RESTfull administrations
• Approvals are bolstered
• Customer and server correspondence is encouraged
• Backing for reliance infusion
• Has solid highlights like Event Handlers, Animation, and so on.

Precise is regularly utilized for the improvement of SPA which represents Single Page Applications. Angular  gives a lot of prepared to-utilize modules that rearrange the improvement of single-page applications. Not just this, with highlights like inherent information spilling, type security, and a measured CLI, Angular is viewed as an undeniable web system.

Angular articulations are code scraps that are generally put in restricting, for example,  like JavaScript. These articulations are utilized to tie application information to HTML  Punctuation.

Formats in Angular are composed with HTML that contains Angular-explicit components and characteristics. These layouts are joined with data originating from the model and controller which are additionally rendered to give the dynamic view to the client.

String introduction in Angular is an uncommon grammar that utilizations format articulations inside twofold wavy  props for showing the part information. It is otherwise called mustache grammar. The JavaScript articulations are incorporated inside the wavy props to be executed by Angular and the relative yield is then inserted into the HTML code. These articulations are typically refreshed and enlisted like watches, as a piece of the summary cycle.

Comments in precise are the “main” metadata set of the class utilizing the Reflect Metadata library. They are utilized to make a “comment” cluster. Then again, decorators are the structure designs that are utilized for isolating adornment or change of a class without really modifying the source code.

Controllers are JavaScript capacities that give information and rationale to HTML UI. As the name proposes, they control how information streams from the server to HTML UI.

Extension in Angular is an item that alludes to the application model. It is an execution setting for articulations. Extensions are masterminded in a various leveled structure that emulates the DOM structure of the application. Degrees can watch articulations and engender occasions.

In Angular, information restricting is one of the most dominant and significant highlights that enable you to characterize the correspondence between the part and DOM(Document Object Model). It streamlines the way toward characterizing intelligent applications without stressing over pushing and pulling information between your view or layout and part. In Angular, there are four types of information official:

• String Interpolation
• Property Binding
• Occasion Binding
• Two-Way Data Binding

Channels in Angular are utilized for designing the estimation of an articulation to show it to the client. These channels can be added to the formats, mandates, controllers or administrations. Not simply this, you can make your custom channels. Utilizing them, you can undoubtedly compose information so that the information is shown just on the off chance that it satisfies certain criteria. Channels are added to the articulations by utilizing the pipe character |, trailed by a channel.

A supplier is a configurable help in Angular. It is a guidance to the Dependency Injection framework that gives data about the best approach to acquire an incentive for a reliance. It is an item that has a $get() strategy which is called to make another example of a help. A Provider can likewise contain extra techniques and utilizations $provide to enlist new suppliers.

Indeed, Angular supports the idea of settled controllers. The settled controllers are should have been characterized progressively for utilizing it in the View.

A help() in Angular is a capacity that is utilized for the business layer of the application. It works as a constructor work and is conjured once at the runtime utilizing the ‘new’ catchphrase. Though production line() is a capacity that works like the administration() yet is significantly more dominant and adaptable. industrial facility() are configuration designs that help in making Objects.

$scope in Angular is utilized for executing the idea of reliance infusion (D.I) then again degree is utilized for mandate connecting.

$scope is the administration given by $scopeProviderwhich can be infused into controllers, orders or different administrations though Scope can be anything, for example, a capacity parameter name, and so on.

The scope questions in Angular are sorted out into a chain of importance and are significantly utilized by sees. It contains a root scope which can additionally contain scopes known as youngster scopes. One root extension can contain more than one youngster scopes. Here each view has its very own $scope in this way the factors set by its view controller will stay covered up to different controllers. The Scope chain of command by and large resembles:

Root $scope

• scope for Controller 1
• scope for Controller 2
• scope for Controller ‘n’

AOT represents the Angular Ahead-of-Time compiler. It is utilized for pre-aggregating the application segments and alongside their layouts during the fabricate procedure. Angular applications which are arranged with AOT has a littler propelling time. Likewise, parts of these applications can execute quickly, without requiring any customer side accumulation. Formats in these applications are implanted as code inside their parts. It diminishes the requirement for downloading the Angular compiler which spares you from a lumbering errand. AOT compiler can dispose of the unused orders which are additionally tossed out utilizing a tree-shaking instrument.

The overview cycle in Angular is a procedure of checking the watchlist for monitoring changes in the estimation of the watch variable. In each condensation cycle, Angular thinks about the past and the new form of the degree model qualities. For the most part, this procedure is activated verifiably however you can enact it physically too by utilizing $apply().

• Karma
• Angular Mocks
• Mocha
• Browserify
• Sion

In Angular, a help is a substitutable item that is wired together utilizing reliance infusion. A help is made by enrolling it in the module it will be executed inside. There are three manners by which you can make a precise help. They are three manners by which an assistance can be made in Angular:

• Plant
• Administration
• Supplier

Singleton design in Angular is an extraordinary example that limits a class from being utilized more than once. Singleton design in Angular is significantly executed on reliance infusion and in the administrations. In this manner, in the event that you use ‘new Object()’ without making it a singleton, at that point two diverse memory areas will be assigned for a similar article. While, if the article is proclaimed as a singleton, on the off chance that it as of now exists in the memory then basically it will be reused.

REST represents Representational State Transfer. REST is an API (Application Programming Interface) style that deals with the HTTP demand. In this, the mentioned URL pinpoints the information that should be handled. Further ahead, a HTTP strategy at that point distinguishes the particular activity that should be performed on that mentioned information. Subsequently, the APIs which pursue this methodology is known as RESTful APIs.

Bootstrapping in Angular is only introducing, or beginning the Angular application. Precise bolsters programmed and manual bootstrapping.

Programmed Bootstrapping: this is finished by adding the ng-application order to the foundation of the application, commonly on the tag or tag on the off chance that you need precise to bootstrap your application consequently. At the point when Angular finds the ng-application mandate, it stacks the module related with it and afterward assembles the DOM.

Manual Bootstrapping: Manual bootstrapping gives you more control on how and when to introduce your Angular application. It is valuable where you need to play out some other activity before Angular awakens and arrange the page.

Angular Global API is a blend of worldwide JavaScript capacities for performing different normal errands like:

• Contrasting objects
• Repeating objects
• Changing over information

There are some normal Angular Global API capacities like:

• Angular. lowercase: Converts a string to lowercase string.
• Angular. capitalized: Converts a string to capitalized string.
• Angular. string: Returns genuine if the present reference is a string.
• Angular. isNumber: Returns genuine if the present reference is a number.

SQLite is otherwise called jQuery light is a subset of jQuery and contains every one of its highlights. It is bundled inside Angular, naturally. It causes Angular to control the DOM such that is perfect cross-program. SQLite executes just the most generally required usefulness which brings about having a little impression.

Modules, Components, Templates, Directives, Information, Binding, Services, Injection Dependence   Routing  

Angular is a front-end web framework that is open source. It is one of the most common frameworks  for JavaScript, which Google mainly retains. It offers a forum for simple web-based application creation  and empowers front-end developers to curate cross-platform applications. It implements powerful  features that smooth the development path, such as declarative models, end-to-end tools, dependency  injection, and various other best practises. 

• This facilitates two-way data-binding  
• It fits the architecture of MVC patterns  
• It supports a static and angular template template  
• A custom directive can be inserted,  
• It also funds services from RESTfull  
• Validations are recognised  

Angular expressions are code snippets that are commonly put in a binding context, such as JavaScript like {{{}} expressions. To link application data to HTML, these expressions are used  

Syntax: {{}{ word }}} 

Filters in Angular are used to format an expression’s value in order to display it to the user. It is possible  to apply these philtres to models, directives, controllers or services. 

RouterOutlet removes the part rendering templates. In other words, it reflects or makes the  components at a specific position on a template. 

OnChange() – OnInit() – DoCheck() – AfterContentChecked() – AfterViewInit() – OnDestroyChecked() – AfterViewChecked() ().  

It is a mechanism that is related to an observable one. An individual execution of the observable occurs  if the subscription method is called 

The loading of the CSS class is possible in ng-Class, while we can set the CSS style in ng-Style.

AOT refers to the compilation of Ahead-of-time. In Angular, it means that before the programme is run  in a browser, the code you write for your application is compiled at construction time. It is an alternative  to compiling just-in-time where code is compiled in the browser just before it is executed. Compilation  of AOT will lead to better performance of the application. 

Interceptor is just a fancy word for a feature that accepts requests/answers before processing/sending  them to the server. When you want to pre-process several types of requests in one way, you can use  interceptors. 

Each component has a ChangeDetector of its own. The AbstractChangeDetector is inherited from all  Shift Detectors. 

Supports the two-way of data. Supports the syntax of validations and templates (both angular and static). Custom animations, directives, and utilities can be added. The method of 

event handling is smooth. Hierarchical Dependency Structure of injection (Parent-child). Provision to make RESTful services and contact between client and server simpler. 

Binding one-way:

Whenever there is a shift in the data model, the view does not change or update  automatically. To represent modifications, custom code needs to be manually  written.  

As the data model changes, the UI or view is constantly modified automatically. The  mechanism is identical to the process of synchronisation. 

The (|) pipe is used to convert input data to the desired format. For instance,  <p>The price is the price | the }}</p> 

A browser URL is interpreted by Angular Router as a command to navigate to a  client-generated view. On a page, the router is bound to the links. This way, Angular  knows when a user clicks on it to navigate the application view to the appropriate  tab. 

There are two approaches-reactive and template-driven-to manage type data (user  inputs).  

When you are using reactive patterns in your application, reactive forms can be  used and forms are a vital part of your application. These are flexible functional and  testable types.  

To add basic forms, for example, a sign-up page, template-driven forms are used.  These are not as scalable as reactive forms and can only be used if the  specifications for the form are simple. 

The class decorator provides metadata for the required form of class. It occurs just  prior to the description of the class and declares that the class is of a certain kind.  @Component, @NgModule, @Pipe, @Directive, @Injectable are several class  decorators.  

The Angular library is a compilation of standardised solutions that have been put together by other developers for re-use. By using Angular, we can build our own  library. 

A service is used when different modules need to be supplied with a similar feature.  By enabling you to remove common functionality from modules, services allow for  greater separation of concerns for your application and better modularity.  

{ Injectable } from ‘@angular/core’ is imported;  

{ Http} is imported from ‘@angular/http’; 

@Injectable({ / For dependency injection, the Injectable decorator is required to  function  

/ The choice / providedIn registers the service with a spe 

In the template, we use the ngFor angle directive to view each object in the list.  Here for example, we iterate over user lists,  

<li *ngFor=”let user”>>”let user”>  

{{}}{user }}}  

To </li> 

If the request fails on the server or fails to enter the server due to network  problems, instead of a successful response, HttpClient will return the error object.  In this case, the item needs to be treated by passing the error object as the second  callback method to subscribe().  

For example,  

FetchUser() {Translation()  

The.userService.getProfile paper ()  

.subscribe( Subscribe()  

(data: user) => this.userProfile = {…data }, / route of success  

Error => this.error = error / erro error / erro 

An Observable is a specific entity that can help handle async code similar to a pledge. Observables are not part of the language of JavaScript, so we need to rely on the common RxJS Observable library. Using a new keyword, the observables are generated. 

{ } 

is imported from ‘rxjs’;

Observable const = new Observable(observer => 

{ { Observable const = new 

SetTimeout(() => 

{ Timeout() 

Hello!’);; 

}, 

2000); and 

});; 

Multi-casting is the method of broadcasting in a single implementation to a list of  multiple subscribers.  

Rx.Observable.from([1, 2, 3]); var source =  

Subject var = new Rx.Subject();  

Multicast var multica = source.multicast(subject);  

/ These are:’ subject.subscribe({…})’ under the hood:  

Multicasted.subscribe({  

Next: (v) => console.log(‘observerA:’ + v) Console.log(‘observerA:’  });;  

});;  

/ This is under the cap,’ s’ 

Dynamic components are the components in which the position of the components  in the framework is not specified at the time of construction. i.e. they are not  included in any angular template. But at runtime, the part is instantiated and put in  the programme.  

A build feature is a feature that uses the Architect API to perform a complex  operation, such as “build” or “test” The code for the builder is specified in the npm  package. BrowserBuilder, for instance, runs a Webpac 

When multiple modules import the same module, it is only evaluated once by angular (When it encounters the module first time). This condition is followed even by the module appearing in a hierarchy of imported NgModules at any rank. 

ES2015 syntax is included in the first build, which takes advantage of built-in support in modern browsers, offers less polyfills, and results in a smaller package si ze. 

One of the most beneficial principles of Angular Routing is lazy loading. Instead of  downloading everything in a big bundle, it allows us to download the web pages in  chunks. It is used for lazy loading by loading the function module asynchronously  for routing whenever necessary using the loadChildren property. As below, let’s  lazily load both Customer and Order function modules,  

Routes const: Routes = [[Routes =]  

{  

The route: ‘customers,’  

Kids load: () => import(‘./customers/cusus)