Angular
  • Introduction
  • Angular Command
  • Oshop Project
    • Oshop Tips
    • Product Management Module
  • Redux
  • Angular Tips
    • Communicate with Angular components outside of Angular
    • Safe Pipe
    • Highlight attachment file
    • Set CSS background-image value in Angular
  • Angular DatePicker Tips
  • Angular 6 Breadcrumb
Powered by GitBook
On this page

Was this helpful?

  1. Angular Tips

Set CSS background-image value in Angular

Component Html code

<div *ngIf="doc.filePreviewUrl" class='imageDiv' [style.background-image]="getSafeUrl(filePreviewUrl)"></div>

Component TS code

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

constructor(private sanitization: DomSanitizer) { }

// Return trust style
getSafeUrl(filePreviewUrl){
  return this.sanitization.bypassSecurityTrustStyle('url(\'' + filePreviewUrl + '\')');
}  

Component CSS

.imageDiv{
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
PreviousHighlight attachment fileNextAngular DatePicker Tips

Last updated 5 years ago

Was this helpful?