Don't use js functions to format your text on HTML in Angular. Instead use this Pipe.
Tags: webdev, angular, html, javascript
Published: 2022-06-12 11:16:28

Consider this basic example of a component with a function called getModifiedText() and our template with interpolation

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'dummy-angular-app';

  constructor() { }

  getModifiedText(text: string) {
    console.log("🚀 ~ getModifiedText")
    return text.toUpperCase()
  }
}
```
```html
<p> {{ getModifiedText('😯 JS Functions') }} </p>
```

Can you guess the output in the console ?
_Hint : There is a console.log inside getModifiedText()_

Even though we're calling the function only one time in template , if we see the console we will be getting more than one time. **( 4 times )**

![Console log getModifiedText](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwze2infho69tw0h1kyw.png)

The function **getModifiedText()** will be called every time Angular runs **change detection** for the component. 

This is because **updating DOM is part of change detection**  and Angular needs to call getModifiedText() to know what value to use for DOM update. 

And change detection cycle can run quite often. [Learn more about change detection](https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/#:~:text=Angular%20change%20detection%20is%20a,and%20its%20HTML%20template%20view.)

But this additional usage of JS may cost us **processing power** when the app grows siginificantly larger.

Hence comes the role of **Angular Pipes.**

Creating a angular pipe called capitalize ( make sure you are inside your angular app )

```bash
ng generate pipe capitalize
```
If you are using lazy loading or other modules , Make sure to put a entry in your corresponding module.ts declarations

```typescript
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'capitalize'
})

export class CapitalizePipe implements PipeTransform {

  transform(text: string): string {
    console.log("🚀 ~ CapitalizePipe")
    return text.toUpperCase()
  }

}
```
Now in our template
```html
<p> {{ '😌 Angular Pipe' | capitalize }}</p>
```
There is a console in our pipe and when we open our console we just see only one log.

![Pipe Console log ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0m8zap8hmsf05iog48e5.png)
 
If its a text formatting always use Angular Pipes to reduce javascript usage. More on [Angular Pipes](https://angular.io/guide/pipes)

---
And If you like these type of small articles , Don't forget to follow me  @shrihari , It motivates to write more and contribute open source. 

_🕊 Peace !_ 

---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - Create AI support agents with your documents in the most affordable price, starts at **0$**. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? [Check out our pricing](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---

## More Free articles from me !

{% embed https://dev.to/shrihari/mistakes-i-made-when-i-started-nodejs-mongodb-5g92 %}

{% embed https://dev.to/shrihari/handle-asynchronous-errors-on-expressjs-without-trycatch--1e5b %} 

{% embed https://dev.to/shrihari/mistakes-i-made-when-i-started-with-angular-applies-to-any-web-framework-180c %}