Category: Angular

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.

Sometimes, we want to inject window into a service with Angular.

In this article, we’ll look at how to inject window into a service with Angular.

How to inject window into a service with Angular?

To inject window into a service with Angular, we can inject document into our service.

Then we get window from document.

For instance, we write

import { Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";

export class MyClass {
  private window: Window;

  constructor(@Inject(DOCUMENT) private document: Document) {
    this.window = this.document.defaultView;
  }

  foo() {
    console.log(this.document);
    console.log(this.window);
  }
}

to inject document with @Inject(DOCUMENT) private document: Document in the constructor signature.

Then we get window from this.document.defaultView in the constructor.

Conclusion

To inject window into a service with Angular, we can inject document into our service.

Then we get window from document.

Sometimes, we want to add click binding to HTML rendered with innerHtml with Angular.

In this article, we’ll look at how to add click binding to HTML rendered with innerHTML with Angular.

How to add click binding to HTML rendered with innerHTML with Angular?

To add click binding to HTML rendered with innerHTML with Angular, we can add a click event listener with plain JavaScript.

For instance, we write

elementRef.nativeElement.querySelector("a").addEventListener("click", () => {
  //...
});

to get element ref to the element that has the innerHTML binding with elementRef.nativeElement.

Then we call querySelector on it to get the anchor element that we want to add the click listener for.

And then we call addEventListener to add the click event listener.

Conclusion

To add click binding to HTML rendered with innerHTML with Angular, we can add a click event listener with plain JavaScript.

Sometimes, we want to add debounce with Angular.

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

How to add debounce with Angular?

To add debounce with Angular, we can use the subject.

For instance, we write

<input [ngModel]="model" (ngModelChange)="changed($event)" />

to add an input in our template.

We call changed if the input value is changed.

Then in the component class, we write

import { Subject } from "rxjs/Subject";
import { Component } from "@angular/core";
import "rxjs/add/operator/debounceTime";

export class ViewComponent {
  model: string;
  modelChanged: Subject<string> = new Subject<string>();

  constructor() {
    this.modelChanged
      .debounceTime(300)
      .distinctUntilChanged()
      .subscribe((model) => (this.model = model));
  }

  changed(text: string) {
    this.modelChanged.next(text);
  }
}

to create the modelChanged subject.

In the constructor, we call debounceTime to add the debounce in milliseconds.

And then we call distinctUntilChanged to emit the value only if it’s difference from the previous one.

Then we call subscribe with a callback to listen for the emitted value and set the value of this.model to the emitted value.

Next, in changed, we call this.modelChanged.next with text to emit the latest input value.

Conclusion

To add debounce with Angular, we can use the subject.