date in ng2-smart-table is not displaying

Question

I'm trying to add and display my data using smart table using angular 10 one of the table columns is the date I installed mydatepicker I made a component called calendar

here's calendar.ts

import { Component, Input, OnInit } from '@angular/core';
import { IMyDpOptions, IMyDateModel } from 'mydatepicker';
import { ViewCell } from 'ng2-smart-table';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent {

  public startDateOptions: IMyDpOptions = {
    dateFormat: 'yyyy/mm/dd',
    editableDateField: false,
    openSelectorOnInputClick: true,
    firstDayOfWeek: 'su',
    satHighlight: true,
    selectionTxtFontSize: '13px',
    dayLabels: {
      su: 'أح',
      mo: 'اث',
      tu: 'ث',
      we: 'أر',
      th: 'خ',
      fr: 'ج',
      sa: 'س',
    },
    monthLabels: {
      1: 'جانفي',
      2: 'فيفري',
      3: 'مارس',
      4: 'أفريل',
      5: 'ماي',
      6: 'جوان',
      7: 'جويلية',
      8: 'أوت',
      9: 'سبتمبر',
      10: 'أكتوبر',
      11: 'نوفمبر',
      12: 'ديسمبر',
    },
    height: '26px',
    todayBtnTxt: "اليوم",
    // disableSince: this.getCurrentDate()
  };
  public endDateOptions: IMyDpOptions = this.startDateOptions;


}

@Component({
  template: {{value | date:'short'}} ,
})
export class CalendarRenderComponent implements  ViewCell,OnInit {
  @Input() value: string;
  @Input() rowData: any;

  constructor() { }

  ngOnInit() { }
  

}

and here's how I called it in smart-table.ts

import { Component } from '@angular/core';
import { IMyDpOptions, IMyDateModel } from 'mydatepicker';
import { CalendarComponent, CalendarRenderComponent } from './calendar/calendar.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'grp';

  settings = {
    columns: {
      id: {
        title: 'id'
      },
      name: {
        title: 'name'
      },
      username: {
        title: 'username'
      },
      email: {
        title: 'email'
      },
      birthday: {
        title: 'Birthday',
        type: 'custom',
        renderComponent: CalendarRenderComponent,
        width: '250px',
        filter: false,
        sortDirection: 'desc',
        editor: {
          type: 'custom',
          component: CalendarComponent,
        },
      },
    },
    delete: {
      deleteButtonContent: '<i class="fa fa-trash" style="font-size:32px"></i>',
      saveButtonContent: 'save',
      cancelButtonContent: 'cancel',

    },
    add: {
      addButtonContent:'<i class="fa fa-plus" style="background-color: green;"></i>',
      createButtonContent: '<i class="fa fa-check"></i>',
      cancelButtonContent: '<i class="fa fa-times"></i>',
    },
    edit: {
      editButtonContent:'<i class="fa fa-pencil" style="font-size:32px"></i>',
      saveButtonContent:'<i class="fa fa-check"></i>',
      cancelButtonContent: '<i class="fa fa-times"></i>',
    },
  };
  data = [
    {
      id: 1,
      name: "test Graham",
      username: "Bret",
      email: "test@april.com",
      birthday: "2019-08-14T00:00:00"
    },
    {
      id: 2,
      name: "test Howell",
      username: "test",
      email: "test@gmail.tv",
      birthday: "2019-08-14T00:45:51"
    },
    {
      id: 11,
      name: "testDuBuque",
      username: "test.Stanton",
      email: "test@test.biz",
      birthday: "2019-08-14T00:45:51"
    }
  ]; 

  
}

I have no problem with displaying the calendar and choosing the date when I click add new but when I click create all the data is displayed fine except for the date, it's blank. in the console, I got ERROR Error: The pipe 'date' could not be found!

I would really appreciate the help

Answer 1

To just show the date value you should add something like this to you column setting:

valuePrepareFunction: (value: string) => {
    return new Date(value).toLocaleDateString();
},

This prepares the value to be shown when not in editor mode.