Angularでundefinedな可能性のある要素を表示する

問題

下記のように|undefinedなどがある場合に、HTML上で参照しようとすると、下記のようなエラーが出る。

import {
  Component
} from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user: { name: string; age: number } | undefined = { name: 'tarou', age: 10 };
}

<p>
  this is element get demo
  {{user.name}}
</p>

err

Object is possibly 'undefined'

対策

undefinedの可能性があるオブジェクトを*ngIfで確認後、プロパティを利用するようにする。

<p *ngIf="user">
  this is element get demo
  {{user.name}}
</p>