Angular interview Questions

1. What is Angular?
===============================================================================

• Angular is an opensource frontend framework that is used to create a single-page web application.

2. What is LazyLoading in Angular?
===============================================================================

• Normally, modules in angular are eagerly loaded. means whenever you load the application, all the modules will be loaded whether they are necessary or not. If your application size is small then it will have no effect but if your application size goes on increasing, then the initial loading time of application will increase. So to avoid this, angular has come up with a concept called lazyloading.

• By using lazy loading, the application loads the modules only when they are required.
• Speeds up our application by splitting it into multiple bundles and loading when required.

3.ngOnInit vs Constructor?
===============================================================================

• The constructor does not belong to angular life cycle hooks whereas ngoninit belongs to angular life cycle hooks.
• The constructor is used for dependency injection(HttpClient, router, etc)
• By using ngonint we will know whether angular has fully initialized the component or not.

• For Dom manipulation, we can use NgOnInit().
• The constructor is called before ngoninit

4. Component directive, Structural and Attribute Directives
===============================================================================

• The Component directive is like a user control which has its own template.
• Structural directives change the structure of the dom by creating or destroying the elements of the dom.
• Attribute directives change the appearance or behavior of the dom elements or components or other directives.

5. What are Observables?===============================================================================

• Observables are used in angular to handle Asynchronous code.

There are two important players.,

1. Observable: Fires the data in response to an event. Eg: when the user clicks the button, data from the remote server, etc.
2. Observer: will subscribe to the observable.

6.Observable vs Promises
===============================================================================

• Observables and Promises are used to handle Asynchronous data in angular.
• Observables are lazy(An Observable is not called until we subscribe to the observable) whereas Promises are not Lazy.
• Observables provide operators like foreach, map, filter, reduce, etc. whereas promises do not provide any operators.
• Observables can be canceled by using unsubscribe() whereas promises cannot be canceled.

7. Angular Life Cycle Hooks?

===============================================================================
ngOnChanges(): This will gets called whenever input data-bound properties changes. This will receives simpleChanges object which contains previous and current changes.

ngOnInit(): Called once component is initialized.

ngDoCheck(): We can use this instead of ngOnChanges() whenever angular does not detect the changes. (eg: If we use arrays/objects, ngOnChanges will not detect  those changes so Here we can use ngDoCheck).

ngAfterContentInit(): Called after content is projected into the component.

ngAfterContentChecked(): Called after projected content is checked.

ngAfterViewInit(): Called after component's view or child view gets initialized.

ngAfterViewChecked(): Called after component view or child view is checked.

ngOnDestroy(): Called once the component is destroyed. Used to clean up activities, unsubscribe from observables.

8. What is Angular CLI?
===============================================================================

• Angular CLI is a command-line interface tool used for scaffolding, develop, test, deploy and maintain applications.

9. What is Interpolation?

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

• It is the simplest way of binding data from class to template.
• It is represented by double curly braces. {{test}}

<h3>
  {{title}}
  <img src="{{url}}" style="height:30px">
</h3>

10. What are pipes in Angular?
===============================================================================

• Pipes allow us to transform data into the desired output before displaying it to the user.
• To apply a pipe, we have to use the pipe operator (|).

• BuiltIn Pipes: Date pipe, Currency pipe, Uppercase Pipe, LowerCase Pipe, Decimal and Percentage Pipe.

11. What is NPM and Node_modules folder?
===============================================================================

• NPM stands for the node package manager. It is used to install various plugins, javascript frameworks, packages.
• Node_modules is a folder where all the packages are installed.

12. What is the Package.Json file?

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

• whatever the javascript frameworks or packages we are using in our project are all listed in this file.

13. What is Decorator?
===============================================================================

• A Decorator says that what type of class it is to the angular framework.
• Eg: If we decorate @component, it says that it is an angular component and if we decorate @NgModule, then it says that it is an angular module.

14. What are Services in Angular?

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

• If we want to share common functionality among different modules then we use services.
• Eg: Http, loggers, etc.

15. What is Dependency injection in Angular?===============================================================================

• Dependency Injection is an Angular design pattern where rather than creating object instances from within the component, Angular injects it via the constructor.
• Benefit: It helps to decouple class dependencies so that when you add new dependencies you do not have to change everywhere.

16. What is Component in Angular?

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

• The component is a directive with a template. They are basic building blocks of angular applications that will break up the angular application into smaller parts.
• It contains a class, decorator, and template which represents the view.

17. What is Async Pipe in Angular?
===============================================================================

• It is used to subscribe to an observable inside angular template syntax.
• It automatically unsubscribes from observable.
•  <tr *ngFor="let pp of sw.obsdata| async">

18.What is Router Outlet?===============================================================================

• Router Outlet is a directive. It acts as a place holder to dynamically load components based on an activated component or current route state.
• Syntax: <Router-Outlet></Router-Outlet>

19. Providers in angular?===============================================================================

• A provider is an object declared to Angular so that it can be injected in the constructor of your components, directives, and other classes instantiated by Angular.

20.Template driven vs reactive forms 
https://www.pluralsight.com/guides/difference-between-template-driven-and-reactive-forms-angular

21. forms(form control, form group, form builder)
https://angular.io/api/forms

22.Difference Between setValue() And patchValue() In Angular 2
https://www.c-sharpcorner.com/blogs/difference-between-setvalue-and-patchvalue-in-angular-2


23.component interraction in angular
https://angular.io/guide/component-interaction#parent-listens-for-child-event