Dans AngularJS, je peux utiliser des filtres (tuyaux) à l'intérieur des services et des contrôleurs en utilisant une syntaxe similaire à ceci:

$filter('date')(myDate, 'yyyy-MM-dd');

Est-il possible d'utiliser des tuyaux dans des services / composants comme celui-ci dans Angular?

Comme d'habitude dans Angular, vous pouvez compter sur l'injection de dépendance:

import { DatePipe } from '@angular/common';

class MyService {

  constructor(private datePipe: DatePipe) {}

  transformDate(date) {
    return this.datePipe.transform(date, 'yyyy-MM-dd');
  }
}

Ajoutez DatePipeà votre liste de fournisseurs dans votre module; si vous oubliez de le faire, vous obtiendrez une erreur no provider for DatePipe:

providers: [DatePipe,...]

Mise à jour d'Angular 6 : Angular 6 propose désormais à peu près toutes les fonctions de formatage utilisées par les canaux en public. Par exemple, vous pouvez désormais utiliser formatDatedirectement la fonction.

import { formatDate } from '@angular/common';

class MyService {

  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transformDate(date) {
    return formatDate(date, 'yyyy-MM-dd', this.locale);
  }
}

Avant Angular 5 : soyez averti cependant que le DatePipes'appuyait sur l'API Intl jusqu'à la version 5, qui n'est pas prise en charge par tous les navigateurs (consultez le tableau de compatibilité ).

Si vous utilisez des versions Angular plus anciennes, vous devez ajouter le Intlpolyfill à votre projet pour éviter tout problème. Voir cette question connexe pour une réponse plus détaillée.

Cette réponse est désormais obsolète

recommander d'utiliser l'approche DI à partir d'autres réponses au lieu de cette approche

Réponse originale:

Vous devriez pouvoir utiliser la classe directement

new DatePipe().transform(myDate, 'yyyy-MM-dd');

Par exemple

var raw = new Date(2015, 1, 12);
var formatted = new DatePipe().transform(raw, 'yyyy-MM-dd');
expect(formatted).toEqual('2015-02-12');

Oui, c'est possible en utilisant un simple tuyau personnalisé. L'avantage d'utiliser un canal personnalisé est que si nous devons mettre à jour le format de date à l'avenir, nous pouvons aller mettre à jour un seul fichier.

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
    transform(value: string) {
       var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, 'MMM-dd-yyyy');
        return value;
    }
}

{{currentDate | dateFormatPipe }}

Vous pouvez toujours utiliser ce tuyau n'importe où, composant, services, etc.

Par exemple

export class AppComponent {
  currentDate : any;
  newDate : any;
  constructor(){
    this.currentDate = new Date().getTime();
    let dateFormatPipeFilter = new dateFormatPipe();
    this.newDate = dateFormatPipeFilter.transform(this.currentDate);
    console.log(this.newDate);
}

N'oubliez pas d'importer des dépendances.

import { Component } from '@angular/core';
import {dateFormatPipe} from './pipes'

Exemples de tuyaux personnalisés et plus d'informations

D'autres réponses ne fonctionnent pas en angulaire 5?

J'ai reçu une erreur car DatePipe n'est pas un fournisseur, il ne peut donc pas être injecté. Une solution consiste à le mettre en tant que fournisseur dans votre module d'application, mais ma solution préférée était de l'instancier.

Instanciez-le si nécessaire:

J'ai regardé le code source de DatePipe pour voir comment il a obtenu les paramètres régionaux: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

Je voulais l'utiliser dans un tuyau, donc mon exemple est dans un autre tuyau:

import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'when',
})
export class WhenPipe implements PipeTransform {
    static today = new Date((new Date).toDateString().split(' ').slice(1).join(' '));
    datePipe: DatePipe;

    constructor(@Inject(LOCALE_ID) private locale: string) {
        this.datePipe = new DatePipe(locale);
    }
    transform(value: string | Date): string {
        if (typeof(value) === 'string')
            value = new Date(value);

        return this.datePipe.transform(value, value < WhenPipe.today ? 'MMM d': 'shortTime')
    }
}

La clé ici est d'importer Inject et LOCALE_ID à partir du noyau angulaire, puis de l'injecter pour que vous puissiez le donner au DatePipe pour l'instancier correctement.

Faire de DatePipe un fournisseur

Dans votre module d'application, vous pouvez également ajouter DatePipe à votre tableau de fournisseurs comme ceci:

import { DatePipe } from '@angular/common';

@NgModule({
    providers: [
        DatePipe
    ]
})

Maintenant, vous pouvez simplement l'injecter dans votre constructeur si nécessaire (comme dans la réponse de cexbrayat).

Résumé:

L'une ou l'autre solution a fonctionné, je ne sais pas quel angulaire considérerait le plus "correct" mais j'ai choisi de l'instancier manuellement car angulaire ne fournissait pas de datepipe en tant que fournisseur lui-même.

Si vous ne voulez pas faire 'new myPipe ()' parce que vous injectez des dépendances à pipe, vous pouvez injecter dans le composant comme fournisseur et utiliser sans nouveau.

Exemple:

// In your component...

import { Component, OnInit } from '@angular/core';
import { myPipe} from './pipes';

@Component({
  selector: 'my-component',
  template: '{{ data }}',
  providers: [ myPipe ]
})
export class MyComponent() implements OnInit {
  data = 'some data';
  constructor(private myPipe: myPipe) {}

  ngOnInit() {
    this.data = this.myPipe.transform(this.data);
  }
}

Si vous souhaitez utiliser votre tuyau personnalisé dans vos composants, vous pouvez ajouter

@Injectable({
  providedIn: 'root'
})

annotation à votre tuyau personnalisé. Ensuite, vous pouvez l'utiliser comme un service

Depuis Angular 6, vous pouvez importer formatDatedepuis l' @angular/commonutilitaire pour l'utiliser à l'intérieur des composants.

Il a été introduit sur https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae

Je peux être utilisé comme:

import {formatDate} from '@angular/common';
formatDate(new Date(), 'd MMM yy HH:mm', 'en');

Bien que les paramètres régionaux doivent être fournis

Vous pouvez utiliser formatDate () pour formater la date dans les services ou les composants ts. syntaxe:-

formatDate(value: string | number | Date, format: string, locale: string, timezone?: string): string

importer le formatDate () à partir d'un module commun comme celui-ci,

import { formatDate } from '@angular/common';

et il suffit de l'utiliser dans la classe comme celle-ci,

formatDate(new Date(), 'MMMM dd yyyy', 'en');

Vous pouvez également utiliser les options de format prédéfinies fournies par angular comme ceci,

formatDate(new Date(), 'shortDate', 'en');

Vous pouvez voir toutes les autres options de format prédéfinies ici,

https://angular.io/api/common/DatePipe