Rendering HTML from JSON with Angular 8

Question

I have an Angular Storybook running with components in it.

I have a bit of JSON in the stories.ts of a component, one of the properties is a DIV's content, like so...

{
    "accordionLink": 'Accordion link 1',
    "accordionContent": "<p>Hello World!</p>",
}

The template HTML looks like this...

<li *ngFor="let accordionItem of accordionData; let i = index;">
    <a href="javascript:;" class="accordion-trigger" (click)="toggleAccordian($event, i)">
        {{ accordionItem.accordionLink }}
    </a>
    <div hide="!isActive">
        <div class="inner row">
            <div [innerHtml]="accordionItem.accordionContent"></div>
        </div>
    </div>
</li>

I tried getting the "accordionContent" HTML to render out in the actual DIV where the interpolation goes, but all I can get to show is the actual string (

Hello World!

), not the paragraph with all the styles etc applied...

Since the content of the DIV needs to be flexible (paragraphs, lists, etc), I would like to be able to put the HTML into the container, if this is at all possible.

Any help will be much appreciated. Thanks!

EDIT:

In the stories.ts file, I have my data set up like this...

const mockData = [
  {
    "accordionLink": 'Accordion link 1',
    "accordionContent": '<p>1 - Lorem ipsum dolor.</p>',
  },
  {
    "accordionLink": 'Accordion link 2',
    "accordionContent": '<p>2 - Lorem ipsum dolor.</p>',
  },
  {
    "accordionLink": 'Accordion link 3',
    "accordionContent": '<p>3 - Lorem ipsum dolor.</p>',
  },
];

In the same file, I set up my story to show in Storybook, like this...

template: `<ui-accordion [accordionData]="accordionData"></ui-accordion>`,
props: {
    accordionData: object('Content', mockData, 'General'),
}

In my component's .ts file, I have the content set up as an input...

@Input() accordionData: any;

score 5 · Answer 1 · answered Mar 11 '20 at 09:51

5

Try using innerHTML instead of innerHtml

 <div [innerHTML]="accordionItem.accordionContent"></div>

answered Mar 11 '20 at 09:51

M A Salman

3,666
2
12
26

score 2 · Answer 2 · answered Mar 11 '20 at 09:51

2

Improvement needed where you are getting the json data. I did the same and it's working:

 jsonData = [
    {
      accordionLink: "Accordion link 1",
      accordionContent: "<p>Hello World!</p>"
    }
  ];
  accordionData: any;

  constructor() {
    this.accordionData = this.jsonData;
  }

Example: https://codesandbox.io/s/cold-flower-9ktdk?fontsize=14&hidenavigation=1&theme=dark

Thanks.

answered Mar 11 '20 at 09:51

Jayoti Parkash

868
11
26

Hi, thanks for the reply. The jsonData is in the stories.ts, and not the component's .ts file tho. – Danele Roux Mar 11 '20 at 09:54
this is just a example you can do that in your way. what ever the component file you have you can define data in the story.ts file and bind the same in the story.html file. – Jayoti Parkash Mar 11 '20 at 10:00
Hi. I have tested your method, and it works. My issue is that when i move the JSON to the stories.ts file, Storybook renders the output as a string and not formatted HTML. – Danele Roux Mar 11 '20 at 10:41
Can you edit your post and add the code that you have into the stories.ts file. – Jayoti Parkash Mar 12 '20 at 03:42
Edited my post. Thanks. – Danele Roux Mar 13 '20 at 04:54
You need to parse your string in a way so that it will consider it as a html and not a string or you create a pipe and use that in html. Example: https://stackoverflow.com/a/44393590/4345389 – Jayoti Parkash Mar 13 '20 at 05:27

Max Amorim · Answer 3 · 2020-03-11T11:02:08.163

You can achieve this with ngx-markdown

And bind your json HTML into [data]:

<li *ngFor="let accordionItem of accordionData; let i = index;">
    <a href="javascript:;" class="accordion-trigger" (click)="toggleAccordian($event, i)">
        {{ accordionItem.accordionLink }}
    </a>
    <div hide="!isActive">
        <div class="inner row">
            <markdown [data]="accordionItem.accordionContent"></markdown>   
        </div>
    </div>
</li>

Rendering HTML from JSON with Angular 8

3 Answers3