Category: JavaScript

Sometimes, we want to use pipes within ngModel on input elements in Angular.

In this article, we’ll look at how to use pipes within ngModel on input elements in Angular.

How to use pipes within ngModel on input elements in Angular?

To use pipes within ngModel on input elements in Angular, we can use separate [(ngModel)] into [ngModel] and (ngModelChange).

For instance, we write

<input
  [ngModel]="item.value | useMyPipeToFormatThatValue"
  (ngModelChange)="item.value = $event"
  name="inputField"
  type="text"
/>

to apply the useMyPipeToFormatThatValue pipe to item.value in ngModel.

Then we handle our input change events in ngModelChange.

This is because we can’t use template expression operators in template statements, which are directives that are wrapped in parentheses.

Conclusion

To use pipes within ngModel on input elements in Angular, we can use separate [(ngModel)] into [ngModel] and (ngModelChange).

Sometimes, we want to set the src attribute of an iframe without causing the unsafe value exception in Angular.

In this article, we’ll look at how to set the src attribute of an iframe without causing the unsafe value exception in Angular.

How to set the src attribute of an iframe without causing the unsafe value exception in Angular?

To set the src attribute of an iframe without causing the unsafe value exception in Angular, we can create our own pipe that calls bypassSecurityTrustResourceUrl.

For instance, we write

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({ name: "safe" })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

to create SafePipe pipe class.

In it, we have the transform method that calls this.sanitizer.bypassSecurityTrustResourceUrl with url to make Angular ignore safety checks on the url.

The in we add SafePipe into our NgModule with

@NgModule({
  declarations: [
    //...
    SafePipe,
  ],
})
class Foo {
  //...
}

Then we can use it by writing

<iframe width="100%" height="300" [src]="url | safe"></iframe>

in our template.

We use the name value of the pipe to use it.

Conclusion

To set the src attribute of an iframe without causing the unsafe value exception in Angular, we can create our own pipe that calls bypassSecurityTrustResourceUrl.

Sometimes, we want to proxy API requests to another server with angular-cli server.

In this article, we’ll look at how to proxy API requests to another server with angular-cli server.

How to proxy API requests to another server with angular-cli server?

To proxy API requests to another server with angular-cli server, we can create a proxy.config.json file with a few settings.

For instance, we write

{
  "/api": {
    "target": "http://api.foo.com",
    "secure": false
  }
}

to proxy the /api URL to http://api.foo.com in proxy.config.json.

Then in angular.json, we add

{
  //...
  "architect": {
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "your-application-name:build",
        "proxyConfig": "src/proxy.conf.json"
      }
    }
  }
  //...
}

to add the architect property with the proxy.conf.json that we added set as the value of proxyConfig.

Then we can run ng server as usual to use the proxy config.

Conclusion

To proxy API requests to another server with angular-cli server, we can create a proxy.config.json file with a few settings.

Sometimes, we want to avoid error if don’t check if {{object.field}} exists with Angular.

In this article, we’ll look at how to avoid error if don’t check if {{object.field}} exists with Angular.

How to avoid error if don’t check if {{object.field}} exists with Angular?

To avoid error if don’t check if {{object.field}} exists with Angular, we can use the safe navigation operator in our template.

For instance, we write

{{ category?.name }}

to add the safe navigation operator with ?..

Then we don’t have to check if category is defined before we try to get its name property.

If the object is an array, then we check if it’s defined with

{{ records && records[0] }}

where records is an array.

We can also use the safe navigation operator with the async pipe with

{{ (chapters | async)?.length }}

where chapter is a promise or observable.

The safe navigation operator works with ngModel.

To use it, we write

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

to bind to details?.firstname with ngModel and ngModelChange.

Conclusion

To avoid error if don’t check if {{object.field}} exists with Angular, we can use the safe navigation operator in our template.

Sometimes, we want to iterate over object in Angular.

In this article, we’ll look at how to iterate over object in Angular.

How to iterate over object in Angular?

To iterate over object in Angular, we can use the keyvalue pipe.

For instance, we write

<div *ngFor="let item of myObject | keyvalue">
  Key: <b>{{ item.key }}</b> and Value: <b>{{ item.value }}</b>
</div>

to loop through the entries in myObject by using the keyvalue pipe with *ngFor.

Then we get the key’s value from item.key and the value’s value with item.value.

We can also add a function to sort the keys before we do the iteration.

For instance, we write

<div *ngFor="let item of myObject | keyvalue: sortKeys">
  Key: <b>{{ item.key }}</b> and Value: <b>{{ item.value }}</b>
</div>

to sort the keys with sortKeys before we iterate.

In our component class, we define it with

sortKeys = (a, b) => {
  return a.key > b.key ? -1 : 1;
};

Conclusion

To iterate over object in Angular, we can use the keyvalue pipe.