logo
down
shadow

How to add background image with ngStyle?


How to add background image with ngStyle?

By : Danish Azeemi
Date : November 19 2020, 03:01 PM
Any of those help I am trying to populate multiple cards as following: , You can set it as the following:
code :
<div ...[ngStyle]="{background: 'url('+ product.image+')'"....>


Share : facebook icon twitter icon
How to add background-image using ngStyle (angular2)?

How to add background-image using ngStyle (angular2)?


By : Slent
Date : March 29 2020, 07:55 AM
may help you . How to use ngStyle to add background-image? My code doesn't work: , I think you could try this:
code :
<div [ngStyle]="{'background-image': 'url(' + photo + ')'}"></div>
Angular 2 ngStyle and background-image

Angular 2 ngStyle and background-image


By : Lystun
Date : March 29 2020, 07:55 AM
should help you out Linebreaks within received base64 image was a reason of trouble. This is my solution:
code :
//This goes to template <div>:
[style.background-image]="makeTrustedImage(images[i].file)"

//And this goes to component:
constructor(private domSanitizer: DomSanitizer) {}

makeTrustedImage(item) {
    const imageString =  JSON.stringify(item).replace(/\\n/g, '');
    const style = 'url(' + imageString + ')';
    return this.domSanitizer.bypassSecurityTrustStyle(style);
  }
ngStyle background-image

ngStyle background-image


By : Jackson
Date : March 29 2020, 07:55 AM
it helps some times I have the following problem. I have a component that has @Input string value that is a link to the image. , Try this
code :
<div class="parallax" [ngStyle]="{'background-image': 'url('+ parallaxImage+')'}"></div>
 getParallaxImage(){
    return "url(" + this.parallaxImage + ")";
  }
Specifying alternate background image using ngStyle

Specifying alternate background image using ngStyle


By : user3421087
Date : March 29 2020, 07:55 AM
may help you . Working demo
Template file
code :
  <div  [ngStyle]='styles'>
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>
 export class AppComponent  {

  name = 'Angular';
  img1 = 'https://www.w3schools.com/css/img_flwr.gif';
  img2 = 'https://www.w3schools.com/css/paper.gif'
  isSelected: boolean =  true;
  styles = {};


  setCurrentStyles() {
    this.styles = { 
        backgroundImage: this.isSelected ?
                        `url(${this.img1})`:`url(${this.img2})`
    };
  }

  toogleImage() {
    this.isSelected = !this.isSelected;
    this.setCurrentStyles();
  }
}
ngStyle background image not visible

ngStyle background image not visible


By : user3559405
Date : March 29 2020, 07:55 AM
like below fixes the issue The background-image property sets one or more background images for an element.
If you want to add some more "attributes" then use background instead:
code :
<div [ngStyle]="{
  'background': 'url(' + myBackgroundUrl + ') no-repeat -228px 0', 
  'width': '224px', 
  'height': '248px'
}"></div>
Related Posts Related Posts :
  • Angular 4 Force navigate with refresh
  • Query dom element's properties Angular 4
  • Angular Material Dialog return value
  • Accessing HTTP Error Response Body from HttpInterceptor in Angular
  • Resolve Adal Token for Http Interceptor
  • Is it possible to change namespace name in @nrwl/nx?
  • Angular 4 Router: Getting redirected inside children's first route
  • Uncaught Error: Template parse error There is not such directive with exportAs
  • How can I use @HostListener('window:beforeunload') to call a method?
  • Is it possible to get the type from a generic, given as parameter
  • Ionic 3 - Preventing browser close
  • How to set the color of an icon in Angular Material?
  • how do i handle POST response
  • constructor being called duplicate in *ngFor due to @ViewChild
  • Angular4 OAuth2 IdentityServer4
  • ERROR TypeError: Cannot read property 'name' of undefined
  • Angular4 http get with URL parameter
  • What is the difference between fakeAsync's tick() and done() in angular2 testing?
  • How to push in service without losing previous data?
  • How to make custom arrow mark in agm-map?
  • Upload File in Angular 4 using FormData works in Local but not on Azure App Service
  • How to automatically deploy a Laravel app with embedded Angular to Heroku
  • Unexpected module 'Ng2SmartTableModule' declared by the module 'AppModule'
  • use angular-cli project with visual studio asp.net empty web app?
  • How to load different templates for the same component?
  • Creating Angular4 'Loading' Screen: ExpressionChangedAfterItHasBeenCheckedError
  • How to pass a array value as color in Angular 4
  • Coerce the HttpResponse into an item of the specified type, complete with custom methods
  • Angular/rxjs: Why don't I have to import toPromise anymore?
  • Angular 2 @Input not works for router outlet
  • Nested Model - Angular 2
  • Supress duplicate error in aot compiler
  • Angular2 ExpressionChangedAfterItHasBeenCheckedError
  • Consuming my promise inside my Angular component
  • Despite error cannot read property length of null, the code works
  • Accessing data returned by Promise.all
  • Property X doesn't exist on type Y[]
  • Ionic Headers Failing to set through http.post
  • Angular 4 routing/state problems
  • Angular 2 Dashboard application web api call at initialization
  • ngrx/store:subscribe works fine but async in template gives [object Object]
  • Angular2 - how to mix custom and declared arguments in constructor
  • Implementing Geolocation from @ionic-native/geolocation
  • Angular - Test library before publish
  • AoT Compilation Failed - no such file or directory, lstat 'tsconfig-aot.json'
  • Docker container from Angular4 app : "-p" : executable file not found in $PATH
  • Invalid container name
  • Angular - NgStyle fall back image
  • Angular Observable not updating when I subscribe.
  • Angular mat-checkbox getElementById
  • Angular 4 Injecting route in the APP_INITIALIZER
  • Error: EACCES: Error: EACCES: permission denied, open '/Users/emilio/.ionic/daemon.log' at Error (native)
  • selected value in dropdown list does not work Angular
  • how to smooth scroll down to element on page load angular 4?
  • AngularFire update breaks the app
  • experimentalDecorators Warning on ts lint
  • Dexie - Check if a record exists and initialize it if not present
  • How should I use BehaviorSubject class from a Service in the HTML Template of a Component in Angular 4?
  • How to make ngx-bootstrap datepicker be able to select and display only month and year?
  • What is wrong with this Angular form that makes it reset selected values in the UI unexpectedly?
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org