Category: Angular

Sometimes, we want to get query params from URL in Angular.

In this article, we’ll look at how to get query params from URL in Angular.

How to get query params from URL in Angular?

To get query params from URL in Angular, we can call the this.activatedRoute.queryParams.subscribe method.

For instance, we write

import { Router, ActivatedRoute, Params } from "@angular/router";
import { OnInit, Component } from "@angular/core";

@Component({
  //...
})
export class MyComponent implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe((params) => {
      const userId = params["userId"];
      console.log(userId);
    });
  }
}

to call this.activatedRoute.queryParams.subscribe with a callback that gets the query parameters.

The callback is called whenever the query parameters change.

And we get the query parameter with the key as we did by using the userId key to get the value of the userId query parameter.

Conclusion

To get query params from URL in Angular, we can call the this.activatedRoute.queryParams.subscribe method.

Sometimes, we want to fix Cannot find a differ supporting object ‘[object Object]’ with Angular.

In this article, we’ll look at how to fix Cannot find a differ supporting object ‘[object Object]’ with Angular.

How to fix Cannot find a differ supporting object ‘[object Object]’ with Angular?

To fix Cannot find a differ supporting object ‘[object Object]’ with Angular, we should check if our object is an array.

For instance, if we have

<option *ngFor="let option of setting.options" [value]="option">
  {{ option }}
</option>

then we should make sure that setting.options is an array.

Conclusion

To fix Cannot find a differ supporting object ‘[object Object]’ with Angular, we should check if our object is an array.

Sometimes, we want to detect changes in an array from an @input property with Angular.

In this article, we’ll look at how to detect changes in an array from an @input property with Angular.

How to detect changes in an array from an @input property with Angular?

To detect changes in an array from an @input property with Angular, we can get the latest value in the ngDoCheck method.

For instance, we write

//...
export class AppComponent implements OnInit {
  constructor(private iterableDiffers: IterableDiffers) {
    this.iterableDiffer = iterableDiffers.find([]).create(null);
  }

  ngDoCheck() {
    const changes = this.iterableDiffer.diff(this.inputArray);
    if (changes) {
      console.log("Changes detected!");
    }
  }
  //...
}

to inject the IterableDiffers dependency into our component.

Then we write this.iterableDiffer.diff(this.inputArray) to check if there’re any changes.

If changes is defined, then there’re changes.

Conclusion

To detect changes in an array from an @input property with Angular, we can get the latest value in the ngDoCheck method.

Sometimes, we want to dynamically load external JavaScript file from Angular component.

In this article, we’ll look at how to dynamically load external JavaScript file from Angular component.

How to dynamically load external JavaScript file from Angular component?

To dynamically load external JavaScript file from Angular component, we can create script tags dynamically and attach it to the body.

For instance, we write

//...
export class AppComponent implements OnInit {
  ngOnInit() {
    this.loadScript("http://www.some-library.com/library.js");
    this.loadScript("../assets/js/my-library.js");
  }

  public loadScript(url: string) {
    const body = <HTMLDivElement>document.body;
    const script = document.createElement("script");
    script.innerHTML = "";
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }
}

to add the loadScript method that creates the script element with document.createElement.

Then we set a few attributes of the script element with

script.innerHTML = "";
script.src = url;
script.async = false;
script.defer = true;

Then we call body.appendChild with script to attach the script element into the body element.

Conclusion

To dynamically load external JavaScript file from Angular component, we can create script tags dynamically and attach it to the body.

Sometimes, we want to set dropdown options default value with Angular.

In this article, we’ll look at how to set dropdown options default value with Angular.

How to set dropdown options default value with Angular?

To set dropdown options default value with Angular, we can add the selected attribute to the default option in the select.

For instance, we write

<select name="types" id="types" [(ngModel)]="model.type" #type="ngModel">
  <option class="" disabled selected value="undefined">Select an Option</option>
  <option *ngFor="let item of courseTypes; let x = index" [ngValue]="type.id">
    {{ item.name }}
  </option>
</select>

to make the first option the default one by adding the selected attribute to the option.

Conclusion

To set dropdown options default value with Angular, we can add the selected attribute to the default option in the select.