Angular *ngIf with async pipe inner condtion based on the resulting model

Question

I'd be a happy man if someone could explain why the following is not working as expected please? The hasCreative is a boolean but regardless of its true/false value, the <li> is always displayed. Any suggestions would be great. Thank you.

<ng-container *ngIf="uiModel$ | async as model">
    <ul class="nav" style="padding-bottom: 30px;">
      <li *ngIf="model.hasCreative" class="nav-item">
        <a class="nav-link active" routerLinkActive="active" [routerLink]="['']">Home</a>
     </li>
   </ul>
</ng-container>

export class UserInterfaceModel {
  hasCreative: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class UserInterfaceService {
  user: CognitoUser;
  userLoggedIn = false;
  private userInterfaceModelSubject$: Subject<UserInterfaceModel> = new Subject();
  userInterfaceModel$ = this.userInterfaceModelSubject$.asObservable();

  constructor(private authService: AuthService) {
    combineLatest([this.authService.onUserLoaded$]).subscribe(([currentUser]) => {
      this.user = currentUser;
      this.userLoggedIn = true;
      this.buildUserInterfaceModel();
    });
  }

  buildUserInterfaceModel(){
    const model = new UserInterfaceModel();
    if (this.userLoggedIn && this.user !== null){
      model.hasCreative  = this.user.getSignInUserSession().getIdToken().payload.creative;
    }
    this.userInterfaceModelSubject$.next(model);
  }
}

I can only see this happening if model.hasCreative = 'false', instead of model.hasCreative = false — Poul Kruijt
– Poul Kruijt, Commented Aug 31, 2020 at 11:18
uiModel$: Observable<UserInterfaceModel>; constructor(private modalService: NgbModal, private authService: AuthService, private userInterfaceService: UserInterfaceService) { } ngOnInit(): void { this.uiModel$ = this.userInterfaceService.userInterfaceModel$; } — Nevnev
– Nevnev, Commented Aug 31, 2020 at 11:44
@Nevnev can you update your answer with how you UserInterfaceModel instance looks like. Because it's obvious the model.hasCreative is resolving to true. So it's either a string, or something else, but definitely not false — Poul Kruijt
– Poul Kruijt, Commented Aug 31, 2020 at 11:59

ng-hobby · Accepted Answer · 2020-08-31 11:38:04Z

1

Try using this:


<ng-container *ngIf="uiModel$ | async as model; else loading">
    <ul class="nav" style="padding-bottom: 30px;">
      <li *ngIf="model.hasCreative === true " class="nav-item">
        <a class="nav-link active" routerLinkActive="active" [routerLink]="['']">Home</a>
     </li>
   </ul>
</ng-container>

<ng-template #loading>
  Loading stuff...
</ng-template>

If loading template will render it means your Observable has no value. If it dosnt work too, try render the value of model.hasCreative by adding somethin like this:

<span>{{model.hasCreative}}<span>

out of <ul> tag to see if model.hasCreative has true/false value or not.

answered Aug 31, 2020 at 11:38

ng-hobby

2,2092 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nevnev Over a year ago

Thanks, i did try that and the span renders as true or false depending on what it is

ng-hobby Over a year ago

is your problem fixed?

Nevnev Over a year ago

thanks yes. I changed the way i set isCreative and it worked.

Nevnev Over a year ago

model.hasCreative = isCreative.toLocaleLowerCase() === 'true' ? true : false;

ng-hobby Over a year ago

So, it was a string. you said it's a boolean while it wasn't.

|

Collectives™ on Stack Overflow

Angular *ngIf with async pipe inner condtion based on the resulting model

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related