Search This Blog

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:

Q41-Q45

Q41. What do you mean by term tree shaking?
Q42. What are services in angular? for what purpose they are used? can we do api hit using any other class? can we user dependency injection with othe class and also data sharing without services?
Q43. What is dependency injection in angular?
Q44. What are pipes? what are different types of pipes?
Q45. How to create a custom pipes?
--------------------------------------------------------------------------------------------------------------------------
Q41. What do you mean by term tree shaking?

 Answer 41:

Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code
Tree shaking is the ability to remove any code that we are not actually using in our application from the final bundle. It's one of the most effective techniques to reduce the footprint of an application.

If you're using webpack, for example, you can simply set the mode to production in your webpack. config. js configuration file. This will, among other optimizations, enable tree shaking
--------------------------------------------------------------------------------------------------------------------------
Q42. What are services in angular? for what purpose they are used? can we do api hit using any other class? can we user dependency injection with othe class and also data sharing without services?

 Answer 42:

 Angular services are singleton objects that get instantiated only once during the lifetime of an application. They contain methods that maintain data throughout the life of an application, i.e. data does not get refreshed and is available all the time. The main objective of a service is to organize and share business logic, models, or data and functions with different components of an Angular application

The separation of concerns is the main reason why Angular services came into existence. Angular Services are usually implemented through dependency injection
--------------------------------------------------------------------------------------------------------------------------
Q43. What is dependency injection in angular?

 Answer 43:

DI is a coding pattern in which a class receives its dependencies from external sources rather creating them itself.  Most of the time in Angular, dependency injection is done by injecting a service class into a component or module class.'

Injector is like a container where all you dependencies are registered. Service class in angular will act like a regular class unless we register it to injector. 
To register a service we use provider meta data.  We can use provider metadeta at module class level or at component level. 

--------------------------------------------------------------------------------------------------------------------------
Q44. What are pipes? what are different types of pipes?

 Answer 44:

 Pipe transforms the data in the format as required and displays the same in the view (browser).
example of some built-in pipes. 
  1. Lowercase
  2. Uppercase
  3. Date
  4. Currency
  5. Json
  6. Percent
  7. Decimal
  8. Slice - first argument as starting index and 2nd argument is length
  9. title - make every first letter of sentence capital 
  10. number- a.b-c; a is minimum number of digits before decimal. b is minimum number of digits after decimal. c is maximum number of digits after decimal. 

We can use multiple pipes combination as well eg. date pipe with uppercase pipe. 
There are mainly two types of pipes 1) built in pipes and 2) Custom pipes. 
--------------------------------------------------------------------------------------------------------------------------
Q45. How to create a custom pipes?

 Answer 45:

Lets say we can to create a custom pipe witch will append 'MR' in front of name if we have gender = male and 'MISS' if we have gender = female. 
  1. Name of a pipe typescript file is <<pipename>>.pipe.ts
  2. import pipe and pipetransform from angular/core.
  3. define pipe decorator.
  4. Create a new class and export it so that other class can use it. 
  5. Implements an interface pipetransform 
  6. Declare the method transform. This method actually takes input parameters and gives the expected output parameters. 
  7. import the pipe on app.module.ts file and add it in declarations with components. 
  8. ready to use pipes. 

By No comments:

Q36-Q40

Q36. What do you mean by Vanilla Javascript or VanilaJS?
Q37. Which one comes first? ngOnit or constructor in angular?
Q38. Where there is change in value of input property. which life cycle hook is called? like changing something on component.
Q39. Wha is the use of ngAfterViewInit?
Q40. What is Transpiling and compilation?
-------------------------------------------------------------------------------------------------------------------------
Q36. What do you mean by Vanilla Javascript or VanilaJS?

 Answer 36: 

VanillaJS is a name to refer to JavaScript without any additional libraries like jQuery. Vanilla JavaScript refers to the style of coding by making use of core API's or utilities rather than using any helper library or framework to solve a programming problem.
-------------------------------------------------------------------------------------------------------------------------
Q37. Which one comes first? ngOnit or constructor in angular?

 Answer 37:

constructor() is the default method in the Component life cycle and is used for dependency injection. Constructor is a Typescript Feature. ngOnInit() is called after the constructor and ngOnInit is called after the first ngOnChanges
-------------------------------------------------------------------------------------------------------------------------
Q38. Where there is change in value of input property. which life cycle hook is called? like changing something on component.

 Answer 38:

ngOnChanges()
-------------------------------------------------------------------------------------------------------------------------
Q39. Wha is the use of ngAfterViewInit?

 Answer 39:

Angular ngAfterViewInit() is the method of AfterViewInit interface. ngAfterViewInit() is a lifecycle hook that is called after Angular has fully initialized a component's views. ngAfterViewInit() is used to handle any additional initialization tasks.

ngOnInit() is called after ngOnChanges() was called the first time. ngOnChanges() is called every time inputs are updated by change detection.

 ngAfterViewInit() is called after the view is initially rendered. This is why @ViewChild() depends on it. 
