### File

`src/app/footer/footer.component.ts`

### Description

The footer component

### Metadata

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

### Index

###### Properties

- currentFilter
- id
- todoStore

###### Methods

- displayAll
- displayCompleted
- displayRemaining
- removeCompleted

### Constructor

`constructor(todoStore: TodoStore)`
Defined in src/app/footer/footer.component.ts:37

The "constructor"

Parameters :

Name | Type | Optional | Description
todoStore | `TodoStore` | No | A TodoStore -> see TodoStore

### Methods

displayAll
`displayAll()`
Defined in src/app/footer/footer.component.ts:75
Display all todos Returns : `void`

displayCompleted
`displayCompleted()`
Defined in src/app/footer/footer.component.ts:59
Display only completed todos Returns : `void`

displayRemaining
`displayRemaining()`
Defined in src/app/footer/footer.component.ts:67
Display only remaining todos Returns : `void`

removeCompleted
`removeCompleted()`
Decorators : `@LogMethod()`
Defined in src/app/footer/footer.component.ts:52
Removes all the completed todos Returns : `void`

### Properties

currentFilter
Type : `string`
Default value : `'all'`
Decorators : `@LogPropertyWithArgs('theCurrentFilter')`
Defined in src/app/footer/footer.component.ts:37
Starting filter param

id
Type : `string`
Default value : `'FooterComponent'`
Decorators : `@LogProperty()`
Defined in src/app/footer/footer.component.ts:31
Local id for EmitterService

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

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

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

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

    import {
        LogMethod,
        LogProperty,
        LogPropertyWithArgs,
        LogClass,
        LogClassWithArgs
    } from '../shared/decorators/log.decorator';

    import { FooterComponentSchema } from './footer-component.metadata';

    /**
     * The footer component
     */
    @LogClassWithArgs('toto')
    @Component(FooterComponentSchema)
    export class FooterComponent {
        /**
         * Local reference of TodoStore
         */
        todoStore: TodoStore;
        /**
         * Local id for EmitterService
         */
        @LogProperty
        id: string = 'FooterComponent';

        /**
         * Starting filter param
         */
        @LogPropertyWithArgs('theCurrentFilter')
        currentFilter: string = 'all';

        /**
         * The "constructor"
         *
         * @param {TodoStore} todoStore A TodoStore -> see {@link TodoStore}
         */
        constructor(todoStore: TodoStore) {
            this.todoStore = todoStore;
        }

        /**
         * Removes all the completed todos
         */
        @LogMethod
        removeCompleted() {
            this.todoStore.removeCompleted();
        }

        /**
         * Display only completed todos
         */
        displayCompleted() {
            this.currentFilter = 'completed';
            EmitterService.get(this.id).emit('displayCompleted');
        }

        /**
         * Display only remaining todos
         */
        displayRemaining() {
            this.currentFilter = 'remaining';
            EmitterService.get(this.id).emit('displayRemaining');
        }

        /**
         * Display all todos
         */
        displayAll() {
            this.currentFilter = 'all';
            EmitterService.get(this.id).emit('displayAll');
        }
    }

    <div class="footer" *ngIf="todoStore.todos.length > 0">
        <span class="todo-count"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>
        <ul class="filters">
    		<li>
    			<a class="selected btn-filter" [class.selected]="currentFilter === 'all'"  (click)="displayAll()">All</a>
    		</li>
    		<li>
    			<a class="btn-filter" [class.selected]="currentFilter === 'remaining'" (click)="displayRemaining()">Active</a>
    		</li>
    		<li>
    			<a class="btn-filter"  [class.selected]="currentFilter === 'completed'" (click)="displayCompleted()">Completed</a>
    		</li>
    	</ul>
        <button class="clear-completed" *ngIf="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""