Added autofocus on editable task when edit mode is enabled on clicking the task label. Added a directive that does this

Author: npathai

src/app/app.module.ts

@@ -6,12 +6,14 @@ import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';
 import { TodoComponent } from './todo/todo.component';
 import { TaskComponent } from './todo/task.component';
+import { FocusDirective } from './directive/focus.directive';
 
 @NgModule({
   declarations: [
     AppComponent,
     TodoComponent,
-    TaskComponent
+    TaskComponent,
+    FocusDirective
   ],
   imports: [
     BrowserModule,

src/app/directive/focus.directive.spec.ts

@@ -0,0 +1,8 @@
+import { FocusDirective } from './focus.directive';
+
+describe('FocusDirective', () => {
+  it('should create an instance', () => {
+    const directive = new FocusDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directive/focus.directive.ts

@@ -0,0 +1,14 @@
+import { Directive, ElementRef, Renderer } from '@angular/core';
+
+@Directive({
+  selector: '[focus]'
+})
+export class FocusDirective {
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer) { }
+
+  ngOnInit() {
+    this.renderer.invokeElementMethod(
+      this.elementRef.nativeElement, 'focus', []);
+  }
+}

src/app/todo/task.component.html

@@ -5,8 +5,8 @@
    <div class="col-sm-10">
        <span [ngClass]="task.isDone ? 'task-done' : 'task'" (click)="enableEditing()" *ngIf="!editable">{{task.name}}</span>
 
-      <form *ngIf="editable" (submit)="editName()">
-         <input type="text" [(ngModel)] = "editedName" name="newName" (blur)="disableEditing()"/>
+      <form *ngIf="editable" class="form-group" (submit)="editName()">
+         <input type="text" class="form-control input-sm" [(ngModel)] = "editedName" name="newName" (blur)="disableEditing()" focus/>
       </form>
    </div>
    <div class="col-sm-1">