Correct use of Elvis operator in Angular2 for Dart component's view

Question

I see in Angular2 Dart Angular for Dart Cheat Sheet (v2.0.0-beta.2) that the Elvis operator is supported.

I am trying to use it in an a components view but it seems

Answer 1

In the case that name is null you can also do this

<input type="text" *ngIf="name" [(ngModel)]="name.first">

Answer 2

You can use *ngIf, but sometimes it fails.

<input type="text" *ngIf="name" [(ngModel)]="name.first">

Bind the data of the textarea with [value] or [ngModel]: For input:

<input type="text" (change)="dosomething($event.target.value)" [value]="!noHero ? (hero?.name) : ''">
<input type="text" (change)="dosomething($event.target.value)" [ngModel]="!noHero ? (hero?.name) : ''">
<input type="text" (change)="hero.name=$event.target.value" [ngModel]="hero?name">

Similar for textarea:

<textarea (change)="dosomething($event.target.value)" [value]="!noHero ? (hero?.name) : ''"></textarea>
<textarea (change)="dosomething($event.target.value)" [ngModel]="!noHero ? (hero?.name) : ''"></textarea>
<textarea (change)="hero.name=$event.target.value" [ngModel]="hero?name"></textarea>

Example: https://stackblitz.com/edit/angular-tbptuy

Answer 3

As the error message says it can't be used for assignment. Where should the value be assigned to when name is null? If you split the short form to the more explicit one

[ngModel]="name?.first" (ngModelChange)="name.first=$event"

then you can use the elvis operator.

Answer 4

Go to your component.ts class and initialize the model's properties to "" or whatever the appropriate default value should be.

A good place would be ngOnInit() method.

This helped me on Angular 5.