How to combine string and array in string interpolation of ngfor in Angular

You can create a new array which stores the transformed value.

Here we use the regex /[\[\]]/g to which matches the characters [ and ] and replaces it with empty string, finally we join the values on the array.

We can use @for to loop and create the rows.

I am creating a new array, because my other solution involves transforming using a function, which runs everytime during change detection, so this method below is better for performance.

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
  
<table style="width:100%">
  <tr>
    <th>Column A</th>
    <th>Column B</th> 
  </tr>
    @for(item of tempTransformed;track $index) {
  <tr>
    <td>{{item.value1}}</td>
    <td>{{item.value3}}, {{item.value2}}</td>
  </tr>
    }
</table>

  `,
})
export class App {
  temp: Array<any> =  [
    {
      value1: 'as',
      value2: '[a, b, c, d, e]',
      value3: 'alphabets',
    },
    {
      value1: 'qw',
      value2: '[aa, bb, cc, dd, ee]',
      value3: 'alphas',
    }
  ];
  tempTransformed: Array<any> = [];
  ngOnInit() {
    this.tempTransformed = this.temp.map((item: any) => {
      item.value2 = item.value2.replaceAll(/[\[\]]/g, '');
      return item;
    });
  }
}

bootstrapApplication(App);

Stackblitz Demo

Same code but with *ngFor

Stackblitz Demo