notes-list.component.html

<div *ngIf="loading" style="display:flex;height:100%;">
    <mat-spinner style="margin:auto;"></mat-spinner>
</div>
<ng-container *ngIf="!loading">
    <div *ngIf="notes.length == 0" style="text-align:center;font-size:24px;font-weight:bold;opacity:0.3;">
        {{lang.noNote}}
    </div>
    <app-note-editor *ngIf="editMode" #noteEditor [addMode]="true" [resIds]="resIds" (refreshNotes)="loadNotes($event)" style="margin: 20px;display: flex;"></app-note-editor>
    <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><i color="primary" class="fa fa-user"></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.creation_date | fullDate}}' class="dateNote">{{note.creation_date
                | timeAgo}}</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <p class="noteTextContent">
                {{note.value}}
            </p>
            <span *ngFor="let entity of note.entities_restriction" class="label label-default noteRestriction"
                title="{{lang.restrictedEntity}}"><i class="fa fa-sitemap"></i> {{entity.short_label}}</span>
        </mat-card-content>
    </mat-card>
</ng-container>