0

I have the following angular template. I noticed that even when the labels are in titlecase when the page is rendered the labels are converted to uppercase and I don't like it. So I decided to use the titlecase pipe and surround the label text with single quotes. However, the labels are still in uppercase (image attached for reference)

I guess this is something that should be straightforward but I don't know how to make it work. Any ideas?

<form [formGroup]="updateForm" (ngSubmit)="onSubmit(updateForm.value)">
    <div>
        <label for="total">
          {{'Total' | titlecase}}
        </label>
        <input id="total" type="text" formControlName="total">
      </div>

      <div>
        <label for="supporters">
          {{'Number of supporters' | titlecase}}
        </label>
        <input id="supporters" type="text" formControlName="supporters">
      </div>      
    <button class="button" type="submit">Save</button>

  </form>

enter image description here

Joseph Sible-Reinstate Monica
  • 45,431
  • 5
  • 48
  • 98
Annie
  • 145
  • 4
  • 12
  • 2
    Seems just a css issue no? If your labels are already properly cased, a pipe seems a bit overkill..? – MikeOne Apr 29 '20 at 17:11
  • There is no inbuilt pipe called titlecase in angular. – Jasdeep Singh Apr 29 '20 at 17:14
  • 1
    @Prince I think there is, here is the documentation: https://angular.io/api/common/TitleCasePipe – Annie Apr 29 '20 at 17:16
  • @MikeOne I think the same. However, without the pipe it is still showing up with uppercase even when the labels are already properly cased as you mentioned. – Annie Apr 29 '20 at 17:17
  • 1
    @Annie it seems to be an issue with your css. Can upload this component to https://stackblitz.com/ ? – German Quinteros Apr 29 '20 at 17:18
  • 1
    Yep. There probably is a css style like label {text-transform: uppercase} somewhere.. This is not an Angular issue. – MikeOne Apr 29 '20 at 17:22
  • 1
    You were right guys! It was a css issue. While I was setting up the component in stackblitz.com as @GermanQuinteros suggested I noticed that it was rendered correctly. https://angular-kk74fp.stackblitz.io/actualizar My component did not have any css style that is why I discarded it but it was inheriting the style from the styles.css file that I did not import in the stackblitz project. Thanks a lot! – Annie Apr 29 '20 at 17:49

1 Answers1

1

It seems to be an issue with your CSS.

Probably, you are using a library or css file that for the <label> it setting the property text-transform: uppercase;.

You can try overriding that with a custom css rules like:

HTML

<form [formGroup]="updateForm" (ngSubmit)="onSubmit(updateForm.value)">
    <div>
        <label class="custom-label-title" for="total">
          {{'Total'}}
        </label>
        <input id="total" type="text" formControlName="total">
      </div>

      <div>
        <label  class="custom-label-title" for="supporters">
          {{'Number of supporters' }}
        </label>
        <input id="supporters" type="text" formControlName="supporters">
      </div>      
    <button class="button" type="submit">Save</button>

  </form>

CSS

.custom-label-title {
  text-transform: capitalize;
}

Just in case that it doesn't work (only for test purpose) add !important:

CSS

.custom-label-title {
  text-transform: capitalize !important;
}

Because it can be happening that the other CSS rules have bigger precedence:

What is the order of precedence for CSS?

German Quinteros
  • 1,870
  • 9
  • 33
  • Thanks German! You were right, it was a css issue. I added the custom-label-title class that you suggested and at the end I had to add the !important to force using this style over the ones that as you said might have higher precedence. – Annie Apr 29 '20 at 18:05