https://www.concretepage.com/angular/angular-ngafterviewinit
--------------------------------------------------------------------------------------------------------------------------
Q40. What is Transpiling and compilation?

 Answer 40:

Transpiling is a process of converting your typescript code into Javascript code using transpilar. 

Transpiling code is a similar concept to the compilation process, with one big difference. Compiling: code from a high level language is get converted to machine level language. Transpiling: code from a high level language gets converted to another high level language
--------------------------------------------------------------------------------------------------------------------------
By No comments:

My Other Blogs

By No comments:

Un answered

Tell me something about your current project.
What you are doing in this project.
Why you choose angular for your project.
which version of angular u are using?
How much you are comfortable with A6 and ES6?

What is the difference between var and let?
Q.
function(){
var a = 'apple';
var a = 'banana';
 console.log(a);
 }
 What will be the output?

Q. what will be the output if we use let instead of var keyword.
Q. What are the advantages of using typescript? advantages of typescript over javascript? We can use javascript itself why typescrip? 5 advantages

Q What is type chekcing in typescript? is it run time or compile time?
Q Tell all different life cycles hooks of component in angular?
Q When you use ngdestroy? -- kill services instances.
Q how to unsubscribe services on angular project?
Q how to implemetn lazy loadiing in a2 projects?
Q Real life example of ngOnChange in a6?

Q What is angular dependency injection? What it has to do with constructor? how import and dependency injection are diffent concept?
Q How to implement dependency  injection without angular. how to implement DI in customised way?

Q Have you seen singelton pattern in a6? services uses which pattern?
Q. Two ways by which i can make my services avalbiel to all modules. one on ngmodule. 2nd?
Q What are diffent types of binding. give simple example on call.
Q difference between event bidninga property binding.

Q. We have html template. we have <img> elemetn. how to bind src of image from controller? which binding you will use?
Q. how u will bind the click on thsi image? which binding?
Q when we should use this keyword?


Q What are differnt types of filters in a6?
Q what is forroot, forchild in a6?
Q what are the advantages of observables?
Q what is subscribe and observables pattern?

Q. hwo to implement multicasting in observables?
Q What are subjects?

Q. How to implement stateManagement in A6?4
Q what is redux.
Q  relation between component and directives.

Q what is shadow dom?
Q what is view encapsulation?

Q How you write test cases in angular project.
Q how you use protractor and selenium in proejct.

Q how you will updload a file in agualr. give all steps?
Q difference between AOT and JIT.

Q IIS is webserver or application server?
Q xcan you deploy ang code on application server?

=======================================
Is there a difference between fat arrow and existing fucntioans in sense of performance?

What is the difference between NgBuild and ng server in angular?
https://stackoverflow.com/questions/47150724/what-is-difference-between-ng-build-and-ng-serve?answertab=votes#tab-top








========================================
version of typescript?
Difference between directive of angulartjs and component of angular2?

Difference between angular4 and angular2
Routing in angular?
=================
76. What are directives in angular?

Angular let you extend HTML with help of directives. There are 3 types of directives in angular 2.
1st Structural like ngIf
2nd Attribute like ngStyle
3rd Component, which are basically directives with templates.
---------------------------------
79. How routing is done in Angular 2?

Not a complete answer: correct it
You have to make changes minimum in 3 files
1st in index.html where you have to give base href reference.
2nd app.module.ts file, make a Const variable with route path and component mapping. add this const value in Router module of @ngModule import array.
3rd app.component.ts tile. make changes  in template. provide routerlink and placeholder <router-outlet> at the end.

----------------------
66. What is Input and Output in Angular 2?

Answer: its a way of transferring data between two components in hierarchy. To transfer data from parent component to child component we use @input decorator while transferring data from child to parent we use @output. In case of @input decorator we first bind some property say propety1 on parent component using the square bracket syntax and then we add same property on child component preceded with @input decorator.
----------------------
67. What makes Angular 2 better choice than AngularJS?

Answer: 1. Angular 1 was NOT build with mobile support in mind while angular 2 is mobile oriented.
2, Angular 2 provides more choices of language ES5, ES6, TypeScript, Dart.
3. Angular 2 is coming with AngularCLI to start project. Till angular 1 we have to depend on 3rd party like gulp, grunt etc.
4. Angular 2 has removed $scope. which some times could be confusion while coding.
5. Angular 2 also provides Ahead of Time compilation (AOT) compiler.
----------------------
70. What is ngModel in angular 2?

Answer: Two-way binding still exists in Angular 2 and ngModel makes it simple. The syntax is a combination of the square bracket and normal parenthesis to represent that the data is being pushed out and pulled in. Square bracket is use bind property with class. parenthesis use to send event to class


