Angulaire 4 - Tuyaux

Dans ce chapitre, nous discuterons de ce que sont les tuyaux dans Angular 4. Les tuyaux étaient auparavant appelés filtres dans Angular1 et appelés tuyaux dans Angular 2 et 4.

Le | Le caractère est utilisé pour transformer les données. Voici la syntaxe pour le même

{{ Welcome to Angular 4 | lowercase}}

Il prend les entiers, les chaînes, les tableaux et la date comme entrée séparés par | à convertir au format requis et à afficher le même dans le navigateur.

Considérons quelques exemples utilisant des tuyaux.

Ici, nous voulons afficher le texte donné en majuscules. Cela peut être fait en utilisant des tuyaux comme suit -

dans le app.component.ts fichier, nous avons défini la variable title -

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

La ligne de code suivante entre dans le app.component.html fichier.

<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>

Le navigateur apparaît comme indiqué dans la capture d'écran suivante -

Angular 4 fournit des tuyaux intégrés. Les tuyaux sont énumérés ci-dessous -

  • Lowercasepipe
  • Uppercasepipe
  • Datepipe
  • Currencypipe
  • Jsonpipe
  • Percentpipe
  • Decimalpipe
  • Slicepipe

Nous avons déjà vu les tuyaux minuscules et majuscules. Voyons maintenant comment fonctionnent les autres tuyaux.

La ligne de code suivante nous aidera à définir les variables requises dans app.component.ts fichier -

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
             "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}

Nous utiliserons les tuyaux dans le app.component.html fichier.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Uppercase Pipe</h1>
      <b>{{title | uppercase}}</b><br/>
      
      <h1>Lowercase Pipe</h1>
      <b>{{title | lowercase}}</b>
      
      <h1>Currency Pipe</h1>
      <b>{{6589.23 | currency:"USD"}}</b><br/>
      <b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
      
      <h1>Date pipe</h1>
      <b>{{todaydate | date:'d/M/y'}}</b><br/>
      <b>{{todaydate | date:'shortTime'}}</b>
      
      <h1>Decimal Pipe</h1>
      <b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
   </div>
   
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Json Pipe</h1>
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1>
      <b>{{00.54565 | percent}}</b>
      <h1>Slice Pipe</h1>
      <b>{{months | slice:2:6}}</b> 
      // here 2 and 6 refers to the start and the end index
   </div>
</div>

Les captures d'écran suivantes montrent la sortie pour chaque tube -

Comment créer un tuyau personnalisé?

Pour créer un tuyau personnalisé, nous avons créé un nouveau tsfichier. Ici, nous voulons créer lesqrttuyau personnalisé. Nous avons donné le même nom au fichier et il ressemble à ceci -

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

Pour créer un tuyau personnalisé, nous devons importer la transformation de tuyau et de tuyau à partir de Angular / core. Dans la directive @Pipe, nous devons donner le nom à notre pipe, qui sera utilisé dans notre fichier .html. Puisque nous créons le tube sqrt, nous le nommerons sqrt.

Au fur et à mesure que nous progressons, nous devons créer la classe et le nom de la classe est SqrtPipe. Cette classe implémentera lePipeTransform.

La méthode de transformation définie dans la classe prendra l'argument comme nombre et retournera le nombre après avoir pris la racine carrée.

Depuis que nous avons créé un nouveau fichier, nous devons ajouter le même dans app.module.ts. Cela se fait comme suit -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Nous avons créé le app.sqrt.tsclasse. Nous devons importer la même chose dansapp.module.tset spécifiez le chemin du fichier. Il doit également être inclus dans les déclarations comme indiqué ci-dessus.

Voyons maintenant l'appel effectué au tube sqrt dans le app.component.html fichier.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

La sortie ressemble à ceci -