Not able remove white spaces in HTML of a component in Angular application using .trim() method

Question

I am working on an angular application. In HTML of a component within mat-select I am trying to remove whiteapces using .trim() method but my application is breaking. My code

<div class="col-2">
    <mat-form-field>
            <mat-select
                    placeholder="Source"
                    [(ngModel)]="applicable.SourceNm.trim()">
                    <mat-option
                            *ngFor="let source of applicableLevel.SourceListTxt.split(',')"
                            [value]="source">
                            {{source.trim()}}
                    </mat-option>
            </mat-select>
    </mat-form-field>
</div>

If I remove the .trim() in ngModel, then the application is working fine. I am not sure what is wrong in using .trim() in ngModel. The error I get is

Parser Error: Unexpected token '=' at column 32 in [applicableLevel.SourceNm.trim()=$event] in ng:///AdminModule/ConfigurationComponent.html@516:160 ("                                                                                                    [ERROR ->][(ngModel)]="applicableLevel.SourceNm.trim()"

Cagri Tacyildiz · Accepted Answer · 2020-10-05 08:59:12Z

2

Demo You can try pipe for trimming

 import { Pipe, PipeTransform } from '@angular/core';
   @Pipe({
      name: 'trim',
      pure: false
   })
    
   export class TrimPipe implements PipeTransform {
      transform(value: string): any { 
        return value.trim()
      }
      
    }

in html {{source | trim }}

dont forget to add app.modules declarations this pipe.

ngModel assings to parameter not to function. So you need to delete trim() from ngModel and make your value as trimmed

<div class="col-2">
    <mat-form-field>
            <mat-select
                    placeholder="Source"
                    [(ngModel)]="applicable.SourceNm">
                    <mat-option
                            *ngFor="let source of applicableLevel.SourceListTxt.split(',')"
                            [value]="source | trim">
                            {{source | trim }}
                    </mat-option>
            </mat-select>
    </mat-form-field>
</div>

edited Oct 5, 2020 at 8:59

answered Oct 5, 2020 at 8:42

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cagri Tacyildiz Over a year ago

in code you didn't also closed mat-select after ngModel.

Cagri Tacyildiz Over a year ago

in ngmodel dont use trim you need to assing to parameter not to trim function. make your value as trimmed then your model value will be trimmed. I edited answer. Check demo in answer please

chink Over a year ago

this way, I think I can trim values in applicableLevel.SourceListTxt, but I want to trim applicable.SourceNm. The initial value of applicable.SourceNm has white spaces. and this value is one among the dropdown. I think I have to do that in .ts

Collectives™ on Stack Overflow

Not able remove white spaces in HTML of a component in Angular application using .trim() method

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related