The common use case for compiling Angular components into HTML strings are Frontend PDF Generation with given HTML PRINT HTML Native JS plugins that required HTML as a string. . But thanks to Angular’s , we can create a workaround for this. Using , we can dynamically render the required component into a template, and then we access the from . Unfortunately Angular doesn’t have an exposed method to compile an Angular component into an HTML string ComponentFactoryResolver ComponentFactoryResolver nativeElement.innerHTML componentRef One thing to note here is we have used for getting HTML with all the bindings. If we are not setting this scheduler, no data binding will be available in the parse HTML. import { asyncScheduler } from 'rxjs'; app.component.ts import {
  Component,
  ComponentFactory,
  ComponentFactoryResolver,
  ViewChild,
  ViewContainerRef,
} from '@angular/core';
import { asyncScheduler } from 'rxjs';
import { PdfHtmlComponent } from './pdf-html.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('pdfHtml', { read: ViewContainerRef }) container;

  constructor(private resolver: ComponentFactoryResolver) {}

  getPDFHtml() {
    this.container.clear();
    const factory: ComponentFactory<any> =
      this.resolver.resolveComponentFactory(PdfHtmlComponent);

    const componentRef = this.container.createComponent(factory);
    componentRef.instance.title = 'Injected Title';

    asyncScheduler.schedule(() => {
      const htmlString = componentRef.location.nativeElement.innerHTML;
      componentRef.destroy();
      console.log('HTML STRING:', htmlString);
    });
  }
} app.component.html <button (click)="getPDFHtml()">CLICK TO GET COMPONENT HTML</button>
<p>Output is in the console</p>
<div [hidden]="true">
  <template #pdfHtml></template>
</div> pdf-html.component.ts import { Component } from '@angular/core';

@Component({
  selector: 'pdf-html',
  templateUrl: './pdf-html.component.html',
})
export class PdfHtmlComponent {
  title: string = 'Default Title';

  STYLES: any = {
    MAIN_CONTAINER: 'background:red;',
    ITEM_BOX: 'color:red;',
  };
} pdf-html.component.html <h2>Title: {{ title }}</h2>

<table style="{{ STYLES.MAIN_CONTAINER }}">
  <tr style="{{ STYLES.ITEM_BOX }}">
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr style="{{ STYLES.ITEM_BOX }}">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr style="{{ STYLES.ITEM_BOX }}">
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr style="{{ STYLES.ITEM_BOX }}">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table> You can see the demo here or you can play with the code here Happy coding!!! 🎉🎉🎉

Using Angular to Detect Network Connection Status - Online/Offline

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Compile Angular Component To HTML String With All The Bindings

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Using Angular to Detect Network Connection Status - Online/Offline

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Using Angular to Detect Network Connection Status - Online/Offline

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps