Skip to content

Comment utiliser les pipes lowercase et uppercase sur Angular ?

Pensez à importer CommModule

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 { }
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>
<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');
  }
}
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.