Search This Blog

Q71-Q75

Q71. What is change detection strategy in Angular?
Q72. What are the disadvantages of Default Change detection strategy in angular?
Q73.  How to call method of un related components from comp1 to component 2? 
Q74. What is the root module and root component in your project?
Q75. What is angular expression and how it is different from javascript expression?
-------------------------------------------------------------------------------------------------------------------------------------
Q71. What is change detection strategy in Angular?

Answer:
Change detection strategy as the name states its a strategy which angular uses to detect the change in values in DOM. For example if you are using two way binding and in case something changes on controller it get changed on HTML as well. 

We have two detection strategy 
1) Default - it is default. it means by default it will always detect change in model, dom or a change in a event etc
2) onPush - We are going to tell when to detect the change. 

API of above code is written in Zone.js file

For theory start 4 mins are enough. 
-------------------------------------------------------------------------------------------------------------------------------------
Q72. What are the disadvantages of Default Change detection strategy in angular?

Answer:
Default change detection strategy has its disadvantage of low performance. in case we have parent component and its child component, and its child component and the family tree is pretty big. In those scenarios default change detection strategy gives low performance. 

In above scenario we use onPush strategy. When ever we want angular to check then only it will check for changes. 

-------------------------------------------------------------------------------------------------------------------------------------
Q73.  How to call method of un related components from comp1 to component 2? 

Answer:

Learning Topics #Angular: Component Data Transfer
-------------------------------------------------------------------------------------------------------------------------------------
Q74. What is the root module and root component in your project?

Answer:

by default rootmodule is  AppModule defined in app.module.ts. It is defined as rootmodule min main.ts file. 
We can have only 1 root module in application but there is a way by which we can bootstrap multiple root modules in 1 go. create one more module and mentioned 2 and more modules into this 1 module and bootstrap this single modules. 

By default root component is app.component. it is defined as root component in app.module.ts bootstrap key

-------------------------------------------------------------------------------------------------------------------------------------
Q75. What is angular expression and how it is different from javascript expression?

Answer:
Angular expressions can be written inside double braces: {{ expression }}. or with directive like ngbind="expression".

Javascript expression are like x += y which means x = x + y; 

Angular expression are evaluated again angular object and scope while javascript expression can be evaluated against global window. 

Angular expression can work with filter but javascript expression can not work with filters.

------------------------------------------------------------------------------------------------------------------------------------- 

By No comments:

Q66-Q70

Q66. How to implemented Security/Authentication etc in angular project?
Q67. What is the difference between two forms available in angular? Which is better? When to use which one?
Q68. How we can create a template driven form. give steps and scripting logic?
Q69. How we can create a Reactive form. Give steps and scripting logic?
Q70. How Observables are different from promises?

=========================================================================
Q66. How to implemented Security/Authentication etc in angular project?

Answer:
There are two to implement security/Authentication
1. Using Routing/Auth Guards. -- Angular #48
2. Http Interceptors -- Angular #65

=========================================================================
Q67. What is the difference between two forms available in angular? Which is better? When to use which one?

Answer:
There are two forms available in angular Template driven forms and Reactive(model- driven) forms. 

1. In a template-driven approach, most of the logic is driven from the template, whereas in reactive-driven approach, the logic resides mainly in the component or typescript code.
2. Template-driven forms are asynchronous in nature, whereas Reactive forms are mostly synchronous.
3. Template-driven forms make use of the "FormsModule", while reactive forms are based on "ReactiveFormsModule".

Reactive form can be used in the following situation
1. Complex forms with more number of fields.
2. Multiple complex validation are there. Custom validations are required
3. Require JSON structure to be send with the values in the form.
4. Good in unit testing scenarios. 

Template Driven Form : 
1. It can be used when using simple forms. Like login page. With the two way data binding. We can simply assign value to variable from ui and vice versa.
2. good for building simple forms with basic validation (required, minlength, maxlength,...).
3. Must not be used if UNIT testing is a big point. 

=========================================================================
Q68. How we can create a template driven form. give steps and scripting logic?

Answer:



=========================================================================
Q69. How we can create a Reactive form. Give steps and scripting logic?

Answer:



=========================================================================
Q70. How Observables are different from promises?

Answer:

