[Angular 2] Passing data to components with @Input

Posted 2020-06-26 Answer1215

@Input allows you to pass data into your controller and templates through html and defining custom properties. This allows you to easily reuse components, such as item renderers, and have them display different values for each instance of the renderer.

 

For this part of code, we use ‘todo‘ a lot, so it would be a good idea to exract a complete to handle all the action about todo:

        <ul>
            <li *ngFor="#todo of todoService.todos">
                <span [hidden]="todo.status == ‘completed‘"
                    [contentEditable]="todo.isEdit">{{todo.title}}</span>
                <button (click)="todo.toggle()">Toggle</button>
                <button (click)="todo.edit()">Edit</button>
            </li>
            
        </ul>

 

TodoItemRenderer.ts: 

import {Component, Input} from ‘angular2/core‘;
@Component({
    selector: ‘todo-item-renderer‘,
    template: `
        <div>    
            <span [hidden]="todo.status == ‘completed‘"
                  [contentEditable]="todo.isEdit">{{todo.title}}</span>
            <button (click)="todo.toggle()">Toggle</button>
            <button (click)="todo.edit()">Edit</button>
        </div>
    `
})

export class TodoItemRenderer{
    @Input() todo
}

 

TodoList.ts:

import {Component} from ‘angular2/core‘;
import {TodoService} from ‘./TodoService‘;
import {TodoItemRenderer} from ‘./TodoItemRenderer‘;

@Component({
    selector: ‘todo-list‘,
    directives: [TodoItemRenderer],
    template: `
        <ul>
            <li *ngFor="#todo of todoService.todos">
                <todo-item-renderer [todo]="todo"></todo-item-renderer>
            </li>
            
        </ul>
    `
})

export class TodoList{
    constructor(public todoService: TodoService){
        
    }
}