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).
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.
Comments