File

src/app/list/list.component.ts

Description

The list of todos component

Can filter types of todos :

Type API
completed displayCompleted
all displayAll
remaining displayRemaining

Metadata

selector list
templateUrl ./list.component.html

Index

Properties

Constructor

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

Properties

todos
todos: Array<Todo>
Type : Array<Todo>
todoStore
todoStore: TodoStore
Type : TodoStore

Local reference of TodoStore

watchTest
watchTest:

List component

It display the lines of todos.

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Rx';

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

import { EmitterService } from '../shared/services/emitter.service';

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

/**
 * The list of todos component
 *
 * Can filter types of todos :
 *
 * | Type | API |
 * | --- | --- |
 * | completed | displayCompleted |
 * | all | displayAll |
 * | remaining | displayRemaining |
 */
@Component({
    selector: 'list',
    providers: [],
    templateUrl: './list.component.html'
})
export class ListComponent {
    /**
     * Local reference of TodoStore
     */
    todoStore: TodoStore;
    todos: Array<Todo>;
    watchTest;

    constructor(todoStore: TodoStore) {
        const that = this;
        this.todoStore = todoStore;
        this.todos = todoStore.getAll();
        this.watchTest = Observable.of(todoStore.todos);
        EmitterService.get('FooterComponent').subscribe(value => {
            console.log(value);
            switch (value) {
                case 'displayCompleted':
                    that.todos = todoStore.getCompleted();
                    break;
                case 'displayAll':
                    that.todos = todoStore.getAll();
                    break;
                case 'displayRemaining':
                    that.todos = todoStore.getRemaining();
                    break;
            }
        });
        this.watchTest.subscribe(data => {
            console.log(data);
        });
    }
}
<input class="toggle-all" type="checkbox"
        *ngIf="todoStore.todos.length" #toggleall
        [checked]="todoStore.allCompleted()"
        (click)="todoStore.setAllTo(toggleall.checked)">
<div *ngIf="todoStore.todos.length > 0">
    <ul class="todo-list" >
        <todo *ngFor="let todo of todos" [todo]='todo'></todo>
    </ul>
</div>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""