Search This Blog

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:

Q26-Q30

Q26. What is Zone in Angular 4?
Q27. Two modules are in same zone or different? if different how data transfer between them
Q28. What are BehaviorSubject in angular 4?
Q29. How to call java script on the fly in NG2? What is lazy loading in NG4?
Q30. What do you mean by subscribe to an observables?
---------------------------------------------------------------------------------
Q26. What is Zone in Angular?

Answer:
Zone concept is related to how Angular 2 + handles the change detection. Zone.js is the file.
Check #Angular 71

In angular 1 for 3rd party scripts you have to call $apply() to trigger change detection but in angular 2 everything happen implicitly as long as changes are inside app's Zone.

 ngZone gives two control of code execution
1st runOutsideAngular, when we want to run outside angular Zone.
2nd safeNgZone, when we want to get back into angular 2 zone.

 https://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html
---------------------------------------------------------------------------------
Q27. Two modules are in same zone or different? if different how data transfer between them.

Answer:
Not only two modules, all building blocks of angular are within same zone as long as they are part of same angular application. 
 ---------------------------------------------------------------------------------
Q28. What are BehaviorSubject  in angular 4?

Answer:
BehaviorSubject is a type of subject, a subject is a special type of observable so you can subscribe to messages like any other observable.

  The unique features of BehaviorSubject are:
1. It is an observer in addition to being an observable so you can also send values to a subject in addition to subscribing to it.
2. It needs an initial value as it must always return a value on subscription even if it hasn't received a next().

https://stackoverflow.com/questions/39494058/behaviorsubject-vs-observable
 ---------------------------------------------------------------------------------
Q29. How to implement lazy loading in NG2 or NG4?

Answer:
Lazy loading allows you to load features(your created) module on demand.  This technique is used when our application has multiples modules and we dont want all modules to eagerly load with route module (app.module.ts). We use routing module and load modules based on demand. 
https://angular.io/guide/lazy-loading-ngmodules

We achieve this in following steps:

  1. Create a new app. ng new customer-app --routing. This will create a new app with default module app.module.ts and default app-routing.module.ts
  2. Create a feature module with routing. ...
  3. .........
https://www.youtube.com/watch?v=75XFBIKLPQY
---------------------------------------------------------------------------------
Q30. What do you mean by subscribe to an observables?

Answer:

By No comments:

Q21-Q25

Q21. How to achieve two way Binding without ngModel approach in angular 2?
Q22. What are template local variable and template reference variable in angular 2?
Q23. What is the difference between property binding and interpolation in angular 2?
Q24. What are observables in angular 2?
Q25. What is map in ReactJS observables ?
---------------------------------------------------------------------------------

Q21. How to achieve two way Binding without ngModel approach in angular 2?

