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