📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.

Skip to content

Comment utiliser les pipes lowercase et uppercase sur Angular ? ​

Pensez à importer CommonModule ​

Vous devez importer le module CommonModule dans votre module principal en ajoutant l'instruction suivante Ă  la liste des imports de votre module :

ts
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  // ...
})
export class MyModule { }

Une fois que le module de pipes de chaîne de caractères est importé, vous pouvez utiliser les pipes lowercase et uppercase dans vos templates de vue en utilisant la syntaxe suivante :

html
<p>{{ 'HELLO WORLD' | lowercase }}</p>
<p>{{ 'hello world' | uppercase }}</p>

Cela affichera respectivement "hello world" et "HELLO WORLD" dans les balises <p>.

Utiliser dans TypeScript ​

Notez que vous pouvez Ă©galement utiliser les pipes lowercase et uppercase dans vos composants en utilisant la syntaxe suivante :

ts
import { LowerCasePipe, UpperCasePipe } from '@angular/common';

@Component({
  // ...
})
export class MyComponent {
  constructor(private lowerCasePipe: LowerCasePipe, private upperCasePipe: UpperCasePipe) { }

  someMethod() {
    const lowerCaseString = this.lowerCasePipe.transform('HELLO WORLD');
    const upperCaseString = this.upperCasePipe.transform('hello world');
  }
}

Cela vous permet d'utiliser les pipes lowercase et uppercase dans vos composants, en plus de vos templates de vue.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !