File

src/app/header/header.component.ts

Description

The header component

Metadata

selector header
templateUrl ./header.component.html

Index

Properties
Methods
Inputs

Constructor

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

Inputs

newTodoText

The data-binding value of the input tag, added on enter to the todo store

Type: string

Default value: ''

Methods

addTodo
addTodo()

Ad a todo to the list

Returns : void

Properties

title
title: string
Type : string
Default value : 'todos'

Application main title

todoStore
todoStore: TodoStore
Type : TodoStore

Local reference of TodoStore

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

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

/**
 * The header component
 */
@Component({
    selector: 'header',
    templateUrl: './header.component.html'
})
export class HeaderComponent {
    /**
     * Application main title
     */
    title: string = 'todos';

    /**
     * Local reference of TodoStore
     */
    todoStore: TodoStore;

    /**
     * The data-binding value of the input tag, added on enter to the todo store
     */
    @Input() newTodoText: string = '';

    constructor(todoStore: TodoStore) {
		this.todoStore = todoStore;
	}

    /**
     * Ad a todo to the list
     */
    addTodo() {
		if (this.newTodoText.trim().length) {
            this.todoStore.add(this.newTodoText);
			this.newTodoText = '';
		}
	}
}
<h1>{{title}}</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="newTodoText" (keyup.enter)="addTodo()">
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""