Category: Angular

Sometimes, we want to use pipes in services and components with Angular.

In this article, we’ll look at how to use pipes in services and components with Angular.

How to use pipes in services and components with Angular?

To use pipes in services and components with Angular, we can use them directly.

For instance, we write

import { formatDate } from "@angular/common";

class MyService {
  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transformDate(date) {
    return formatDate(date, "yyyy-MM-dd", this.locale);
  }
}

to create the MyService service.

And then we call formatDate directly after importing it in the transformData method.

We call it with the locale we injected to format the date.

Conclusion

To use pipes in services and components with Angular, we can use them directly.

Sometimes, we want to send data through routing paths in Angular.

In this article, we’ll look at how to send data through routing paths in Angular.

How to send data through routing paths in Angular?

To send data through routing paths in Angular, we call this.router.navigate with an object in the 2nd argument.

For instance, in the source route component, we write

this.router.navigate(["action-selection"], { state: { example: "bar" } });

in a method.

The data in the 2nd argument will be sent to the destination component.

Then in the destination component, we write

console.log(this.router.getCurrentNavigation().extras.state.example);

to call getCurrentNavigation to get the values from the object we call navigate with.

Conclusion

To send data through routing paths in Angular, we call this.router.navigate with an object in the 2nd argument.

Sometimes, we want to fix HTTP Angular HttpClient not sending the header.

In this article, we’ll look at how to fix HTTP Angular HttpClient not sending the header.

How to fix HTTP Angular HttpClient not sending the header?

To fix HTTP Angular HttpClient not sending the header, we create a header object.

For instance, we write

http.get(url, {
  headers: { header1: "value1", header2: "value2" },
});

to call http.get with the url we want to make the request to.

And we set the headers property to an object with the request header keys and values.

Conclusion

To fix HTTP Angular HttpClient not sending the header, we create a header object.

Sometimes, we want to detect a route change in Angular.

In this article, we’ll look at how to detect a route change in Angular.

How to detect a route change in Angular?

To detect a route change in Angular, we use router.events.subscribe.

For instance, we write

import { Component } from "@angular/core";
import {
  Router,
  Event,
  NavigationStart,
  NavigationEnd,
  NavigationError,
} from "@angular/router";

@Component({
  selector: "app-root",
  template: `<router-outlet></router-outlet>`,
})
export class AppComponent {
  constructor(private router: Router) {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
        // ...
      }

      if (event instanceof NavigationEnd) {
        // ...
      }

      if (event instanceof NavigationError) {
        // ...
        console.log(event.error);
      }
    });
  }
}

to call this.router.events.subscribe with a callback that listens for navigation events.

In it, we check if event is an instance of NavigationStart, which is emitted when navigation starts.

Also, we check if event is an instance of NavigationEnd, which is emitted when navigation ends.

And we check if event is an instance of NavigationError, which is emitted when there’s an error during navigation.

Conclusion

To detect a route change in Angular, we use router.events.subscribe.

Sometimes, we want to bind select element to object in Angular.

In this article, we’ll look at how to bind select element to object in Angular.

How to bind select element to object in Angular?

To bind select element to object in Angular, we can assign our object to [ngValue].

For instance, we write

<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{ c.name }}</option>
</select>

to bind our selected drop down value to selectedValue with [(ngModel)].

Then we render the options with *ngFor.

And we assign the value of each option to an object with

[ngValue]="c"

Then selectedValue would be the object selected from the drop down.

Conclusion

To bind select element to object in Angular, we can assign our object to [ngValue].