Building a like/dislike feature in Angular

Question

Building a like/dislike feature in Angular

Here is a snippet of code I have that includes like and dislike buttons with font-awesome icons:

<ng-container *ngFor="let answer of question.answers">
    <p class="answers">{{answer.text}} <i class="fa fa-hand-o-left" (click)="likeDislike($event,answer.id,'fa-thumbs-up')"></i></p>
  </ng-container>

Additionally, there is a function:

likeDislike(event: any, answerId: string, haveClass: string) {
    const hasClass = event.target.classList.contains(haveClass);
    if (hasClass) {
      this.renderer.removeClass(event.target, 'fa-thumbs-up');
      this.renderer.addClass(event.target, 'fa-thumbs-down');
    } else {
      this.renderer.removeClass(event.target, 'fa-thumbs-down');
      this.renderer.addClass(event.target, 'fa-thumbs-up');
    }
  }

I feel like this code could be improved by creating a directive. Can someone assist me with that?

javascript angular typescript

Answer 1

Answer №1

You might consider placing it within a Component for added functionality with two-way binding.

Experience the feature in action

Take a look at this live demo on StackBlitz.

Implementation example

<app-fa-like [(liked)]='liked'></app-fa-like>

Component implementation

Please note: The styles and __ are included here for demonstration purposes only. Your app's Font Awesome integration should handle these aspects.

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-fa-like',
  template: `
    <i 
      class='fa'
      [class.fa-thumbs-up]='liked'
      [class.fa-thumbs-down]='!liked'
      (click)='toggle()'
    >__</i>`,
  styles: [`
  .fa.fa-thumbs-up{background: green;}
  .fa.fa-thumbs-down{background: red;}
  `]
})
export class LikeComponent{
  @Input('liked') liked = true;
  @Output() likedChange: EventEmitter<boolean> = new EventEmitter();
  toggle(): void {
    this.liked = !this.liked;
    this.likedChange.emit(this.liked);
  }
}

Answer 2

You might consider placing it within a Component for added functionality with two-way binding.

Experience the feature in action

Take a look at this live demo on StackBlitz.

Implementation example

<app-fa-like [(liked)]='liked'></app-fa-like>

Component implementation

Please note: The styles and __ are included here for demonstration purposes only. Your app's Font Awesome integration should handle these aspects.

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-fa-like',
  template: `
    <i 
      class='fa'
      [class.fa-thumbs-up]='liked'
      [class.fa-thumbs-down]='!liked'
      (click)='toggle()'
    >__</i>`,
  styles: [`
  .fa.fa-thumbs-up{background: green;}
  .fa.fa-thumbs-down{background: red;}
  `]
})
export class LikeComponent{
  @Input('liked') liked = true;
  @Output() likedChange: EventEmitter<boolean> = new EventEmitter();
  toggle(): void {
    this.liked = !this.liked;
    this.likedChange.emit(this.liked);
  }
}

Answer 3

Answer №2

When working with Angular, the possibilities are endless. It's hard to say if one option is superior to another. Here are a few suggestions:

Utilize ngClass
Implement *ngIf

Try using an Angular variable. Something along these lines should do the trick:

<i class="fa {{answer.faFont}}" (click)="toggleIcon(answer)"></I>

toggleIcon(answer:any) {
  answer.faFontFlg = !answer.faFontFlg;
  answer.faFont = (answer.faFontFlg)?'fa-thumbs-up':'fa-thumbs-down';
}

Answer 4

When working with Angular, the possibilities are endless. It's hard to say if one option is superior to another. Here are a few suggestions:

Utilize ngClass
Implement *ngIf

Try using an Angular variable. Something along these lines should do the trick:

<i class="fa {{answer.faFont}}" (click)="toggleIcon(answer)"></I>

toggleIcon(answer:any) {
  answer.faFontFlg = !answer.faFontFlg;
  answer.faFont = (answer.faFontFlg)?'fa-thumbs-up':'fa-thumbs-down';
}

Building a like/dislike feature in Angular

Answer №1

Answer №2

Similar questions

Can the chosen date in a calendar date picker be linked to a variable that is accessible to a separate file?

Using a key as an argument in the `map` function invocation

Nested tables in Datatables retrieving child table rows based on parent table

implementing CORS on an Express server for a specific domain

What is the best way to activate a click event when I set a radio button to checked?

The never-ending cycle of an Angular dropdown linked to a function being repeatedly invoked

Obtain the VW/VH coordinates from an onclick action in JavaScript

gathering identical objects in the collection

Why does Array Object sorting fail to handle large amounts of data in Javascript?

Retrieve data by sorting based on the count column in a joined table with Sequelize

"Optimizing Angular (v4+) for Peak Performance: Expert Strategies and

What is the best way to specify a function type that takes an argument of type T and returns void?

Discover the location of the class definition in VSCode with this helpful clue

Angular displaying an Object result in place of data

Tap to smoothly scroll through each block using the animate() function

Mastering typing properties in React with TypeScript

The anchor tag fails to trigger the onClick function in React

Hover over the text to disable the input element and display it as a textbox

Leveraging Next.js for "client-side rendering" in React Encapsulations

I could really use some guidance on how to begin with the Node.JS app file in BlueMix