Category: Angular

Sometimes, we want to fix ng is not recognized as an internal or external command with Angular.

In this article, we’ll look at how to fix ng is not recognized as an internal or external command with Angular.

How to fix ng is not recognized as an internal or external command with Angular?

To fix ng is not recognized as an internal or external command with Angular, we can run ng with npm.

To run it, we run

npm run ng <command>

to run ng with the <command> we want.

We replace <command> with the actual command we want to run with ng.

Conclusion

To fix ng is not recognized as an internal or external command with Angular, we can run ng with npm.

Sometimes, we want to fix Cannot read property ‘name’ of undefined with Angular.

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

How to fix Cannot read property ‘name’ of undefined with Angular?

To fix Cannot read property ‘name’ of undefined with Angular, we can use the safe navigation operator.

For instance, we write

<input
  [ngModel]="selectedHero?.name"
  (ngModelChange)="selectedHero.name = $event"
/>

to set [ngModel] to selectedHero?.name.

We use the safe navigation operator (?.) to stop errors from being thrown when selectedHero is null or undefined.

Conclusion

To fix Cannot read property ‘name’ of undefined with Angular, we can use the safe navigation operator.

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.