'How to show only the latest index data in angular

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"
    class="row">
    <div class="readmin-panel">
      <div class="panel-body">
        <div class="row">
          <div class="mt-20 custom-card custom-card-header" *ngIf="diagnosisList.length===0">No records found</div>
          <div class="col-md-12 pull-right justify-content-md-end d-flex">
              <button *ngIf="addPermission" mat-raised-button color="primary" class="add-primary-btn" (click)="openDialogAllergies()">
                  <i class="fa fa-plus" aria-hidden="true"></i>
                  <span>Add Allergy</span>
              </button>
          </div>
        </div>
    <div class="col-sm-6 mt-20 custom-card custom-card-header" *ngIf="allergyListingData.length===0">No records found </div>
     <div class="col-sm-6 mt-20 custom-card custom-card-header"
      *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 class="fa fa-pencil"></i></button>
            <button *ngIf="deletePermission" mat-button (click)="deleteAllergies(allergy.id)"><i class="fa fa-close"></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>

angular

Solution 1:^[1]

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

allergyListingData[allergyListingData.length - 1]

Solution 2:^[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	abney317
Solution 2	Vinay Somawat

'How to show only the latest index data in angular

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]