Category: JavaScript

Sometimes, we want to inject window into a service with Angular.

In this article, we’ll look at how to inject window into a service with Angular.

How to inject window into a service with Angular?

To inject window into a service with Angular, we can inject document into our service.

Then we get window from document.

For instance, we write

import { Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";

export class MyClass {
  private window: Window;

  constructor(@Inject(DOCUMENT) private document: Document) {
    this.window = this.document.defaultView;
  }

  foo() {
    console.log(this.document);
    console.log(this.window);
  }
}

to inject document with @Inject(DOCUMENT) private document: Document in the constructor signature.

Then we get window from this.document.defaultView in the constructor.

Conclusion

To inject window into a service with Angular, we can inject document into our service.

Then we get window from document.

Sometimes, we want to add click binding to HTML rendered with innerHtml with Angular.

In this article, we’ll look at how to add click binding to HTML rendered with innerHTML with Angular.

How to add click binding to HTML rendered with innerHTML with Angular?

To add click binding to HTML rendered with innerHTML with Angular, we can add a click event listener with plain JavaScript.

For instance, we write

elementRef.nativeElement.querySelector("a").addEventListener("click", () => {
  //...
});

to get element ref to the element that has the innerHTML binding with elementRef.nativeElement.

Then we call querySelector on it to get the anchor element that we want to add the click listener for.

And then we call addEventListener to add the click event listener.

Conclusion

To add click binding to HTML rendered with innerHTML with Angular, we can add a click event listener with plain JavaScript.

Sometimes, we want to add debounce with Angular.

In this article, we’ll look at how to add debounce with Angular.

How to add debounce with Angular?

To add debounce with Angular, we can use the subject.

For instance, we write

<input [ngModel]="model" (ngModelChange)="changed($event)" />

to add an input in our template.

We call changed if the input value is changed.

Then in the component class, we write

import { Subject } from "rxjs/Subject";
import { Component } from "@angular/core";
import "rxjs/add/operator/debounceTime";

export class ViewComponent {
  model: string;
  modelChanged: Subject<string> = new Subject<string>();

  constructor() {
    this.modelChanged
      .debounceTime(300)
      .distinctUntilChanged()
      .subscribe((model) => (this.model = model));
  }

  changed(text: string) {
    this.modelChanged.next(text);
  }
}

to create the modelChanged subject.

In the constructor, we call debounceTime to add the debounce in milliseconds.

And then we call distinctUntilChanged to emit the value only if it’s difference from the previous one.

Then we call subscribe with a callback to listen for the emitted value and set the value of this.model to the emitted value.

Next, in changed, we call this.modelChanged.next with text to emit the latest input value.

Conclusion

To add debounce with Angular, we can use the subject.

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.