How render HTML file in Angular component? - TagMerge
3How render HTML file in Angular component?How render HTML file in Angular component?

How render HTML file in Angular component?

Asked 10 months ago
0
3 answers

  1. Read the file using typescript/javascript.
  2. Depending on your HTML, you can use [innerHtml] attribute. See

Code:

<div [innerHtml]="yourHTML"></div>

Note: Be aware of XSS vulnerability.

Source: link

0

Now it’s important to know that the placing of the markers as well as the displaying of the HTML inside is delegated to the Leaflet API. This looks approximately like this:
import { marker } from 'leaflet';

const marker = marker(latLngPosition);
const popupContent = `Hi, some <strong>HTML</strong> here`;

marker.bindPopup(popupContent).openPopup();

marker.addTo(map);
First let’s create the component which is responsible for rendering the data displayed inside the popup message. It’s actually quite a simple component that gets it’s data via an @Input().
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    <h3>{%raw%}{{ data.name }}%{%endraw%}</h3>
    

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
Dynamic components need to be registered in the entryComponents property of NgModule.
import { NgModule } from '@angular/core';
...
import { HTMLMarkerComponent } from './html-marker.component';

@NgModule({
  ...
  entryComponents: [HTMLMarkerComponent],
  ...
})
export class AppModule { }
For each entry to be displayed as a marker, I instantiate a new HTMLMarkerComponent by using the ComponentFactoryResolver.
import { ComponentFactoryResolver, Injector } from '@angular/core';

import { HTMLMarkerComponent } from './html-marker.component.ts';

@Component({...})
export class AppComponent {

  constructor(private dataService: DataService, private resolver: CompnentFactoryResolver, private injector: Injector) {}

  addMarker() {
    for(const entry of this.dataService.getMarkers()) {
      const factory = this.resolver.resolveComponentFactory(HTMLMarkerComponent);
      const component = factory.create(this.injector);
      ...
    }
  }
}
Then we need to pass in the data which the component has to render. In order for the component template to render properly, we need to manually trigger change detection on our component after we’ve given it the data.
addMarker() {
  for(const entry of this.dataService.getMarkers()) {
    const factory = this.resolver.resolveComponentFactory(HTMLMarkerComponent);
    const component = factory.create(this.injector);
    
    component.instance.data = entry;
    component.changeDetectorRef.detectChanges();
  }
}

Source: link

0

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  htmlString = '<h1>Hello gowtham</h1>';}
app.component.html
<div [innerHTML]="htmlString"></div>

Source: link

Recent Questions on html

    Programming Languages