ERROR TypeError: Cannot read property 'titleKey' of undefined

[HDebeuf]

Not sure if I'm doing something wrong, but I am unable to use ngAutocomplete with 2 linked input entries and child elements. The aim is to filter the second input values according to the choise of the first one.

Here is the error I'm getting in the console:

ERROR TypeError: Cannot read property 'titleKey' of undefined
    at VM3247 vendor.js:68871
    at Array.forEach (<anonymous>)
    at NgAutoCompleteComponent.push../node_modules/ng-auto-complete/fesm5/ng-auto-complete.js.NgAutoCompleteComponent.SetChildren (VM3247 vendor.js:68864)
    at NgAutoCompleteComponent.push../node_modules/ng-auto-complete/fesm5/ng-auto-complete.js.NgAutoCompleteComponent.ListenToSelected (VM3247 vendor.js:68806)
    at Object.eval [as handleEvent] (VM3256 NgAutoCompleteComponent.ngfactory.js:21)
    at handleEvent (VM3247 vendor.js:43361)
    at callWithDebugContext (VM3247 vendor.js:44454)
    at Object.debugHandleEvent [as handleEvent] (VM3247 vendor.js:44157)
    at dispatchEvent (VM3247 vendor.js:40820)
    at VM3247 vendor.js:42300

Here is my component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { CreateNewAutocompleteGroup, NgAutoCompleteComponent, SelectedAutocompleteItem } from 'ng-auto-complete';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})

export class EditorComponent implements OnInit {

  @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;

  _removables = [];

  public group = [
    CreateNewAutocompleteGroup(
        'Search / choose in / from list',
        'completer_one',
        [
            {
                title: 'Option 1', id: '1',
                children: [
                    {title: 'Option 1', id: '1'},
                    {title: 'Option 2', id: '2'}
                ]
            },
            {
                title: 'Option 2', id: '2',
                children: [
                    {title: 'Option 3', id: '3'},
                    {title: 'Option 4', id: '4'}
                ]
            },
            {
                title: 'Option 3', id: '3',
                children: [
                    {title: 'Option 5', id: '5'},
                    {title: 'Option 6', id: '6'}
                ]
            },
        ],
        {titleKey: 'title', childrenKey: 'children'},
        ''
    ),
    CreateNewAutocompleteGroup(
        'Search / choose in / from list',
        'completer_two',
        [
            {title: 'Option 1', id: '1'},
            {title: 'Option 2', id: '2'},
            {title: 'Option 3', id: '3'},
            {title: 'Option 4', id: '4'},
            {title: 'Option 5', id: '5'},
            {title: 'Option 6', id: '6'},
        ],
        {titleKey: 'title', childrenKey: null},
        'completer_one'
    )
  ];

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
      console.log();
  }

  Selected(item: SelectedAutocompleteItem) {
      console.log('its actually saying its selected', item);
  }

  RemoveSelected(item: SelectedAutocompleteItem) {
      if (item.item !== null) {
          this._removables.push(item.item);
      }

      this.completer.RemovableValues('completer_two', this._removables);
  }

}

And here my component.html:

<div>
    <ng-auto-complete (selected)="Selected($event)"
                     [classes]="['fifty']"
                     [group]="group"></ng-auto-complete>
    <div style="clear: both;"></div>
</div>

May you have the solution to my issue ?

Thank you. Best regards,

Hendrik