Pipe from html to component.ts

If I have understood your problem correctly, what you would like is to have the date already in the correct format in the component, as shown when you use the pipe .

In that case the solution is simple: use the function that DatePipe uses internally in the component:

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

class MiComponente {


  ...
  metodoDondeObtengoLaFecha() {
    ...
    let fechaFormateada= formatDate(this.scenario.loadDate, 'dd-MM-YYYY','es-ES');
  }
}

HolaEdu, you can make your own custom pipe and thus be able to return the date depending on how it comes, you put all the cases in your custom pipe, in this case you will always receive the date in string and already within the custom pipe you can work with that date data in different ways of logic within the pipe, likewise, the pipe would already return with the data that you want to work with, well, from my point of view, I would do it with a custom pipe so that the code looks cleaner and of course take advantage of custom pipes :)

Here I leave you an example so that you understand me.

> PIPE:

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

@Pipe({
  name: 'letras'
})
export class LetrasPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if (args != null) {
      if (args=='ingles')
        switch (value) {
          case 1: return 'one';
          case 2: return 'two';
          case 3: return 'three';
          case 4: return 'four';
          case 5: return 'five';
          case 6: return 'six';
          case 7: return 'seven';                        
        }
        if (args=='portugues')
        switch (value) {
          case 1: return 'um';
          case 2: return 'dois';
          case 3: return 'três';
          case 4: return 'quatro';
          case 5: return 'cinco';
          case 6: return 'seis';
          case 7: return 'sete';                        
        }        
    }
    switch (value) {
      case 1: return 'uno';
      case 2: return 'dos';
      case 3: return 'tres';
      case 4: return 'cuatro';
      case 5: return 'cinco';
      case 6: return 'seis';
      case 7: return 'siete';                        
    }  
    return null;
  }

}

> HTML:

<h1>Números en castellano</h1>
<ul>
  <li *ngFor="let valor of vector">
    {{valor | letras}}
  </li>
</ul>
<h1>Números en inglés</h1>
<ul>
  <li *ngFor="let valor of vector">
    {{valor | letras:'ingles'}}
  </li>
</ul>
<h1>Números en portugués</h1>
<ul>
  <li *ngFor="let valor of vector">
    {{valor | letras:'portugues'}}
  </li>
</ul>

In this example that I mention, a custom pipe was created that evaluates depending on the argument that is passed to the pipe, as you can see, it is passed through letters: 'portugues'.

In the pipe, the body of what you are going to work on is received first, in this case it would be the value, then comes the argument that you want to show or work on, which would be Portuguese, Spanish, Castilian.

The custom pipe works that logic as you can see with a switch routine and I think you can understand that logic which is very easy.

I will give you an example of how to generate your pipefor the date format you need:

First of all, execute the following code in the console where you see you MiFechaFormatcould also put a route misPipes/MiFechaFormat:

ng g pipe MiFechaFormat

Obviously you can put the name you want:

Now open the file that was generated from the pipe, here I will show you an example that I made for the pipe of your date but you would put the code you need to format it:

@Pipe({
  name: 'miFechaFormat'
})
export class MiFechaFormatPipe implements PipeTransform {
  transform(fecha: any, args?: any): any {
    // Aqui podrias poner el código que necesitas para formatear tu fecha
    return fecha.split('T')[0]; // Aqui se retorna la fecha formateada
  }
}

And in your HTMLit should be:

<td>{{fecha | miFechaFormat}}</td>

You could even send one type if you need multiple types of formatting, for example:

@Pipe({
  name: 'miFechaFormat'
})
export class MiFechaFormatPipe implements PipeTransform {
  transform(fecha: any, args?: any): any {
    // Aqui podrias poner el código que necesitas para formatear tu fecha

    console.log(args); // Por el momento solo muestro lo que se puso como argumento en el HTML, tu ya le darías el uso

    return fecha.split('T')[0];
  }
}

And in HTMLit you would use it in the following way:

<td>{{fecha | miFechaFormat: 'YYYYMMDD'}}</td>

I hope it helps you ;) Greetings

Very good, take a look at the official documentation of Angular:

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

In "Custom format options" it tells you how you can customize the date format. But it looks like for your specific request, it should be:

date:'dd-MM-yyyy'