Html Question posted in
Some basic documentation can be found here.

How do I use a date pipe operator in a document.createElelement's innerHTML string literal in Angular?

I’m creating a div in my .ts file and it works fine to show a simple value "price". But now I want to create another line that displays a date and I need to use a date pipe operator but I’m getting red error lines. How do I fix this?

What I’m trying to do is create a Google Map Marker that has a date in it. Here is the example I’m following where data is created and then used to create the advanced marker. I just need to use a date with it’s date pipe in the data that’s displayed in the marker.

This works fine with just simple properties.

const content = document.createElement("div");
    content.innerHTML = `<div class="price">${eMarker.price}</div>`;

Now I want to add a date with a date pipe.

const content = document.createElement("div");
    content.innerHTML = `<div class="price">${eMarker.price}</div>
    <div>${eMarker.date | date:'shortTime'}</div>`;

Here is what I see:
enter image description here

The red line says cannot find ‘date’ Did you mean Date?

(UPDATE) – I can use luxon instead of pipes and it works now, but I still want to know if I can use pipes.
Here is what works.

<span>${this.luxon.fromISO(eMarker.date).toFormat('D')}</span>
Tags:

2

Answers


  1. 0

    You can use angular features in strings inserted with innerHTML.

    This would require your app to enable JIT and pull the compiler at runtime. For performances reasons, this is not recommended.

    Login or Signup to reply.
  2. 0

    Use the function formatDate -it’s the same function that use datePipe-, not the pipe when you’re assign value to a variable (the pipes are only allowed in .html)

    import {formatDate} from '@angular/common`


content.innerHTML = `<div class="price">${eMarker.price}</div>
    <div>${formatDate(eMarker.date,'shortTime','en-US')}</div>`;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search