Angular Interview Questions and Answers

Question: What are directives in Angular? Explain the difference between structural and attribute directives.

Answer:

In Angular, directives are classes that allow you to manipulate the DOM (Document Object Model) in a declarative way. They extend the behavior of elements in the DOM, enabling you to add logic and modify the appearance or behavior of the elements without directly modifying the element itself. Directives are a core feature of Angular that allow for the creation of reusable UI components and behavior within Angular applications.

Angular directives are used for various purposes such as adding behaviors to elements, dynamically modifying the DOM structure, and creating custom UI components.

---

Types of Directives in Angular:

There are three main types of directives in Angular:

1. Component Directives:
   • These are actually components (i.e., they have a template). They are the most common form of directive and represent Angular components that define a view and its logic.
2. Structural Directives:
   • Structural directives are responsible for changing the structure of the DOM by adding or removing elements. They modify the layout of the page by dynamically altering the number or content of DOM elements.
3. Attribute Directives:
   • Attribute directives are responsible for modifying the appearance or behavior of an element, component, or other directive. They do not change the structure of the DOM but can change styles, classes, or other properties of the DOM elements.

---

1. Structural Directives:

Structural directives are used to alter the structure of the DOM. They add, remove, or manipulate DOM elements based on conditions or the loop iteration.

Key Characteristics:

• They change the structure of the view by adding or removing elements.
• They are marked with a * symbol in the template.
• Common examples include *ngIf, *ngFor, and *ngSwitch.

Examples:

• *ngIf: Conditionally adds or removes an element from the DOM based on the expression passed.

  <div *ngIf="isVisible">This content will only be displayed if isVisible is true.</div>

• *ngFor: Iterates over a collection and renders the HTML element for each item in the collection.

  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>

• *ngSwitch: Used to conditionally render a group of elements based on an expression.

  <div [ngSwitch]="value">
    <div *ngSwitchCase="'A'">Case A</div>
    <div *ngSwitchCase="'B'">Case B</div>
    <div *ngSwitchDefault>Default case</div>
  </div>

How they work:

• When a structural directive is used, Angular transforms the DOM by creating a new template based on the directive’s logic (e.g., creating or removing elements).
• *ngIf, for instance, tells Angular to either include or exclude an element from the DOM based on the expression’s truth value.

---

2. Attribute Directives:

Attribute directives are used to modify the behavior or appearance of an element. They do not affect the DOM structure but instead modify the attributes of the target element, such as styles, classes, or event handling.

Key Characteristics:

• They affect the appearance or behavior of elements.
• They are used to change the properties of elements such as CSS styles, classes, attributes, or other DOM manipulations.
• They do not have a template.

Examples:

• ngClass: Adds or removes CSS classes based on the condition or expression.

  <div [ngClass]="{ 'active': isActive }">This div will have the 'active' class if isActive is true.</div>

• ngStyle: Dynamically sets CSS styles.

  <div [ngStyle]="{ 'background-color': backgroundColor }">This div has a dynamic background color.</div>

• [disabled]: Disables a button or form element based on an expression.

  <button [disabled]="isDisabled">Click Me</button>

• Custom Attribute Directive: You can create custom attribute directives to modify element behavior, such as changing text color on hover or implementing tooltips.

  @Directive({
    selector: '[appHighlight]'
  })
  export class HighlightDirective {
    @HostListener('mouseenter') onMouseEnter() {
      this.highlight('yellow');
    }
  
    @HostListener('mouseleave') onMouseLeave() {
      this.highlight(null);
    }
  
    constructor(private el: ElementRef) {}
  
    private highlight(color: string) {
      this.el.nativeElement.style.backgroundColor = color;
    }
  }

  <div appHighlight>Hover over me to change color</div>

How they work:

• Attribute directives modify the attributes of an existing element (like ngClass or ngStyle) or introduce custom behaviors by changing properties, attributes, or CSS styles of the target element.
• Custom attribute directives provide more flexibility to change the behavior of elements when needed.

---

Difference Between Structural and Attribute Directives:

Aspect	Structural Directives	Attribute Directives
Purpose	Modifies the structure of the DOM (adding/removing elements)	Modifies the appearance or behavior of existing elements
Common Examples	*ngIf, *ngFor, *ngSwitch, *ngForOf	ngClass, ngStyle, ngModel, custom directives (e.g., appHighlight)
Symbol	Always uses * prefix (e.g., *ngIf, *ngFor)	No * prefix, uses square brackets [ ] or direct usage (e.g., [ngClass], [ngStyle])
Effect on DOM	Changes the structure of the DOM (adds or removes elements)	Does not change the DOM structure but changes element behavior or style
Usage Context	Used to create or destroy elements dynamically	Used to modify the behavior or style of existing elements

---

Summary:

• Structural directives in Angular are responsible for altering the DOM structure, such as adding or removing elements based on conditions or iterating over collections.
• Attribute directives in Angular are used to modify the behavior or appearance of existing DOM elements, such as changing styles, adding/removing CSS classes, or creating custom behaviors.

Both types of directives are essential in Angular for creating dynamic and reusable components with behavior and view logic, but they serve different purposes within the application. Structural directives are about manipulating the structure, while attribute directives are about controlling the attributes or behaviors of elements.

Question: What is RxJS and how does it relate to Angular?

Answer:

RxJS (Reactive Extensions for JavaScript) is a library for reactive programming that enables asynchronous programming using observables. It provides a way to compose asynchronous and event-based programs using operators that work with streams of data. RxJS allows developers to work with asynchronous events like user input, HTTP requests, WebSocket messages, and more in a consistent, declarative manner.

Key Concepts of RxJS:

1. Observable:

   • An observable is a stream or sequence of events or values that can be observed over time.
   • You can think of it as a data stream that can emit values (like events, HTTP responses, or other data) at any point in time.
   • Observables are lazy and do not execute until a subscriber subscribes to them.

2. Observer:

   • An observer listens to an observable and reacts to emitted values.
   • An observer can have three callback functions:
     • next(): Called when a new value is emitted.
     • error(): Called if an error occurs.
     • complete(): Called when the observable finishes emitting values.

3. Operators:

   • RxJS provides a variety of operators that can be used to transform, filter, combine, or manage the values emitted by observables.
   • Common operators include map, filter, mergeMap, concatMap, switchMap, debounceTime, etc.

4. Subscription:

   • A subscription is the execution of an observable. When an observer subscribes to an observable, it begins to emit values and the subscription remains active until either the observable completes or an error occurs.

5. Subject:

   • A subject is a special type of observable that allows multicast (sharing a single execution path among multiple subscribers).
   • Subjects are both observable and observer: they can emit values (like an observable) and listen to values (like an observer).

---

RxJS in Angular:

Angular uses RxJS heavily for managing asynchronous operations like HTTP requests, event handling, and form management. RxJS makes it easy to handle asynchronous data flows in a clean, declarative way by using observables to represent data streams.

Here’s how RxJS is integrated into Angular:

1. HTTP Requests:

• Angular’s HttpClient service, which is used for making HTTP requests, returns Observables. This means that instead of dealing with promises, Angular allows developers to subscribe to HTTP requests and manage the responses reactively.

Example:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUserData(): Observable<any> {
    return this.http.get('https://api.example.com/users');
  }
}

In the above example, the http.get() method returns an observable, which you can subscribe to in the component to get the data asynchronously.

2. Handling Events:

• RxJS allows you to use observables to handle user events such as clicks, keypresses, and other DOM events. Angular’s fromEvent() utility, for example, lets you listen to events in a reactive way.

Example:

import { fromEvent } from 'rxjs';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-click-listener',
  template: '<button>Click Me</button>',
})
export class ClickListenerComponent implements OnInit {
  ngOnInit() {
    const button = document.querySelector('button');
    const clickObservable = fromEvent(button, 'click');
    clickObservable.subscribe(() => {
      console.log('Button clicked!');
    });
  }
}

3. Reactive Forms:

• Angular’s Reactive Forms use RxJS to handle form control changes, validations, and interactions in a reactive manner. Each form control emits an observable stream of values, which can be observed and acted upon.

Example:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <input formControlName="name" />
      <button type="submit">Submit</button>
    </form>
  `
})
export class ReactiveFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      name: ['', Validators.required]
    });

    this.myForm.get('name').valueChanges.subscribe(value => {
      console.log('Form control value changed:', value);
    });
  }

  onSubmit() {
    console.log('Form Submitted:', this.myForm.value);
  }
}

In this example, the form control name emits a new value whenever it changes. RxJS’s valueChanges observable is used to reactively listen for changes.

4. Async Pipe:

• Angular’s async pipe is a built-in pipe that subscribes to observables automatically and manages the subscription lifecycle (e.g., it unsubscribes when the component is destroyed). This is particularly useful for displaying asynchronous data in templates.

Example:

<div *ngIf="userData | async as data">
  <p>{{ data.name }}</p>
</div>

In this example, userData is an observable, and the async pipe subscribes to it and updates the view with the emitted value.

5. Combining Observables:

• RxJS provides operators to combine multiple observables and perform transformations. Angular uses operators like mergeMap, switchMap, concatMap, and combineLatest to compose complex asynchronous logic.

Example:

import { of } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

of('data1', 'data2').pipe(
  mergeMap(data => {
    return this.myService.getData(data);
  })
).subscribe(response => {
  console.log(response);
});

---

Why RxJS is Important for Angular:

1. Asynchronous Programming:

   • RxJS provides a unified way of working with asynchronous operations in Angular. Instead of callbacks or promises, RxJS allows you to manage asynchronous events in a declarative way using observables, which makes code more readable and maintainable.

2. Event Handling:

   • Many Angular features such as HTTP requests, form controls, and DOM events are based on observables, making RxJS an essential part of Angular applications. You can handle events, perform transformations, and manage state in a consistent and flexible way.

3. Declarative Code:

   • With RxJS, you can express complex logic in a declarative manner using operators. This leads to cleaner, more readable, and less error-prone code, especially when handling multiple asynchronous events simultaneously.

4. Composability:

   • RxJS enables composition, meaning you can combine multiple data streams and transform them without losing the flexibility of working with individual streams. You can use operators to filter, merge, or transform the data flow based on your needs.

5. Memory Management:

   • With RxJS, Angular’s async pipe and operators like takeUntil() help manage memory by automatically unsubscribing from observables when no longer needed, preventing memory leaks in large applications.

---

Conclusion:

RxJS is a powerful library for reactive programming, providing a way to handle asynchronous data streams with operators and observables. Angular leverages RxJS heavily for managing asynchronous operations like HTTP requests, form changes, and user events. By integrating RxJS into Angular, developers can write cleaner, more maintainable, and scalable code for handling asynchronous logic, event streams, and complex data manipulations.

Read More

If you can’t get enough from this article, Aihirely has plenty more related information, such as Angular interview questions, Angular interview experiences, and details about various Angular job positions. Click here to check it out.