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.

https://www.tektutorialshub.com/angular/angular-router-events/

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

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

https://www.youtube.com/watch?v=VRf21fum3nk&ab_channel=ARCTutorials

Good link below

https://medium.com/@ryanchenkie_40935/angular-authentication-using-route-guards-bf7a4ca13ae3

https://alligator.io/angular/route-guards/

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

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

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. 

=======================================================================

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. 

https://www.youtube.com/watch?v=XRplR3Srr1k

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