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.
Table of Content
- Steps for Installing & Configuring the Angular Application
- Project Structure
- Using [ngStyle] Directive
- Using the [style.background-image] Styling
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.w3wiki.net/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;" >w3wiki</ 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.w3wiki.net/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;" > w3wiki </ 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: