Angular, Safe navigation operator.


Simple example of Safe navigation operator. Everything what you need will be generated after executing this command ng new hello-word. After that, what you have to do, is adjust few files. Of course more you can find in Angular documentation, here we have only my notes. One more thing, if you don’t like to install node mess on your local computer you can use my or similar docker image
https://hub.docker.com/r/szalek/angular-cli/

The Angular safe navigation operator (?.) is a fluent and convenient way to guard against null and undefined values in property paths. Here it is, protecting against a view render failure if the currentHero is null. mode

Old way (app.component.html)

<pre *ngIf="person.addressHome">{{person.addressHome.city}}</pre>

New way (app.component.html)

<pre>{{person.addressHome?.city}}</pre>

app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  person = {
    name: "Michał",
    addressWork: {
      city: "Gdańsk"
    },
    // addressHome: {
    //   city: "Toruń"
    // }
  }
}