Inteview Questions - Angular
In the increasingly competitive landscape of the IT sector, the demand for junior-level positions is met with a flood of applicants, prompting companies to increasingly seek out medium and senior-level engineers. This trend underscores the importance of being well-prepared for any career opportunity that arises.
Therefore, being adequately prepared for any potential opportunity is crucial.
Beginner
1. What is a directive?
Answer: Directive is a way of attaching custom behavior for existing DOM elements.
2. What is the difference between a component and a directive?
Answer: A directive is utilized to add supplementary behavior to an existing DOM element. In addition, Angular components are a subset of directives. They are always associated with a template and are specifically designed to create reusable UI blocks.
3. What is an Angular pipe? Can you give me an example of one?
Answer: Pipes are optimized functions used in templates to transform data. The AsyncPipe is employed to subscribe and unsubscribe from an asynchronous source, while the CurrencyPipe is used to transform a given value into currency.
4. Angular is an SPA framework? If yes, what is a SPA?
Answer: Yes, in a Single Page Application (SPA), all functions of your application are contained within a single HTML page. As users navigate through your application, the browser only needs to render the relevant sections, avoiding the need to load an entirely new page.
5. What is a NgModule?
Answer: NgModules organizes components, directives, and pipes into functional blocks, addressing specific features or business domains. They also integrate services, which can be internally developed or sourced externally, like the Angular router and HTTP client. We can also import other modules, and we can even set which components/directives/pipes this module will export.
6. What is a standalone component?
Answer: Standalone components directly import other components, directives, and pipes used in their templates, basically a standalone component is a self-contained module and can be used in other components or modules.
7. Can we use standalone components inside NgModule?
Answer: Yes, just add them to the import array.
8. What is a typescript decorator? Can you give an example of an Angular decorator?
Answer: A TypeScript decorator is a way to add extra features or modify a class, method, or property with a special label like @Component an Angular decorator.
9. What is an Rxjs Observable? What is the main difference between a Promise and an Observable?
Answer: Observables are functions utilized to encapsulate data streams. The values of this observable are consumed only when there is a subscriber. It’s closely related to the Observer pattern in design patterns.
Both are used to handle asynchronous events. The most significant difference is that promises deal with one async event at a time, while observables can handle a sequence of async events over a period of time.
10. What is the difference between a Subject and a BehaviourSubject?
Answer: Essentially, when we subscribe to a subject, we receive the values emitted after the subscription. In contrast, with a BehaviorSubject, when we subscribe to it, we receive the latest value of the source right at the moment of subscription.
11. What is the component lifecycle? Can you give 3 examples?
Answer: A component’s lifecycle is the sequence of steps that happen between the component’s creation and its destruction.
ngOnInit(), ngOnChanges() & ngOnDestroy()
12. What are the available types of compilations in Angular? And what is the difference between them?
Answer: JIT (Just-in-Time) and AOT (Ahead-of-Time)
JIT: Compile your application in the browser at runtime.
AOT: Compile your application at build time.
13. What are the available change detections in Angular? And what are the differences between them?
Answer: Default and OnPush
Default: The default strategy initiates change detection for various events such as DOM events, timers, promises, XHR, and observables. As a result, whenever there is a change in our application, change detection runs on all components to ensure the view is updated.
OnPush: Utilizing the OnPush strategy, Angular initiates a change detection cycle for a component and its children solely upon changes in the component’s input properties or triggered events. This approach enhances performance, albeit at the cost of introducing some additional complexity to the component code.
14. The developer can trigger the change detection manually? If so, how?
Answer: Injecting the ChangeDetectionRef, and calling markForCheck() or detectChanges()
15. What is lazy loading? And how can we achieve it?
Answer: By default, all NgModules are eagerly loaded. Lazy loading, on the other hand, is a design pattern that loads modules or components as needed. It helps to keep the initial bundle as small as possible, and we can take advantage of it with NgModules and standalone components, just by using: loadChildren()on routes for NgModules
loadComponent() on routes for standalone components
BONUS: What are Signals?
Answer: A signal serves as an encapsulation for a value, signaling interested consumers when the underlying value undergoes changes. Signals can encompass a wide range of values, from basic primitives to intricate data structures. This enables something called fine-grained update/reactivity, which enables us to optimize the render/Dev experience.
Intermediary
1. Are you familiar with content projection? Can you describe it?
Answer: Yes, content projection is employed often using
2. How can we change easily the currency of the CurrencyPipe?
Answer: The first parameter of the pipe should be the currency you want to display, at the template.
3. I want to create my own pipe extending some of the Built-in pipes, how?
Answer: Use Typescript extends with the class of the Pipe that you want, for example, DatePipe, and implement the PipeTransform interface.
export class DaylightDatePipe extends DatePipe implements PipeTransform
4. What is a polyfill?
Answer: A polyfill is a code snippet, typically written in JavaScript for web applications, that serves to enable modern functionality on older browsers lacking native support. For instance, a few years ago, Internet Explorer lacked certain native APIs, so we used polyfills to replicate that functionality.
5. Why should you unsubscribe from Observables?
Answer: Not unsubscribing can lead to data leaks, which, in turn, can result in performance issues.
6. How to unsubscribe from Observables?
Answer: There are several ways to unsubscribe. We can do it manually by calling the unsubscribe() method. Alternatively, we can use the async pipe, which automatically unsubscribes from the observable. Another option is to use the takeUntil() RxJS operator, which completes the output Observable when a specified Observable emits a value. This is often combined with a subjecttriggering for example, in the ngOnDestroy()
7. What is a Hot and a Cold Observable?
Answer: A hot observable can begin even if no observers are currently subscribed and can persist after the last observer has unsubscribed. In contrast, a cold observable typically initiates only upon subscription and concludes when the subscription terminates. It can execute a process separately for each subscribed observer.
8. Difference between template-driven and Reactive Forms?
Answer: Reactive forms offer developers greater control over form elements, facilitating customization of form behavior and validations. They are also more convenient for unit testing, thanks to their reactive programming model, which allows more precise control over form data.
On the other hand, template-driven forms are a quick and efficient option for creating simple forms with minimal code. They are well-suited for straightforward use cases that do not demand extensive customization or complexity.
9. Are you familiar with Strictly typed Forms? What is the advantage of using it?
Answer: Yes, enabling the developer to build more complex forms, better autocomplete in IDEs, and more predictability.
10. How can we generate Observables from Event sources?
Answer: Using the fromEvent()function from Rxjs.
Advanced
1. How can we use the *ngTemplateOutlet directive?
Answer: *ngTemplateOutlet directive in Angular allows us to have a more complex content projection. While it can be applied to any HTML element, it is often paired with
With *ngTemplateOutlet, you can define reusable and customizable templates that leverage variables within their scope. For instance, consider the following example:
<ng-container *ngTemplateOutlet=”customTemplate; context: { data: myData }”></ng-container>
2. What are Angular elements? Can you give a user case for it?
Answer: Angular elements are essentially Angular components encapsulated as custom elements, also known as Web Components. These adhere to a web standard that defines the creation of new HTML elements in a manner independent of any specific framework. One practical use case for Angular elements is the creation of a library intended for clients who do not use Angular.
By packaging Angular components as custom elements, the resulting library becomes framework-agnostic. This means that clients utilizing different frontend frameworks or even plain HTML can seamlessly incorporate and benefit from the functionality provided by the Angular components. This approach enhances the reusability and interoperability of Angular components across diverse projects and technology stacks
3. How can we use SSR/SSG on Angular?
Answer: There are some steps to it, first of all, we should add SSR package to our project ng add @angular/ssr, we should make our application be served from the server.ts and migrate our component to be server-compatible because some of the browser’s APIs are not available on the server.
Note: of course, this is a big simplification of the process.
4. What is the difference between SSR and SSG?
Answer:
SSR: involves generating HTML on the server dynamically for each request, and is well-suited for applications with real-time or frequently changing data because the server generates content dynamically for each request.
SSG: involves pre-generating HTML during the build phase of the application which can be served statically to clients, it can offer faster initial page loads as the HTML is already available and doesn’t need to be generated on the server for each request. However, if content changes, the application needs to be rebuilt to reflect those changes, making SSG less suitable for real-time or frequently updated content.
5. What is the difference between @ViewChild and @ViewChildren?
Answer: @Viewchild()will retrieve the first element matching the selector while @ViewChildren() will return a query list of all elements matching the given selector.