@Input Angular undefined

Question

I've got a tree of three components where i pass down the json data from backend using property binding altough it gets displayed i always get errors in the console that

Cannot read property 'id' of null at ListCategoryComponent.ngOnInit

I tried the answer to similar threads to use different lifecycle hooks in List-category.component.ts (ngOnChanges and AfterContentInit) but still if doesnt work.

List.component.html - where i retrieve JSON from backend and pass it down into its child Forum-list-section.component

<app-list-section *ngFor="let section of sections" [section]="section" >
      </app-list-section>

List-section.component.ts - then extract categories from section and pass it further down

@Input() section;
  categories;

  ngOnInit() {
    this.categories = this.section['categories'];
  }

List-section.component.html

<app-list-category
    *ngFor="let category of categories" [category]="category"
    class="forum__post">
  </app-list-category>

List-category.component.ts where I finally i retrieve and display the recieved data

@Input() category: Category;
  categoryId: string;
  latestThreadId: string

 ngOnInit() {
    this.categoryId = `${this.category.id }-${this.category.slug}`;
    this.latestThreadId = `${this.category.latest_thread.id}-${this.category.latest_thread.slug}`;
  }