如何从Angular2模板（的一部分）生成html？

Question

I need to allow my end users to copy/paste the html output of a component template into eg a MailChimp template or their own website, as static html. I need something similar to the buttons that generate embed-able iframe code on some content management websites, so the user can paste that iframe html into the appropriate part of their own site.

My (simplified) component template with a section that looks like this:

<div *ngFor="let item of items">
  <p>{{item.title}}</p>
</div>

...which at runtime should create html in the DOM that looks something like this:

<p>item title 1</p>
<p>item title 2</p>
<p>item title 3</p>
.
.

I want to give my users a button that will copy that generated html to their clipboard, so they can paste and display it eg in the appropriate section of their own static website. I already have a custom copy-to-clipboard directive that will handle the actual copy operation on any string I pass to it, but in this case what should I be copying? How do I access the 'static' version of the html " <p>item title 1</p>... " that the user sees rendered in the browser?

Please let me know if my question needs additional clarification. Google results seem to indicate this is not a common operation, so I'm having trouble expressing the question with the proper terminology.

Answer 1

Use & lt; and & gt;just has I have used below.

<div *ngFor="let item of items">
  &lt;p&gt;{{item.title}}&lt;/p&gt;
</div>

Answer 2

Try converting title in items variable in your component to be like this:

items = [{title: "<p>item title 1</p>"}, {title: "<p>item title 2</p>"}, {title: "<p>item title 3</p>"}]

Then redo your code:

<div *ngFor="let item of items">
   {{item.title}}
</div>

Answer 3

You can achieve it using a custom directive in your component:

import { Directive, ElementRef} from '@angular/core';

@Directive({
  selector: '[myInnerHtml]'
})
export class MyInnerHtmlDirective {
  constructor(private _el: ElementRef) {}
  getInnerHtml(): string {
    return this._el.nativeElement.innerHTML;
  }
}

using inside component template:

<div (click)="click()" myInnerHtml>
  <p *ngFor="let item of items">{{item}}</p>
</div>

Component:

import { Component, ViewChildren } from '@angular/core';
import { MyInnerHtmlDirective } from '../my-first.directive';

@Component({
  selector: 'test',
  templateUrl: './test.component.html'
})
export class TestComponent {
  @ViewChildren(MyInnerHtmlDirective) directives;
  constructor() { }
  items: string[] = ['item title 1', 'item title 2', 'item title 3']

  click() {
    let html: string = (<MyInnerHtmlDirective>this.directives.first).getInnerHtml();
    let cleanHmtl: string = html.replace(/<!--[\s\S]*?-->/g, ''); // deleting comments
    console.log(cleanHmtl);
  }
}

It should give you <p>item title 1</p><p>item title 2</p><p>item title 3</p>