Hardcoded string with [(ngModel)]

Question

I am trying to append the string "By - " with a value obtained from a property through ngModel i.e. <textarea [(ngModel)]="book.Author"..>and add it to a header <h2>{{book.Title}}</h2> in angular so that it displays "Title By - Author". The data is being obtained through http api. I want the "By - Author" only when there is a value for Author in the text area. How do I achieve this? I am new to angular.

Answer 1

A solution could be to use Angular directives *ngIf in combination with <ng-container> in your header like so:

<h2>
{{book.Title}} <ng-container *ngIf="book.Author"> By - {{book.Author}}</ng-container>
</h2>

ng-container

doesn't interfere with styles or layout because Angular doesn't put it in the DOM.