The issue arises when the desired image size is not reflected correctly on the background after changing

I've been working on a basic image slideshow where the background image changes based on user selection. However, I've noticed that when I change the image for the first time, the backgroundSize: cover property seems to disappear. Even if I try changing it again, the issue persists and I'm struggling to understand this behavior...

If you'd like to take a look at my code on stackblitz, here's the link: https://stackblitz.com/edit/angular-3wihf2

You can also view the demo by following this link:

I've even tried adding a CSS class with background-size: cover, but the issue still persists.

Your assistance would be greatly appreciated!

angulartypescript

Answer №1

Modify the code snippet below:

[ngStyle]="{height: height + 'px', background: 'url(' + shownImage.path + ') no-repeat center center', backgroundSize: 'cover'}"

to

[ngStyle]="{height: height + 'px', background: 'url(' + shownImage.path + ') no-repeat center center / cover'}"

The property backgroundSize is not recognized, you should use background-size within the background property itself using a forward slash / to separate it from the position value (center).

Forked Stackblitz Example

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

Angular 7: Retrieve the most recent subscription response from an array of observables

Scenario: I am handling multiple POST requests to update a single table with diverse data sets. The response from the request will contain the updated table data. To streamline this process, I stored the observables in an array and employed forkJoin to co ...

angularrxjs

What is the best way to create a function that requires an argument in TypeScript?

I'm looking to bring in a module that requires an argument in Typescript. This is how it looks in javascript: const cors = require('cors')({origin: true}); // JS What would be the equivalent syntax in Typescript? ...

javascripttypescript

Using SignalR to implement CRUD operations within a Hub or Controller

I have been working on an Angular app that is built on top of an ASP.NET MVC application. In this project, I have a Dashboard where I showcase Average and Total numbers that are altered during Create / Update / Delete events. Usually, these events are hand ...

c#asp.netasp.net-mvcangularsignalr

Using Angular 2 routes to navigate to various applications

I'm currently developing multiple versions of my application in different languages. Utilizing AOT (ahead of time) compilations, the end result is static deployable sites organized in a structure like this: dist - index.html -- default entry file f ...

javascriptangularangular-routingangular-i18n

Using TypeScript to sort objects based on keys and convert an array of objects into a different object type

I'm facing an issue where I need to filter the objects within an array of objects based on keys and convert them into a different type of object. I attempted to solve it like this... const values = Object.keys(user).map((key) => {'refKey' ...

javascriptarraysangulartypescript

Uh oh, it looks like there's an issue! The function getCoordinates is not recognized for this.locations

Whenever I attempt to execute the method in my class (getCoordinates()), an Error is thrown: ERROR TypeError: this.locations[0].getCoordinates is not a function What am I doing wrong? The service method I'm using: getLocations(){ return this ...

angulartypescript

What are the best strategies for combining multiple TypeScript class decorators?

I have a set of unique class decorators that I apply to multiple classes. It looks something like this: @awesome @cool @amazing export class MySpecialClass { /* ..... */ } However, since I use these three decorators across many classes, I want to condens ...

typescripttypescript-decorator

Transmitting HTML content to the browser from the client using Node.js

Quoted from: Book - "Getting MEAN with Mongo, Express.." When it comes to responding to requests in your application by sending HTML to the browser, Express simplifies this process compared to native Node.js. With support for various templating e ...

javascriptnode.jsangular

Validation messages in Angular only display once the form has been reset using the reset

I am having trouble with my form appearing clean without validation error messages after using the reset() function. Initially, my form looks clean as expected: However, if a user clicks the register button and encounters an error, I call the form.reset( ...

angularformsangular-reactive-formsangular-validation

NativeScript: The workspace path specified does not contain a valid workspace file

Currently, I am developing a new project using NativeScript and Angular. To streamline the process, I attempted to utilize Angular generators (schematics) through the command line. The command I executed was tns generate component <component name> U ...

angularnativescriptangular-cli

Is it possible to open a PDF in Acrobat directly from a single button click on a user interface created with Angular/JS?

Currently, I am in the process of developing an Angular/java webpage that will allow users to interact with various forms. At the moment, if a user wants to edit a PDF, they must download it and then go to their downloads folder to open it in Adobe Acrobat ...

javaangularacrobatngx-extended-pdf-viewer

Navigating away from a guard in a module federated Angular application

My Angular application uses module federation with a route-guard that redirects to another route. Everything works fine when run as a standalone application, but I encounter an error when it is integrated into a shell application. The error states that the ...

angularangular-routingwebpack-module-federationangular-guards

Can you include both a routerLink and a click event on the same anchor tag?

I am facing an issue with my li elements. When a user clicks on them, it should open a more detailed view in another component. However, I noticed that it takes TWO clicks to show the data I want to display. The first click opens the component with an em ...

javascriptangulareventsangular-ui-router

Can diff coverage be implemented for Angular 9 projects?

Currently, I am working on utilizing Angular 9 for my front end and .Net CORE for the backend. Successfully implementing differential coverage for the backend project involved the following steps: Within my azure-pipeline.yml: - task: DotNetCoreCLI@2 ...

c#angularjestjsazure-pipelinestest-coverage

Looking for giphy link within a v-for loop (Vue.js)

I am fetching a list of movie characters from my backend using axios and rendering them in Bootstrap cards. My objective is to search for the character's name on Giphy and use the obtained URL as the image source for each card. However, when I attemp ...

javascripttypescriptvue.jsvuejs2async-await

Unable to locate the image file path in React.js

I'm having trouble importing images into my project. Even though I have saved them locally, they cannot be found when I try to import them. import {portfolio} from './portfolio.png' This leads to the error message: "Cannot find module &apos ...

javascriptreactjstypescriptimage

How to make sure that an element overflowing its container always starts from the top

My website has a section called <mat-drawer-container>, which contains a list of items called <mat-selection-list>. However, when the number of elements in the list exceeds the display height and scrolling is necessary, the scroll position star ...

htmlangularangular-material

Dealing with a 404 Error in Instagram API Using RXJS

Utilizing the Instagram API without OAuth involves using this URL: https://www.instagram.com/explore/tags/{tag}?__a=1 Everything works smoothly, I successfully obtain and manipulate the JSON data. However, when a non-existing tag is used, I encounter a 40 ...

angularrestinstagram-api

Retrieve the response status using a promise

There is a promise in my code that sometimes results in an error response (either 400 or 403, depending on the user). I am trying to handle this situation by catching the response and implementing a conditional logic to execute different functions based on ...

javascriptreactjstypescriptsharepoint

What is the best approach for handling server-side validation errors in Angular when making an HTTP call?

After following different tutorials, I have created a service that can transmit login details to the backend for validation and processing. Although I am able to generate appropriate error codes based on user input, I find myself wondering what to do next. ...

angulartypescriptvalidation