Answer: Angular 2 has a feature called "template reference variables". With this feature, we are able to have direct access to an element. The template reference variable is declared by preceding an identifier with a hash/pound character (#).

Here, template is completely self-contained and it does not bind to the component. This solution will not work unless we bind to the element’s event. Angular only updates the bindings if something is done in response to asynchronous events, like keystrokes. This is the reason we bind keyup event to input element and we do nothing with this event. So, we are binding the number 0 with the event.

databinding.html
<div>
    <h5>Two way binding (without ngModel directive) Example</h5>
    Enter you Name: <input  #txtName  type = "text"  (keyup)="0" />
    <br/><br/>
    <span> WelCome {{txtName.value}} ! </span>
</div>

 look 4 keyword "Two-way binding without ngModel directive" in below url.

http://www.c-sharpcorner.com/article/data-binding-in-angular-2/
---------------------------------------------------------------------------------
Q22. What are template local variable and template reference variable in angular 2?

Answer:
Template local variable: They are declared with keyword let and 
Reference variable: They are declared with keyword "#" or "ref-". reference variable can be accessed from any sibling or child element in template.

Template reference variable is a variable using which we can access DOM properties
eg.
<input type="text" #mobile placeholder="Enter Mobile Number">

In the above input text box #mobile is a template reference variable. To fetch DOM properties, we do as follows.

mobile.placeholder : It will give placeholder of our text box if we have specified.
mobile.value : It will give value of our text box.
mobile.type : It will give type of input element. In our example type is text.

https://www.concretepage.com/angular-2/angular-2-template-reference-variable-example---------------------------------------------------------------------------------
Q23. What is the difference between property binding and interpolation in angular 2?

Answer:
Property binding and interpolation both are one way data binding from data source to view target or we can say both are way of transferring value from component to html template but property binding does not convert result into string so whenever we have to bind something other than string we should use property binding and Interpolation is used as string interpolation, when we want to bind some string data.

https://www.youtube.com/watch?v=V1AVc5nL2ik
 ---------------------------------------------------------------------------------
Q24. What are observables in angular 2?

Answer: 
  • Observables are asynchronous stream of data we can subscribe to. 
  • Observables work like an array thus we use MAP to iterate through the response.
  • Observables help you manage asynchronous data, such as data coming from a backend service.  To use observables, Angular uses a third-party library called Reactive Extensions (RxJS). Observables are a proposed feature for ES 2016
Observables are different from Promise based response. 
(1) Observables work on multiple values over time while Promises return only single value. 
(2) Observables are cancellable while Promises are not cancellable. 
(3) Observables can be manipulated using javascript functions like map, filter, reduce. 

https://www.youtube.com/watch?v=mSV0AihITxo
---------------------------------------------------------------------------------
Q25. What is map in ReactJS observables ?

Answer:
Map transform the items emitted by an Observable by applying a function to each item. The Map operator applies a function of your choosing to each item emitted by the source Observable, and returns an Observable that emits the results of these function applications

 eg of Map. 
(1) tranforming every return value form string to Int or vice versa. 
(2) Multiplying returun value with current Currency exchange value so that we get the correct data. 

http://reactivex.io/documentation/operators/map.html
---------------------------------------------------------------------------------
By No comments:

Q16-Q20

Q16. What are the building blocks of Angular2?
Q17. How we define component in angular 2?
Q18. What are the two approach to build forms in Angular2?
Q19. Difference between constructor and ngOnInit in Angular? Which one get called first?
Q20. In how many ways we can do data binding in angular 2?
---------------------------------------------------------------------------------
Q16. What are the building blocks of Angular2?

Answer:
The main building blocks of Angular are:
  • Modules
  • Components
  • Templates
  • Metadata
  • Data binding
  • Directives
  • Services
  • Dependency injection
https://www.edureka.co/blog/angular-tutorial/#BuildingBlocksOfAngular
 ---------------------------------------------------------------------------------
Q17. How we define component in angular 2?

Answer:
Component has 3 main parts.

1st importing the necessary library. i.e import { Component } from '@angular/core'
2nd defining the @component decorator. which has properties like Selector, templateURL, StyleURL and providers
and finally the defining and exporting class like export class componentname import OnInit. and with in this componentname class define constructor() and ngOnInit()

 ---------------------------------------------------------------------------------
Q18. What are the two approach to build forms in Angular2?

Answer:
1st template driven form and 
2nd reactive (or model) driven form.
To use template driven form you have to import FormsModule in AppModule.
---------------------------------------------------------------------------------
Q19. Difference between constructor and ngOnInit in Angular? Which one get called first?

Answer:
(1) Constructor: It is not a life cycle  hook. it is a part of class creation and angular Engine  has no control over it. Its JavaScript engine that understand it.
(2) Constructor is used for dependency injection.
(3) Constructor is called once before ngOnChanges while ngOnInit is called after ngOnChanges.
(4) you should use constructor() to setup Dependency Injection and not much else. ngOnInit() is better place to "start" - it's where/when components' bindings are resolved.

 example code below---
import { Component, ElementRef } from '@angular/core';
import { Router } from '@angular/router';

@Component({})
class ExampleComponent {
  constructor(
    private router: Router,
    private el: ElementRef
  ) {}
}

 https://toddmotto.com/angular-constructor-ngoninit-lifecycle-hook
http://softmindit.blogspot.com/2020/07/difference-between-constructor-and.html
 ---------------------------------------------------------------------------------
Q20. In how many ways we can do data binding in angular 2?

Answer:
In angular you bind data in 4 ways.
  1. Interpolation.
  2. Property binding.
  3. Two-way binding ie when we use ng-model in angular 1 and with both square bracket and parenthesis in angular 2
  4. Event binding example ng-click in angular 1 and click property with parenthesis in angular 2.
Interpolation -
supply property name in the View template, enclosed in double curly braces

--app.component.ts--
import { Component } from '@angular/core';
@Component({
  selector: 'test-app',
  templateUrl: './app/databinding.html'
})
export class AppComponent {
    name = 'C# Corner';
}
---
--databinding.html--
<h4>Data binding in Angular 2 Application</h4>
<div>
    <h5>Interpolation Example</h5>
    Hello {{name}} !
</div>


Property Binding -
one-way data binding directive is replaced with [property]

app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'test-app',
  templateUrl: './app/databinding.html'
})
export class AppComponent {
    name = 'C# Corner';
    welcomeText = 'Welcome Himanshu!'
}


