Directive Rerutn HTML Containt in angular4

Directive

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

@Directive({

selector: '[appDemoHtml]'

})

export class DemoHtmlDirective {

// constructor(private el: ElementRef) {

// let myCurrentContent: string = el.nativeElement.innerHTML; // get the content of your element

// el.nativeElement.innerHTML = 'my new content'; // set content of your element }

// }

constructor(private _elemRef: ElementRef, private _renderer: Renderer) {

_renderer.setElementProperty(_elemRef.nativeElement, 'innerHTML', '<h2>Hi Ajay, </h2>my new content');

}

}

Call in Component

<div appDemoHtml></div>

app.main.ts

import { DemoHtmlDirective } from './demo-html.directive';

@NgModule({

declarations: [

AppComponent,

MainComponent,

DemoHtmlDirective

],});