Hello, I need to add bootstrap effect fadeInDown to a newly added comment in my comments section. It works but unfortunately it affects all of the comments when I reload the page and the effect is also added when I edit a comment. Is it possible to add this specific class only to newly created comment? not affecting the rest of comments nor the other application functionalities? I will be glad for any advice. These are the components I'm working on: Comment section HTML ```

Comments: ({{commentsCount}})

``` Comment section TS ``` export class CommentSectionComponent implements OnInit, OnDestroy { @Input() requestId: string comments: CommentDetailsDto[] commentsCount = 0 private subscription: Subscription constructor( private commentsService: CommentsService, private alert: AlertService ) { } ngOnInit(): void { this.updateComments() } ngOnDestroy(): void { this.unsubscribe() } updateComments(): void { this.unsubscribe() this.subscription = this.commentsService.getComments(this.requestId) .subscribe({ next: (comments: CommentDetailsDto[]) => { this.comments = comments.reverse() this.commentsCount = this.getCommentsCount(comments) }, error: (error: HttpErrorResponse) => { this.alert.handleHttpError(error) } }) } private getCommentsCount(comments: CommentDetailsDto[]): number { return comments.reduce( (cnt, comment) => cnt + 1 + (comment.replies ? this.getCommentsCount(comment.replies) : 0), 0 ) } private unsubscribe(): void { if (this.subscription instanceof Subscription) { this.subscription.unsubscribe() } } } ``` Comment section SCSS ``` @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .fadeInDown { animation-name: fadeInDown; } ``` New comment component HTML ```

``` New comment TS ``` export class NewCommentComponent implements OnInit { @ViewChild('textArea') textArea: ElementRef @Input() requestId?: string @Input() comment?: CommentDetailsDto @Output() update = new EventEmitter() newComment: string private readonly commentResponseObserver = { error: (error: HttpErrorResponse) => { this.alert.handleHttpError(error) }, complete: () => { delete this.newComment this.update.emit() this.alert.showSuccess('Comment submitted successfully') } } constructor( private commentsService: CommentsService, private alert: AlertService, private route: ActivatedRoute ) { } ngOnInit(): void { if (this.comment) { this.textArea.nativeElement.focus() } } submit(): void { if (this.requestId) { this.addComment() } else if (this.comment) { this.addReply() } } addComment(): void { if (this.newComment) { this.commentsService.addComment(this.requestId, this.newComment) .subscribe(this.commentResponseObserver) } } addReply(): void { if (this.newComment) { this.commentsService.addReply(this.route.snapshot.queryParamMap.get('requestId'), this.comment, this.newComment) .subscribe(this.commentResponseObserver) } } } ``` Comment component HTML ```

{{comment.author.name}} / {{comment.author.id}}{{comment.created | krakenDateTime}}

Reply

{{showMoreReplies ? 'Hide' : 'See'}} {{moreReplies.length}} more comments

``` Comment TS ``` export class CommentComponent implements OnInit { @ViewChild('textarea', {static: true}) textarea: ElementRef @Input() comment: CommentDetailsDto @Output() update = new EventEmitter() edit = false showReplyButton = false showNewReplyWindow = false showMoreReplies = false commentContent: string firstReply: CommentDetailsDto moreReplies: CommentDetailsDto[] constructor( private commentsService: CommentsService, private modalFactoryService: ModalFactoryService, public hateoas: HateoasService, private alert: AlertService ) { } ngOnInit(): void { this.commentContent = this.comment.content this.showReplyButton = this.hateoas.supports(this.comment, 'reply') this.moreReplies = this.comment.replies.reverse().slice(1) this.firstReply = this.comment.replies[0] } toggleEdit(): void { this.edit = !this.edit } updateComment(): void { this.commentsService.updateComment(this.comment, this.commentContent) .subscribe({ error: (error: HttpErrorResponse) => { this.alert.handleHttpError(error) }, complete: () => { this.alert.showSuccess('Comment updated successfully') this.update.emit() } }) } cancelEdit(): void { this.edit = false this.commentContent = this.comment.content } displayDeletionConfirmation(): void { this.modalFactoryService.openConfirmationModal( 'Delete Comment', { message: 'Are you sure you want to delete this comment?', yesOptionButton: 'Yes', noOptionButton: 'No' }, () => { this.hateoas.execute(this.comment, 'delete') .subscribe({ error: (error: HttpErrorResponse) => { this.alert.handleHttpError(error) }, complete: () => { this.alert.showSuccess('Comment deleted successfully') this.update.emit() } }) } ) } toggleReplyComponent(): void { this.showNewReplyWindow = !this.showNewReplyWindow } commentContentHtml(): string { return this.commentContent.replace(/\n/g, '
') } rows(): number { const newLines = this.commentContent.match(/\n/g) || [] return newLines.length + 1 } } export interface Author { id: string name: string } export interface CommentDetailsDto extends Resource { content: string author: Author replies: CommentDetailsDto[] created: string } ```

whitejoe

How to add a class to just right added comment, not all of them

Join Our Newsletter. No Spam, Only the good stuff.