### 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

- todos
- todoStore
- watchTest

### Constructor

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

Parameters :

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

### Properties

todos
Type : `Array<Todo>`
Defined in src/app/list/list.component.ts:31

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

watchTest
Defined in src/app/list/list.component.ts:32

# 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) {
            let 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

# results matching ""

# No results matching ""