Category: JavaScript

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.

Sometimes, we want to set base href dynamically with Angular.

In this article, we’ll look at how to set base href dynamically with Angular.

How to set base href dynamically with Angular?

To set base href dynamically with Angular, we can add an entry to the providers array in NgModule.

For instance, we write

import { APP_BASE_HREF } from "@angular/common";
import { NgModule } from "@angular/core";

@NgModule({
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: "/" + (window.location.pathname.split("/")[1] || ""),
    },
  ],
})
export class AppModule {}

to call @NgModule with an object that has the providers property.

In the providers array, we add an entry to set the base element’s href attribute dynamically with

{
   provide: APP_BASE_HREF,
   useValue: "/" + (window.location.pathname.split("/")[1] || ""),
}

We set the base element’s href attribute to the value of useVale.

Conclusion

To set base href dynamically with Angular, we can add an entry to the providers array in NgModule.

Sometimes, we want to fix http.post() is not sending the request with Angular.

In this article, we’ll look at how to fix http.post() is not sending the request with Angular.

How to fix http.post() is not sending the request with Angular?

To fix http.post() is not sending the request with Angular, we call subscribe on the observable returned with http.post.

For instance, we write

import { Component, OnInit } from "@angular/core";
import { Http, RequestOptions, Headers } from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/catch";
import { Post } from "./model/post";
import { Observable } from "rxjs/Observable";

@Component({
  templateUrl: "./test.html",
  selector: "test",
})
export class NgFor implements OnInit {
  posts: Observable<Post[]>;
  model: Post = new Post();
  //...
  constructor(private http: Http) {}

  ngOnInit() {
    this.list();
  }

  private list() {
    this.posts = this.http
      .get("http://localhost:3000/posts")
      .map((val, i) => <Post[]>val.json());
  }

  public addNewRecord() {
    const headers = new Headers({ "Content-Type": "application/json" });
    const options = new RequestOptions({ headers });

    this.http
      .post("http://localhost:3000/posts", this.model, options)
      .subscribe();
  }
}

to call this.http.post in addNewRecord to make a POST request to http://localhost:3000/posts.

We call it with the request body and request options as the 2nd and last arguments.

Then we call subscribe to make request.

We can call subscribe with a callback that has the request response as the parameter to get the response.

Conclusion

To fix http.post() is not sending the request with Angular, we call subscribe on the observable returned with http.post.