funky-framadate-front/src/app/pages/answers/answers.component.ts

import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
import {BaseComponent} from '../base-page/base.component';
import {ConfigService} from '../../config.service';

import {DOCUMENT} from '@angular/common';

@Component({
    selector: 'framadate-answers',
    templateUrl: './answers.component.html',
    styleUrls: ['./answers.component.scss']
})
export class AnswersComponent extends BaseComponent implements OnInit {

    private answerList = [];

    constructor(public config: ConfigService,
                @Inject(DOCUMENT) private document: any,
                private cd: ChangeDetectorRef) {
        super(config);
        this.answerList = this.config.answers;
    }

    // todo, manage validation of each page in a common way
    ngOnInit() {
    }

    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 = this.document.querySelectorAll('.answers .answer');
        const dom = AnswersDomToFocus[AnswersDomToFocus.length - 1];
        if (dom.focus) {
            dom.focus();
        }
    }

    // add a new answer on the press of ENTER in an input
    addWhenEnterKey(event) {
        console.log('event', event);
        if (event.keyCode === 13) {
            this.addAnswer();
        }
        return;
    }
}