Angular mat-cell element for json.attribute.info structure

I have some json structures and I have a dynamic list component. This is the structure:

testData: any[] = [                                         
    {name1: 'name1', name2: 'name2', attributes: { attr1: "One111111", attr2: "One222222", info: { data1: "infoData1"}},},
    {name1: 'name2', name2: 'name2', attributes: { attr1: "Two111111", attr2: "Two2", info: { data1: "infoData11"}},},
]

Several options for containers so I can display different kinds of data:

<ng-container *ngIf="listRowAttribute.format=='json' && listRowAttribute.visible==true" matColumnDef={{listRowAttribute.name}}>
          <th mat-header-cell *matHeaderCellDef> {{listRowAttribute.columnName}} </th>
          <td mat-cell *matCellDef="let element">{{element[listRowAttribute.name]}}</td>
        </ng-container>

        <ng-container *ngIf="listRowAttribute.format=='json1' && listRowAttribute.visible==true" matColumnDef={{listRowAttribute.name}}>
          <th mat-header-cell *matHeaderCellDef> {{listRowAttribute.columnName}} </th>
          <td mat-cell *matCellDef="let element">{{element['attributes'][listRowAttribute.name]}}</td>
        </ng-container>

        <ng-container *ngIf="listRowAttribute.format=='json2' && listRowAttribute.visible==true" matColumnDef={{listRowAttribute.name}}>
          <th mat-header-cell *matHeaderCellDef> {{listRowAttribute.columnName}} </th>
          <td mat-cell *matCellDef="let element">{{element['attributes']['info'][listRowAttribute.name]}}</td>
        </ng-container>

I've been able to achieve the results I as looking for using these mat-call definitions. I haven't seen it done this way, but it works pretty well. I'm trying to get a feel for if this is a bad practice or if doing it this way causes some kind of problem later.

Thanks