Данные не определены в компоненте, но в другом компоненте он существует?

Question

Я озадачен, так как я могу вызывать открытую переменную в компоненте из HTML-файла просто отлично - компонент временных фильтров,

Тем не менее, когда я пытаюсь вызвать его из другого компонента (engagement-filter.component), он возвращается как неопределенный!

Рабочий HTML:

время линия-filters.html:

  #productFilter
  [label]="'Filter on Engagement Types' | translate"
  [searchPlaceholder]="'Search...' | translate"
  [items]="timelineHelper.products"  THIS IS WHAT IM LOOKING AT.
  (filterUpdate)="filter($event)">
</tl-checkbox-group>

JavaScript (time-line-filters.html):

import { EngagementTimeline } from './../../../utils/engagement-

export class TimelineFilterComponent implements OnInit {

@Input() timelineHelper: EngagementTimeline;
}

Класс EngagementTimeline, используемый для ввода:

export class EngagementTimeline {
    public products: EngagementProduct[] = []; BEING CALLED
    }

Вышеуказанное работает, теперь, когда я пытаюсь сделать то же самое для моего engagement-filter.html, я не могу прочитать продукты undefined.

    <tl-checkbox-group *ngIf="this.engagementService.potentialEngagements"
#productFilter
[label]="'Engagement Types' | translate"
[searchPlaceholder]="'Search...' | translate"
[items]="timelineHelper.products"  ---> Exactly the same here 
[fullscreen]="false"
(filterUpdate)="updateIndividuals($event)">

JS (engagement-filter.component

import { EngagementTimeline } from './../../../utils/engagement-timeline';
export class EngagementFilterComponent implements OnInit {
  @Input() timelineHelper: EngagementTimeline;
}

Я что-то упускаю из виду очевидно?

Любая помощь будет принята с благодарностью, спасибо!