Observables are different from Promise based response. 
(1) Observables work on multiple values time (this act as a stream of data over a network)  while Promises return only single value.  Because other variables act as a stream of data over a network we subscribe to observable while v use the then keyword in case of promises
(2) Observables are cancellable while Promises are not cancellable. When we say observables are cancellable it means we can unsubscribe observable based on conditions
(3) Observables can be manipulated using javascript functions like map, filter, reduce. 



By No comments:

Q61-Q65

Q61. How you can trigger a function on parent component from a child component?
Q62. what is event emitter in angular?
Q63. What is the usage of @Injectable in service class?
Q64. How you can create a custom Directive? Give real life example of custom directive?
Q65. What are http Interceptors in angular? Are they used in logging?

======================================================================
Q61. How you can trigger a function on parent component from a child component?

Answer:
We can trigger a parent component function from a function defined on  child component using @Output() decorator. For better understanding check #58 which tell how @output is used. 

Follow the below steps to trigger a parent component function from child component function. 
1. Create a function callParent on child component. Defined it on both html and component.ts file. 
2. in callParent function emit the output variable. 
3. in parent component capture the emitted event and call the parent function on that event.

import { Output, EventEmitter } from '@angular/core'; 

...

class ChildComponent {
  @Output() someEvent = new EventEmitter<string>();

  callParent(): void {
    this.someEvent.next('somePhone');
  }
}

on parent component.html
<child-component (someEvent)="deletePhone($event)"></child-component>

======================================================================
Q62. what is event emitter in angular?

Answer:
this is required when we used @output decorator. 
We create a event and emit it from child component. which then captured on parent component. 
for better understanding of @output decorator check #58. 
======================================================================
Q63. What is the usage of @Injectable in service class?

Answer:
Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.

a Class become a singleton class when its reference is given in provider section of @NgModule.
======================================================================
Q64. How you can create a custom Directive? Give real life example of custom directive?

Answer:


======================================================================
Q65. What are http Interceptors in angular? Are they used in logging?

Answer:
Interceptors are a unique type of Angular Service that we can implement. Interceptors allow us to intercept incoming or outgoing HTTP requests using the HttpClient . By intercepting the HTTP request, we can modify or change the value of the request

3 practical usage of interceptors
  1. Add a token or some custom HTTP header for all outgoing HTTP requests.
  2. Catch HTTP responses to do some custom formatting (i.e. convert CSV to JSON) before handing the data over to your service/component.
  3. Log all HTTP activity in the console.

By No comments:

Q56-Q60

Q56. How you do exception handling and logging in your angular project? any UI project?
Q57. What do you mean by @injectable in Angular?
Q58. What is @input and @output decorators in angular?
Q59. Explain the structure of angular project. 
Q60. How to create custom directive in Angular 6?

=======================================================================
Q56. How you do exception handling and logging in your angular project? any UI project?

Answer:
When a API URL in service class doesn't exits and we are getting '404' error response

1. We can use pipe with observable. and 'catchError' to handle the error. 
2. Using Error callback on controller page. error keyword. 
3. Using HttpInterceptors - for logging 

=======================================================================
Q57. What do you mean by @injectable in Angular?

Answer:
@Injectable, Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.

Its main role is on service class. If we remove @Injectable from service class than the dependencies on which your service class depends will fail. like HTTP service. 
=======================================================================
Q58. What is @input and @output decorators in angular?

Answer:
@Input and @Output decorators are used to transfer data between two components when they have child parent relationship. 

By child parent relation we mean selector of a child component is used on parent html page. 

@Input, Declares an input property that you can update via property binding (example: <my-cmp [myProperty]="someExpression">).
  • Input decorator is used to send data from Parent component to child component. 

@output, Declares an output property that fires events that you can subscribe to with an event binding
  • Output decorator is used to send data from child to parent. 
Live Example: Good example below

=======================================================================
Q59. Explain the structure of angular project. 

Answer:
when we run the command ng new <<projectName>> we get a template to start work. this is created by CLI (command line interface). 

We got initial structure like
1. e2e - this folder is used for e2e testing. 
2. node_modules - all packages requierd are here. 
3. SRC folder - Make folder where will do our scripting. 
4. some outside files

