When using ngStyle to bind a variable, the binding variable will be null

Currently, I am attempting to utilize ngStyle to set the background image.

<div  class="artist-banner fluid-banner-wrapper" [ngStyle]="{'background-image':  'url(../imgs/banner/' + event?.category + '.jpg)' }">

The functionality seems to operate smoothly when the category consists of a single word. However, it encounters issues when there are two words in the category, resulting in a null bind.

For instance, when the category is "Formula one," the binding turns out to be null. What could potentially be causing this issue?

angulartypescriptng-style

Answer №1

To prevent URLs with spaces from being misinterpreted, follow these steps:

<div  class="artist-banner fluid-banner-wrapper" [ngStyle]="alertStyles">

Within the component code:

alertStyles = {
        'background-image':  'url(../imgs/banner/' + this.event?.category.replace(" ", "%20") + '.jpg)'
      };

For illustration purposes:

@Component({
  selector: 'app-style-example',
  template: `
    <div  class="artist-banner fluid-banner-wrapper" [ngStyle]="alertStyles">
  `
})
export class StyleExampleComponent {

  alertStyles = {
    'background-image':  'url(../imgs/banner/' + this.event?.category.replace(" ", "%20") + '.jpg)'
  };
}

Note: If you are iterating through events, make sure to pass the event parameter.

   @Component({
      selector: 'app-style-example',
      template: `
        <div  class="artist-banner fluid-banner-wrapper" [ngStyle]="changeStyle(event)">
      `
    })
    export class StyleExampleComponent {


    }



  changeStyle(event) {
    return {
        'background-image':  'url(../imgs/banner/' + event?.category.replace(" ", "%20") + '.jpg)'
    }
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on uploading images to a NodeJS server from an Angular 2+ application

I have a NodeJS rest-API that can handle both images and text content in the same function. Currently, I am using multer in my NodeJS server to manage image uploads along with text content. Below is an example code snippet showcasing how I am handling this ...

javascriptnode.jsangularexpressmulter

The specified 'image' identifier has not been defined. There is no such member within 'never'

Edit :: Finally, I managed to get the output successfully, but there's still an error that baffles me. https://i.stack.imgur.com/2wrNM.pngAlthough I've tackled similar issues in the past, this particular one seems elusive. I attempted using "?", ...

htmlangular

Assign a property to an array of objects depending on the presence of a value in a separate array

Looking to manipulate arrays? Here's a task for you: const arrayToCheck = ['a', 'b', 'c', 'd']; We have the main array as follows: const mainArray = [ {name:'alex', code: 'c'}, ...

javascripttypescriptecmascript-6

Tips for passing values and their corresponding labels during a click event in Angular 4

When I click the plus button, I want to hide the li element. Even though the data is passing correctly, the li element is not clearing as expected. The desired outcome is for the li instance to be removed once the plus button is clicked. https://i.stack.im ...

htmlangulardom

retrieve data from the server

Currently, I am delving into the world of Angular with ASP.NET Core 3.0 and still relatively new to it. Here's my scenario - I have a function that is able to save PDF files in a specific folder called "Resources\PdfFiles" within the ASP.NET back ...

angularasp.net-core

Dynamic getter/setter in Typescript allows for the creation of functions

I'm facing a challenge in making Typescript automatically infer types for dynamically created getter and setter functions. In my code, I have a class called MyClass which contains a map of containers: type Container = { get: () => Content s ...

typescriptaccessor

Angular4 provider being integrated into an AngularJS application offers the provider functionality

I have recently migrated my app from AngularJS to Angular4. Now, I want to create a provider in Angular4 and inject it into the app.config in AngularJS. Here is what I currently have: import { UtilsService } from './../utils/utils.service'; imp ...

angularjsangular

Please input the number backwards into the designated text field

In my react-native application, I have a TextInput where I need to enter numbers in a specific order such as 0.00 => 0.01 => 0.12 => 1.23 => 12.34 => 123.45 and so on with each text change. I tried using CSS Direction "rtl" but it didn' ...

javascriptreactjsangularjstypescriptreact-native

reposition content according to screen size

In my web development project, I am utilizing both bootstrap and angular to create a component that includes a menu feature. My goal is to have the menu displayed in the navbar when the screen size is large, but switch it to a dropdown menu on smaller scr ...

angularng-bootstrapng-content

Switch themes on the fly using Angular 2 and Meteor

I have a web application built with Meteor and Angular 2. I would like to implement a feature that allows users to change the theme by selecting one of two options: <select onChange="changeTheme()"> <option value="blue"> Blue</option> &l ...

angularmeteorthemes

Optimize your code in Angular 5 by consolidating or restructuring numerous Subscribe calls

Currently, I am utilizing Angular 5.2 for my web project. One of the pages includes multiple subscribe calls to various webAPI methods. While these calls are distinct and retrieve different datasets, I'm contemplating if there is a method to consolida ...

angularrxjsangular5

The Angular 4 HTTP patch method is encountering difficulties when called in code but functions properly when tested using Post

My attempts to make a patch and post call to the server are failing as it never reaches the server. Interestingly, the same request works flawlessly in Postman, so I suspect there might be an issue with my code. Both my post and patch methods are essentia ...

angularhttptypescript

While working on a project that involves TypeScript, Material-UI, and Formik, I encountered an error that originated from

I recently downloaded a project from the following site: https://codesandbox.io/s/gn692 Upon encountering some errors that I couldn't resolve on my own, I decided to download this project to see how it's implemented. Surprisingly, it runs smoothl ...

reactjstypescriptmaterial-uiformik

Utilize Ant Design TreeSelect to seamlessly integrate API data into its title and value parameters

I am currently working on populating a Tree Select component in ANT Design with data fetched from an API. The response from the API follows this structure: projectData = ProjectData[]; export type ProjectData = { key?: number; projectId: number; ...

arraysreactjstypescriptmappingantd

What is the process of creating an asynchronous function that will resolve a promise when the readline on('close') event is triggered within it in Typescript?

Here's a code snippet I'm working with: private readFile() { var innerPackageMap = new Map<string, DescriptorModel>(); // Start reading file. let rl = readline.createInterface({ input: fs.createReadStream(MY_INPUT_FILE ...

node.jstypescriptasynchronousasync-await

Unable to retrieve input value in ReactJS with TypeScript

I've just started learning Typescript and I encountered an error while trying to console.log the input field value. Any tips or suggestions on how to handle this? Here's my code: class Register extends Component<{},userState> { state = { ...

reactjstypescript

Experiencing 429 Too Many Requests error on Angular 7 while attempting to perform multiple file uploads

Whenever I attempt to upload a large number of files simultaneously, I encounter an issue. The API interface only allows for the submission of one file at a time, requiring me to call the service for each individual file. Currently, my code looks like thi ...

javascriptangulartypescriptangular7http-status-code-429

I encountered a mistake: error TS2554 - I was expecting 1 argument, but none was given. Additionally, I received another error stating that an argument for 'params' was not provided

customer-list.component.ts To load customers, the onLoadCustomers() function in this component calls the getCustomers() method from the customer service. customer.servise.ts The getCustomers() method in the customer service makes a POST request to the A ...

angulartypescriptangular7angular8viewchild

While utilizing Ionic to upload images to a server, I encountered the FileTransferError error code 3

I have successfully uploaded an image from the gallery, but I am facing issues while uploading multiple images at once. Here is the code snippet I am using: pictureUpload(x){ // x represents the file path like - file:///storage/emulated/0/Download/palak ...

typescriptcordovaionic-framework

Encountering an error with 'ng serve' on a recently established Angular project

After installing nodejs and Angular on my Windows 11 machine, I created a project using the ng new command. However, when I tried to run it with ng serve, I encountered the following error: c:\working\projects\xxxxxxx\xxxxxx-site>ng ...

angularwindowsangular-fullstackserveng