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

Inputs

isChecked
Type : `boolean`
Default value : `false`
Defined in src/app/todo/todo-item/todo-item.component.ts:12

notes
Type : `string`
Default value : `''`
Defined in src/app/todo/todo-item/todo-item.component.ts:20

title
Type : `string`
Default value : `''`
Defined in src/app/todo/todo-item/todo-item.component.ts:18

todo
Type : `any`
Defined in src/app/todo/todo-item/todo-item.component.ts:10

Outputs

onRemoveTriggered
Type : `EventEmitter`
Defined in src/app/todo/todo-item/todo-item.component.ts:16

onToggleTriggered
Type : `EventEmitter`
Defined in src/app/todo/todo-item/todo-item.component.ts:14

Methods

remove

remove()

Defined in src/app/todo/todo-item/todo-item.component.ts:26

Returns : void

toggle

toggle(todo)

Defined in src/app/todo/todo-item/todo-item.component.ts:22

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

File

Metadata

Index

Methods

Inputs

Outputs

Inputs

Outputs

Methods

result-matching ""

No results matching ""