Retrigger http GET call in Angular

Let’s implement a http get call that can be “refreshed”, or recalled again so it fetches the data again. You might do some updates through SQL but because you already loaded the data, you need to get it again. This can be achieved with rxjs method switchMapTo.

Have your variable of the Observable type, I’ll call it myData$ with the type of Object.

All of this is inside a service I called myService.

Let’s first declare a property like this inside our myService class:

myData$: Observable<Object>;

Then another property we name event$ of the type BehaviorSubject with the default value of true.

  event$ = new BehaviorSubject(true);

Then inside my constructor I’ll declare myData$ to be equal to the switchMapTo like this:

    this.myData$ = this.event$.pipe(
      switchMapTo(this.getMyData())
    );
  getMyData(): Observable<Object> {
    return this._http.get(environment.APIPath + "/getData", {
      //headers: .. etc
    });
  }

Then we have our main getMyData() function which gets our through a http get call (using Angular’s HttpClient). Replace the URL parameter to whatever you are getting here, I myself have a URL of http://localhost/api/getData (the environment variable is http://localhost/api and the last part is the API function URL /getData). This will be called anytime event$ gets an incoming value. Let’s create the refresh/refetch method like this for event$:

  refetchData() {
    this.event$.next(true);
  }

Now we can call the refetchData() and we wil push in the boolean true value so that the BehaviorSubject is triggered and thus getMyData gets called again and our myData$ now contains the latest http GET call result. All left to do is to subscribe to it (in this case we save it to a property we call myData)!

 this.myService.myData$.subscribe((s:any) => {
        this.myData = s;
      });

Using enums in Angular with NgModel

Enums are really nice I think because you can have it to keep static data structured and easily work with it. Let us create a new enum type called LanguageTypes, it will hold some languages, we will use it in another class to set the language for that object. We will have a select element to try the enum out with the help of the ngModel property which binds the value from the enum to our object.

First of all, create a new file called language.types.ts or something similar in your Angular project under your src folder. Fill it with values you want for each enum member. Let’s go with numbers.

export enum LanguageTypes {
    English = 0,
    Swedish = 1,
  }

Okay good, we got some languages! Now, let’s create a Select form element to try it out, inside your component, have a myObject property or similar.

<div class="form-group">
  <label for="language">Language</label>
  <select [(ngModel)]="myObject.language" class="form-control" name="language" id="language">
    <option value="0">English</option>
    <option value="1">Swedish</option>
  </select>
</div>

Pretend your myObject is of a class that contains the property language like this:

import { LanguageTypes } from "./languageTypes.model";

export class MyCoolObject {
    name: string;
    language: LanguageTypes = LanguageTypes.Custom;
    constructor(name: string, lang: LanguageTypes = LanguageTypes.Swedish) {
        this.name = name;
        this.language = lang;
    }
}

Then now we are taking use of the LanguageType enum! Inside our class we have a constructor that take the default language Swedish (value 1), and we can easily change these up because enum is great in that way. We can take it a step further and replace the hardcoded values in our Select list to use the actual enum as well.

Add in your component.ts file a getter:

  public get language(): typeof LanguageTypes {
    return LanguageTypes; 
  }

Now, whenever we call the language getter property we will retrieve the enum type and can use it as normal, so replace the hard coded values 0 1 to make use of the getter instead.

<div class="form-group">
  <label for="language">Language</label>
  <select [(ngModel)]="myObject.language" class="form-control" name="language" id="language">
    <option [value]="language.English">English</option>
    <option [value]="language.Swedish">Swedish</option>
  </select>
</div>

And now our Angular app is using our own enum type.