File

src/app/todo/todo-item/todo-item.component.ts

Metadata

selector app-todo-item
styleUrls ./todo-item.component.scss
templateUrl ./todo-item.component.html

Index

Methods
Inputs
Outputs

Inputs

isChecked
Type : boolean
Default value : false
notes
Type : string
Default value : ''
title
Type : string
Default value : ''
todo
Type : any

Outputs

onRemoveTriggered
Type : EventEmitter
onToggleTriggered
Type : EventEmitter

Methods

remove
remove()
Returns : void
toggle
toggle(todo)
Parameters :
Name Optional
todo No
Returns : void
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-todo-item',
  templateUrl: './todo-item.component.html',
  styleUrls: ['./todo-item.component.scss']
})
export class TodoItemComponent {
  @Input()
  todo: any;
  @Input()
  isChecked: boolean = false;
  @Output()
  onToggleTriggered = new EventEmitter<boolean>();
  @Output()
  onRemoveTriggered = new EventEmitter<boolean>();
  @Input()
  title: string = '';
  @Input()
  notes: string = '';

  toggle(todo) {
    this.onToggleTriggered.emit(todo);
  }

  remove() {
    this.onRemoveTriggered.emit(true);
  }
}
<div class="todo-list-item" fxLayout="row" fxLayoutAlign="start center" [ngClass]="{'completed': todo.completed}"
  matRipple>
  <mat-icon class="handle m-r-16" cdkDragHandle>drag_handle</mat-icon>
  <mat-checkbox class="m-r-16" fxFlex="0 1 auto" (click)="toggle(todo)"></mat-checkbox>

  <div class="item" fxLayout="row" fxLayoutAlign="start center" fxFlex>
    <div [ngClass]="{'completed':todo.completed}" fxLayout="column" fxFlex>
      <div class="title">{{ todo.title }}</div>
      <div class="notes">{{ todo?.notes }}</div>
      <div class="tags" fxLayout="row wrap" fxLayoutAlign="start center">
        <div class="tag" fxLayout="row" fxLayoutAlign="start center">
          <div class="tag-color" style="background-color: rgb(56, 142, 60);"></div>
          <div class="tag-label">前端</div>
        </div>
      </div>
    </div>
  </div>

  <div class="actions" fxLayout="row" fxLayoutAlign="star center">
    <button mat-icon-button class="btn-icon">
      <mat-icon>error</mat-icon>
    </button>
    <button mat-icon-button class="btn-icon">
      <mat-icon>star</mat-icon>
    </button>
    <button mat-icon-button class="btn-icon">
      <mat-icon>more_vert</mat-icon>
    </button>
  </div>

</div>

./todo-item.component.scss

.completed {
  .title {
    text-decoration: line-through;
  }

  .notes {
    text-decoration: line-through;
  }
}

.tags {
  .tag {
    font-size: 11px;
    border-radius: 2px;
    margin: 8px 4px 0 0;
    padding: 3px 8px;
    background-color: rgba(0, 0, 0, 0.08);

    .tag-color {
      width: 8px;
      height: 8px;
      margin-right: 8px;
      border-radius: 50%;
    }
  }
}

.btn-icon {
  color: rgba(0, 0, 0, 0.54);
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""