Brief Explanation Lets say i have Add data button and i have three data A,B and C,when i add the data i wanted to show only the latest data which is added newly. How can i achieve that in angular

This is the code that i wantted to add that feature I want to show only the latest index only in this ngfor

<div

    *ngIf="selectedIndex==0 && allergyListingData!=null && allergyListingData!=undefined"
    >
    <div >
      <div >
        <div >
          <div  *ngIf="diagnosisList.length===0">No records found</div>
          <div >
              <button *ngIf="addPermission" mat-raised-button color="primary"  (click)="openDialogAllergies()">
                  <i  aria-hidden="true"></i>
                  <span>Add Allergy</span>
              </button>
          </div>
        </div>
    <div  *ngIf="allergyListingData.length===0">No records found </div>
     <div 
      *ngFor="let allergy of allergyListingData;index as i; trackBy: trackByFn ">
      <mat-card>
        <mat-card-header>
          <mat-card-actions>     
            <button *ngIf="updatePermission" mat-button (click)="openDialogAllergies(allergy.id)"><i ></i></button>
            <button *ngIf="deletePermission" mat-button (click)="deleteAllergies(allergy.id)"><i ></i></button>                  
          </mat-card-actions>
        </mat-card-header>
        <mat-card-content>
          <p>Allergy Type:
            <span> {{allergy.allergyType}}</span>
          </p>
          <p>Reaction:
            <span> {{allergy.reaction}}</span>
          </p>
          <p>Allergy Type:
            <span [ngClass]="allergy.isActive==true ? 'active_color' : ' '">
              {{allergy.isActive==true?"Active":"Inactive"}}</span>
          </p>
          <p>
            <span> {{allergy.allergen}}</span>
          </p>
        </mat-card-content>
      </mat-card>
    </div>

CodePudding user response：

Instead of trying to find it inside of *ngFor, you can just reference the last item directly:

allergyListingData[allergyListingData.length - 1]

CodePudding user response：

In ngFor i can use *ngFor="let allergy of allergyListingData | slice: -1" it will show only the index 0 data but not the newly added data.How to get the newly added data