CODEWITHSUNDEEP
htmlangular
bellotas
bellotas

Reputation: 2461

*ngIf depending on the visibility of another div - Angular

I am trying to display dynamically some images depending on the visibility of the other one. I have tried the following code:

    <div *ngFor="let badge of user.progress.unlockedBadges">
      <img id="{{i}}_unlockedImage" *ngIf="badge == achievement.payload.doc.id"
        src="../../../assets/icons/unlocked_link.png" height="48" width="48">
    </div>
    <img *ngIf="document.getElementById({{i}}+'_unlockedImage')" src="../../../assets/icons/locked_link.png"
      height="48" width="48">

but it does not work. Is it possible to do it somehow using just HTML? Regards.

Upvotes: 0

Views: 636

Answers (1)

The Fabio
The Fabio

Reputation: 6250

Adding pure JavaScript to the angular template will not work... specifically this:

*ngIf="document.getElementById({{i}}+'_unlockedImage')"

the variable must be in the angular component context for this to work.

in your component you could create a function

showLock() {
 return this.user.progress.unlockedBadges.filter(badge => badge === this.achievement.payload.doc.id).length === 0;
}

and change your view with

<img *ngIf="showLock()" src="../../../assets/icons/locked_link.png"
      height="48" width="48">

Upvotes: 1

Related Questions