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

- Private _fullName
- newTodoText
- title
- todoStore

###### Methods

- addTodo

###### Inputs

- fullName

###### Accessors

- fullName

### Constructor

`constructor(todoStore: TodoStore)`
Defined in src/app/header/header.component.ts:25

Parameters :

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

### Inputs

fullName
Type : `string`
Defined in src/app/header/header.component.ts:56
Setter of _fullName https://compodoc.app/

### Methods

addTodo
`addTodo()`
Defined in src/app/header/header.component.ts:34
Ad a todo to the list Returns : `void`

### Properties

Private _fullName
Type : `string`
Defined in src/app/header/header.component.ts:41

newTodoText
Type : `string`
Default value : `''`
Defined in src/app/header/header.component.ts:25
The data-binding value of the input tag, added on enter to the todo store

title
Type : `string`
Default value : `'todos'`
Defined in src/app/header/header.component.ts:15
Application main title

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

### Accessors

fullName
get `fullName()`
Defined in src/app/header/header.component.ts:47
Getter of _fullName Returns : `string`
set `fullName(newName: string)`
Defined in src/app/header/header.component.ts:56

Setter of _fullName https://compodoc.app/

Parameters :

Name | Type | Optional | Description
newName | `string` | No | The new name

Returns : `void`

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

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

    import { HeaderComponentSchema as MyAlias } from './header-component.metadata';

    /**
     * The header component
     */
    @Component(MyAlias)
    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
         */
        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 = '';
            }
        }

        private _fullName: string;

        /**
         * Getter of _fullName
         * @return {string} _fullName value
         */
        get fullName(): string {
            return this._fullName;
        }

        /**
         * Setter of _fullName {@link https://compodoc.app/}
         * @param  {string} newName The new name
         */
        @Input()
        set fullName(newName: string) {
            this._fullName = newName;
        }
    }

    <h1>{{title}}</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="newTodoText" (keyup.enter)="addTodo()">

    h1 {
        margin-top: 75px;
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""