⚡ ability to add a new answer and focus

src/app/pages/answers/answers.component.html

@@ -8,9 +8,10 @@
 	</p>
 	<ol>
 		<li #answers *ngFor="let answer of config.answers; index as i;trackBy trackFunction"
-					class="anwser">
+					class="answer-item">
 			<input
 						type="text"
+						class="answer"
 						[(ngModel)]="answer.text"
 						placeholder="réponse"
 			>
@@ -19,7 +20,7 @@
 	</ol>
 	<button
 				class="btn-outline btn-block"
-				(click)="config.answers.push({id:config.answers.length+1,text:''})">
+				(click)="addAnswer()">
 		Ajouter
 	</button>
 	<a [routerLink]="'/step/recapitulatif'" class="btn btn-block">Voyons ce que ça donne</a>

src/app/pages/answers/answers.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import {BaseComponent} from '../base-page/base.component';
 import {ConfigService} from '../../config.service';
 
@@ -9,9 +9,10 @@ import {ConfigService} from '../../config.service';
 })
 export class AnswersComponent extends BaseComponent implements OnInit {
 
-    private answerList=[];
+    private answerList = [];
 
-    constructor(config: ConfigService) {
+    constructor(config: ConfigService,
+                private cd: ChangeDetectorRef) {
         super(config);
         this.answerList = this.config.answers;
     }
@@ -20,13 +21,26 @@ export class AnswersComponent extends BaseComponent implements OnInit {
     ngOnInit() {
     }
 
-    trackFunction(index: number, item: any): number { return item.id; }
+    trackFunction(index: number, item: any): number {
+        return item.id;
+    }
+
+    addAnswer() {
+        this.config.answers.push(
+            {
+                id: this.config.answers.length + 1,
+                text: ''
+            });
+        this.cd.detectChanges(); // to refresh the view before focusing on the new input
+        const AnswersDomToFocus = document.querySelectorAll('.answers .answer');
+        AnswersDomToFocus[AnswersDomToFocus.length - 1].focus();
+    }
 
     // add a new answer on the press of ENTER in an input
     addWhenEnterKey(event) {
         console.log('event', event);
         if (event.keyCode === 13) {
-            this.config.addAnswer();
+            this.addAnswer();
         }
         return;
     }

src/app/pages/pictures/pictures.component.html

@@ -1,3 +1,5 @@
 <h1 i18n>
 	Images
 </h1>
+<a [routerLink]="'/step/visibility'" class="btn btn-block">ok</a>
+

src/app/pages/resume/resume.component.html

@@ -3,5 +3,8 @@
 </h1>
 <section>
 	TODO
+	<pre>
+		{{config |json}}
+	</pre>
 </section>
 <a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>

src/assets/_global_layout.scss

@@ -36,6 +36,9 @@ textarea {
 
 .btn-block {
   display: block;
+  font-weight: 600;
+  font-size: 1.25em;
+  text-align: center;
 }
 
 a {