Using translate pipe (ngx-translate), string is read but it still gives a "Cannot read property" error (Angular 6)

Question

I have an Angular app which uses the ngx-translate package to translate static strings. The value is displayed on the frontend, the property is in the json file as well. For a strange reason, there's only one component where it throws this error 3 times:

ng:///HomeModule/NewestFeatureComponent.ngfactory.js:19 ERROR TypeError: Cannot read property 'title' of undefined
at Object.eval [as updateRenderer] (ng:///HomeModule/NewestFeatureComponent.ngfactory.js:34)
at Object.debugUpdateRenderer [as updateRenderer] (vendor.js:89449)
at checkAndUpdateView (vendor.js:88486)
at callViewAction (vendor.js:88846)
at execComponentViewsAction (vendor.js:88774)
at checkAndUpdateView (vendor.js:88487)
at callViewAction (vendor.js:88846)
at execComponentViewsAction (vendor.js:88774)
at checkAndUpdateView (vendor.js:88487)
at callViewAction (vendor.js:88846)

newest-feature.component

import { Component, OnInit } from '@angular/core';
import { BlogBox } from 'src/models/blog-box';
import { BlogService } from 'src/app/blog/blog.service';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';

@Component({
  selector: 'app-newest-feature',
  templateUrl: './newest-feature.component.html',
  styleUrls: ['./newest-feature.component.scss']
})
export class NewestFeatureComponent implements OnInit {
  post: BlogBox;

  constructor(private readonly bs: BlogService, private translate: TranslateService) {
    this.getLastUpdatesPost();

    // Subcribe to language change to fetch the posts again
    translate.onLangChange.subscribe((event: LangChangeEvent) => {
      this.getLastUpdatesPost();
    });
  }

  getLastUpdatesPost() {
    this.bs.getLastUpdatesPost(this.translate.currentLang).subscribe(res => {
      this.post = res;
    });
  }

  ngOnInit() {
  }

}

newest-feature.html

<div id="newestFeature" class="container-fluid">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-6 order-last order-sm-first post-image">
                    <img src="{{post?.img}}" alt="">
                </div>

                <div class="col-12 col-sm-5 offset-sm-1 order-first order-sm-last post">
                    <h5>{{'newestFeature.title' | translate}}</h5>
                    <h3 [innerHTML]="post.title"></h3>
                    <h4>{{post.featuredCategory}}</h4>
                    <h4> <span [innerHTML]="post.date | date: ' __ MMMM / yyyy' | formatDateSelector"> </span></h4>
                    <p [innerHTML]="post.content"></p>
                    <!-- <a href="updates/"><button class="button button-pink-orange">Összes fejlesztés</button></a> -->
                </div>
            </div>
        </div>
    </div>
</div>

hu.json

{
    "newestFeature": {
        "title": "Legfrissebb fejlesztésünk"
    }
}

Before anyone says anything about the elvis operator, it cannot be used with this pipe

Answer 1

This error is related to: post.title.

It means that before post is set here:

this.bs.getLastUpdatesPost(this.translate.currentLang).subscribe(res => {
  this.post = res;
});

It has no value, so its undefined.

You should use ? in html like this:

post?.title

You can read about this more for example here: https://blog.fullstacktraining.com/question-mark-in-angular-expression/

The other solution, if you want to avoid ? operator is to use *ngIf for example here:

<div class="row" *ngIf="post">