note-list.component.html

<div *ngIf="loading" style="display:flex;height:100%;">
    <mat-spinner style="margin:auto;"></mat-spinner>
</div>
<ng-container *ngIf="!loading" >
    <div style="text-align:center;font-weight:bold;opacity:0.3;">{{data.chrono}} - {{lang.notes}}</div>
    
    <div *ngIf="notes.length == 0" style="text-align:center;font-size:24px;font-weight:bold;opacity:0.3;">
            AUCUNE NOTE
    </div>
    <mat-card *ngFor="let note of notes" style="margin-top: 10px;" [ngStyle]="{'background-color': note.entities_restriction ? 'rgba(255, 165, 0, 0.2)' : 'white'}">
        <mat-card-header>
            <div mat-card-avatar bgColor="primary" style="display: flex;text-align: center;"><i class="fa fa-user" style="color: white;flex: 1;font-size: 25px;margin: auto;"></i></div>
            <mat-card-title>{{note.firstname}} {{note.lastname}}</mat-card-title>
            <mat-card-subtitle>{{note.entity_label}}</mat-card-subtitle>
            <mat-card-subtitle title='{{note.date_note | date : "le dd/MM/y à HH:mm"}}' style="position: absolute;right: 10px;top: 20px;font-size: 10px;">{{note.date_note | timeAgo}}</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <p>
                {{note.note_text}}
            </p>
            <span *ngFor="let entity of note.entities_restriction" class="label label-default" style="background-color:rgba(0,0,0,0.4);white-space:normal;display:inline-block;margin-right: 5px;" title="Entité restreinte"><i class="fa fa-sitemap"></i> {{entity}}</span>
        </mat-card-content>
    </mat-card>
</ng-container>