Angular: how to format date input value which is not being interpolated?

Question

I'm assigning values to date inputs in the .ts class like this:

this.forma.controls.releaseDate.setValue(
  this.DatafromApi.propOne["0"].releaseDate
);

the values obtaining from the API comes in this format: "2019092300000000"

I'm trying to apply Angular date pipes to format it like this: dd/mm/yyyy, but since I'm not doing string interpolation I don't know how to apply | date. If I were assigning the value in the template I'd just use the date pipe, but since I'm assigning the value in the .ts component file I just don't know how to accomplish it.

this is the .ts file:

import { AuthService } from "./../../../../core/consultaService/auth.service";
import { Component, OnInit } from "@angular/core";
import { ReportesService } from "../../../../core/consultaService/reportes.service";
import { UtilService } from "../../../../services/util.service";

import {
  FormGroup,
  FormBuilder,
  Validators,
  FormControl
} from "@angular/forms";


@Component({
  selector: "app-detalle-nc-descuento-omitido",
  templateUrl: "./detalle-nc-descuento-omitido.component.html",
  styleUrls: ["./detalle-nc-descuento-omitido.component.scss"]
})
export class DetalleNcDescuentoOmitidoComponent implements OnInit {
  forma: FormGroup;
  fechaActual = new Date();
  user: any;
  selectedNote: any;
  descripcionArticulos: any;

  articulosArray = [];

  constructor(
    private fb: FormBuilder,
    public cargador: NgxSpinnerService,
    private reportesService: ReportesService,
    private utilService: UtilService,
    private authService: AuthService
  ) {
    this.forma = new FormGroup({
      releaseDate: new FormControl(),
      secondDate: new FormControl(),

    });
  }

  ngOnInit() {

    this.forma.controls.releaseDate.setValue(
      this.selectedNote.dataUno["0"].releaseDate
    );
    this.forma.controls.secondDate.setValue(
      this.selectedNote.dataUno["0"].releaseDate
    );
  }
}

this is the html:

<div class="row">
  <div class="col-sm-6 ">
    <label class="col-sm-2 control-label">Second Date</label>
    <div class="col-sm-8 pl-0">
      <input formControlName="secondDate" name="secondDate" class="form-control" type="text" />
    </div>
  </div>
  <div class="col-sm-6">
    <label class="col-sm-2 control-label">Release Date</label>
    <div class="col-sm-3 pl-0">
      <input formControlName="releaseDate" name="releaseDate" class="form-control" type="text" />
    </div>    
  </div>
</div>

Answer 1

You can use angular built in date pipe in your component.ts file as follows, first you should add your date pipe in your modules providers array. So that you can inject the DatePipe in your component.ts later.

providers: [DatePipe]

In your component.ts do the following.

import { DatePipe } from '@angular/common'

Inject the date pipe in your component constructor

constructor(private datePipe: DatePipe) {}

In your ngOnInit before setting the value of input fields, transform the data using DatePipe.transform method

 ngOnInit() {
    const releaseDate = this.datePipe.transform(this.selectedNote.dataUno["0"].releaseDate, 'dd/mm/yyyy');

    const secondDate= this.datePipe.transform(this.selectedNote.dataUno["0"].releaseDate, 'dd/mm/yyyy');

    this.forma.controls.releaseDate.setValue(releaseDate);
    this.forma.controls.secondDate.setValue(secondDate);
  }