Pass an isSelected property down to the tag

Author: hpinsley

src/redux/components/Todo.html

@@ -24,7 +24,7 @@
             </span>
         </div>
         <div style="display:inline-block">
-            <todo-tags (tagSelected)="filterOnTag($event)" [tags]="tags"></todo-tags>
+            <todo-tags (tagSelected)="filterOnTag($event)" [tags]="tags" [selectedTag]="tagFilter"></todo-tags>
         </div>
     </div>
 

src/redux/components/TodoTags/TodoTag.ts

@@ -5,14 +5,15 @@ import {CORE_DIRECTIVES} from 'angular2/common';
     selector: 'todo-tag',
     template: `
     <div (click)="tagClick()" style="display:inline-block; cursor:pointer; border-radius:5px;
-        color:gold; background-color:black; padding:5px">{{tag}}</div>
+        color:gold; background-color:black; padding:5px">{{tag}} - {{isSelected}}</div>
     `,
     directives: [CORE_DIRECTIVES]
 })
 
 export class TodoTag {
 
     @Input() tag: string;
+    @Input() isSelected: boolean;
     @Output() tagClicked: EventEmitter<string> = new EventEmitter<string>();
 
     ngOnInit() {

src/redux/components/TodoTags/TodoTags.html

@@ -1,3 +1,3 @@
 <div style="display:inline-block">
-    <todo-tag (tagClicked)="tagClicked($event)" [tag]="t" *ngFor="#t of tags | async"></todo-tag>
+    <todo-tag (tagClicked)="tagClicked($event)" [tag]="t" [isSelected]="t === selectedTag" *ngFor="#t of tags | async"></todo-tag>
 </div>

src/redux/components/TodoTags/TodoTags.ts

@@ -13,6 +13,7 @@ import {TodoTag} from './TodoTag';
 export class TodoTags {
 
     @Input() tags: Observable<string[]>;
+    @Input() selectedTag: string;
     @Output() tagSelected: EventEmitter<string> = new EventEmitter<string>();
 
     tagClicked(tag:string) {