Best Angular Interview Questions and Answers

Prepare for your next job with the Best Angular Interview Questions and Answers. Boost your knowledge of Angular and ace your technical interview effortlessly.

 

Q.1 What are the key components of Angular?

Angular has the key components given below,

1. Component: These are the basic building blocks of an Angular application to control HTML views. Component Class is a TypeScript class that defines the behavior of the component. Each component can have its own styles defined in a separate CSS or SCSS file. Styles are scoped to the component. 
2. Modules: An Angular module is a set of angular basic building blocks like components, directives, services etc. An application is divided into logical blocks and each block of code is called as module which performs a single task or common process. It helps to structure and manage an application. Modules are basically used to group similar components, directives, pipes, and services into similar blocks of functionality.
3. Templates: These represent the views of an Angular application or define the HTML layout and structure that determines how data from the component class is displayed to the user side. 
4. Services: These are used to create components that can be shared across the entire application. Service is used to create any kind of utility function and by doing so we can use this service for calling an API to access the data, we can use the service to share the data between multiple components.
5. Metadata: This can be used to add more data to an Angular class. Metadata is provided through decorators that provide Angular with the necessary information.

 

Q.2 What are the differences between Component and Directive?

A component(@component) is a directive with a template.

Component- Registration method – for this we use @Component meta-data annotation.

Directive- Registration method – for this we use @Directive meta-data annotation.

 

Component- Purpose – It is typically used to create UI widgets.

Directive – Purpose – It is typically used add behavior to an existing DOM element.

 

Component- Application break –With the help of this we can break down the application into smaller components

Directive – Application break – With the help of this we use the reusable components

 

Component- DOM elements – here only one component can be present per DOM elements

Directive – DOM elements – here we can use many directives as per DOM elements

 

Component- Mandatory Decorators – here we require a @View decorator template. 

Directive – Mandatory Decorators – here we do not require a @View decorator template.

 

For Free Demo classes Call: 020-71173125

Registration Link: Angular Course in Pune!

 

Q.3 What are lifecycle hooks available?

Angular application has a lifecycle right from its initiation to the end of the application.

Each lifecycle method is given below,

1. ngOnChanges: When the value of a data-bound property varies or changes, then this method is called to initiate the program.
2. ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens or we can say that this is called after Angular has put all data-bound properties of a directive or component which is present in the program.
3. ngDoCheck: This is for the detection or check and to act on changes that Angular cannot or won’t check on its own or we can say that this is called on during every change detection cycle.
4. ngAfterContentInit: we can say that it is called after Angular has projected content into the component’s view of the given project.
5. ngAfterContentChecked: This is called in response after Angular checks when the angular content is projected into the component or we can say that it is called after Angular checks the content projected into the component’s view.
6. ngAfterViewInit: This is called in response after Angular gives the data or content in the component’s views and child views.
7. ngAfterViewChecked: This is called in response after Angular checks whether the given code is the component’s views and child views.
8. ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component code or file.

 

Q.4 What is angular CLI?

Angular CLI means command line interface.

apps using nodejs style (commonJs) modules.

We can install the angular project by using the below command

npm install @angular/cli@latest

Below is the list of a few commands that are used while creating angular projects

1. Creating New Project: ng new <project-name>
2. Generating Components, Directives & Services:

 ng generate/g <feature-name>

The different types of commands would be,

•     ng g class my-new-class: it is used to add a class to your application
•     ng g component my-new-component: it is used to   add a component to your application
•     ng g directive my-new-directive:  it is used to add a directive to your application
•     ng g enum my-new-enum:  it is used to add an enum to your application
•     ng g module my-new-module: it is used to add a module to your application
•     ng g pipe my-new-pipe: it is used to add a pipe to your application
•     ng g service my-new-service: it is used to add a service to your application

3. Running the Project: ng serve –open 

 

Q.5 What is ngOnInit?

We use ngOnInit for all the initialization/declaration and do not write code in the constructor. We use the constructor to initialize class members.

 

Do watch our video: Click Here

 

Author:-

Pooja Nandode-Bhavsar
Call the Trainer and Book your free demo class for Angular now!!!

© Copyright 2020 | SevenMentor Pvt Ltd