Angular

Appearance

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 { }
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.