databinding.html
<div>
    <h5>One way binding Example</h5>
    Hello <span [innerText] = "name" ></span>!
    <br/><br/>
    <input type = 'text'  [value]="welcomeText" />
</div>
Event Binding -
Angular 2.0 directly uses the valid HTML DOM element events. The round brackets (parentheses) are used with DOM event name for event binding in Angular 2.

app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'test-app',
  templateUrl: './app/databinding.html'
})
export class AppComponent {
    messageText = '';
    onClickMe() {
        this.messageText = "Hi Reader!";
    }
}

databinding.html
<div>
    <h5>Event binding Example</h5>
     <button (click)="onClickMe()">Click me!</button>
    <br/><br/>
    <span> {{messageText}} </span>
</div>

 Two-way binding -
[(ngModel)], The ngModel directive is part of a built-in Angular module called "FormsModule". So, we must import this module in to the template module before using the ngModel directive.

app.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
}

databinding.html
<div>
    <h5>Two way binding Example</h5>
    Enter you Name:  <input [(ngModel)]="enterName"  />
    <br/><br/>
    <span> WelCome {{enterName}} ! </span>
</div>

 http://www.c-sharpcorner.com/article/data-binding-in-angular-2/
---------------------------------------------------------------------------------
By No comments:

Q11-Q15

Q11. Explain the NgModule decorator in angular 2?
Q12. What is webpack in angular?
Q13. What are component life cycle hooks in Angular 2?
Q14. What is the difference between directive and component life cycle hooks in Angular?
Q15. What are the 3 simple steps to use life cycle hooks?
---------------------------------------------------------------------------------
Q11. Explain the NgModule decorator in angular 2?

Answer:
This decorator is present in root module of your application. (src/app/app.module.ts)
There are various properties associated with NgModule like declarations, imports, providers, bootstrap.
  • In declarations, all kinds of components, Directives and pipes are written
  • In imports, all other modules are written
  • In providers, global services are written
  • and in bootstrap, the root component name (app.component.ts) is written.
https://angular.io/guide/ngmodules

keyword to learn is -- DIP, bootstrap
D- Declarations
I- Imports
P- Providers

 ---------------------------------------------------------------------------------
Q12. What is webpack in angular?

Answer:
Webpack is a powerful module bundler.
A bundle is a JavaScript file that incorporates assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.

This is used in place of gulp or grunt task runners.

https://angular.io/guide/webpack

 ---------------------------------------------------------------------------------
Q13. What are component life cycle hooks in Angular 2?

Answer:
A component has a lifecycle managed by Angular.

 There are majorly five hooks available. These are in sequence are as follows
  1. ngOnChanges() , Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values. Called before ngOnInit() and whenever one or more data-bound input properties change.
  2.  ngOnInit, Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties. Called once, after the first ngOnChanges().
  3. ngDoCheck, Detect and act upon changes that Angular can't or won't detect on its own. Called during every change detection run, immediately after ngOnChanges() and ngOnInit().
    1. ngAfterContentInit
    2. ngAfterContentChecked
    3. ngAfterViewInit
    4. ngAfterViewChecked
  4. ngOnDestroy, Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks. Called just before Angular destroys the directive/component.

A directive has the same set of lifecycle hooks.

 https://angular.io/guide/lifecycle-hooks
 ---------------------------------------------------------------------------------
Q14. What is the difference between directive and component life cycle hooks in Angular?

Answer:
A directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views.

https://angular.io/guide/lifecycle-hooks
---------------------------------------------------------------------------------
Q15. What are the 3 simple steps to use life cycle hooks?

