File

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

Description

The todo component

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

../screenshots/todo/todo.png

Metadata

selector todo
templateUrl ./todo.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(todoStore: TodoStore)
Parameters :
Name Type Optional
todoStore TodoStore No

Inputs

todo

The entry todo from the parent list

Type : Todo

Methods

cancelEditingTodo
cancelEditingTodo(todo: Todo)
Parameters :
Name Type Optional
todo Todo No
Returns : void
editTodo
editTodo(todo: Todo)
Parameters :
Name Type Optional
todo Todo No
Returns : void
remove
remove(todo: Todo)
Parameters :
Name Type Optional
todo Todo No
Returns : void
stopEditing
stopEditing(todo: Todo, editedTitle: string)
Parameters :
Name Type Optional
todo Todo No
editedTitle string No
Returns : void
toggleCompletion
toggleCompletion(todo: Todo)
Parameters :
Name Type Optional
todo Todo No
Returns : void
updateEditingTodo
updateEditingTodo(todo: Todo, editedTitle: string)
Parameters :
Name Type Optional
todo Todo No
editedTitle string No
Returns : any

Properties

todoStore
todoStore: TodoStore
Type : TodoStore

Local reference of TodoStore

Todo component

This is the core component of the application.

Screenshot-1

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>../screenshots/todo/todo.png</example-url>
 */
@Component({
    selector: 'todo',
    templateUrl: './todo.component.html'
})
export class TodoComponent {
    /**
     * The entry todo from the parent list
     */
    @Input()
    todo: Todo;

    /**
     * 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

result-matching ""

    No results matching ""