1

I am displaying a list of cards having questions and details related the questions and I want to show animation when I delete the question. The problem is when I am pressing delete button for one question, the sliding animation is being applied on all the cards (or questions). So please tell me that how can I apply animation only for the card which I deleted.

<div class="container" *ngIf="questionInfoList">
    <mat-card *ngFor="let questionInfo of questionInfoList" [@removeAnimation]>
         <button mat-icon-button title="delete this question" (click)="deleteQuestion(questionInfo[0])">
                <mat-icon>delete</mat-icon>
         </button>
    </mat-card>
</div>

@Component({
  selector: 'app-admin-questions',
  templateUrl: './admin-questions.component.html',
  styleUrls: ['./admin-questions.component.css'],
  animations: [
    trigger('removeAnimation', [
      transition('* => void', [
        animate('1s', style({
          transform: 'translateX(100%)'
        }))
      ])
    ])
  ]
})
export class AdminQuestionsComponent implements OnInit {

  currentChannel!: string;
  questionInfoList!: Array<Array<string>>;

  constructor(private activeRouter: ActivatedRoute, private admin_service: AdminService, private snack: MatSnackBar,
    private service: EndpointsService, private bottomSheet: MatBottomSheet) 

  deleteQuestion(questionId: string) {
    const numericQuestionId = Number(questionId);
    this.admin_service.deleteQuestion(numericQuestionId).subscribe({
      next: response => {
        this.snack.open(response, '', {
          duration: 3000
        })
      },
      error: err => console.log(err)
    })
  }
  }
}
Tushar Agarwal
  • 713
  • 5
  • 11
  • Check out this answer. This might help https://stackoverflow.com/questions/43416796/how-to-conditionally-add-animations-in-angular-2https://stackoverflow.com/questions/43416796/how-to-conditionally-add-animations-in-angular-2 – Hari Pillai Nov 06 '21 at 17:13
  • You can probably fix this by adding a trackBy function to your *ngFor.. – MikeOne Nov 06 '21 at 17:13
  • Your template seems weird... so do you actually want to delete complete cards or questions or both? Also you always pass the same item to the delete function. You have no nested loop for your questions either? – AT82 Nov 06 '21 at 17:38
  • @AT82 Actually I deleted the ngOnit() method. In that method I am fetching all the questions from database. And each card contains details such question description and date on which question was asked and also a delete button. Now what I want is when I press I my delete button, I want that particular card(in which the delete button I pressed I situated) to get animated. But in my case all the cards are getting animated. – Tushar Agarwal Nov 06 '21 at 18:09
  • @MikeOne Can you please elaborate on this. – Tushar Agarwal Nov 06 '21 at 18:09
  • https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5 – MikeOne Nov 06 '21 at 18:14

0 Answers0