angular-material-app documentation
  1. Components
  2. TodoComponent

File

src/app/todo/todo.component.ts

Implements

OnInit OnDestroy

Metadata

encapsulation ViewEncapsulation.None
selector app-todo
styleUrls ./todo.component.scss
templateUrl ./todo.component.html

Index

Properties
Methods

Constructor

constructor(service)
Defined in src/app/todo/todo.component.ts:20
Parameters :
Name Optional
service No

Methods

addTodo
addTodo(todo: Todo)
Defined in src/app/todo/todo.component.ts:33
Parameters :
Name Type Optional
todo Todo No
Returns : void
clearCompleted
clearCompleted()
Defined in src/app/todo/todo.component.ts:49
Returns : void
drop
drop(event: CdkDragDrop)
Defined in src/app/todo/todo.component.ts:57
Parameters :
Name Type Optional
event CdkDragDrop<string[]> No
Returns : void
ngOnDestroy
ngOnDestroy()
Defined in src/app/todo/todo.component.ts:53
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/todo/todo.component.ts:24
Returns : void
removeTodo
removeTodo(todo: Todo)
Defined in src/app/todo/todo.component.ts:41
Parameters :
Name Type Optional
todo Todo No
Returns : void
toggleAll
toggleAll()
Defined in src/app/todo/todo.component.ts:45
Returns : void
toggleTodo
toggleTodo(todo: Todo)
Defined in src/app/todo/todo.component.ts:37
Parameters :
Name Type Optional
todo Todo No
Returns : void

Properties

onTodosChangedSubscrition
Type : Subscription
Defined in src/app/todo/todo.component.ts:20
todos
Type : Todo[]
Defined in src/app/todo/todo.component.ts:19
 
import {
  Component,
  OnInit,
  OnDestroy,
  Inject,
  ViewEncapsulation
} from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { Subscription } from 'rxjs';
import { Todo } from './todo.model';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TodoComponent implements OnInit, OnDestroy {
  todos: Todo[];
  onTodosChangedSubscrition: Subscription;

  constructor(@Inject('todoService') private service) {}

  ngOnInit() {
    this.service.getTodosByParams();
    this.onTodosChangedSubscrition = this.service.onTodosChangedSubject.subscribe(
      todo => {
        this.todos = todo;
      }
    );
  }

  addTodo(todo: Todo) {
    this.service.addTodo(todo);
  }

  toggleTodo(todo: Todo) {
    this.service.toggleTodo(todo);
  }

  removeTodo(todo: Todo) {
    // this.service.deleteTodo(todo);
  }

  toggleAll() {
    // this.service.toggleAll();
  }

  clearCompleted() {
    // this.service.clearCompleted();
  }

  ngOnDestroy() {
    this.onTodosChangedSubscrition.unsubscribe();
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.todos, event.previousIndex, event.currentIndex);
  }
}
Copy
<stbui-layout>

  <stbui-layout-header>
    <stbui-search class="search mat-elevation-z4 stbui-background-white" placeholder="搜索..."></stbui-search>
  </stbui-layout-header>

  <stbui-layout-sidenav>
    <app-todo-sidenav></app-todo-sidenav>
  </stbui-layout-sidenav>

  <app-todo-toolbar></app-todo-toolbar>

  <app-todo-list class="todo-list" cdkDropList (cdkDropListDropped)="drop($event)">
    <app-todo-item class="todo-list-box" cdkDrag *ngFor="let todo of todos" [todo]="todo"></app-todo-item>
  </app-todo-list>

</stbui-layout>
Copy

./todo.component.scss 

$margin-top__search__title: 42px;

.search {
  margin-top: $margin-top__search__title;
}

.todo-list {
  display: block;
}

.todo-list-box {
  display: block;
}

.todo-list-item {
  position: relative;
  padding: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  background: #fff;

  &.completed {
    background: #eee;
  }

  .handle {
    cursor: move;
    user-select: none;
  }

  .item {
    margin: 0 16px 0 8px;

    .title {
      font-size: 15px;
      font-weight: 500;
    }

    .notes {
      margin-top: 4px;
    }
  }
}

//
.cdk-drag-preview {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.todo-list.cdk-drop-list-dragging .todo-list-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""