File

src/app/footer/footer.component.ts

Description

The footer component

Metadata

selector footer
template
<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>

Index

Properties
Methods

Constructor

constructor(todoStore: TodoStore)

The "constructor"

Parameters :
Name Type Optional Description
todoStore TodoStore no

A TodoStore

Methods

displayAll
displayAll()

Display all todos

Returns : void
displayCompleted
displayCompleted()

Display only completed todos

Returns : void
displayRemaining
displayRemaining()

Display only remaining todos

Returns : void
removeCompleted
removeCompleted()
Decorators : LogMethod

Removes all the completed todos

Returns : void

Properties

currentFilter
currentFilter: string
Type : string
Default value : 'all'
Decorators : LogPropertyWithArgs

Starting filter param

id
id: string
Type : string
Default value : 'FooterComponent'
Decorators : LogProperty

Local id for EmitterService

todoStore
todoStore: TodoStore
Type : TodoStore

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 } from '../shared/decorators/log.decorator';

/**
 * The footer component
 */
@LogClass
@Component({
    selector: 'footer',
    providers: [],
    template: `
    <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>
`
})
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
     */
    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');
    }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""