CODEWITHSUNDEEP
javascriptangularjsangularangularjs-directive
karthi
karthi

Reputation: 27

How to replace all underscores to spaces in angular?

My Variable :

{{imageGrid.bannerName}}

My Output :

DINING_LANDING_PAGE_MEAL_PLAN_SUBSCRIBED_USER

How to replace _ in angularjs ?

Upvotes: 1

Views: 2568

Answers (4)

newstackoverflowuser5555
newstackoverflowuser5555

Reputation: 751

You can write a custom pipe if you are using Angular V2+

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Replace the underscore with space 
*/
@Pipe({name: 'underscore'})
export class UnderscorePipe implements PipeTransform {
  transform(value: string): string {
    return  value.replace(/\_/g, ' ');
  }
}

This pipe has to be declared in your module. i.e., AppModule.ts

import { UnderscorePipe } from './underscore.pipe';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  declarations: [
    AppComponent,
    UnderscorePipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the HTML side

{{imageGrid.bannerName | underscore}}

If you would like to have a more sophisticated pipe, we can pass the parameter

Custom pipe implementation

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Replace the the first paremeter with the second parameter 
*/
@Pipe({name: 'replace'})
export class ReplacePipe implements PipeTransform {
  transform(value: string, existing: string, latest: string): string {
    return  value.replace(new RegExp('\\'+existing, 'g'), latest);
  }
}

HTML file

 <h2>Hi Please {{value | replace: '_' : ' '}}</h2>

Upvotes: 0

lam
lam

Reputation: 565

Try this?

{{imageGrid.bannerName.replace('_', ' ')}}

ok the correct solution needs to add a flag 'g'

{{imageGrid.bannerName.replace(/_/g, ' ')}}

Upvotes: 2

ibrahim mahrir
ibrahim mahrir

Reputation: 31712

Create a custom filter called, for example, noUnderscore like so:

/* the module you want to add this to */.filter("noUnderscore", function () {
    return function (input) {
        return input.replace(/_/g, " ");
    }
});

Then use it in your template like so:

{{ imageGrid.bannerName | noUnderscore }}

Upvotes: 3

Alexander Elgin
Alexander Elgin

Reputation: 6956

“DINING_LANDING_PAGE_MEAL_PLAN_SUBSCRIBED_USER”.split(“_”).join(“ “)

Upvotes: 2

Related Questions