What is the syntax for adjusting background-position with ngStyle in Angular 4?

It's finally Friday!

I'm a bit confused about how to properly set the background-position-x property in an [ngStyle] directive in Angular 4 with Ionic 3. Can someone guide me on the correct way to implement background-position-x? I expect the output to be:

background-position-x:5% !important

Below are my current codes:

In the controller:

    this.currentIndex = this.slides.getActiveIndex();
    this.background_position_x = (this.currentIndex+1)*5+"% !important";
    console.log("background position -x:"+this.background_position_x);

The console log displays:

https://i.stack.imgur.com/iAPPQ.png

In the HTML view:

<div class="container" 
    [ngStyle]="{
        'background':'url('+lesson_details.background_picture+'),linear-gradient(to top, rgb(160, 160, 160) -20%, rgb(1, 1, 1) 149%)',
        'background-position-x': background_position_x}">
angulartypescriptionic3

Answer №1

Here's a suggestion:

<div class="wrapper" 
    [ngStyle]="{
         'background':'url({{lesson_details.background_image}}),linear-gradient(to top, rgb(160, 160, 160) -20%, rgb(1, 1, 1) 149%)',
         'background-position-x': '{{pos_x_change}}"></div>

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

The retrieval of cookies from the Response object is not possible with Typescript

While working on my google chrome extension, I implemented a post call that looks like this: public someapiCall(username: string, password: string) { var url = 'http://test.someTestServer.com/api/user/someApiCall'; let headers = new Hea ...

angulartypescriptcookiesgoogle-chrome-extension

While attempting to set up a fresh 'TypeScript Angular Project' in Visual Studio 2022, I encountered an Error Message stating "Visual Studio Code: Illegal characters found in the path"

Encountering an issue when attempting to create a new 'Standalone TypeScript Angular Project' called HealthCheck in VS 2022. Upon clicking the create button, I receive an Error Message stating "Visual Studio Code: Illegal characters in path" for ...

angularvisual-studio

Generate multiple instances of an HTML element by using ngFor and referencing an object property

In my Angular project, I am generating a unique object called starStructure based on the vote_average of each item. Here is an example of what my object array looks like: [ {"title":"Solo: A Star Wars Story", "vote_average":7.1, "starStructure":{" ...

angular

Create a custom button in Material-UI using Styled-components, and integrate it with React

I'm currently working on a project using React, TypeScript, and styled components along with the material-ui library. I have created styled material-ui buttons as shown below: import React from 'react' import styled from 'styled-compone ...

reactjstypescriptreact-routermaterial-uistyled-components

Leveraging the find method to sort through an array with dual parameters

I'm facing an issue while trying to filter my array of objects using two parameters. Despite having an object in the array with the same values as the parameters, the result is empty. const item = this.lista.find(i => i.number === rule.number && ...

arraystypescriptfilterangular6

I am encountering unexpected behavior with NextJS's getInitialProps function, as it is giving me a compiler error stating "varName not found on type {}"

I seem to be stuck on a simple syntax issue while working with NextJs. I am attempting to perform dynamic server-side fetches using the getInitialProps pattern. However, the compiler is unable to recognize the return of getInitialProps in the regular func ...

reactjstypescriptnext.js

Prevent assigning values to rxjs observables recursively

I am seeking suggestions on how to enhance the code provided below. I will outline the issue and present my current solution, which I aim to refine. The code is written in Angular 4 (TS). herelistOfItems$: Observable<Array<Item>>; // Fetchin ...

angulartypescriptrxjsobservablengrx

Guidelines for creating a binary release of Node.js with native modules

Currently, I am in the midst of exploring the world of Node.js projects, delving into different bundlers and various other components. One interesting concept that came to mind is the idea of bundling Node.js into a single binary for Linux, macOS, or Windo ...

node.jstypescriptelectronrealmbcrypt

Is it possible to incorporate regular React JSX with Material UI, or is it necessary to utilize TypeScript in this scenario?

I'm curious, does Material UI specifically require TypeScript or can we use React JSX code instead? I've been searching for an answer to this question without any luck, so I figured I'd ask here. ...

reactjstypescriptmaterial-uijsx

utilize makeStyles to modify button text color

Initially, my button was styled like this: style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 30px', }}> It worke ...

javascriptcssreactjstypescriptmaterial-ui

Angular2 fills up the table with data for a particular row

I have a specific requirement where I need to display only some columns of a table within a div. When I click on 'See' for a particular row, I want to reveal the remaining columns of that table (currently it reveals all rows by default). https:/ ...

angular

Incorporating a CSS Module into a conditional statement

Consider the following HTML structure <div className={ `${style.cell} ${cell === Player.Black ? "black" : cell === Player.White ? "white" : ""}`} key={colIndex}/> Along with the associated CSS styles .cell { ...

cssreactjstypescript

What can cause a problem with the reduce function that populates an empty object with keys in TypeScript?

I've encountered an issue with a function that is meant to reduce an object. The problem lies in using the reduce method to assign the values of acc[key] as object[key], which is resulting in errors in the code. I am trying to avoid using any specific ...

typescript

When converting a PDF to a PNG, the precious data often disappears in the process

I am currently facing a problem with the conversion of PDF to PNG images for my application. I am utilizing the pdfjs-dist library and NodeCanvasFactory functionality, but encountering data loss post-conversion. class NodeCanvasFactory { create(w, h) { ...

node.jstypescript

What is the best way to implement a timer using hooks in React?

Just getting started with React! I began my journey last week ;) My first task is to build a timer that includes a reset feature and can count seconds. While the reset function is functioning properly, the timer isn't. Can anyone suggest the best ap ...

reactjstypescript

Updating validators on Angular reactive form controls as they change

I am working with a reactive form where I need to dynamically adjust the validators for the "password" and "confirm password" fields based on user input. I have set up a subscription to listen for changes in the password field's value, updating the va ...

angularvalidationangular-reactive-forms

Visibility of an Angular 2 directive

It's frustrating that I can't change the visibility of a reusable directive in Angular2. 1) Let's say I have a login page. I want to control the visibility of my navbar based on whether I am on the login page or logged in. It should be hid ...

typescriptangularangular2-directives

Creating a cucumber feature file from an Excel sheet or any other type of file: A step-by

I currently have an excel sheet containing various scenarios that I need to convert into a feature file. Can you assist me in accomplishing this task? Do you know of any plugins that can help streamline this process? Any guidance would be greatly apprecia ...

exceltypescriptprotractorcucumber

Converting <reference path/> directive to ESM import: A step-by-step guide

As I embark on developing a TypeScript application, I've reached the realization that I am not a fan of using the <reference path /> triple-slash directive. Instead, I prefer utilizing import 'something'. However, every time I attempt ...

typescriptimportes6-modules

What is the best way to include a select HTML element as an argument in an onSubmit form function call?

I am currently facing an issue where I am attempting to pass HTML elements of a form through the submit function as parameters. I have been able to successfully retrieve the nameInput element using #nameInput, but when trying to access the select element ( ...

htmlangulartypescriptformsangular-reactive-forms