Angular Interview Questions

In this article, we are going to go over various levels of complexity within the Angular framework by answering some questions that are commonly asked during interviews.

What are some lifecycle hooks available within Angular and, as you identify them, provide further details about each one?

• ngOnChanges: This hook is called whenever one or more of the inputs within a component changes. It is commonly used to perform data operations on the changed properties to update a separate variable within the component.
• ngOnInit: This hook is called once, when the component is initialized. It can be used to set properties in the component and is generally used when setting up observables.
• ngDoCheck: This hook is called to detect and act on changes that cannot be detected by Angular’s change detection.
• ngAfterContentChecked: This hook is called after ngAfterContentInit when the component’s view is checked.
• ngAfterViewInit: This hook is called after a component gets initialized.
• ngAfterViewChecked: This hook gets called after the ngAfterViewInit, and whenever the component, or it’s view, gets checked.
• ngOnDestroy: This hook gets called just before Angular destroys the component. This hook is commonly used to tear down code and detach any observables or event handlers.

What is the difference between an observable and a promise?

• While a promise may only emit a value once, an observable may emit multiple values over a period of time.
• While a promise cannot be cancelled, an observable can be cancelled by using the unsubscribe method. This gives developers the control to stop memory leaks when the value is no longer needed.

What are the three types of directives used in Angular?

• Angular leverages component, structural, and attribute directives.
• A component directive is a component that can be used within a view, or may be standalone as the view.
• A structural directive is generally used to manipulate the DOM elements. Examples of this would be ngIf and ngFor.
• An attribute directive is a directive generally used to control the look and behavior of a DOM element. An example of this in Angular Material would be something like the matInput directive.

How does a component share values with its child components?

Values can be shared from the parent component to the child component via @Input() properties or by having a shared service that maintains a state that can be changed by both components.

How does a component share values with its parent component?

Values can be either emitted by the child component by leveraging the @Output() properties, shared via a shared service, and can be set via the @ViewChild() property within the parent component.

What are the types of files generally used to create an Angular component?

Angular components generally consist of a template, stylesheet, testing, and scripting file. The template file consists of the html code along with angular attributes and directives used to render the component. The stylesheet controls how the component will styled via CSS. The Testing, or spec file, contains the unit tests for the component. Finally, the scripting file contains the lifecycle hooks and data operations used for the component. The only required file to render an Angular component is the scripting file, which may also contain the styles and html used to render the component.

What is Angular Material?

Angular Material is a component library created by Google to provide a way for developers to create a consistent look and feel for their applications. Angular Material is based on Material Design, which creates the principals to generate a modern, and responsive, web application.

What is Angular CDK?

Angular CDK, or Component Dev Kit, is a set of behavior primitives that can be used to build UI components. Angular Material leverages the CDK improve the accessibility of its components. While Angular Material provides styled UI Components, the CDK provides a base to get started with in creating your own UI components.

What is ElectronJS and how does it related to Angular?

ElectronJS is a framework built to take a web application and run it as a desktop application across multiple platforms. With ElectronJS you can easily take your existing Angular application and create a desktop application to distribute to your users. Some examples of this include Visual Studio Code and Slack.

What is an async pipe and how is it used?

An async pipe is a pipe used within an Angular template to subscribe to an observable or promise, and return the latest value as it is emitted. When the value gets emitted by the observable or promise, the pipe marks the component to be checked for changes which in turn, updates the UI.

What is a service in Angular?

A service is used to provide common functionality between various components and modules. Services give users the ability to take duplicated code and put it in a place that is accessible to various components. This includes utility tasks, basic state management, and API requests for data.

What is state management and provide some examples?

State management is a way for the UI to have a data store that is accessible to various parts of the application. It can be as basic as a simple BehaviorSubject within a service class that is read and set from various components, or it can be as complicated as an external framework such as NGRX. Frameworks, like NGRX, give Angular developers a way to store data in a database like fashion that can be read from multiple parts of the application.

What are Http Interceptors in Angular?

Http Interceptors are services that are used to inspect and manipulate request and response data sent to and from the API and Angular application. General use cases for an Http Interceptor would include sending along an api key or authorization token within the request headers.

What is dependency injection?

Dependency injection is a design pattern used to allow a single class to leverage various versions of a subclass. If designed properly, it would give the developer the ability to swap out service classes in an Angular application to either perform data operations differently, or to leverage a separate data source.