How to add background-image using ngStyle in Angular2 ?
Last Updated :
29 Nov, 2023
The ngStyle Attribute is used to add some style to an HTML element. In this article, we will learn How to add background-image using ngStyle in Angular. To achieve this, we will follow the below approaches.
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Project Structure
It will look like the following:
Using [ngStyle] Directive
In this approach, the [ngStyle] is used to bind an object that represents the styles. This directive allows us to set inline styles dynamically based on expressions in the component, along with providing a technique for implementing conditional styles to an HTML element. Here, we will set the background image using the URL from the imageUrl variable.
Example: This example illustrates adding the background-image in Angular2.
Javascript
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
imageUrl =
GPL-Live - Now - article - banner - date - extended.webp' ;
}
|
Javascript
import { NgModule }
from '@angular/core' ;
import { BrowserModule }
from '@angular/platform-browser' ;
import { HttpClientModule }
from '@angular/common/http' ;
import { AppComponent }
from './app.component' ;
import { ButtonModule }
from 'primeng/button' ;
import { CardModule, }
from 'primeng/card' ;
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HttpClientModule,
CardModule,
ButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
HTML
< h2 style = "color: green;" >GeeksforGeeks</ h2 >
< h2 >How to add background-image using ngStyle in Angular2 ?</ h2 >
< div style = "width: 50%;" >
< div [ngStyle]="{'background-image': 'url(' + imageUrl + ')',
'background-size': 'cover', 'height': '300px'}">
</ div >
</ div >
|
Output:
Using the [style.background-image] Styling
In this approach, we will use [style.background-image] to set the background. This syntax uses the Property Binding that helps to dynamically set the background-image Property of an HTML element, along with allowing the binding of the value of background-image to a variable or an expression defined in the component.
Example: This is another example that illustrates adding the background-image in Angular2.
Javascript
import { Component } from '@angular/core' ;
import { BrowserModule, DomSanitizer }
from '@angular/platform-browser'
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
backgroundImg: any;
constructor(private sanitizer: DomSanitizer) {
this .backgroundImg =
sanitizer.bypassSecurityTrustStyle(
'url(
}
}
|
Javascript
import { NgModule }
from '@angular/core' ;
import { BrowserModule }
from '@angular/platform-browser' ;
import { HttpClientModule }
from '@angular/common/http' ;
import { AppComponent }
from './app.component' ;
import { ButtonModule }
from 'primeng/button' ;
import { CardModule, }
from 'primeng/card' ;
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HttpClientModule,
CardModule,
ButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
HTML
< h2 style = "color: green;" >
GeeksforGeeks
</ h2 >
< h2 >
How to add background-image using
ngStyle in Angular2 ?
</ h2 >
< div style = "width: 50%;" >
< div [style.background-image]="backgroundImg"
[style.width.px]="1500"
[style.height.px]="400">
</ div >
</ div >
|
Output:
Share your thoughts in the comments
Please Login to comment...