Sample Angular flashcards from our app

Download our app from the App Store or Google Play to get more free flashcards or subscribe for access to all flashcards.

Describe how to use HTTP Interceptors in Angular to manage requests and responses.

HTTP Interceptor in Angular is used to manipulate HTTP requests and responses. They can intercept a request, modify it, and pass it on. They can also intercept a response, modify it, and pass it on. To use an HTTP Interceptor, we need to create a service that implements the HttpInterceptor interface.

Here is the code illustrating how to add interceptors to the application:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // Here we modify the request
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Here we pass the request on
    return next.handle(modifiedReq);

  }

}

Once our Interceptor is defined, we need to add it to our array of providers in the application module:

@NgModule({
  ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true },
  ],
  ...
})
export class AppModule { }

Note that 'multi' is set to true. This allows us to add multiple interceptors, which will be executed in the order in which they are provided. You need to remember that the order of Interceptors matters, as each subsequent interceptor receives the request from the previous one, so any modifications made by the previous interceptor will be visible to the next one.

How does Data Binding work in Angular components using @Input() and @Output()?

Data Binding is a key aspect of programming in Angular. This makes it possible to dynamically transfer data between components. Data Binding includes two techniques: @Input and @Output.

@Input allows for the transfer of values from the parent component to the child component. This is a so-called one-way data binding technique - data flows from the top to the bottom of the component hierarchy. We use it to mark variables that are supposed to be visible for parent components.

Example of using @Input:

<!--parent.component.html-->
<app-child [childMessage]="parentMessage"></app-child>

// parent.component.ts
parentMessage = "Hello from parent";

// child.component.ts
import {Component,Input }  from '@angular/core';
//..
@Input() childMessage: string;

In the above example, `parentMessage` from parent.component.ts is passed to `childMessage` in child.component.ts.

@Output, on the other hand, allows for communication in the opposite direction - from the child component to the parent. This is the so-called event binding technique. Using the @Output() decorator, we can trigger an event in the child component and handle it in the parent component.

Example of using @Output:

<!--parent.component.html-->
<app-child (messageEvent)="receiveMessage($event)"></app-child>

// parent.component.ts
receiveMessage($event) {
  this.message = $event
}

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
//..
@Output() messageEvent = new EventEmitter<string>();

In this case, when `messageEvent` is triggered in child.component.ts, the `receiveMessage` function is called in parent.component.ts and receives the value sent by `messageEvent`.

What is NgModel and how is it used in Angular forms?

NgModel is an Angular directive that is used to create two-way data binding in forms. Two-way data binding means that data can be transmitted from the model to the view, and from the view to the model. In practice, this means that changes made by the user in the form fields are reflected in the data model, and changes to the data model are visible in the form.

Using the NgModel directive in forms is quite simple. We place it in the appropriate form element and bind it to the appropriate model field using the [(ngModel)] syntax.

For example:

<form>
  <label for="name">Name:</label>
  <input id="name" [(ngModel)]="person.name">

  <label for="age">Age:</label>
  <input id="age" [(ngModel)]="person.age">
</form>

Where "person.name" and "person.age" are data model fields that are bound to the corresponding form fields. Any changes made by the user in these form fields will automatically be reflected in the "person" model.

Remember, to use the NgModel directive, it is necessary to import the FormsModule in the application module.

What is Zone.js in Angular and how does it affect application performance?

Zone.js is a library that allows tracking of asynchronous operations in JavaScript. In the context of Angular, Zone.js is a key component of the change detection mechanism.

Zone.js introduces the concept of "zones", which are global execution contexts. These "zones" create a "tree", where each asynchronous operation always occurs in the same zone that initiated the operation. As a result, we are able to track when an operation starts and when it ends.

Example:
The first operation may trigger a setTimeout, whereby the next operation is scheduled for the next round of the event loop. Even though these are two distinct operations, Zone.js allows us to track them as one whole - this is asynchronous tracking.

In Angular, Zone.js is employed to inform the framework when to commence change detection. Every user action, timer, or http request is performed in the "angular zone". When operations in the "angular zone" finish, Angular automatically triggers change detection.

With this mechanism, Angular knows when it makes sense to refresh the view. That's why Zone.js is crucial for performance. Without Zone.js, Angular would have to utilize techniques like polling to find out when to trigger change detection, which would be highly inefficient.

Although Zone.js yields positive effects on Angular's performance, it could also have a negative impact. If an application carries out a plethora of asynchronous operations that do not affect the application's state, Angular still triggers change detection. In the case of a large number of operations, this could impair performance. To prevent this, we can execute these operations outside of the "angular zone".

Angular Flashcards

Sample Angular flashcards from our app

Describe how to use HTTP Interceptors in Angular to manage requests and responses.

How does Data Binding work in Angular components using @Input() and @Output()?

What is NgModel and how is it used in Angular forms?

What is Zone.js in Angular and how does it affect application performance?

Download IT Flashcards App Now