[Angular 2] Exposing component properties to the template

Showing you how you can expose properties on your Controller to access them using #refs inside of your template.

 

// letterSelect.ts

import {Component, View, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';

@Component({
    selector: 'letter-select'
})
@View({
    directives: [NgFor,FORM_DIRECTIVES],
    template: `
        <select [(ng-model)]="selectedLetter">
            <option *ng-for="#letter of letters">{{letter}}</option>
        </select>
    `
})

export class LetterSelect {
    letters: string[] = ['e', 's', 'w'];
    selectedLetter: string = 'e';
    constructor() {

    }
}

 

todoList.ts

import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2';
import {TodoService} from './todoService';
import {TodoItemRender} from './todoItemRender';
import {StartsWith} from './startsWith';
import {LetterSelect} from './letterSelect';

@Component({
    selector: 'todo-list'
})
@View({
    pipes: [StartsWith],
    directives: [NgFor, TodoItemRender, FORM_DIRECTIVES, LetterSelect],
    template: `
          <div>
                <todo-item-render
                    *ng-for="#todo of todoService.todos | startsWith:'title':letterSelect.selectedLetter"
                    [todoinput]="todo"
                >
                </todo-item-render>
                <letter-select #letter-select></letter-select>
          </div>
    `
})

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

    }
}