Scribd Logo
Importer

Bienvenue sur Scribd !

  • 43 vues

    Cours Angular Pipe

    Transféré par

    Tayssir zayet
    Ce document décrit la création de pipes personnalisés en Angular. Un pipe permet de modifier l'affichage de données dans le template. Le document explique comment générer un nouveau pipe et l'implémenter pour transformer des valeurs.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    Cours Angular Pipe

    Transféré par

    Tayssir zayet
    43 vues17 pages
    Ce document décrit la création de pipes personnalisés en Angular. Un pipe permet de modifier l'affichage de données dans le template. Le document explique comment générer un nouveau pipe et l'implémenter pour transformer des valeurs.

    Titre original

    coursAngularPipe

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Ce document décrit la création de pipes personnalisés en Angular. Un pipe permet de modifier l'affichage de données dans le template. Le document explique comment générer un nouveau pipe et l'implémenter pour transformer des valeurs.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    43 vues17 pages

    Cours Angular Pipe

    Transféré par

    Tayssir zayet
    Ce document décrit la création de pipes personnalisés en Angular. Un pipe permet de modifier l'affichage de données dans le template. Le document explique comment générer un nouveau pipe et l'implémenter pour transformer des valeurs.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    Vous êtes sur la page 1sur 17

    Angular 8 : pipe

    Achref El Mouelhi

    Docteur de l’université d’Aix-Marseille


    Chercheur en programmation par contrainte (IA)
    Ingénieur en génie logiciel

    elmouelhi.achref@gmail.com

    12-13 Avril 2018 1 / 13


    Plan

    1 Définition

    2 Création d’un nouveau pipe

    12-13 Avril 2018 2 / 13


    Définition

    Angular

    Définition : Un pipe

    a le rôle de modifier l’affichage d’une donnée dans le


    .component.html
    est une classe décorée par le décorateur @pipe
    doit implémenter la méthode transform(value: any,
    args?: any) de l’interface PipeTransform
    peut prendre des paramètres

    12-13 Avril 2018 3 / 13


    Définition

    Angular
    Exemple
    {{ "bonjour" | uppercase }}
    <!-- BONJOUR -->

    12-13 Avril 2018 4 / 13


    Définition

    Angular
    Exemple
    {{ "bonjour" | uppercase }}
    <!-- BONJOUR -->

    Certains pipes peuvent prendre des paramètres


    {{ maDate | date:’d MMM y’ }}
    <!-- affiche 19 oct 2018 -->

    12-13 Avril 2018 4 / 13


    Définition

    Angular
    Exemple
    {{ "bonjour" | uppercase }}
    <!-- BONJOUR -->

    Certains pipes peuvent prendre des paramètres


    {{ maDate | date:’d MMM y’ }}
    <!-- affiche 19 oct 2018 -->

    Il est possible de chaı̂ner les pipes


    {{ maDate | date:’d MMM y’ | uppercase }}
    <!-- affiche 19 OCT 2018 -->

    12-13 Avril 2018 4 / 13


    Création d’un nouveau pipe

    Angular

    Les pipes

    pipes prédéfinis comme uppercase, lowercase...


    pipes personnalisés

    12-13 Avril 2018 5 / 13


    Création d’un nouveau pipe

    Angular

    Pour créer un pipe


    ng generate pipe nom-pipe

    12-13 Avril 2018 6 / 13


    Création d’un nouveau pipe

    Angular

    Pour créer un pipe


    ng generate pipe nom-pipe

    Ou le raccourci
    ng g p nom-pipe

    12-13 Avril 2018 6 / 13


    Création d’un nouveau pipe

    Angular

    Pour créer un pipe


    ng generate pipe nom-pipe

    Ou le raccourci
    ng g p nom-pipe

    Exemple : définissons un pipe (get-char) qui retourne la


    première lettre d’une chaı̂ne de caractères
    ng generate pipe pipes/get-char

    12-13 Avril 2018 6 / 13


    Création d’un nouveau pipe

    Angular

    Constat
    : deux fichiers générés
    get-char.pipe.ts
    get-char.pipe.spec.ts

    déclaration du pipe dans app.module.ts

    12-13 Avril 2018 7 / 13


    Création d’un nouveau pipe

    Angular

    Contenu du get-char.pipe.ts
    import { Pipe, PipeTransform } from ’@angular/core’;

    @Pipe({
    name: ’getChar’
    })
    export class GetCharPipe implements PipeTransform {

    transform(value: any, ...args: any[]): any {


    return null;
    }

    value correspond à la valeur de la chaı̂ne qu’on va modifier.

    12-13 Avril 2018 8 / 13


    Création d’un nouveau pipe

    Angular

    Modifions get-char.pipe.ts pour retourner la première lettre


    import { Pipe, PipeTransform } from ’@angular/core’;

    @Pipe({
    name: ’getChar’
    })
    export class GetCharPipe implements PipeTransform {

    transform(value: any, ...args: any[]): any {


    return value[0];
    }

    12-13 Avril 2018 9 / 13


    Création d’un nouveau pipe

    Angular

    Pour tester, écrire dans un .component.html


    {{ "bonjour" | getChar }}
    <!-- affiche b -->

    {{ "wick" | getChar }}
    <!-- affiche w -->

    {{ "john" | getChar }}
    <!-- affiche j -->

    12-13 Avril 2018 10 / 13


    Création d’un nouveau pipe

    Angular
    Modifions get-char.pipe.ts pour retourner un caractère à une
    position donnée (pos)
    import { Pipe, PipeTransform } from ’@angular/core’;

    @Pipe({
    name: ’getChar’
    })
    export class getCharPipe implements PipeTransform {

    transform(value: any, ...args: any[]): any {


    if (args[0] && args[0] < value.length)
    return value[pos];
    return value[0];
    }

    }
    12-13 Avril 2018 11 / 13
    Création d’un nouveau pipe

    Angular

    Pour tester, écrire dans un .component.html


    {{ "bonjour" | getChar:2 }}
    <!-- affiche n -->

    {{ "wick" | getChar:6 }}
    <!-- affiche w -->

    {{ "john" | getChar }}
    <!-- affiche j -->

    12-13 Avril 2018 12 / 13


    Création d’un nouveau pipe

    Angular

    Exercice

    Écrire un pipe qui permet de transformer un objet en tableau pour


    qu’on puisse l’étirer avec un *ngFor

    L’objectif est de pouvoir parcourir un objet comme s’il s’agit d’un


    tableau (obj est un objet défini dans .component.ts)
    <ul *ngFor="let elt of obj | objToArray">
    <li>
    {{ elt }} : {{ obj[elt] | uppercase }}
    </li>
    </ul>

    12-13 Avril 2018 13 / 13

    Vous aimerez peut-être aussi