Some outside files -
  1. angular.json - Project specific configurations are present here. 
  2. .gitignore - if you are using git repository. 
  3. Karma.config.js - For unit testing 
  4. package.json - Packages required for project. 
  5. tsconfig.json - How your typescript code will be compiled into javascript. 
  6. tsconfig.app.json
  7. tslint.json
SRC-
  1. index.html
  2. main.ts
  3. app.module.ts
  4. pollyfillts
  5. environment.ts and environment.prod.ts
  6. app-routing.module.ts
  7. app.component.ts
=======================================================================
Q60. How to create custom directive in Angular 6?

Answer:
Custom directive could be structural or Attribute directive. 


=======================================================================
By No comments:

Q51-Q55

Q51. What was new in Angular 2?
Q52. What was new in Angular 4?
Q53. What was new in Angular 5?
Q54. What was new in Angular 6?
Q55. What was new in Angular 7?

 --------------------------------------------------------------------------------------------------------------------------

Q51.  What was new in Angular 2?

Answer:
  • Released in 2016
  • Complete rewrite of Angular 1
  • Written entirely in typescript
  • Component-based instead of Controller
  • ES6 and typescript supported
  • More testable as component-based
  • Support for Mobile/Low-end devices
  • Up to typescript 1.8 is supported

--------------------------------------------------------------------------------------------------------------------------
Q52.  What was new in Angular 4?

Answer:
  • Released in 2017
  • Changes in core library
  • Angular 4 is simply the next version of angular 2, the underlying concept is the same & is an inheritance from Angular 2
  • Lot of performance improvement is made to reduce size of AOT compiler generated code
  • Typescript 2.1 & 2.2 compatible — all feature of ts 2.1 & 2.2 are supported in Angular 4 application
  • Animation features are separated from @angular/core to @angular/animation — don’t import @animation packages into the application to reduce bundle size and it gives the performance improvement.
  • Else block in *ngIf introduced: — Instead of writing 2 ngIf for else , simply add below code in component template:
*ngIf=”yourCondition; else myFalsyTemplate”
“<ng-template #myFalsyTemplate>Else Html</ng-template>”

--------------------------------------------------------------------------------------------------------------------------
Q53.  What was new in Angular 5?

Answer:
  • Released 1st November 2017
  • Build optimizer: It helps to removed unnecessary code from your application
  • Angular Universal State Transfer API and DOM Support — By using this feature, we can now share the state of the application between the server side and client side very easily.
  • Compiler Improvements: This is one of the very nice features of Angular 5, which improved the support of incremental compilation of an application.
  • Preserve White space: To remove unnecessary new lines, tabs and white spaces we can add below code(decrease bundle size)

