title: Passing Angular Custom Component via HTML from DB
body: <p>I'm trying to pass an angular component via HTML stored in a database.</p>
  <p>Part of our website is a blog, and as part of blog posts we have videos.</p>
  <p>I also have this component;</p>
  <pre><code>import { isPlatformBrowser } from '@angular/common';
  import { Component, ElementRef, ViewChild, Inject, PLATFORM_ID, AfterViewInit, Input } from '@angular/core';
  import * as Plyr from 'plyr';
  import { File } from 'server/misc/schemas/file.schema';
  
  @Component({
    selector: 'app-video-player',
    template: `
      &lt;video  #video
              controls
              crossorigin
              playsinline&gt;
          &lt;source [src]=&quot;videoFile.url | cmsUrl&quot; [attr.type]=&quot;videoFile.mime&quot; [attr.size]=&quot;videoFile.size&quot;&gt;
      &lt;/video&gt;
    `
  })
  export class VideoPlayerComponent implements AfterViewInit {
  
    @Input('video') videoFile: File;
    @ViewChild('video') el: ElementRef;
  
    constructor(
      @Inject(PLATFORM_ID) private platformId: Object
    ) { }
  
    ngAfterViewInit(): void {
  
      if (isPlatformBrowser(this.platformId)) {
        const element = this.el.nativeElement;
        new Plyr(element);
      }
    }
  }
  </code></pre>
  <p>So I want to put <code>&lt;app-video-player [video]=&quot;videoRef&quot;&gt;&lt;app-video-player&gt;</code> in the blog html, but it seems to get sanitised.</p>
  <p>Is it sensible to turn off all sanitising if I know the only source will be my DB?</p>