1

I am trying to display json data the html table. When i run my file, date appear as '2018-11-21T00:00:00.000+0000' in my table. But i need to display only '2018-11-21'. how i do it? can u help my to split it.

import { Certificate } from './certificate';

export const CERTIFICATES: Certificate[] = [
    { date: '2018-11-21T00:00:00.000+0000', ident: 'Fe', moy_certified: 0.297 },
    { date: '2018-11-22T00:00:00.000+0000', ident: 'Cu', moy_certified: 0.04 },
    { date: '2018-11-23T00:00:00.000+0000', ident: 'Mn', moy_certified: 0.0374 }, 
    { date: '2018-11-24T00:00:00.000+0000', ident: 'V', moy_certified: 0.019 },
    { date: '2018-11-25T00:00:00.000+0000', ident: 'Mn', moy_certified: 0.037 }
];
<ul class="cert-result">
    <li *ngFor="let certificate of certificates">
      <table>
        <tr>
          <th>Date</th>
          <th>Element</th>
          <th>Composition</th>
        </tr>
        <tr>
          <td>{{certificate.date}}</td>
          <td>{{certificate.ident}}</td>
          <td>{{certificate.moy_certifiee}}</td>
        </tr>
      </table>
    </li>
  </ul>

1
  • {{certificate.date | date}} use date filter Commented Dec 17, 2018 at 6:03

2 Answers 2

3

You can use Pipes (|):

Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML.

A pipe takes in data as input and transforms it to a desired output.

Change

<td>{{certificate.date}}</td>

To

<td>{{certificate.date | date:'yyyy-MM-dd'}}</td>
Sign up to request clarification or add additional context in comments.

3 Comments

Hi Mamun... thank you for answer. now i need to add this my angular material table with expandable feature. but i am troubling . because all data coming with single row. how i modify json data in selected column. please check below link angular material table with expandable feature stackblitz.com/edit/…
@user1177842, I will request you to ask another question with the specific tags as I am not that much familiar with angular material ui......hope you understands......thanks.
yes i tried. but stackoverflow site blocked it till 90 days. that is why i asked
1

2 options for you:

  1. You can use Angular filter by date https://docs.angularjs.org/api/ng/filter/date
  2. (new Date(certificate.date)).toLocaleDateString();

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.