Angular Interview Questions Part 1

1. What is Angular Framework?

Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications within web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development.

2. What are the key components of Angular?

Angular has the below key components,

  1. Component: These are the basic building blocks of angular application to control HTML views.
  2. Modules: An angular module is a set of angular basic building blocks like component, directives, services, etc. An application is divided into logical pieces and each piece of code is called “module” which perform a single task.
  3. Templates: This represents the views of an Angular application.
  4. Services: It is used to create components that can be shared across the entire application.
  5. Metadata: This can be used to add more data to an Angular class.

3. What is the angular CLI?

Angular CLI(Command Line Interface) is a command-line interface to scaffold and build angular apps using nodejs style (commonJs) modules.

4. What is Transpiling in Angular?

Transpiling is the process of converting the typescript into javascript (using Traceur, a JS compiler). Though typescript is used to write code in the Angular applications, the code is internally transpiled into javascript.

5. What are directives?

Directives add behavior to an existing DOM element or an existing component instance.

 

6. What are components?

Components are the most basic UI building block of an Angular app which formed a tree of Angular components. These components are subset of directives. Unlike directives, components always have a template and only one component can be instantiated per element in a template

7.Differentiate between Components and Directives in Angular

Components break up the application into smaller parts; whereas, Directives add behavior to an existing DOM element.

8. What is a module?

Modules are logical boundaries in your application and the application is divided into separate modules to separate the functionality of your application

9. What are lifecycle hooks available?

The description of each lifecycle method is as below,

  1. ngOnChanges: When the value of data-bound property changes, then this method is called.
  2. ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
  3. ngDoCheck: This is for the detection and to act on changes that Angular can’t or won’t detect on its own.
  4. ngAfterContentInit: This is called in response after Angular projects external content into the component’s view.
  5. ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.
  6. ngAfterViewInit: This is called in response after Angular initializes the component’s views and child views.
  7. ngAfterViewChecked: This is called in response after Angular checks the component’s views and child views.
  8. ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component.

10. What is data binding?

Data binding is a core concept in Angular and allows to define communication between a component and the DOM,

11. What is the difference between constructor and ngOnInit?

TypeScript classes have a default method called constructor which is normally used for the initialization purpose. Whereas ngOnInit method is specific to Angular, especially used to define Angular bindings. Even though constructor getting called first, it is preferred to move all of your Angular bindings to ngOnInit method

12. What is a service?

A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components.

13. What is dependency injection in Angular?

When a component is dependent on another component the dependency is injected/provided during runtime.

14. What are pipes?

A pipe takes in data as input and transforms it to a desired output

15. What is the use of @Input and @Output?

When it comes to the communication of Angular Components, which are in Parent-Child Relationship; we use @Input in Child Component when we are passing data from Parent to Child Component and @Output is used in Child Component to receive an event from Child to Parent Component.

16. What is Routing in Angular

Routing helps a user in navigating to different pages using links.

17. What is the purpose of using package.json in the angular project?

With the existence of package.json, it will be easy to manage the dependencies of the project. If we are using typescript in the angular project then we can mention the typescript package and version of typescript in package.json.

18. Differentiate between Observables and Promises.

Observables are lazy, which means nothing happens until a subscription is made. Whereas Promises are eager; which means as soon as a promise is created, the execution takes place. Observable is a stream in which passing of zero or more events is possible and the callback is called for each event. Whereas, promise handles a single event.

 19. Explain Authentication and Authorization.

Authentication: The user login credentials are passed to an authenticate API (on the server). On the server side validation of the credentials happens and a JSON Web Token (JWT) is returned. JWT is a JSON object that has some information or attributes about the current user.  Once the JWT is given to the client, the client or the user will be identified with that JWT.

Authorization: After logging in successfully, the authenticated or genuine user does not have access to everything. The user is not authorized to access someone else’s data,  he/she is authorized to access some data.