@angular/platform-browser#SafeResourceUrl TypeScript Examples

/**
   * Transform
   *
   * @param value: string
   * @param type: string
   */
  transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value)
      case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value)
      case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value)
      case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value)
      case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value)
      default:
        return this._sanitizer.bypassSecurityTrustHtml(value)
    }
  }

public transform(
    value: any,
    type: string
  ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this.sanitizer.bypassSecurityTrustHtml(value)
      case 'style':
        return this.sanitizer.bypassSecurityTrustStyle(value)
      case 'script':
        return this.sanitizer.bypassSecurityTrustScript(value)
      case 'url':
        return this.sanitizer.bypassSecurityTrustUrl(value)
      case 'resourceUrl':
        return this.sanitizer.bypassSecurityTrustResourceUrl(value)
      default:
        throw new Error(`Invalid safe type specified: ${type}`)
    }
  }

private getUrl(position: Position): SafeResourceUrl {
        const longitude = position.coords.longitude;
        const latitude = position.coords.latitude;

        return this.domSanitizer.bypassSecurityTrustResourceUrl(
            `//www.openstreetmap.org/export/embed.html?bbox=${longitude -
                0.005},${latitude - 0.005},${longitude + 0.005},${latitude +
                0.005}&marker=${position.coords.latitude},${
                position.coords.longitude
            }&layer=mapnik`,
        );
    }

public downloadJson(data): SafeResourceUrl {
    if (data?.length === 0) {
      return '';
    }

    const blob = new Blob([JSON.stringify(data)], {
      type: 'text/json;charset=utf-8',
    });
    return this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(blob));
  }

public downloadCsv(data): SafeResourceUrl {
    if (data?.length === 0) {
      return '';
    }

    const blob = new Blob([data], {
      type: 'text/csv;charset=utf-8',
    });

    return this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(blob));
  }

public transform(
    value: any,
    type: string
  ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case "html":
        return this.sanitizer.bypassSecurityTrustHtml(value);
      case "style":
        return this.sanitizer.bypassSecurityTrustStyle(value);
      case "styleUrl":
        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
        return this.sanitizer.bypassSecurityTrustStyle(`url(${value})`);
      case "script":
        return this.sanitizer.bypassSecurityTrustScript(value);
      case "url":
        return this.sanitizer.bypassSecurityTrustUrl(value);
      case "resourceUrl":
        return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        throw new Error(`Invalid safe type specified: ${type}`);
    }
  }

getImages(): string[] | SafeResourceUrl[] {
      if (!this.images) {
          return [];
      }

      if (this.remainingCount) {
          return this.images.slice(0, this.rows * this.columns);
      } 
      else if (this.lazyLoading && this.order != NgxGalleryOrder.Row) {
          let stopIndex = 0;

          if (this.order === NgxGalleryOrder.Column) {
              stopIndex = (this.index + this.columns + this.moveSize) * this.rows;
          }
          else if (this.order === NgxGalleryOrder.Page) {
              stopIndex = this.index + ((this.columns * this.rows) * 2);
          }

          if (stopIndex <= this.minStopIndex) {
              stopIndex = this.minStopIndex;
          } else {
              this.minStopIndex = stopIndex;
          }

          return this.images.slice(0, stopIndex);
      } 
      else {
          return this.images;
      }
  }

public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
      case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
      case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
      case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default: throw new Error(`Invalid safe type specified: ${type}`);
    }
  }

downloadUrl?: SafeResourceUrl;

downloadUrl?: SafeResourceUrl;

downloadUrl?: SafeResourceUrl;

url: SafeResourceUrl;

private setPath(url: string): SafeResourceUrl {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }

public downloadLink: string | SafeResourceUrl = '#';

public currentDownloadLink: string | SafeResourceUrl = this.initialDownloadLinkVal;

// see https://stackoverflow.com/questions/45343810/how-to-access-the-nativeelement-of-a-component-in-angular4

    public sanitizedUrlSrc: SafeResourceUrl;

currentDemo: SafeResourceUrl;

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

public downloadJsonLink: string | SafeResourceUrl = '#';

@Input() downloadJsonLink: string | SafeResourceUrl = '#';

currentPositionUrl: SafeResourceUrl | null = null;

visualisationUrl: SafeResourceUrl;

currentDemo: SafeResourceUrl;

bigImages: string[] | SafeResourceUrl[];

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

trustedVideoUrl: SafeResourceUrl;

small?: string | SafeResourceUrl;

medium?: string | SafeResourceUrl;

big?: string | SafeResourceUrl;