Sanitize URL in Angular 2+

Question

I'm trying to sanitize an URL that is dynamic according to the pdf that l get from BE, so l want to display this pdf in an iframe but l still get the following error

ERROR Error: NG0904: unsafe value used in a resource URL context

ts file

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { JarwisService } from 'src/app/services/jarwis.service';
import { TokenService } from 'src/app/services/token.service';

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

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

export class WatchComponent implements OnInit, PipeTransform {

  public video: any;
  public topics: any;
  public users: any;
  public token: any;
  public username = '';
  public email: any;
  public videoid: any;
  public upNextVideo: any | undefined;
  public previousVideo: any | undefined;
  public done: any;
  public done2: any;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private Token: TokenService,
    private jarwis: JarwisService,
    private sanitizer: DomSanitizer
  ) { }

  transform(url: any) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

  //get subject
  getVideoId() {
    const vid = this.route.snapshot.paramMap.get('id');
    return (vid);
  };

  //next lesson
  next(id: any) {
    console.log(id);
    this.router.navigate(["/watch", id])
      .then(() => {
        window.location.reload();
      });
  }

  prev(id: any) {
    console.log(id);
    this.router.navigate(["/watch", id])
      .then(() => {
        window.location.reload();
      });
  }

  quiz(name: any) {
    console.log(name);
    this.videoid = this.getVideoId();
    this.router.navigate(["/quiz", 1, this.videoid, name])
      .then(() => {
        window.location.reload();
      });
  }

  ngOnInit() {
    this.token = localStorage.getItem('token');
    this.users = this.Token.payload(this.token);
    this.username = this.users.data.name;
    this.email = this.users.data.email;

    this.videoid = this.getVideoId();
    console.log(this.video);

    // get video by id sent from on click
    this.jarwis.watch({ 'video_id': this.videoid }).subscribe((res: any) => {
      this.video = res['video'];
    });


    //query lessons by topic.
    this.jarwis.getLessonsByTopic({ 'topic': 'Financial accounting' 
       }).subscribe((response: any) => {
      this.topics = response['topics'];
    });

    //post video_id to get next video in the topic
    this.jarwis.getUpNext({ 'id': this.videoid }).subscribe((response: any) => {
      this.upNextVideo = response.video;
      if (this.upNextVideo === undefined || this.upNextVideo.length === 0) {
        this.done2 = 1;
      }
    });

    //post video_id to get prev video in the topic
    this.jarwis.getPrevious({ 'id': this.videoid }).subscribe((response: any) => {
      this.previousVideo = response.video;
      // console.log(this.previousVideo);
      if (this.previousVideo === undefined || this.previousVideo.length === 0) {
        this.done = 1;
      }
    });

  }

}

html

 <div style="width: 100%; height: 480px;" [hidden]="!done2">
            <iframe src="transform(https://example.co.za/Backend/documents/{{video.document}})#toolbar=0"> </iframe>
 </div>

Can you assist me on how l can make the URL safe? and be able to display pdf in the inframe.