Using getters in the Angular component html template

Question

I have a data model class, let say:

class Question {
    body: string;
    
    get bodyForTableRow(): string {
        return this.body.replace("\n", " // ");
    }
}

And in the component html template I use the following declaration to evaluate the getter value:

 {{ oneQuestion.bodyForTableRow }}

But instead of value, where new lines are replace with // symbols I get an empty string.

When I use

 {{ oneQuestion.body }}

it displays the body contents.

Why does it happen? Should I always use a real fields to map them to the html-components and getters are not suitable for this case?

---

UPDATE

When the declaration in the template looks like that

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- other columns skipped --> 

  <ng-container matColumnDef="body">
    <th mat-header-cell *matHeaderCellDef>Question Body</th>
    <td mat-cell *matCellDef="let oneQuestion">
      {{ oneQuestion.body }}
    </td>
  </ng-container>
</table>

It displays the body content in the every table row. But when I use this code:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- other columns skipped --> 

  <ng-container matColumnDef="body">
    <th mat-header-cell *matHeaderCellDef>Question Body</th>
    <td mat-cell *matCellDef="let oneQuestion">
      {{ oneQuestion.bodyForTableRow }}
    </td>
  </ng-container>
</table>

It shows empty rows.

---

UPDATE 2

Question data model class declared like that:

export class QuestionDataModel {
  body: string; // public access field for template
  
  constructor(bodyValue: string) {
    this.body = bodyValue;
  }  
  
}

Data source is declared like that:

  dataSource: QuestionDataModel[];

I populate the datasource via rest-call

const url: string = `/questions/all`;
this.http.get(url).subscribe(
  (data: QuestionDataModel[]) => {
    this.dataSource = data;
  },
  (error) => this.reportServerError(error)
);

Answer 1

what you're doing should work, you've got some other issue going on like not instantiating your class correctly maybe, but you probably really want to restructure to use a setter instead...

class Question {
    private _body: string;

    set body(body: string) {
      this.bodyForTableRow = body.replace("\n", " // ");
      this._body = body;
    }
    get body() {
      return this._body;
    }
    
    bodyForTableRow: string;
}

the way angular change detection works, it evaluates functions on every change detection cycle which can be pretty frequent, so by putting that replace in a getter, you're running it on every single cycle. With this structure, you're just running and setting it when you need to.

To use this or any class, you need to use the new keyword,

this.oneQuestion = new Question();
this.oneQuestion.body = 'my string with line returns \n next line';