Switching to Angular - Third Edition

Passing inputs and consuming the outputs

Now, let's combine the components we defined in the previous section and implement the complete application.

The last component we need to take a look at is TodoApp:

@Component({ 
  selector: 'todo-app',
  template: ` 
    <h1>Hello {{name}}!</h1> 
 
    <p> 
      Add a new todo: 
      <input-box inputPlaceholder="New todo..." 
        buttonLabel="Add" 
        (inputText)="addTodo($event)"> 
      </input-box> 
    </p> 
 
    <p>Here's the list of pending todo items:</p> 
    <todo-list [todos]="todos" (toggle)="toggleCompletion($event)"></todo-list> 
  ` 
}) 
class TodoApp {...} 

Initially, we define the TodoApp class and decorate it with the @Component decorator. Note that in order to use the InputBox and TodoList components, we will need to include them in the declarations ...