Skip to content

Instantly share code, notes, and snippets.

@lydemann
Created November 18, 2018 20:33
Show Gist options
  • Save lydemann/c931577b98451159248ceeac8c74b259 to your computer and use it in GitHub Desktop.
Save lydemann/c931577b98451159248ceeac8c74b259 to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment