Angular HTML binding

How to bind HTML into Angular ?

Answer: Two easy way to bind html into angular. You can set values for properties of HTML elements or directives too. Here is the code for it

• hero.component.html
  
  
  <div [innerHTML]="htmlString | sanitizedHtml"></div>

  <div innerHTML="{{htmlString}}"></div>

• hero.component.ts
  
  
  import { Component, OnInit } from '@angular/core';

  @Component({

    selector: 'app-hero',

    templateUrl: './hero.component.html',

    styleUrls: ['./hero.component.css']

  })

  export class HeroComponent implements OnInit {

    htmlString: any;

    constructor() { }

    ngOnInit(): void {

      this.htmlString = `

      <div class="container">

        <header class="blog-header py-3">

          <div class="row flex-nowrap justify-content-between align-items-center">

            <div class="col-4 pt-1">

              <a class="text-muted" href="#">Subscribe</a>

            </div>

            <div class="col-4 text-center">

              <a class="blog-header-logo text-dark" href="#">Large</a>

            </div>

            <div class="col-4 d-flex justify-content-end align-items-center">

              <a class="text-muted" href="#">

                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>

              </a>

              <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>

            </div>

          </div>

        </header>

      </div>`;

    }

  }

• sanitized-html.pipe.ts (We can create custom sanitized pipe so we can use any places in project)
  
  
  import { Pipe, PipeTransform } from '@angular/core';

  import { DomSanitizer } from '@angular/platform-browser'

  @Pipe({

    name: 'sanitizedHtml'

  })

  export class SanitizedHtmlPipe implements PipeTransform {

    constructor(private sanitized: DomSanitizer) {}

    transform(value: any): any {

      return this.sanitized.bypassSecurityTrustHtml(value);

    }

  }

• shared.module.ts 
  
  I am using lazy loding module so at my coding structure i am importing this SharedModule into the HeroModule. 
  
  If you are not using lazy loding module then you can declare SanitizedHtmlPipe directly into app.module.ts.
  
  But make sure SanitizedHtmlPipe not declare both places.
  
  
  import { NgModule } from '@angular/core';

  import { CommonModule } from '@angular/common';

  import { SanitizedHtmlPipe } from './sanitized-html.pipe';

  @NgModule({

    declarations: [

      SanitizedHtmlPipe

    ],

    imports: [

      CommonModule

    ],

    exports: [

      SanitizedHtmlPipe

    ]

  })

  export class SharedModule { }

• hero.module.ts
  
  
  import { NgModule } from '@angular/core';

  import { CommonModule } from '@angular/common';

  import { SharedModule } from 'src/app/shared/shared.module';

  import { HeroComponent } from './hero.component';

  import { RouterModule } from '@angular/router';

  
  

  @NgModule({

    declarations: [HeroComponent],

    imports: [

      CommonModule,

      SharedModule,

      RouterModule.forChild([

        {path: '', component: HeroComponent}

      ])

    ]

  })

  export class HeroModule { }

• app-routing.module.ts (We Can lazy load module like this below)
  
  
  import { NgModule } from '@angular/core';

  import { RouterModule, Routes } from '@angular/router';

  
  

  const routes: Routes = [

    {

      path: 'hero',

      loadChildren: () => import('./page/hero/hero.module').then(m => m.HeroModule)

    },

    {

      path: 'plainsight',

      loadChildren: () => import('./page/plainsight/plainsight.module').then(m => m.PlainsightModule)

    }

  ];

  
  

  @NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

  })

  export class AppRoutingModule { }

  
  
  
  Advantages of lazy loading:
  
  Lazy loading modules helps us decrease the startup time. With lazy loading our application does not need to load everything at once, it only needs to load what the user expects to see when the app first loads. Modules that are lazily loaded will only be loaded when the user navigates to their routes.

• Browser Output:
  
  
  
  
  It's always a good option to sanitize your HTML. Because without sanitizing the html breaks the third party URL