In my Angular app I use the data from yaml file which looks like this:
id: 'test'
restart-seconds: 20
...
I need to display this data in the Angular material table (code is below).
Because one of the keys restart-seconds has the special character - I can't refer to it in my Angular template - the table code gives an error Property 'seconds' does not exist on type 'MyComponent'. (when I refer to it as element.restart-seconds in template)
<div>
<table mat-table [dataSource]="groupDataSource">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="restartseconds">
<th mat-header-cell *matHeaderCellDef>Restart Seconds</th>
<td mat-cell *matCellDef="let element">{{ element.restart-seconds}}</td>
</ng-container>
...
What can be done in this situation? Thank you for your help in advance!