How do I use Angular to dynamically change icons individually using *ngFor?

Question

How do I use Angular to dynamically change icons individually using *ngFor?

Good day! Currently, I am developing a webpage using Angular and aiming to incorporate a feature that enables users to post comments and mark them with a star if desired. Below is the snippet of the HTML section:

<ul>
  <li class="realitive" *ngFor="let comment of comments">
    {{ comment }} 
    <nb-icon pack="font-awesome" class="fa-star absulute"  [ngClass]="{ 'fas': isFavorite,' far': !isFavorite}" (click)="onClick()"></nb-icon>
  </li>
 </ul>

Additionally, here's the behind-the-scenes logic:

 comments: string[] = [];

 @Input("isFavorite") isFavorite: boolean;
 @Output("change") change= new EventEmitter();

 onClick() { 
    this.isFavorite = !this.isFavorite;
    this.change.emit({ newValue: this.isFavorite });
  }

  addComment() {
    this.dialogService.open(CommentComponent)
      .onClose.subscribe(comment => comment && this.comments.push(comment));
  }

Please note: The dialogServis component used in this code can be found at Nebular

The current implementation works well, but upon testing with multiple comments, clicking on a star activates both simultaneously. How can I modify the code to allow separate star activation for each individual comment?

angular typescript

Answer 1

Answer №1

It seems like the issue lies in having only one isFavorite switch for all comments at the same level. This means that if it is true, all comments will be marked as favorites logically.

A quick fix would be to store the position of the favorite comment instead of just a boolean flag.

Then, in the template, you can do:

  <li class="realitive" *ngFor="let comment of comments; index as i">
    <nb-icon pack="font-awesome" class="fa-star absulute"  [ngClass]="{ 'fas': favoriteComment === i,' far': favoriteComment !== i}" (click)="onClick(i)"></nb-icon>
  </li

In your component, you would keep track of the index of the favorite comment:

 @Input("favoriteComment") favoriteComment: number;
 @Output("change") change= new EventEmitter();

 onClick(index: number) { 
    this.isFavorite = index;
    this.change.emit({ newValue: this.favoriteComment });
  }

This solution works well for testing purposes, but for a real app, there are some improvements to consider:

Each comment should have an ID along with its content. This way, you can use the ID instead of the index for better management, especially when dealing with actions like deleting comments.
Consider splitting your components into a CommentList and Comment. The Comment component can then receive a boolean flag "isFavorite" from the CommentList component, which handles the logic for determining the favorite comment.

Answer 2

It seems like the issue lies in having only one isFavorite switch for all comments at the same level. This means that if it is true, all comments will be marked as favorites logically.

A quick fix would be to store the position of the favorite comment instead of just a boolean flag.

Then, in the template, you can do:

  <li class="realitive" *ngFor="let comment of comments; index as i">
    <nb-icon pack="font-awesome" class="fa-star absulute"  [ngClass]="{ 'fas': favoriteComment === i,' far': favoriteComment !== i}" (click)="onClick(i)"></nb-icon>
  </li

In your component, you would keep track of the index of the favorite comment:

 @Input("favoriteComment") favoriteComment: number;
 @Output("change") change= new EventEmitter();

 onClick(index: number) { 
    this.isFavorite = index;
    this.change.emit({ newValue: this.favoriteComment });
  }

This solution works well for testing purposes, but for a real app, there are some improvements to consider:

Each comment should have an ID along with its content. This way, you can use the ID instead of the index for better management, especially when dealing with actions like deleting comments.
Consider splitting your components into a CommentList and Comment. The Comment component can then receive a boolean flag "isFavorite" from the CommentList component, which handles the logic for determining the favorite comment.

Answer 3

Answer №2

@code-gorrila is correct, the approach of having one favorite comment per item makes sense. However, if every comment can be a favorite, then it would be necessary to store isFavorite as a property of each comment:

interface IComment {
  comment: string;
  isFavorite: boolean;
}

 comments: IComment[] = [];

 @Output("change") comments = new EventEmitter();

 onClick(comment) { 
    comment.isFavorite = !comment.isFavorite;
    this.change.emit(this.comments);
  }

  addComment() {
    this.dialogService.open(CommentComponent)
      .onClose.subscribe(comment => comment && this.comments.push({ comment, isFavorite: false }));
  }

<ul>
  <li class="realitive" *ngFor="let comment of comments">
    {{ comment.comment }} 
    <nb-icon pack="font-awesome" class="fa-star absulute"  [ngClass]="{ 'fas': comment.isFavorite,' far': !comment.isFavorite}" (click)="onClick(comment)"></nb-icon>
  </li>
</ul>

Answer 4

@code-gorrila is correct, the approach of having one favorite comment per item makes sense. However, if every comment can be a favorite, then it would be necessary to store isFavorite as a property of each comment:

interface IComment {
  comment: string;
  isFavorite: boolean;
}

 comments: IComment[] = [];

 @Output("change") comments = new EventEmitter();

 onClick(comment) { 
    comment.isFavorite = !comment.isFavorite;
    this.change.emit(this.comments);
  }

  addComment() {
    this.dialogService.open(CommentComponent)
      .onClose.subscribe(comment => comment && this.comments.push({ comment, isFavorite: false }));
  }

<ul>
  <li class="realitive" *ngFor="let comment of comments">
    {{ comment.comment }} 
    <nb-icon pack="font-awesome" class="fa-star absulute"  [ngClass]="{ 'fas': comment.isFavorite,' far': !comment.isFavorite}" (click)="onClick(comment)"></nb-icon>
  </li>
</ul>

Answer 5

Answer №3

This suggestion follows the principles of angular best practices: smart and dummy components

It is recommended to create two distinct components:

comment-box-component: containing input and comment-component.
comment-component: consisting of comment text and star state.

Child Component

comment-component has both input (comment text) and output (emitting changes in favorite state to parent)

In typescript file.

 @Input() isFavorite: boolean;
 @Output() favorite: EventEmitter<boolean> = new EventEmitter();

 selectAsFavorite() {
   this.favorite.emit(true);
 }

 unselectAsFavorite() {
   this.favorite.emit(false);
 }

Parent Component

comment-box-component serves as a container that listens for comment events (favorite)

In HTML file.

 <input type="text"/> 
 <ng-container *ngFor="let comment of comments">
   <comment-component [comment]="comment" (favorite)="handleFavoriteState($event, comment.id)">
 </ng-container>

In typescript file.

 comments = [{id: 1, text: 'hi', favorite: false}, {id: 2, text: 'bye', favorite: false}] // These are just examples

 handleFavoriteState(favorite: boolean, commentId: string) {
  // This method does not focus on performance optimization, it's illustrative
  this.comment = this.comments.map(comment => {
   if (comment.id === commentId) {
     comment.favorite = favorite;
   }
   return comment;
  });
 }

I recommend diving deeper into understanding smart and dummy components as they align with angular best practices.

Answer 6

This suggestion follows the principles of angular best practices: smart and dummy components

It is recommended to create two distinct components:

comment-box-component: containing input and comment-component.
comment-component: consisting of comment text and star state.

Child Component

comment-component has both input (comment text) and output (emitting changes in favorite state to parent)

In typescript file.

 @Input() isFavorite: boolean;
 @Output() favorite: EventEmitter<boolean> = new EventEmitter();

 selectAsFavorite() {
   this.favorite.emit(true);
 }

 unselectAsFavorite() {
   this.favorite.emit(false);
 }

Parent Component

comment-box-component serves as a container that listens for comment events (favorite)

In HTML file.

 <input type="text"/> 
 <ng-container *ngFor="let comment of comments">
   <comment-component [comment]="comment" (favorite)="handleFavoriteState($event, comment.id)">
 </ng-container>

In typescript file.

 comments = [{id: 1, text: 'hi', favorite: false}, {id: 2, text: 'bye', favorite: false}] // These are just examples

 handleFavoriteState(favorite: boolean, commentId: string) {
  // This method does not focus on performance optimization, it's illustrative
  this.comment = this.comments.map(comment => {
   if (comment.id === commentId) {
     comment.favorite = favorite;
   }
   return comment;
  });
 }

I recommend diving deeper into understanding smart and dummy components as they align with angular best practices.

How do I use Angular to dynamically change icons individually using *ngFor?

Answer №1

Answer №2

Answer №3

Child Component

Parent Component

Similar questions

Using local fonts with Styled Components and React TypeScript: A beginner's guide

Customizing the entire application's style based on conditions in Angular 4

Implement a default dropdown menu that displays the current month using Angular and TypeScript

Seamlessly incorporating Storybook with Tailwind CSS, Create Next App, and TypeScript

Unpacking nested JSON objects with key-value pairs at various depths using TypeScript within a Node environment

When hovering over one div, both it and another div should be displayed simultaneously. The second div should continue to be displayed even when hovered over

Minimize the count of switch cases that are not empty

Issue: The creation of ComponentClass is restricted due to its absence from the testing module import

Facing issue with Angular 17 where pipe is displaying empty data

I am interested in forming an object using an array and then looping through the keys of that object

Surprising outcome caused by introducing a service dependency within another service in Angular 6

Access to private members is restricted when redefining a class method

Issue "Module not found" arises while trying to import an external JSON file in TypeScript

Properly excluding an abstract typescript class from an external library

Leverage a personalized column within a for loop in an Angular template

Interface-derived properties

Improving efficiency in processing multiple datasets through optimized code

Sustaining connection between Angular 4 user interface and JAVA backend

What are the steps to transform my current node application into TypeScript?

Automated Integration with Visual Studio Team Services: Empowering ASP.NET Core and Angular 4 Collaboration