Compare objects inside an array in Angular 4

Pedro Marques

I have an array with multiple Objects like:

[
 {"id":1,"host":"localhost","filesize":73,"fileage":"2018-01-26 09:26:40"},
 {"id":2,"host":"localhost","filesize":21,"fileage":"2018-01-26 09:26:32"},
 {...}
]

And those objects I display them like this:

<div class="col-md-6 space" *ngFor="let cache of ldapcaches">
  <div class="card border-dark">
    <div class="card-body">
      <h3 class="card-title"><strong>Server: </strong>{{cache.host}}</h3>
      <p class="card-text"><strong>Change date: </strong>{{cache.fileage}}</p>
      <p class="card-text"><strong>Size: </strong>{{cache.filesize + " Bytes"}}</p>
    </div>
    <div class="card-footer text-muted">
      <div class="btn-group btn-group-sm float-right">
        <button type="button" class="btn btn-primary" (click)="refreshFile(cache.id)">Refresh Cache</button>
        <button type="button" class="btn btn-outline-primary" (click)="restartServer(cache.id)">Restart Apache</button>
      </div>
    </div>
  </div>
</div>

Now I want that the color in the p-tag "change date" or "size" changes, if the value isn't equal like the values of Object with the newest date (In this case Object with id 1).

jeffarese

I've done a quick Stackblitz for you:

https://stackblitz.com/edit/angular-fffau2

First you have to decide which is the original object, the one what is going to be used to compare.

I did it inside the ngOnInit().

Then, when you have it stored, you can just compare in the HTML to add a CSS class and style with that.

Hope this helps

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related