Add *ngFor support for arc-default-focus (#70)

* fix el.tabindex does not work in edge

* add ngFor support for arc-default-focus

demo/src/bundles/demo/page1.component.ts

@@ -87,7 +87,7 @@ import { Observable } from 'rxjs/Observable';
         <div class="box" arc arc-default-focus
           *ngIf="defaultBox"
           (click)="toggleDefaultBox()">
-          I capture focus! Click me to toggle!
+          I capture default focus! Click me to toggle!
         </div>
       </div>
       <div class="box-wrapper">

readme.md

@@ -55,6 +55,13 @@ You can pass an Observable to `arc-set-focus` which, when fired, will forcefully
 
 When `arc-focus` is on an element, that element will steal the page focus when it's instantiated. Setting this is a shortcut to passing `Observable.of(undefined)` to `arc-set-focus` to immediately trigger a focus capture.
 
+It can also be used with *ngFor. For instance, following will focus the 3rd element in ngFor
+```html
+<div
+  *ngFor="let box of boxes; let i = index"
+  arc [arc-default-focus]="i === 2">
+</div>
+```
 ##### (arc-capture-outgoing)="onEvent(IArcEvent)"
 
 `arc-capture-outgoing` can be set to handle, and possibly cancel, events sent while the element or one of its children are focused. See the `IArcEvent` type for more details:

src/arc.directive.ts

@@ -48,7 +48,10 @@ export class ArcDirective implements OnInit, OnDestroy, IArcHandler {
   public arcFocus = new EventEmitter<HTMLElement>();
 
   @Input('arc-default-focus')
-  public set arcDefaultFocus(_ignored: any) {
+  public set arcDefaultFocus(shouldFocus: boolean) {
+    if (shouldFocus === false) {
+      return;
+    }
     this.arcSetFocus = this.arcSetFocus.startWith(undefined);
   }
 
@@ -113,10 +116,10 @@ export class ArcDirective implements OnInit, OnDestroy, IArcHandler {
 
   public ngOnInit() {
     this.registry.add(this);
-    this.arcSetFocus.subscribe(() => this.registry.setFocus.next(this.el.nativeElement));
-    if (!this.innerExclude && !this.innerExcludeThis && this.el.nativeElement.tabIndex === -1) {
+    if (!this.innerExclude && !this.innerExcludeThis) {
       this.el.nativeElement.tabIndex = 0;
     }
+    this.arcSetFocus.subscribe(() => this.registry.setFocus.next(this.el.nativeElement));
   }
 
   public ngOnDestroy() {