Angular Important Questions and Answers-1

WHAT IS ANGULAR FRAMEWORK

Angular is a Client-side (front side) JavaScript framework, which is designed by Google. It is used to make client-side application using the HTML and JavaScript or typescript and then it compiles to JavaScript

Why we use Angular

Developing a web application using JQuery or JavaScript is difficult, so angular came as front end framework to reusable the library.

The main important goal was to separate the client-side from the server-side. The development of client-side and server-side together is very complicated.

The structure of development needed to be improved. Everything should be in proper order from the user interface design, through writing business logic, to testing.

this is why it uses angular.

ADVANTAGE OF ANGULAR

DEVELOP ACROSS ALL PLATFORMS

   Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile, and native desktop.

SPEED & PERFORMANCE

Improved Architecture

Typescript

Mobile Support

Component-Based UI

SEO Friendly

ANGULAR Modules

An angular module is a group of components, directives, pipes and services that are related to the application.

 If we are going to design an application and that application contain multiple portals so all those the portal we can define as a module and this is also called a feature module.

To be able to define modules we have to use the decorator NgModule.

Command to create a module

 Ng g m ModuleName

ANGULAR Component

Angular is component-based architecture. Angular application is a collection of components, and a component handles one view or HTML page.

An Angular component controls a part of the UI of your application. For example, the header, footer, or whole page can all be components. Depending on how much reusability, you want in your code.

A component is a typescript class which is decorated with ‘@’ symbol.

A component contains the following things

        1. Selector: A selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML.

         2. TemplateUrl: path of HTML Page

         3. StyleUrl : Path of Style page

Command to create a component

      Ng g c ComponentName

ANGULAR Directive

Directives are used to manipulate the DOM( Document object model). Directives are elements which used to change the appearance, behavior or a layout of a DOM element. It also helps us to extend HTML as well.

 There are 3 types of directive exists in angular

Component directive

      This directive is used in the main class, this directive contains the details how the component should proceed and how it should use at run time.

      An angular application has at least one component which is attached with a template along with the behavior.

ANGULAR Directive

v  Structural  directive

      Structural directives start with a * sign. These directives are used to manipulate and add or remove elements from DOM elements.

There are basically 3 types of structural directive

       *ngIf directive

       *ngSwitch directive

       *ngFor directive 

Attribute directive

Attribute directives are used to modify the look and the behavior of the DOM elements.

There are mainly 2 types of Attribute directive

ngClass Directive: The ngClass directive is used to change CSS classes in the HTML element.

ngStyle Directive: The ngStyle directive used you to change the style of an HTML element using the expression.

ANGULAR Routing

v  Routing is a mechanism that is used to communicate b/w the component and based on that it shows the respective page on the browser or we can say like Angular  Router uses to navigate between views or pages that trigger by the user's actions. 

v  Router import from @angular/router package.

v  When we click on the button or we can say like when we hit any URL for navigate to other page then angular looks into the route array, and match the path as requested and based on that it load component as well as respective HTML and show on the browser.

v  Please watch Part 21 of angular 8 tutorial series for understanding more on it

v  ANGULAR Service

v  In Angular, services are always singleton objects it means it instantiated only once during the lifetime of application or module, Every Angular Service contains methods that always contain the data throughout the life of an application.

v   It is a mechanism to share responsibilities within one or multiple components. 

v  An angular service is basically a function.

v  It helps us to maintain code reusability means instead of using the same code again and again we can create a service and whenever we need it, so use that service in component.

v It is easy to do unit testing as well.

v  Command to create Service

v  Ng g s ServiceName

v  Please watch Part 24 of angular 8 tutorial series for understanding more on it

ANGULAR Pipe

v  Angular provides some filters known as Pipes which is used to format or transform data to desire output.

v  Pipes are used with a Pipe (|) symbol, it takes an input and returns a desired formatted output

v  For ex, if given input by the user , we want to show in upper case on browser we use Pipe for formatting.

v  Angular provide many built-in type pipes which is used to translate the data into desire output and we can create a custom Pipe as well.

Types of Pipe:

v  Built-in pipe

v        Parameterize pipe

v        Multiple pipes (chaining pipe)

v  2.   Custom pipe

Please watch Part 19,20 of angular 8 tutorial series for understanding more on it

ANGULAR Dependency injection

v  Dependency Injection always is one of the main benefits of an Angular Framework.

v  It’s a technique where one object is dependent on another object. In angular, a dependency is an object that is used as a service.

v   

v  Basically DI is a design pattern where class receive their dependency from external resources rather than creating himself.

v  In above picture basically, Class b depends on class A to execute class B methods, then class A  is a dependency of class B

Please watch Part 25 of angular 8 tutorial series for understanding more on it

ANGULAR Data Binding

v  Data binding means the communication between the component and the HTML page (DOM), or we can say like it’s a communication b/w typescript code of component and HTML the page which the user sees on the browser.

Data binding basically One-way data-binding or two-way data binding.

One Way Data Binding has different ways to bind data from component to HTML

v  String Interpolation

v  Property Binding

v  Style Binding

v  Class Binding

v  Attribute Binding

v  Two Way Data Binding

v  In one way data binding when we change element in HTML file,it doesn’t reflect to component file so to overcome this problem, we use two data binding like if I change anything in DOM then changes reflect the component as well so basically it updates data from component to view and vice-versa.

v  The combination of property binding and the event binding is called the two way data binding.

Please watch Part 12 of angular 8 tutorial series for understanding more on it

ANGULAR Forms

v  Angular forms are used to collect  the data based on the user's input. We can use Angular form for  users to log in, register page, and to perform many other data-entry tasks.

v  In Angular 8, there are 2 type forms:

v  Template-driven forms

v  Reactive forms (model-driven forms)

Both types of Forms are used to collect user input, validate the user input, create a form model and data model to update.

Please watch angular Form tutorial series for understanding more on it

ANGULAR  Template-driven forms

v  Template-driven forms are simple forms  it is good if we create a simple form for your application.

v  In template-driven forms we do most of the work on the template side.

v  Template-driven forms are easy to use but they are not as scalable as Reactive forms.

v  Its good for the simple scenarios not for the complex scenarios.

v  Very less code on the component side.

v  Unit testing is difficult in it.

v  Prerequisite

v  Need to import FormModule in App.module.ts  file

Please watch angular Form tutorial series for understanding more on it

ANGULAR Reactive Form

v  Reactive forms are better than template form.

v  Reactive forms are more scalable, reusable, and testable.

v  In these forms model which is created under app.module.ts file is responsible to handle all the user interaction and validation.

v  No any data Binding is done.

v  Mostly code is in the component side.

v  Prerequisite

v  Need to import ReactiveFormModule  under  app.module.ts file

Please watch angular Form tutorial series for understanding more on it

WHAT IS COMPILER

v  Compiling is a term of transforming one source code language to another.

WHAT IS TRANSPILING

v  It’s a process of converting typescript code into the JavaScript by using traceur, JS compiler.

What is JIT and AOT compilation

v  Angular compile components to native JavaScript and HTML.

v  There are 2 types of compilation

v  JIT(just in time)

v  The compilation happens on the user browser at runtime

      

       AOT (Ahead of time)

v  The application is compiled and optimized at the build time instead of run time, so it improves the rendering of the application UI

v  What is TRACEUR compiler

v  It compiles ECMA script Edition 6(ES6) code to regular javascript (ES5) to make it compatible with the browser.

Angular 8 Tutorial Series

Angular Interview Question

Here we will Learn important Angular interview questions.

You can subscribe to my YouTube Channel 

1. Difference Among Angular 1,2,3,4,5,6,7,8 | Angular Interview Question
2. Angular Important Questions and Answers-1 | Angular Interview Question
3. Angular Important Questions and Answers -2 |  Angular Interview Question
4. Difference between let var and const in angular |  Angular Interview Question
5. What is Angular Architecture  |  Angular Interview Question

Difference Among Angular 1,2,3,4,5,6,7,8

AngularJs and Angular 2

	Angular JS	Angular 2
