Categories
Angular Answers

How to use ::ng-deep with Angular?

Sometimes, we want to use ::ng-deep with Angular.

In this article, we’ll look at how to use ::ng-deep with Angular.

How to use ::ng-deep with Angular?

To use ::ng-deep with Angular, we can add it to a style file and use it to style to style child component styles in the parent component.

For instance, we write

<div
  class="overview tab-pane"
  id="overview"
  role="tabpanel"
  [innerHTML]="project?.getContent('DETAILS')"
></div>

to add a div with dynamic GHTML rendered from project?.getContent('DETAILS') string.

Then we style the dynamic HTML with

.overview {
  ::ng-deep {
    p {
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

Conclusion

To use ::ng-deep with Angular, we can add it to a style file and use it to style to style child component styles in the parent component.

Categories
Angular Answers

How to get query params from URL in 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.

Categories
Angular Answers

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

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.

Categories
Angular Answers

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

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.

Categories
Angular Answers

How to dynamically load external JavaScript file from Angular component?

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.