*ngFor [how to give different classes] Angular

In my angular project I am receiving some publications from my Firestore cloud in firebase and I have my publication component where it receives the publication and creates each one in my feed. This ngFor is what makes each publication be created.

<div class="feed" *ngFor="let publicacao of publicacoes" >
  <app-publi [publicacao]="publicacao"></app-publi>
</div>

In total so far I have 3 publications coming, but I can’t create a like function because I had done one that the person clicked on like and the code took the information from the publication and updated it on the Firestore cloud but I had the following problem, because each time I changed any information in the cloud Firestore so I understood that first code where I get the publications from the cloud Firestore is executed being like this every time I click on the like the publications are duplicated and that was not what I wanted, for not knowing disable this in firebase and also because I don’t know if there are any rules for this not to happen, I chose to show it only on the screen even without changing anything in the firestore cloud. But even to do that I had problems because as all publications have the same class and the same id only the first publication that received the animation of the like even clicking on the second or third only the first that it was possible to like. The question is the following kk is it possible to give different classes for each iteration of ngFor? or also if you have a solution for cloude Firestore anything I accept.
NOTE: this is a personal project, it will not be published anywhere.

I don’t know if it’s useful, but I’ll leave the code of my publi.component.ts

<div class="public">
  <div class="header">
    <img class="perfil" [src]="publicacao.photoUser" style="width:35px;height:35px;border-radius:50%;margin-left:2.6%;margin-top:2%;">
    <span>{{publicacao.user}}</span>
    <img class="settings" src="../../assets/settings.png">
  </div>
  <div class="foto" style="background-color: #ffffff;">
    <img class="post" [src]="publicacao.photoPost" style="width:100%;height:100%;object-fit: cover;">
  </div>
  <div class="footer">
    <div class="icons" style="display: flex;">
      <img class="img-like false" id="false" *ngIf="publicacao.like == false" (click)="like(publicacao)" style="width:60px !important;height:60px !important;margin-top:-2px !important;position:absolute;opacity:0.8 !important;" src="../../assets/like.png"/>
      <img class="img-like true" id="true" *ngIf="publicacao.like == true" (click)="like(publicacao)" style="width:60px !important;height:60px !important;margin-top:-2px !important;position:absolute;opacity:0.8 !important;"src="../../assets/likevermelho.png"/>
      <img class="img-coment" *ngIf="publicacao.like == false" src="../../assets/comentario.png" style="width: 100px;margin-left:9%;margin-top:-5.6%;height:100px;">
      <img class="img-coment" *ngIf="publicacao.like == true" src="../../assets/comentario.png" style="width: 100px;margin-left:9%;margin-top:-5.6%;height:100px;">
      <img class="img-direct" *ngIf="publicacao.like == false" src="../../assets/direct.png" style="width: 100px;height:100px;margin-top:-7%;margin-left:-19.9%;">
      <img class="img-direct" *ngIf="publicacao.like == true" src="../../assets/direct.png" style="width: 100px;height:100px;margin-top:-7%;margin-left:-19.9%;">
      <img class="img-salvar" *ngIf="publicacao.like == false" src="../../assets/salvar.png" style="margin-top:-1%;width:80px;height:70px;margin-left:auto;margin-right:-121%;">
      <img class="img-salvar" *ngIf="publicacao.like == true" src="../../assets/salvar.png" style="margin-top:-1%;width:80px;height:70px;margin-left:auto;margin-right:-121%;">
    </div>
    <div class="likes" *ngIf="publicacao.like == false">
      <img class="perfil" src="../../assets/joel-wyncott-lz7p9HZas1M-unsplash.jpg" style="width:25px;height:25px;border-radius:50%;margin-left:-54%;margin-top:8%;">
      <span class="like">Curtido por <span class="strong">joao-lim4</span> e <span class="curtidas-number strong">{{publicacao.curtidas}}</span> pessoas</span>
    </div>
    <div class="likes" *ngIf="publicacao.like == true">
      <img class="perfil" src="../../assets/joel-wyncott-lz7p9HZas1M-unsplash.jpg" style="width:25px;height:25px;border-radius:50%;margin-left:-54%;margin-top:8%;">
      <span class="like">Curtido por <span class="strong">joao-lim4</span> e <span class="curtidas-number strong">{{publicacao.curtidas}}</span> pessoas</span>
    </div>
    <div class="coments">
       <div class="description">
          <span class="userPost">{{publicacao.user}}</span><span class="descricao">{{publicacao.descricao}}</span>
       </div>
       <div class="totalComents">
         <span class="Total">Ver todos os {{publicacao.totalComentarios}} comentários</span>
       </div>
       <div class="comentario">
         <div class="coment1">
            <p class="comentUnic comentario1">{{publicacao.pessoa}}<span class="coment">{{publicacao.comentario}}</span></p><img class="like-coment" src="../../assets/like.png">
         </div>
         <div class="coment2">
            <p class="comentario2">{{publicacao.pessoa1}}<span class="coment">{{publicacao.comentario1}}</span></p><img class="like-coment2" src="../../assets/like.png">
         </div>
        </div>
       <span class="tempo">{{publicacao.horas}}</span>
    </div>
    <div class="footer-coment">
      <input class="input-coment" type="text"(click)="publicar()" placeholder="Adicione um comentario..." style="width: 100%;height: 56px;">
      <span class="btn-adicionar">Publicar</span>
    </div>
  </div>