Answer: 
1) Import the life cycle hook interface
2) Make component class implement the life cycle hook interface. (optional but better coding standard)
3) Write the implementation code for the life cycle interface method.

 eg. implementing ngOnInit

1) import {OnInit} from '@angular/core';
2) export class classname implements OnInit {}
3) ngOnInit() {...}



https://www.youtube.com/watch?v=RCLwwWQ8-V0 ---------------------------------------------------------------------------------
By No comments:

Q6-Q10

Q6. What are directives in angular?
Q7. What is Typescript?
Q8. What is Ng-Show in angular 2?
Q9. What * signifies in *ngIf?
Q10. What are decorators and what are the common type of decorators in Typescript?
---------------------------------------------------------------------------------
Q6. What are directives in angular?

 Answer:
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.
---------------------------------------------------------------------------------
Q7. What is Typescript?

 Answer:
Typescript is a typed super set of JavaScript which has been built and maintained by Microsoft and chosen by the Angular team for development.

The main benefit of using typescript over JavaScript is type checking of code. So developer can know multiple issues while compilation only. 

Typescript support ES6.
---------------------------------------------------------------------------------
Q8. What is Ng-Show in angular 2?

 Answer:
There is NO ng-show in angular 2. 
Use either *ngIf or [hidden] keyword. Where the former keyword ngIf will remove the element while [hidden] will change the CSS display property.
---------------------------------------------------------------------------------
Q9. What * signifies in *ngIf?

 Answer:
The asterisk is "syntactic sugar" for something a bit more complicated. Internally, Angular translates the *ngIf attribute into a <ng-template> element, wrapped around the host element

https://angular.io/guide/structural-directives#!#asterisk

<!-- Examples (A) and (B) are the same -->
<!-- (A) *ngIf  -->
<div *ngIf="hero" class="name">{{hero.name}}</div>

 <!-- (B) [ngIf] with template -->
<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>
---------------------------------------------------------------------------------
Q10. What are decorators and what are the common type of decorators in Typescript?
Answer:
>> Decorators act like functions. These function supplies metadata to angular about a particular class, property, method or parameter. 
>> Decorators are invoked at run time. 
>> The syntax is an “@” symbol followed by a function name example ; @readonly
Different types of decorators
  1. Class Decorator, @Component, @NgModule
  2. Property Decorator for properties inside class, @Input, @Output
  3. Method decorator for methods inside class, @HostListener
  4. Parameter Decorator for parameters inside class constructor eg @Inject

List of common decorators in Angular:
  1. @NgModule, Defines a module that contains components, directives, pipes, and providers. We have 4 parts in it. DIPB - Declarations, Imports, Providers and Bootstrap. Declaration - components, Imports - Modules, Providers - services, Bootstrap - AppComponent. 
  2. @Component, Declares that a class is a component and provides metadata about the component. We have 3 parts in it. Selector, Template(or TemplateUrl), Style(or StyleUrl)
  3. @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.
  4. @Directive, Declares that a class is a directive and provides metadata about the directive.
  5. @Pipe, Declares that class is a pipe.
  6. @Input, Declares an input property that you can update via property binding (example: <my-cmp [myProperty]="someExpression">).
  7. @output, Declares an output property that fires events that you can subscribe to with an event binding
  8. @HostListner

@NgModule, Defines a module that contains components, directives, pipes, and providers
import { NgModule } from '@angular/core';
@NgModule({
declarations:[Component1, Component2],
imports: [Module1, Module2],
exports: [MyModule],
providers: [Service1, Service2],
bootstrap: [AppComponent]})
class MyModule {}

@Component, Declares that a class is a component and provides metadata about the component

import { Component } from '@angular/core';
@Component({
selector?: string
templateUrl?: string
template?: string
styleUrls?: string[]
styles?: string[]
inputs?: string[]
outputs?: string[]
})

@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.

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

@Directive, Declares that a class is a directive and provides metadata about the directive.

import { Directive } from ‘@angular/core’;
@Directive({
selector?: string
inputs?: string[]
outputs?: string[]
host?: {…}
providers?: Provider[]
exportAs?: string
queries?: {…}
})


 Further reading:
https://medium.com/@madhavmahesh/list-of-all-decorators-available-in-angular-71bdf4ad6976
---------------------------------------------------------------------------------
By No comments:
Subscribe to: Comments (Atom)