[Fixed] Angular query params as boolean type, not string

Issue

I’d like to pass a query parameter to an *ngIf but this keep evaluating to true due to being a string type. How do I change my query parameter to a boolean so it will evaluate as false?

The query param is ?paywall=true but is still true with the query ?paywall=false

component.ts

ngOnInit() {
    this.paywallQuery$ = this.route.queryParamMap.pipe(map(params => params.get('paywall')));
}

component.html

<div *ngIf="(paywallQuery$ | async)"> <-- always evaluates as true
</div>

Solution

Map the value to a boolean by performing a string comparison against 'true'.

ngOnInit() {
  this.paywallQuery$ = this.route.queryParamMap.pipe(
    map(params => {
      const value = params.get('paywall');
      return value ? value.toLocaleLowerCase() === 'true' : false;
    })
  );
}