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/

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