13. Write syntac of promise.
15. What we wrte in constructor and ngonit in A2?
how to make a property binding work for first time only and after that it shdould not work
Who replaced the digest cycle in NG2?
We had $scope in NG1 who replace it in NG2?
What about observables in NG2?
How to call java script on the fly in NG2?
How many types of component are there in NG2?
q3. how to transfer data  between parent and child?
q4. what is data binding in a2.
q6. steps to increase performance in a2.
q14. what is lazy loading in a2. how to achieve it?
What about single apply in NG2?
How to implement search in NG2?
what is pipe in angular, different types of types in angular
different types of directive in angular
types of binding in angular. why we need property type and interpolation both?
what is zone
what is aot and difference between aot and webpack
how data binding work behinds the scenes

40. What is one-way binding. How to achieve this in Angular 2?
92. What is Injector in angular 2?
91. How to apply validations to element in Angular2 forms?
94. How you create a form and how you access the values of forms in angular 2?
38. What is two way binding?
Binding of data between model and View in angular. We use ngModel keyword with square bracket and parenthesis around it to achieve two way data binding in angular 2.

Inheritance in angular2 projects.


What are closures in JavaScript?
What are pitfalls of the closures?
What is memory leaking in UI? How to identify them?
What is Event loop in JavaScript?
What is process in JavaScript when a asynchronous call is made?
What is BMIT in css?
what is flexible box in css3?
What is callbacks in JavaScript?
What are the ways by which I can replace callbacks?
What are the building blocks of angular?
What are the features of Angular?
How to change detection algorithm is different in angular than angularJS?
What are hierarchical dependency injection in angular and how it is different from angularJS?
What is dependency injection in angular or angularJS?
What are the benefits of dependency injection in angular?
What are rxJS observables?
What are the common operators of observables?
Explain the various features of angular router?
What are the difference between templates forms and reactive forms?
Explain how you would manage state in Angular application?
What is AOT? and what is the use of AOT?
What are the different ways in which performance can be improved in angular applications?
What is the benefit of creating a clone in JavaScript?

1) Difference between type script and java script.
2) How to implement singleton design pattern in asp.net.
3) What are closures in java script?
4) Difference between $watch $digest and $apply method in angular js.
5) What is prototype chaining in java script.
6) What about event emitters.
7) Why we choose Angular for our development.
8) Short array without using short method in java script.
9) What about binary search. Find a missing number from the list of 1 to 1000.
10) What are primitive data types in java script?

Q1. JavaScript closures Output?
Q2. JavaScript call stack
Q. how we are injecting gulp task
Q. how to avoid junk data like {{}} binding, using onload like document.getready, ng-cloak, use ng-bind instead of interpolation.
Q. What is map,reduce and filters in javascript
Q. self invoking fucntgion
Q. relation between self invoking function and anonymous function
Q. limitation of AOT compiler?
Q. what is prototype Inheritance?

1. What is ... (triple dot) in javascript or angular js
2. Write the scope life cycle on paper.
3. Write a closure with example on paper.
4. output of console.log(null===undefined)? and why?
5. output of console.log(a);
6. function () {
    var a = 2;
    console.log(a);
    function 2 () {
    let a = 3;
    console.log(a);
    }
    console.log(a);
    }
7. What is forin and forat in  javascript?
8. What all are the properties of custom directives in A1.
9. default value of link in A1 in custome directive.
10. What are different types of link in A1.
11. What is arrow function in A2?
12. Write syntax of call back fucntions.
13. Write syntac of promise.
14. What are providers in A1?
15. What we wrte in constructor and ngonit in A2?

javascript default inheritance type
what is * in *ngif
what is pipe in angular, different types of types in angular
different types of directive in angular
types of binding in angular. why we need property type and interpolation both?
what is zone
what is aot and difference between aot and webpack
by default javascript passes data  by value or by reference
difference between abstraction and encapsulation in javascript
can we change prototpye of parent using child object
difference between div and section
how data binding work behinds the scenes
how to make a property binding work for first time only and after that it shdould not work
what is difference between DOM elements and HTML elements.
Two modules are in same zone or different? if different how data transfer between them.
output of
var a = 12;
var b = a;
b = 20;
console.log(a);
17. What is shadowing in javascript?


What is callback in JavaScript?
What is callback hell?
What is one-way binding. How to achieve this in Angular 2?
What is Injector in angular 2?
How to apply validations to element in Angular2 forms?
How you create a form and how you access the values of forms in angular 2?
What are event and delegations in JavaScript?

What about closures in java script?
What about prototype in java script?
How AOT works in NG2?
Who replaced the digest cycle in NG2?
We had $scope in NG1 who replace it in NG2?
What about apply and call functions in java script?
 What about local storage and session storage in html5?
 What about single apply in NG2?
 How to implement search in NG2?
 What about event propagation in java script?
 What about observables in NG2?
 What about promises and callback in java script?
 How to call java script on the fly in NG2?
 How many types of component are there in NG2?
 What is JavaScript event loop?

What are observables?
How you call your services from angular 2 project?
component need to makes call in services?
I have an api which is capable of returning both xml and json data. From your client how you request so that data comes in XML format?
What is content negotiation?
What are custom directives in angular js?
What is isolated scope in terms of custom directives?
If you want to access your parent controller scope but not should be able to modified it. how you will do this?

By No comments:
Subscribe to: Comments (Atom)