CODEWITHSUNDEEP
angularprimeng
Joshua Fellers
Joshua Fellers

Reputation: 111

Angular Refresh View After Adding Item to Array- better way?

Using Angular 11.2.14: I have a object with a object array property "Ticket_Notes" that is used to populate a PrimeNG Timeline object, nothing special:

            <p-timeline [value]="ticket.Ticket_Notes" align="alternate">
            <ng-template pTemplate="marker" let-note >
                <span class="custom-marker shadow-2" >
                    <img *ngIf="note.Created_ByNavigation?.Photo" alt="Person Photo" class="Photo" style="height:50px;" [src]="note.Created_ByNavigation?.Photo"/>
                </span>
            </ng-template>
            <ng-template pTemplate="content" let-note>
                <p-card [header]="note.Created_ByNavigation?.DisplayName" [subheader]="note.Creation_Date | date: 'medium'" >
                        <div class="contentStack">                                 
                            <div *ngIf="note.Resolved_Ticket"><i  class="fas fa-check fa-lg ok"></i>&nbsp;Ticket Resolved</div>                       
                            <div *ngIf="note.editComment">
                                <p-editor [(ngModel)]="note.Note_Data" [style]="{'height':'125px'}"></p-editor>                                    
                            </div>    
                            <div [ngClass]="{'resolvedTicket': note.Resolved_Ticket}">                   
                                <div *ngIf="!note.editComment" [innerHTML]="note.Note_Data"></div>                                
                            </div> 
                        </div>                         
                </p-card>
            </ng-template>
            </p-timeline>

My issue is, if a push a new object into the array (after someone adds a note) - it will not display unless I deep clone the object with:

 this.ticket = JSON.parse(JSON.stringify(this.ticket)) // cheat to get it to reload/refresh view

Then it will appear just fine. This seems like a bad hack. Is there a better/best practice to get the page to refresh the view with the added item?

Upvotes: 0

Views: 1288

Answers (1)

Marc
Marc

Reputation: 1896

You can change the reference by this: this.ticket = [...this.ticket];

This should trigger a re-rendering.

Upvotes: 2

Related Questions