1	1st the version was released in 2010 and its called as Angular 1 or mostly Angular JS	Angular 2 released in 2016
2	Its MVC based architecture, means we design angular JS as model-view-controller, and we write code on typescript only	It is component-based architecture, means Angular 2 onwards we included component as to make angular more efficient.
3	It doesn’t support	It support ES6 and typescript
4	It doesn’t support	It support mobile devices.
5	Its written in JavaScript	Angular 2 is totally rewritten in typescript
6		More testable as component-based

Angular 3

Why we don’t have Angular 3?

Angular developed in a MonoRepo it means a single repo for everything. @angular/core, @angular/compiler, @angular/router etc are in the same repo and may have their own versions.
 Now the problem is with the @angular/router which is already in a 3.X version. And that’s

 Because of some active and huge developments on the router section, like route-preload.

Now releasing Angular as version 3, with its route on version 4 will create confusion

To avoid this confusion they decided to skip the version 3 and release with version 4.0.0, so that every major dependency in the MonoRepo are on the right track.

Angular 2 and Angular 4

v  Angular 4 released in 2017.

v  Changes in Core library

v  Compare to Angular2 there is a lot of performance changes in angular4

	Angular 2	Angular 4
1	It doesn’t support all features	all feature of typescript 2.1 & 2.2 are supported in Angular 4 application
2	Animation features are included in Angular core only	Animation features are separated from @angular/core to @angular/animation
3	Here else block was not implemented so we have to write two *ngIf	Else block in *ngIf introduced

Angular 4 and Angular 5

v  Angular 5 released in 1^st November 2017.

v  Angular 5 released with lot of new features and with performance and bug fixes from angular 4

	Angular 4	Angular 5
1	Build Optimizer doesn’t exist here	Build optimizer: It helps to removed unnecessary code from your application
2	Compiler slower than angular 5	Compiler Improvements: This improved the support of incremental compilation of an application.
3	Preserve White space doesn’t exist here	Preserve White space: Its introduce in angular 5 to remove unnecessary new lines, tabs and white spaces // in component decorator you can now add: “preserveWhitespaces: false” // or in tsconfig.json: “angularCompilerOptions”: { “preserveWhitespaces”: false}`

v  Few new Router Life-cycle Events being added in Angular 5: In Angular 5 few new life cycle events being added to the router and those are:

v  ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd, GuardsCheckStart, GuardsCheckEnd, ResolveStart and ResolveEnd.

	Angular 4	Angular 5
4	Here we use HttpClient: which we import from @angular/HTTP library	HttpClientModule is introduced which comes under @angular/common/http package.
5	It doesn’t support	Angular 5 supports TypeScript 2.3 version.

Angular 5 and Angular 6

v  Angular 6 release in April 2018.

v  No major changes.

v  Dependency on RxJS 6.

v  Registering provider: To register new service/provider, we import Service into module and then inject in provider array.

v  CLI Changes: Two new commands have been introduced
— ng update <package> à to update the package

v  — ng add à to add new library like  ng add @angular/material 

	Angular 5	Angular 6
1	Here we use <template> tag for keeping if and else block	Remove support for <template> tag and replace with“<ng-template>”
2	Here we use .angular-cli.json	It uses angular.json instead of .angular-cli.json
3	It support single project.	It supports multiple project which we can add-in angular.json

Angular 7

v  Angular 7 release in October 2018.

v  This is a major release and expanding to the entire platform including-
— Core framework,
— Angular Material,
— CLI

v  Angular 7 added UrlSegment[] to CanLoad interface and DoBootstrap interface.

v  It added a  Compatibility Compiler (ngcc) compiler.

v  Introduce a new Pipe called — KeyValuePipe

v  Angular 7 now supporting to TypeScript 2.9.

v  Added a new router features — warn if navigation triggered outside Angular zone

v  Added new mapping for ngfactory and ngsummary files to their module names in AOT summary resolver.

Angular 8

Angular 8 released in march 2019.

Being smaller, faster and easier to use and it will be making Angular developer's life easier.

Added Support for TypeScript 3.2

Added a Navigation Type Available during Navigation in the Router

Added pathParamsOrQueryParamsChange mode for runGuardsAndResolvers in the Router

Allow the passing state to routerLink Directives in the Router

Allow the passing state to NavigationExtras in the Router

Restore the whole object when navigating back to a page managed by Angular Router

Added support for SASS