### File

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

### Description

The todo component

    <todo>
       [todo]="todo"
    </todo>

/demo/mysample.component.html

### Metadata

selector | `todo`
templateUrl | `./todo.component.html`

### Index

###### Properties

- todoStore
- unionVariable

###### Methods

- cancelEditingTodo
- editTodo
- Public filter
- remove
- stopEditing
- toggleCompletion
- updateEditingTodo

###### Inputs

- todo

### Constructor

`constructor(todoStore: TodoStore)`
Defined in src/app/list/todo/todo.component.ts:34

Parameters :

Name | Type | Optional
todoStore | `TodoStore` | No

### Inputs

todo
Type : `Todo`
Defined in src/app/list/todo/todo.component.ts:25
The entry todo from the parent list

### Methods

cancelEditingTodo
`cancelEditingTodo(todo: Todo)`
Defined in src/app/list/todo/todo.component.ts:57

Parameters :

Name | Type | Optional
todo | `Todo` | No

Returns : `void`

editTodo
`editTodo(todo: Todo)`
Defined in src/app/list/todo/todo.component.ts:48

Parameters :

Name | Type | Optional
todo | `Todo` | No

Returns : `void`

Public filter
`filter(term: string, fields?: (string | number)[])`
Defined in src/app/list/todo/todo.component.ts:29

Parameters :

Name | Type | Optional
term | `string` | No
fields | `(string | number)[]` | Yes

Returns : `void`

remove
`remove(todo: Todo)`
Defined in src/app/list/todo/todo.component.ts:40

Parameters :

Name | Type | Optional
todo | `Todo` | No

Returns : `void`

stopEditing
`stopEditing(todo: Todo, editedTitle: string)`
Defined in src/app/list/todo/todo.component.ts:52

Parameters :

Name | Type | Optional
todo | `Todo` | No
editedTitle | `string` | No

Returns : `void`

toggleCompletion
`toggleCompletion(todo: Todo)`
Defined in src/app/list/todo/todo.component.ts:44

Parameters :

Name | Type | Optional
todo | `Todo` | No

Returns : `void`

updateEditingTodo
`updateEditingTodo(todo: Todo, editedTitle: string)`
Defined in src/app/list/todo/todo.component.ts:61

Parameters :

Name | Type | Optional
todo | `Todo` | No
editedTitle | `string` | No

Returns : `any`

### Properties

todoStore
Type : `TodoStore`
Defined in src/app/list/todo/todo.component.ts:34
Local reference of TodoStore

unionVariable
Type : `string[] | Todo`
Defined in src/app/list/todo/todo.component.ts:27

# Todo component

This is the core component of the application.

It display the line of one todo task, and APIs for edition & delete

This is an extract of these APIs

    export class TodoComponent {
        ...
        editTodo(todo: Todo) {
            todo.editing = true;
        }
        ...
    }

    import { Component, Input } from '@angular/core';

    import { Todo } from '../../shared/models/todo.model';

    import { TodoStore } from '../../shared/services/todo.store';

    /**
     * The todo component
     * ```html
     * <todo>
     *    [todo]="todo"
     * </todo>
     * ```
     *
     * <example-url>/demo/mysample.component.html</example-url>
     */
    @Component({
        selector: 'todo',
        templateUrl: './todo.component.html'
    })
    export class TodoComponent {
        /**
         * The entry todo from the parent list
         */
        @Input() todo: Todo;

        unionVariable: string[] | Todo;

        public filter(term: string, fields?: (string | number)[]): void;

        /**
         * Local reference of TodoStore
         */
        todoStore: TodoStore;

        constructor(todoStore: TodoStore) {
            this.todoStore = todoStore;
        }

        remove(todo: Todo) {
            this.todoStore.remove(todo);
        }

        toggleCompletion(todo: Todo) {
            this.todoStore.toggleCompletion(todo);
        }

        editTodo(todo: Todo) {
            todo.editing = true;
        }

        stopEditing(todo: Todo, editedTitle: string) {
            todo.title = editedTitle;
            todo.editing = false;
        }

        cancelEditingTodo(todo: Todo) {
            todo.editing = false;
        }

        updateEditingTodo(todo: Todo, editedTitle: string) {
            editedTitle = editedTitle.trim();
            todo.editing = false;

            if (editedTitle.length === 0) {
                return this.todoStore.remove(todo);
            }

            todo.title = editedTitle;

            this.todoStore.update();
        }
    }

    <li [class.completed]="todo.completed" [class.editing]="todo.editing">
        <div class="view">
            <input class="toggle" type="checkbox" (click)="toggleCompletion(todo)" [checked]="todo.completed">
            <label (dblclick)="editTodo(todo)" donothing>{{todo.title | firstUpper}}</label>
            <button class="destroy" (click)="remove(todo)"></button>
        </div>
        <input class="edit" *ngIf="todo.editing"
               [value]="todo.title" #editedtodo
               (blur)="stopEditing(todo, editedtodo.value)"
               (keyup.enter)="updateEditingTodo(todo, editedtodo.value)"
               (keyup.escape)="cancelEditingTodo(todo)">
    </li>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""