Angular - Altering the presentation without altering the initial content

Question

Angular - Altering the presentation without altering the initial content

How can I format the data for viewing purposes while maintaining its original value?

I have created a method to format the value:

formatGroupName(groupAnalysisList: SelectItem[]) : any {
         groupAnalysisList.forEach((group:SelectItem)=>
             {group.label = group.label.toLowerCase().replace(/(?:^|\s)(?!da|de|do|e)\S/g, l
 => l.toUpperCase());
         });
         return groupAnalysisList;
 
     };

I am using this method in my HTML code :

[options]="formatGroupName(groupAnalysisList)"

For example, if I have a word like "DOLAR", I format it as "Dolar". However, I still want to keep the original value "DOLAR" in my TypeScript file.

javascript angular typescript

Answer 1

Answer №1

Consider implementing a custom pipe for better functionality

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
   name: 'lower',
   pure: false
})
export class CustomTextTransformPipe implements PipeTransform {
  transform(inputText: string): any { 
     return inputText.toLowerCase().replace(/(?:^|\s)(?!da|de|do|e)\S/g, letter=> letter.toUpperCase());
   }
}

In your HTML, you can use the custom pipe like this:

<div>{{text | lower}}</div>

Answer 2

Consider implementing a custom pipe for better functionality

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
   name: 'lower',
   pure: false
})
export class CustomTextTransformPipe implements PipeTransform {
  transform(inputText: string): any { 
     return inputText.toLowerCase().replace(/(?:^|\s)(?!da|de|do|e)\S/g, letter=> letter.toUpperCase());
   }
}

In your HTML, you can use the custom pipe like this:

<div>{{text | lower}}</div>

Angular - Altering the presentation without altering the initial content

Answer №1

Similar questions

When the page is scrolled, the div is fixed in place and a class is dynamically added. Some issues may

Implementing CSS styles on iframe content in React

The content in ACF appears to be missing when displayed in the fancybox

What is the best way to pass values between JSP Expression Language and Javascript?

Trouble with Chakra UI loading Images from local sources

What order do Node.js event queues, Promises, and setTimeout() operate in?

Guide on invoking an Angular 1.5 component with a button press

Troubleshooting the pre-loader image loading problem

Emulating a mouse click in jQuery/JavaScript on a webpage link

Unleashing the Power of Google Apps Script Filters

Utilizing the selectionStart-End method for textareas

Executing a single command using Yargs triggers the execution of multiple other commands simultaneously

Error message: The Slick Carousal encountered an unexpected problem - TypeError:undefined is not a function

Incorrect typings being output by rxjs map

Problem with integration of Bootstrap datetime picker in AngularJS directives

Puzzle of Pictures

Creating a JSON object with nested arrays by adding items in JavaScript

Automatically submit form in Javascript upon detecting a specific string in textarea

Is the username you want available?

What are the steps to troubleshoot a Node Package Manager library in Visual Studio Code?