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

File

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

Metadata

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

Index

Properties
Methods
Inputs
Outputs
Accessors

Inputs

todos
Type : []
Defined in src/app/todo/todo-list/todo-list.component.ts:12

Outputs

onRemoveTodo
Type : EventEmitter
Defined in src/app/todo/todo-list/todo-list.component.ts:21
onToggleAll
Type : EventEmitter
Defined in src/app/todo/todo-list/todo-list.component.ts:25
onToggleTodo
Type : EventEmitter
Defined in src/app/todo/todo-list/todo-list.component.ts:23

Methods

onRemoveTriggered
onRemoveTriggered(todo: Todo)
Defined in src/app/todo/todo-list/todo-list.component.ts:27
Parameters :
Name Type Optional
todo Todo No
Returns : void
onToggleAllTriggered
onToggleAllTriggered()
Defined in src/app/todo/todo-list/todo-list.component.ts:35
Returns : void
onToggleTriggered
onToggleTriggered(todo: Todo)
Defined in src/app/todo/todo-list/todo-list.component.ts:31
Parameters :
Name Type Optional
todo Todo No
Returns : void

Properties

_todos
Type : Todo[]
Default value : []
Defined in src/app/todo/todo-list/todo-list.component.ts:10

Accessors

todos
gettodos()
Defined in src/app/todo/todo-list/todo-list.component.ts:16
settodos(todos: [])
Defined in src/app/todo/todo-list/todo-list.component.ts:12
Parameters :
Name Type Optional
todos [] No
Returns : void 
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Todo } from '../todo.model';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.scss']
})
export class TodoListComponent {
  _todos: Todo[] = [];
  @Input()
  set todos(todos: Todo[]) {
    this._todos = [...todos];
  }

  get todos() {
    return this._todos;
  }

  @Output()
  onRemoveTodo = new EventEmitter<Todo>();
  @Output()
  onToggleTodo = new EventEmitter<Todo>();
  @Output()
  onToggleAll = new EventEmitter<boolean>();

  onRemoveTriggered(todo: Todo) {
    this.onRemoveTodo.emit(todo);
  }

  onToggleTriggered(todo: Todo) {
    this.onToggleTodo.emit(todo);
  }

  onToggleAllTriggered() {
    this.onToggleAll.emit(true);
  }
}
Copy
<ng-content></ng-content>
Copy

./todo-list.component.scss

Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""