Does anyone know how to use titlecase in component.ts file instead in html file?

Question

I tried the following code but it's not working.

import { Component } from '@angular/core';
import { TitleCasePipe } from '@angular/common';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'Working with Pipe';
  testValue = this.titleCasePipe.transform('firstletter should be upper case.');


  constructor(
    public titleCasePipe: TitleCasePipe
  ){}

}

enter image description here

checkout my answer below – Kiran Mistry Apr 14 '20 at 11:46 — Kiran Mistry, Apr 14 '20 at 11:46

Gérôme Grignon · Accepted Answer · 2021-06-22T08:12:25.293

6

Add TitleCasePipe in the providers array of the metadata of your component :

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
providers: [TitleCasePipe]
})

Stackblitz example

edited Jun 22 '21 at 08:12

answered Apr 14 '20 at 11:25

Gérôme Grignon

3,859
1
6
18

I get this error when opening the stackblitz example: Yikes! The page you requested couldn't be found. – Kevin Oswaldo Jun 21 '21 at 17:11
@KevinOswaldo sorry, i updated the link. It works now – Gérôme Grignon Jun 22 '21 at 08:12
Awesome, thanks a lot, I can see the example now – Kevin Oswaldo Jun 22 '21 at 16:35

Eliseo · Answer 2 · 2020-04-14T11:51:55.833

2

You can just create an object, else, add in providers as @Gérôms say

  title = 'Working with Pipe';
  titleCasePipe=new TitleCasePipe()
  testValue = this.titleCasePipe.transform('firstletter should be upper case.');

  constructor(){
  }

edited Apr 14 '20 at 11:51

answered Apr 14 '20 at 11:37

Eliseo

50,109
4
29
67

it is injectable in Angular 9 : https://stackblitz.com/edit/angular-i5bfaj?file=src%2Fapp%2Fapp.component.ts – Gérôme Grignon Apr 14 '20 at 11:43
This is also correct, but I prefer to choose the first answer, anyways thank you for answering. – Lei De Bug Apr 15 '20 at 17:36

Indrajeet · Answer 3 · 2020-04-14T11:35:17.010

0

Put your code inside constructor like this,

 testValue: string;


 constructor(
    public titleCasePipe: TitleCasePipe
 ){
    this.testValue = this.titleCasePipe.transform('firstletter should be upper case.');
 }

edited Apr 14 '20 at 11:35

answered Apr 14 '20 at 11:29

Indrajeet

491
3
10

the transform function returns the transformed parameter. So it will be useless to call the function if you don't initialize a local variable with it (and you don't need to put it inside the constructor as well) – Gérôme Grignon Apr 14 '20 at 11:34
Sorry, I have updated the code, anyways Why you need to have that code inside constructor or ngOnInit() is because is by that time TitleCasePipe is available to use – Indrajeet Apr 14 '20 at 11:36
can you share your stackblitz link? – Indrajeet Apr 14 '20 at 11:37
the proof you don't need to put in constructor or ngOnInit : https://stackblitz.com/edit/angular-i5bfaj?file=src%2Fapp%2Fapp.component.ts – Gérôme Grignon Apr 14 '20 at 11:39

score 0 · Answer 4 · answered Apr 14 '20 at 11:45

Without Pipe

Here is your Simple Solution with TitleCase

you can use directly like this you don't have to put extra code angular already give's this features

HTML

<p>
  {{name | titlecase}} <!-- this is titlecase by default -->
</p>

TS

name = 'Working with Pipe';

With Pipe

you can check in input field also like this

HTML

<input type="text" id="firstName" name="name" 
[ngModel]="name | titleCase" 
(ngModelChange)="name=$event" 
#firstName="ngModel">

TS

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

@Pipe({name: 'titleCase'})
export class TitleCasePipe implements PipeTransform {
    public transform(input:string): string{
        console.log(input);
        if (!input) {
            return '';
        } else {
            return input.replace(/\b\w/g, first => first.toLocaleUpperCase()) 
        }
    } 
}

and don't forgot to add in declaration like this

declarations: [ TitleCasePipe ],

Here is my stackBlitz you can check here

Does anyone know how to use titlecase in component.ts file instead in html file?

4 Answers4

Without Pipe

With Pipe