Category: Angular

Sometimes, we want to load JSON from local file with http.get() in Angular and TypeScript.

In this article, we’ll look at how to load JSON from local file with http.get() in Angular and TypeScript.

How to load JSON from local file with http.get() in Angular and TypeScript?

To load JSON from local file with http.get() in Angular and TypeScript, we call get with the relative path to the JSON.

For instance, we write

//...
export class AppComponent {
  private URL = "./assets/navItems.json";
  //...

  constructor(private httpClient: HttpClient) {}

  ngOnInit(): void {
    this.httpClient
      .get(this.URL)
      .subscribe((navItems) => (this.navItems = navItems));
  }
}

to call httpClient.get with the URL to the JSON.

Then we call subscribe with a callback to get the navItems response and set it as the value of this.navItems.

Conclusion

To load JSON from local file with http.get() in Angular and TypeScript, we call get with the relative path to the JSON.

Sometimes, we want to print HTML template in Angular and TypeScript.

In this article, we’ll look at how to print HTML template in Angular and TypeScript.

How to print HTML template in Angular and TypeScript?

To print HTML template in Angular and TypeScript, we call the window.print method.

For instance, we write

<div class="doNotPrint">Header is here.</div>

<div>hello world</div>

<div class="doNotPrint">
  my footer is here.
  <button (click)="onPrint()">Print</button>
</div>

to add some content in the template.

Then we write

//...
export class AppComponent {
  //...
  onPrint() {
    window.print();
  }
}

to add the onPrint method in our component.

It calls window.print to open the print dialog.

Then we write

@media print {
  .doNotPrint {
    display: none !important;
  }
}

to hide the stuff with the doNotPrint class in the printout.

Conclusion

To print HTML template in Angular and TypeScript, we call the window.print method.

Sometimes, we want to handle window scroll event in Angular and TypeScript.

In this article, we’ll look at how to handle window scroll event in Angular and TypeScript.

How to handle window scroll event in Angular and TypeScript?

To handle window scroll event in Angular and TypeScript, we create a custom directive.

For instance, we write

export class WindowScrollDirective {
  ngOnInit() {
    window.addEventListener("scroll", this.scroll, true); 
  }

  ngOnDestroy() {
    window.removeEventListener("scroll", this.scroll, true);
  }

  scroll = (event): void => {
    //...
  };
}

to create the WindowScrollDirective directive class.

In it, we call window.addEventListener to listen to the window’s scroll event when the directive mounts.

scroll is called when we scroll.

When we destroy the directive, we call removeEventListener to remove the scroll listener.

Conclusion

To handle window scroll event in Angular and TypeScript, we create a custom directive.

Sometimes, we want to set the Material date picker date format with Angular and TypeScript.

In this article, we’ll look at how to set the Material date picker date format with Angular and TypeScript.

How to set the Material date picker date format with Angular and TypeScript?

To set the Material date picker date format with Angular and TypeScript, we create a custom date adapter.

For instance, we write

const MY_DATE_FORMATS = {
  parse: {
    dateInput: { month: "short", year: "numeric", day: "numeric" },
  },
  display: {
    dateInput: "input",
    monthYearLabel: { year: "numeric", month: "short" },
    dateA11yLabel: { year: "numeric", month: "long", day: "numeric" },
    monthYearA11yLabel: { year: "numeric", month: "long" },
  },
};

to define a constant with the date formats.

Then we write

export class MyDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
    if (displayFormat === "input") {
      let day = date.getDate();
      let month = date.getMonth() + 1;
      let year = date.getFullYear();
      return this._to2digit(day) + "/" + this._to2digit(month) + "/" + year;
    } else {
      return date.toDateString();
    }
  }

  private _to2digit(n: number) {
    return ("00" + n).slice(-2);
  }
}

to return the date string in the format we want.

Then we write

//...

@NgModule({
  //...
  providers: [
    { provide: DateAdapter, useClass: MyDateAdapter },
    { provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS },
  ],
  //...
})
export class AppModule {}

to add the adapter class and the object to our module.

Conclusion

To set the Material date picker date format with Angular and TypeScript, we create a custom date adapter.

Sometimes, we want to set response type as text while making HTTP call with Angular.

In this article, we’ll look at how to set response type as text while making HTTP call with Angular.

How to set response type as text while making HTTP call with Angular?

To set response type as text while making HTTP call with Angular, we set the responseType property.

For instance, we write

this.http
  .post(
    "http://localhost:8080/order/addtocart",
    { dealerId: 13, createdBy: "-1", productId, quantity },
    { headers, responseType: "text" }
  )
  .pipe(catchError(this.errorHandlerService.handleError));

to call http.post to make a post request.

We set responseType to 'text' so we get a string as the response body value.

Conclusion

To set response type as text while making HTTP call with Angular, we set the responseType property.