Change inner html of div with angular directive

Angular directives allow you to add functionality to HTML elements. The most common use case for directives is adding behavior or functionality to an element without having to write any JavaScript code. In this case, we want to change the content inside our div element when it’s clicked on by the user.

The ng-template directive in Angular allows you to edit a div’s inner HTML. To change the HTML of a an element, here is an example of the ng-bind-html directive:

The appropriate HTML content must first be added to a template. You can do this by creating an element and assigning it an ID, like so:

<ng-template #myNewTemplate>
  <p>This is modified HTML content.</p>
</ng-template>

The code above is an Angular template. The ng-template element defines a reusable template in Angular, which can be referenced from other parts of your application. The #myNewTemplate variable is used to reference this template. The content inside the ng-template is just a simple <p> element with some text. #myNewTemplate is the id assigned to it. The template can then be injected into the div using the ngTemplateOutlet directive:

<div [ngTemplateOutlet]="myNewTemplate"></div>

Alternatively, to conditionally modify the content of the div, you can also use the ngIf and ngSwitch directives.

ngSwitch example:

<div [ngSwitch]="value">
  <p *ngSwitchDefault>Default Content</p>
  <p *ngSwitchCase="1">First Content</p>
  <p *ngSwitchCase="2">Second Content</p>
  <p *ngSwitchCase="3">Third Content</p>

</div>

ngIf example:

<div *ngIf="isVisible; else some_other_content">
  <p>This is my new HTML content.</p>
</div>
<ng-template #some_other_content>
  <p>This is the some other content which will be visible when isVisible is false</p>
</ng-template>

The some_other_content div will be visible when isVisible is false.

It’s vital to remember that in order to use the ng-template and ngTemplateOutlet directives, your module must import the CommonModule.

Another way to do that is by using [innerHTML] binding to change the inner HTML of a div element. This can be done by binding the innerHTML property of the div element to a variable in the component’s class.

The following is an example of how you can use the innerHTML property to change the inner HTML of a div element:

<div [innerHTML]="yourHTMLString"></div>

In your component class, you can define a variable yourHTMLString, and assign it the value of the HTML code you want.

export class YourComponent {
    yourHTMLString = '<h1>Hello User!</h1>';
}

You can assign any HTML code to the variable yourHTMLString and it will be rendered inside the div with [innerHTML] binding. The DomSanitizer service provided by Angular can sanitize the HTML before binding it to the [innerHTML] property, making it safe against XSS attacks. Here is the sample code for that:

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
    selector: 'app-my-component',
    template: `<div [innerHTML]="yourHTMLString"></div>`
})
export class MyComponent implements OnInit {
    yourHTMLString: any;
    constructor(private sanitizer: DomSanitizer) { }

    ngOnInit() {
        this.yourHTMLString = this.sanitizer.bypassSecurityTrustHtml('<h1>Hello User!</h1>');
    }
}

This way, you can update the innerHTML property of a div element using Angular and sanitize the HTML before binding it to the innerHTML property to prevent any security risks.