// in component decorator you can now add:
“preserveWhitespaces: false”
// or in tsconfig.json:
“angularCompilerOptions”: { “preserveWhitespaces”: false}`
  • Increased the standardization across all browsers: For internationalization we were depending on `i18n` , but in ng 5 provides a new date, number, and currency pipes which increases the internationalization across all the browsers and eliminates the need of i18n polyfills.
  • exportAs: In Angular 5, multiple names support for both directives and components
  • HttpClient: until Angualar 4.3 @angular/HTTP was been used which is now depreciated and in Angular 5 a new module called HttpClientModule is introduced which comes under @angular/common/http package.
  • 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:
ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd, GuardsCheckStart, GuardsCheckEnd, ResolveStart and ResolveEnd.
  • Angular 5 supports TypeScript 2.3 version.
  • Improved in faster Compiler support:
  • A huge improvement made in an Angular compiler to make the development build faster. We can now take advantage of by running the below command in our development terminal window to make the build faster.
ng serve/s — aot
https://softmindit.blogspot.com/2020/07/difference-among-angular-8-7-6-5-4-3-2.html?showComment=1594697757998#c2893770121053692592
--------------------------------------------------------------------------------------------------------------------------

Q54.  What was new in Angular 6?

Answer:
  • Released on April 2018
  • This release is focused less on the underlying framework, and more on tool-chain and on making it easier to move quickly with angular in the future
  • No major breaking changes
  • Dependency on RxJS 6 (this upgrade have breaking changes but CLI command helps in migrating from older version of RxJS)
  • Synchronizes major version number of the:
— Angular framework
— Angular CLI
— Angular Material + CDK
All of the above are now version 6.0.0, minor and patch releases though are completely independent and can be changed based on a specific project.
  • Remove support for <template> tag and “<ng-template>” should be used.
  • Registering provider: To register new service/provider, we import Service into module and then inject in provider array. e.g:

  • // app.module.ts
  • import {MyService} from './my-service';
  • ...
  • providers: [...MyService]
  • ... 

  • But after this upgrade you will be able to add providedIn property in injectable decorator. e.g:

  • // MyService.ts
  • @Injectable({ providedIn: 'root'})
  • export class MyService{}

  • CLI Changes: Two new commands have been introduced

  • — ng update <package>
  • * Analyse package.json and recommend updates to your application
  • * 3rd parties can provide update scripts using schematics
  • * automatically update code for breaking changes
  • * staying update and low maintenance
  • — ng add
  • * add new capablities to your applicaiton
  • * e.g ng add @angular/material : behind the scene it add bit of necessary code and changes project where needed to add it the thing we just told it to add.
  • * Now adding things like angular material, progressive web app, service workers & angular elements to your existing ng application will be easy.

  • It uses angular.json instead of .angular-cli.json
  • Support for multiple projects: Now in angular.json we can add multiple projects
  • CLI + Material starter templates: Let angular create code snippet for your basic components. e.g:

  • — Material Sidenav
  • * ng generate @angular/material:material-nav — name=my-nav
  • Generate a starter template including a toolbar with app name and then the side navigation & it's also responsive
  • — Dashboard
  • * ng generate @angular/material:material-dashboard — name=my-dashboard
  • Generates Dynamic list of cards
  • — Datatable
  • * ng generate @angular/material:material-table — name=my-table
  • Generates Data Table with sorting, filtering & pagination
--------------------------------------------------------------------------------------------------------------------------
Q55.  What was new in Angular 7?

Answer:
ok
By No comments:

Q46-Q50

Q46. How to implement Routing in angular project?
Q47. What are angular router navigation events?
Q48. What are routing guards or Auth Guards?
Q49. What is redux for state management. 
Q50. What is the use of ngRX?
--------------------------------------------------------------------------------------------------------------------------
Q46. How to implement Routing in angular project?

 Answer 46:

 In every angular application we have different components and evey component has its own view. To navigate to these different views we use routing. 

 1. Create a project with routing option enables. ng new newproj --routing
  1. this above option will add a base tag <base href='/'/> in your index.html file. 
  2. It will create a app-routing.module.ts- This file is the file where we will configure different routes. here we have const routes where we define path and component.  We will export a routingComponent and import in app.module.ts (not required step)
  3. In future we are going to have new component we will not add it in app.module.ts file but in app-routing.module.ts file. 
  4. it will import 'AppRoutingModule' in your app.moudule.ts file.
  5. it will add <router-outlet> tag in app.component.html file. 

In below file first 9mins is the heart of logic. 
https://www.youtube.com/watch?v=Nehk4tBxD4o

2. Above was to naviage with the url. If we want to navigate on click of a button we have to use routerLink on button 
3. We have one routerLinkActive property. this will tell which router is active. 

-----------------------------------------------------------------------------------------------------------------------
Q47. What are angular router navigation events?

 Answer 47:

 The sequence of router events is as follows:
  1. NavigationStart, - An event triggered when navigation starts.
  2. RouteConfigLoadStart, - An event triggered before the Router lazy loads a route configuration.
  3. RouteConfigLoadEnd, - An event triggered after a route has been lazy loaded.
  4. RoutesRecognized, - An event triggered when the Router parses the URL and the routes are recognized.
  5. GuardsCheckStart, - An event triggered when the Router begins the Guards phase of routing.
  6. ChildActivationStart, - An event triggered when the Router begins activating a route's children.
  7. ActivationStart, - An event triggered when the Router begins activating a route.
  8. GuardsCheckEnd, - An event triggered when the Router finishes the Guards phase of routing successfully.
  9. ResolveStart, - An event triggered when the Router begins the Resolve phase of routing.
  10. ResolveEnd, - An event triggered when the Router finishes the Resolve phase of routing successfuly.
  11. ActivationEnd - An event triggered when the Router finishes activating a route.
  12. ChildActivationEnd - An event triggered when the Router finishes activating a route's children.
  13. NavigationEnd, - An event triggered when navigation ends successfully.
  14. NavigationCancel, - An event triggered when navigation is canceled. This can happen when a Route Guard returns false during navigation, or redirects by returning a UrlTree.
  15. NavigationError,- An event triggered when navigation fails due to an unexpected error.
  16. Scroll - An event that represents a scrolling event.

--------------------------------------------------------------------------------------------------------------------------
Q48. What are routing guards or Auth Guards?

 Answer 48:
Angular’s route guards are interfaces which can tell the router whether or not it should allow navigation to a requested route. They make this decision by looking for a true or false return value from a class which implements the given guard interface.

There are 5 types of routing guards or Auth guards are available. We can implement angular authentication using routing guards. 
  1. CanActivate: Controls if a route can be activated.
  2. CanActivateChild: Controls if children of a route can be activated.
  3. CanLoad: Controls if a route can even be loaded. This becomes useful for feature modules that are lazy loaded. They won’t even load if the guard returns false.
  4. CanDeactivate: Controls if the user can leave a route. Note that this guard doesn’t prevent the user from closing the browser tab or navigating to a different address. It only prevents actions from within the application itself 
  5. Resolve: Performs route data retrieval before route activation. 

Steps
1. Create a guard with statement and choose guards interface. better choose all. 
ng g guard <guard-name>

2. Write the logic related to authentication in generated guard


3. Add a condition on app-routing.module.ts
It says when ever user has access to AdminGuardGuard. user can acces admin component. 




Practical example of creating route guards
Must watch link

Good link below

--------------------------------------------------------------------------------------------------------------------------
Q49. What is redux for state management. 
--------------------------------------------------------------------------------------------------------------------------
 Q50. What is the use of ngRX?

Answer:

ngrx is a set of RxJS -powered state management libraries for Angular, inspired by Redux, a popular and predictable state management container for JavaScript apps
By No comments:

Q31-Q35

Q31. When will you choose angular over MVC in your project? 
Q32. What is the difference between var and let keyword? Give o/p of below 
function(){
var a = 'apple';
var a = 'banana';
 console.log(a);
 }
What will be the output if we use let instead of var in above? or Can we use var for same variable name twice? and Can we use let for same variable twice?
Q33.  What are the advantages of using Typescript? We can use ES6 javascript for all the work why still we need typescript? What are the differences between typescript and javascript?
Q34. What is type checking in Typescript? is it run time or compile time?
Q35. Difference between webpack and npm build?

=======================================================================



=======================================================================
Q32. What is the difference between var and let keyword? Give o/p of below 
function(){
var a = 'apple';
var a = 'banana';
 console.log(a);
 }
What will be the output if we use let instead of var in above? or Can we use var for same variable name twice? and Can we use let for same variable twice?

Answer:
This is the drawback of Var keyword. you can have same variable name with var keyword and there will be no error even when both variable are in same scope. 
We can not use LET keyword for same variable name. it will give error if both are in same scope. 

=======================================================================
Q33.  What are the advantages of using Typescript? We can use ES6 javascript for all the work why still we need typescript? What are the differences between typescript and javascript?

Answer:
1. type checking : TypeScript can help us to avoid painful bugs that developers commonly run into when writing JavaScript by type checking the code.
2. Supports static typing and we get features like autocompletion, intellisense etc. 
3. TypeScript gives us all the benefits of ES6 (ECMAScript 6), plus more productivity
4. TypeScript is easier than Javascript while scripting. TypeScript simplifies JavaScript code, making it easier to read and debug.
5. TypeScript latest Javascript concept of classes, modules, interfaces etc. 

=======================================================================
Q34. What is type checking in Typescript? is it run time or compile time?

Answer:
Typechecking make sure that the type of data you have given to your variable will remain same whenever you assign any value to it. it means if you declare a variable of type int it will remain as int and will not accept string. 

Typescript typechecking helps in reducing lots of error which will be seen at run time without tyepchecking because those error are prompted at compile time. 

=======================================================================
Q35. Difference between webpack and npm build?

Answer:
Webpack is a module bundler for javascript projects. you can install webpack using command npm install webpack. 

npm build is a command to create a build.
Grunt, yarn, gulp are few more javascript module bundler tools. 


=======================================================================


By No comments:
Subscribe to: Comments (Atom)