File

src/app/header/header.component.ts

Description

The header component

Metadata

selector header
styles h1 { margin-top: 75px; }
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

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',
    styles: [
`h1 {
    margin-top: 75px;
}`
    ]
})
export class HeaderComponent {
    /**
     * Application main title
     */
    title = 'todos';

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

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

    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

result-matching ""

    No results matching ""