Add macro

src/components/macro/header/macro-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewChild } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -10,12 +10,21 @@ import { AppState } from '../../../store/index';
 @Component({
     selector: 'macro-header',
     template: require('./macro-header.component.html'),
-    styles: [require('./macro-header.component.scss')]
+    styles: [require('./macro-header.component.scss')],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MacroHeaderComponent {
     @Input() macro: Macro;
+    @Input() isNew: boolean;
+    @ViewChild('macroName') macroName: ElementRef;
 
-    constructor(private store: Store<AppState>) { }
+    constructor(private store: Store<AppState>, private renderer: Renderer) { }
+
+    ngOnChanges() {
+        if (this.isNew) {
+            this.renderer.invokeElementMethod(this.macroName.nativeElement, 'focus', []);
+        }
+    }
 
     removeMacro() {
         this.store.dispatch(MacroActions.removeMacro(this.macro.id));