</div>

I also don’t know if it’s useful, but I’ll leave the code that takes all publications from the Cloud Firestore.

import { Component, OnInit } from '@angular/core';

import { Publicacao } from './publi/publi.model';
import { AngularFirestore } from '@angular/fire/firestore';



@Component({
  selector: 'app-feed',
  templateUrl: './feed.component.html',
  styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit {

  publicacoes = []
  feedFull: Publicacao[]


  constructor(private db:AngularFirestore) { }

  ngOnInit(){
     this.db.collection('feed').snapshotChanges().subscribe(data => {
      this.feedFull = data.map(publiObject => {
        return{
          token:publiObject.payload.doc.id,
          keyUser: publiObject.payload.doc.data()['keyUser'],
          id: publiObject.payload.doc.data()['id'],
          user: publiObject.payload.doc.data()['user'],
          photoUser: publiObject.payload.doc.data()['photoUser'],
          photoPost: publiObject.payload.doc.data()['photoPost'],
          curtidas: publiObject.payload.doc.data()['curtidas'],
          comentario: publiObject.payload.doc.data()['comentario'],
          comentario1: publiObject.payload.doc.data()['comentario1'],
          pessoasQueCurtiu: publiObject.payload.doc.data()['pessoasQueCurtiu'],
          totalComentarios: publiObject.payload.doc.data()['totalComentarios'],
          like: publiObject.payload.doc.data()['like'],
          descricao: publiObject.payload.doc.data()['descricao'],
          pessoasQueComentou: publiObject.payload.doc.data()['pessoasQueComentou'],
          horas: publiObject.payload.doc.data()['horas'],
          pessoa: publiObject.payload.doc.data()['pessoa'],
          pessoa1: publiObject.payload.doc.data()['pessoa1'],
          comentLike:publiObject.payload.doc.data()['comentLike'],
          comentLike2:publiObject.payload.doc.data()['comentLike2']
        };})
        this.selectFedd(this.feedFull)
     })

  }


  selectFedd(feed){
    feed.forEach(element => {
      if(element.keyUser == 2){
        this.publicacoes.push({
            token:element.token,
            keyUser:element.keyUser,
            id:element.id,
            user:element.user,
            photoUser:element.photoUser,
            photoPost:element.photoPost,
            curtidas:element.curtidas,
            comentario:element.comentario,
            comentario1:element.comentario1,
            pessoa: element.pessoa,
            pessoa1: element.pessoa1,
            pessoasQueCurtiu:element.pessoasQueCurtiu,
            totalComentarios:element.totalComentarios,
            like:element.like,
            descricao: element.descricao,
            pessoasQueComentou: element.pessoasQueComentou,
            horas: element.horas,
            comentLike: element.comentLike,
            comentLike2: element.comentLike2
          });
        console.log(this.publicacoes)
      }else{
      }
    });
  }
}