Search code examples
javascripthtmlangulartypescriptangular-directive

Directive to change capital letters in Angular 14

I have a template:

<div *ngFor="let article of articles">
  <h2>{{ article.title }}</h2>  
  <p>{{ article.authorName }}</p>
</div>

And i have a dataModel.ts file:

export interface IArticle {
  id: number
  title?: string
  authorName?: string}

How to write a directive that receives a string in the form of a name and checks whether the letters at the beginning of the surname and first name are capitalized, if not, then makes them large? Those: artur haiduk -> Artur Haiduk

Solution

  • Use angular predefined pipe titlecase

       <div *ngFor="let article of articles">
         <h2>{{ article.title | titlecase }}</h2>  
         <p>{{ article.authorName | titlecase }}</p>
  </div>