How can I removed white spaces from interpolation data in angular

Question

HTML File -

<tr *ngFor="let data of consultant; let id = index">
              <!-- <td>{{ id + 1 }}</td> -->
              <td>{{ data.name }}</td>
              <td *ngFor="let client of allClients; let i = index;">
                <p *ngIf="data.id === client.consultants.id">
                  {{client.name}}{{i === allClients.length - 1 ? '' : ', ' }}
                </p>
              </td>
              <td>{{ data.address }}</td>
              <td>{{ data.email }}</td>
</tr>

Problem ->

problem screenshot

I get output like mentioned in the image, and I don't know how can I remove this white space from here, kindly help me to set my output

Damian · Answer 1 · 2021-09-09T08:26:54.463

0

In order to remove the whitespace surrounding client names, you can trim all whitespace groups to just one whitespace. You can do it using replace method: client.name.replace(/\s+/g, ' ').trim(). trim is then used to remove the leading and trailing whitespaces.

In *.component.ts add:

public removeWhitespaces(input: string): string {
  return input.replace(/\s+/g, ' ').trim();
}

In *.component.html use the function:

<tr *ngFor="let data of consultant; let id = index">
  <!-- <td>{{ id + 1 }}</td> -->
  <td>{{ data.name }}</td>
  <td>
    <ng-container *ngFor="let client of allClients; let i = index;">
      <p *ngIf="data.id === client.consultants.id">
        {{ removeWhitespaces(client.name) }}{{ i === allClients.length - 1 ? '' : ', ' }}
      </p>
    </ng-container>
  </td>
  <td>{{ data.address }}</td>
  <td>{{ data.email }}</td>
</tr>

edited Sep 09 '21 at 08:26

answered Sep 09 '21 at 08:12

Damian

1,084
3
14
26

Parser Error: Unexpected token / at column 21 in [ {{client.name.replace(/\s+/g,' ').trim()}}{{i === allClients.length - 1 ? '' : ', ' }} ] in /Users/aps/Documents/New VGA-front/vga_front/src/app/pages/Consultants/search-consultants/search-consultants.component.html@55:22 (" = index;">
[ERROR ->]{{client.name.replace(/\s+/g,' ').trim()}}{{i === allClients.length - 1 ? '' : ', ' }} ")
– payal_harwani Sep 09 '21 at 08:22
@payal_harwani please see my updated answer. – Damian Sep 09 '21 at 08:23
still it's not working dear I didn't get the output properly – payal_harwani Sep 09 '21 at 08:25
@Damian-TeodorBeleș: Calling function in Angular interpolation is a bad practice. It might be invoked multiple times simultaneously. Please see [here](https://stackoverflow.com/a/45207623/6513921) for more info. – ruth Sep 09 '21 at 08:25
@payal_harwani I updated the answer again, please give it a shot (changes in html). – Damian Sep 09 '21 at 08:28

score 0 · Accepted Answer · answered Sep 09 '21 at 08:12

Possibly you have empty <td> cells for the falsy *ngIf conditions. Try to introduce a border to visualize the error.

To avoid it, you could wrap the *ngFor in a <ng-container> tag and place the *ngIf condition in the <td> tag. It'd avoid rendering empty <td>s.

<tr *ngFor="let data of consultant; let id = index">
  <!-- <td>{{ id + 1 }}</td> -->
  <td>{{ data.name }}</td>
  <ng-container *ngFor="let client of allClients; let i = index;">
    <td *ngIf="data.id === client.consultants.id">
      <p>{{client.name}}{{i === allClients.length - 1 ? '' : ', ' }}</p>
    </td>
  </ng-container>
  <td>{{ data.address }}</td>
  <td>{{ data.email }}</td>
</tr>

it just removes space from the first element but other comma separated elements have still spaces — payal_harwani, Sep 09 '21 at 08:36
@payal_harwani: Try to visualize the error with borders like I said. Try to see if empty ``s are still rendered. — ruth, Sep 09 '21 at 09:48

score 0 · Answer 3 · answered Sep 09 '21 at 08:15

I think you're accidentally creating a whole bunch of empty <td> elements. Try it like this and see if it's any better. this way you you don't create a td element when the data doesn't match

<tr *ngFor="let data of consultant; let id = index">
              <!-- <td>{{ id + 1 }}</td> -->
              <td>{{ data.name }}</td>
              <ng-container *ngFor="let client of allClients; let i = index;">
              <td *ngIf="data.id === client.consultants.id">
                <p>
                  {{client.name}}{{i === allClients.length - 1 ? '' : ', ' }}
                </p>
              </td>
              </ng-container>
              <td>{{ data.address }}</td>
              <td>{{ data.email }}</td>
</tr>

It could also be you're just trying to fill in all the clients in one table cell i would do that like this

              <td >
               <ng-container *ngFor="let client of allClients; let i = index;">
                <p *ngIf="data.id === client.consultants.id">
                  {{client.name}}{{i === allClients.length - 1 ? '' : ', ' }}
                </p>
                 </ng-container>
              </td>

How can I removed white spaces from interpolation data in angular

3 Answers3