Thumbs Up / Thumbs Down *ngIf

Question

So I have an *ngFor list of songs. I would like for the user to click on a thumb, and then for that thumb to be higlighted, then set a propety whether the song is thumbs up, or thumbs down based off that click event. I would like for the thumb to turn blue when the clicked property is true.

This is what it looks like:

TypeScript:

  thumbsVisible: boolean = false;
  thumb: string = ""

click(song){
 console.log("Thumb is: " + song.thumb)
}

HTML:

<ul> <!-- Each song on the album -->
<li class="song-block"
    *ngFor='let song of songsToDisplay'
    (click)="getSong(song)"
    (mouseenter)="song.thumbsVisible=true"
    (mouseleave)="song.thumbsVisible=false">
  <div class="song-card"
       (click)="addPlay(song)">
    <p *ngIf="!song.isPlaying"
        class="song-number">{{song.tracknumber}}</p>
    <i *ngIf="song.isPlaying" class="fa fa-play"></i>
    <p class="song-name">{{song.name}}</p>
    <p class="song-length">{{song.length}}</p>
    <div class="thumbs"
         *ngIf="song.thumbsVisible"> <!-- Thumbs section -->
      <i class="fa fa-thumbs-up fa-lg"
         (click)="song.thumb='up'"
         (click)="click(song)"></i>
      <i class="fa fa-thumbs-down fa-lg"
         (click)="song.thumb='down'"
         (click)="click(song)"></i>
    </div> ... 
</ul>

Can't you use like `[class.song-playing]="true"` or `[ngClass]`? — Edric, Mar 07 '18 at 08:02
What is your problem? The gif is very small. You should only use one `(click)=click(song)` and inside this function you can set `song.thumb="up/down"` — ochs.tobi, Mar 07 '18 at 08:04
@Edric I can use [ngClass], but I dont know how to make it dynamic. I am trying something like (click) = "[ngClass]='''selected'" but that doesnt work ahh — Eddie Taliaferro, Mar 07 '18 at 21:13
@ochs.tobi my problem is programming the thumbs up / thumbs down feature of this app. I cannot figure out how to add a class when i click on each icon, then i have to alternate between whether or not each song is a thumbs up or a thumbs down — Eddie Taliaferro, Mar 07 '18 at 21:15
You can set classes to active with this `[class.active]="myProperty"`. This will add the class "active" when the property returns true. — ochs.tobi, Mar 08 '18 at 06:42

score 0 · Answer 1 · answered Mar 08 '18 at 06:59

Ok I think I got your problem. You have to add/remove class based on whether a property is true or false. You can set this property for each song like this:

Html:

<i class="fa fa-thumbs-down fa-lg" [class.thumbDown]="song.thumb" (click)="click(song, "down")"></i>
<i class="fa fa-thumbs-up fa-lg" [class.thumbUp]="!song.thumb" (click)="click(song, "up")"></i>

Typescript

//Typescript
click(song, thumb) {
  if(thumb = "up") {
    //Set song.thumb = true;
  } 
  if(thumb = "down") {
    //Set song.thumb = false;
  }
}

CSS

.thumbUp{
  //Style if thumb is up
}
.thumbDown{
  //Style if thumb is down
}

Thumbs Up / Thumbs Down *ngIf

1 Answers1