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.

[Vidéo] Les signaux dans Angular en 3mn

En juillet, recevez notre newsletter avec les dernières actualités et, en avant-première, un lien vers notre prochaine vidéo sur les signaux dans Angular.