todo-item-card.component.html

todo-item-card.component.html

<mat-card class="todo-card" [ngClass]="this.todoItem.completed ? 'bg-completed' :  ''">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>{{todoItem.title}}</mat-card-title>
    <mat-card-subtitle>{{todoItem.description}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content class="card-content">
    <p *ngIf="todoItem.dueDate">
      <small>{{'add-todo.due-date' | translate}}:
        <b>{{todoItem.dueDate}}</b>
      </small>
    </p>
  </mat-card-content>
  <mat-card-actions class="card-actions">
    <button (click)="completeClick()" type="button" class="btn btn-success" aria-label="Edit">
      {{'todo-item.complete' | translate}}
    </button>
    <button *ngIf="!readOnlyTODO" (click)="editClick()" type="button" class="btn btn-info" aria-label="Edit">
      {{'todo-item.edit' | translate}}
    </button>
    <button *ngIf="!readOnlyTODO" (click)="deleteClick()" type="button" class="btn btn-danger" aria-label="Delete">
      {{'todo-item.delete' | translate}}
    </button>
  </mat-card-actions>
</mat-card>