How to add background-image using ngStyle in Angular2 ?

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

// app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    imageUrl =
'https://media.geeksforgeeks.org/wp-content/uploads/20231027171405/
 GPL-Live - Now - article - banner - date - extended.webp';
}

Javascript

// app.module.ts
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

<!-- app.component.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

// app.component.ts
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(
https://media.geeksforgeeks.org/wp-content/uploads/20231027171405/GPL-Live-Now-article-banner-date-extended.webp)');
    }
}

Javascript

// app.module.ts
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

<!-- app.component.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: