Category: Angular

Sometimes, we want to add innerHTML styling with Angular.

In this article, we’ll look at how to add innerHTML styling with Angular.

How to add innerHTML styling with Angular?

To add innerHTML styling with Angular, we call sanitizer.bypassSecurityTrustHtml to allow style tag code to be rendered.

For instance, we write

import { DomSanitizer } from "@angular/platform-browser";

@Component({
  // ...
})
class SomeComponent {
  constructor(private sanitizer: DomSanitizer) {}

  transformYourHtml(htmlTextWithStyle) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
  }
}

to call this.sanitizer.bypassSecurityTrustHtml with the htmlTextWithStyle HTML string to return the HTML string that can be rendered in the template.

The returned HTML can include style attribute and elements so we can render the styles with [innerHTML].

Conclusion

To add innerHTML styling with Angular, we call sanitizer.bypassSecurityTrustHtml to allow style tag code to be rendered.

Sometimes, we want to go back last page with Angular.

In this article, we’ll look at how to go back last page with Angular.

How to go back last page with Angular?

To go back last page with Angular, we can call the location.back method.

For instance, we write

import { Component } from "@angular/core";
import { Location } from "@angular/common";

@Component({
  // ...
})
class SomeComponent {
  constructor(private location: Location) {}

  backClicked() {
    this.location.back();
  }
}

to inject location in the `constructor.

Then in the onClick method, we call this.location.back to go back to the last page.

How to go back last page with Angular?

To go back last page with Angular, we can call the location.back method.

Sometimes, we want to determine previous page URL in Angular.

In this article, we’ll look at how to determine previous page URL in Angular.

How to determine previous page URL in Angular?

To determine previous page URL in Angular, we can listen for navigation events.

For instance, we write

import { filter, pairwise } from "rxjs/operators";

to import the filter and pairwise operator functions.

Then we write

this.router.events
  .pipe(
    filter((evt: any) => evt instanceof RoutesRecognized),
    pairwise()
  )
  .subscribe((events: RoutesRecognized[]) => {
    console.log("previous url", events[0].urlAfterRedirects);
    console.log("current url", events[1].urlAfterRedirects);
  });

to call this.router.events.pipe to return events that are instance of the RoutesRecognized class.

We call pairwise to return the current and previous navigation events.

Then we call subscribe with a callback to get both events’ objects and get the URL with urlAfterRedirects.

Conclusion

To determine previous page URL in Angular, we can listen for navigation events.

Sometimes, we want to pass URL query string to a HTTP request on Angular.

In this article, we’ll look at how to pass URL query string to a HTTP request on Angular.

How to pass URL query string to a HTTP request on Angular?

To pass URL query string to a HTTP request on Angular, we use httpClient.

For instance, we write

const data = { limit: "2" };
this.httpClient.get<any>(apiUrl, { params: data });

to call httpClient.get with the apiUrl we want to make the request to.

Then 2nd argument is an object wth the params property set to data.

The data key-value pairs will be automatically appended to the URL as query string parameters.

Conclusion

To pass URL query string to a HTTP request on Angular, we use httpClient.

Sometimes, we want to use jQuery Plugin with Angular.

In this article, we’ll look at how to use jQuery Plugin with Angular.

How to use jQuery Plugin with Angular?

To use jQuery Plugin with Angular, we can install the jquery package with its TypeScript type definitions.

To install them, we run

npm install jquery
npm install -D @types/jquery

Then we use it by writing

import * as $ from "jquery";

//...
export class JqueryComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    $(window).click(() => {
      alert("ok");
    });
  }
}

to import jquery with

import * as $ from "jquery";

Then we use it with

$(window).click(() => {
  alert("ok");
});

Conclusion

To use jQuery Plugin with Angular, we can install the jquery package with its TypeScript type definitions.