Category: JavaScript

Sometimes, we want to fix Error: TypeError: Cannot read property ‘…’ of undefined with Angular.

In this article, we’ll look at how to fix Error: TypeError: Cannot read property ‘…’ of undefined with Angular.

How to fix Error: TypeError: Cannot read property ‘…’ of undefined with Angular?

To fix Error: TypeError: Cannot read property ‘…’ of undefined with Angular, we should make sure the variable we’re rendering is defined.

For instance, we write

{{ foo?.bar?.name }}

to use the safe navigation operator if foo and bar are objects.

And if we want to do the same check for arrays, we can use *ngIf by writing something like

<div *ngIf="arr && arr.length > 0">
  {{ arr[0].name }}
</div>

We use arr && arr.length > 0 to make sure arr is defined and it has length bigger than 0.

Conclusion

To fix Error: TypeError: Cannot read property ‘…’ of undefined with Angular, we should make sure the variable we’re rendering is defined.

Sometimes, we want to call component function from outside the app with Angular.

In this article, we’ll look at how to call component function from outside the app with Angular.

How to call component function from outside the app with Angular?

To call component function from outside the app with Angular, we need to use NgZone.

For instance, we write

import { Component, NgZone, OnInit, OnDestroy } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "app.component.html",
})
export class AppComponent implements OnInit, OnDestroy {
  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    window.my = window.my || {};
    window.my.namespace = window.my.namespace || {};
    window.my.namespace.publicFunc = this.publicFunc.bind(this);
  }

  ngOnDestroy() {
    window.my.namespace.publicFunc = null;
  }

  publicFunc() {
    this.ngZone.run(() => this.privateFunc());
  }

  privateFunc() {
    // ...
  }
}

to inject NgZone into our AppComponent.

Then we define the publicFunc method that calls this.ngZone.run with a callback that calls this.privateFunc.

Next, in ngOnInit, we set window.my.namespace.publicFunc to this.publicFunc.bind(this) so that publicFunc is exposed to the outside with the component as the value of this inside publicFunc.

Then we can call publicFunc outside our app with

my.namespace.publicFunc()

Conclusion

To call component function from outside the app with Angular, we need to use NgZone.

Sometimes, we want to convert a promise to an observable with Rxjs.

In this article, we’ll look at how to convert a promise to an observable with Rxjs.

How to convert a promise to an observable with Rxjs?

To convert a promise to an observable with Rxjs, we can use the from function.

For instance, we write

import { from } from "rxjs";

//...

const observable = from(promise);

to call from with the promise we want to convert to an observable.

A new observable will be returned and it outputs the resolve value of the promise.

Conclusion

To convert a promise to an observable with Rxjs, we can use the from function.

Sometimes, we want to iterate object keys using *ngFor in Angular.

In this article, we’ll look at how to iterate object keys using *ngFor in Angular.

How to iterate object keys using *ngFor in Angular?

To iterate object keys using *ngFor in Angular, we can use the keyvalue pipe.

For instance, we write

@Component({
  selector: "keyvalue-pipe",
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{ item.key }}:{{ item.value }}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{ item.key }}:{{ item.value }}
    </div>
  </span>`,
})
export class KeyValuePipeComponent {
  object: { [key: number]: string } = { 2: "foo", 1: "bar" };
  map = new Map([
    [2, "foo"],
    [1, "bar"],
  ]);
}

to add use the keyvalue with *ngFor.

We use it to render entries in objects and maps.

And we get the key from the key property and the value from value.

Conclusion

To iterate object keys using *ngFor in Angular, we can use the keyvalue pipe.

Sometimes, we want to upgrade Angular CLI to the latest version.

In this article, we’ll look at how to upgrade Angular CLI to the latest version.

How to upgrade Angular CLI to the latest version?

To upgrade Angular CLI to the latest version, we uninstall and install a few packages.

We run

npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

to uninstall the current @angular/cli package and install the latest version of it.

We can also remove everything in node_modules and then install the latest version by running

rm -rf node_modules
npm uninstall --save-dev @angular/cli
npm install --save-dev @angular/cli@latest
npm install

Conclusion

To upgrade Angular CLI to the latest version, we uninstall and install a few packages.