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