Author: John Au-Yeung

Sometimes, we want to get current value of RxJS Subject or Observable.

In this article, we’ll look at how to get current value of RxJS Subject or Observable.

How to get current value of RxJS Subject or Observable?

To get current value of RxJS Subject or Observable, we can use the first method.

For instance, we write

const observable = of("foo");

const hasValue = (value: any) => {
  return value !== null && value !== undefined;
};

const getValue = <T>(observable: Observable<T>): Promise<T> => {
  return observable.pipe(filter(hasValue), first()).toPromise();
};


//...

to create an of observable.

Then we create the getValue function that calls observable.pipe with the filter and first operators to get the first value from the observable that isn’t null or undefined.

And then we call toPromise to return a promise with the value returned by the observable.

Then in an async function, we write

const result = await getValue(observable);

to get the value.

Conclusion

To get current value of RxJS Subject or Observable, we can use the first method.

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.