I aim to dynamically change the value of the style tag in order to override the css class property

Within the code snippet below, the "simple-point-box" CSS class creates a basic box with drag and drop functionality. Multiple simple boxes are stored in the items array. I am currently looping through each item, which consists of a button and right value. My goal is to position each item based on its specific values. I plan to achieve this by using the style tag and assigning bottom and right values from each item. Any assistance would be greatly appreciated as I have hit a roadblock.

<div id="widgetspace"
        class="simple-point-box"
        *ngFor="let item of items"
        ngDraggable ngResizable (started)="onStart($event)" (stopped)="onStop($event)" (movingOffset)="onMoving($event)"
        [preventDefaultEvent]="true" (endOffset)="onMoveEnd($event,item,'widgetspace')" ##style="bottom: 200px; right: 300px"##>
  <br>
  bottom={{item.bottom}}
  left={{item.right}}
</div>

I simply need to adjust the style tag values based on each item's content so that each item is positioned according to its saved position.

Answer №1

To achieve a simple style, there is no need to include ##.

<div id="widgetspace"
        class="simple-point-box"
        *ngFor="let item of items"
        ngDraggable ngResizable (started)="onStart($event)" (stopped)="onStop($event)" (movingOffset)="onMoving($event)"
        [preventDefaultEvent]="true" (endOffset)="onMoveEnd($event,item,'widgetspace')" style="bottom: 200px; right: 300px">

If you prefer a dynamic style, utilize ngStyle for that specific purpose:

<div id="widgetspace"
        class="simple-point-box"
        *ngFor="let item of items"
        ngDraggable ngResizable (started)="onStart($event)" (stopped)="onStop($event)" (movingOffset)="onMoving($event)"
        [preventDefaultEvent]="true" (endOffset)="onMoveEnd($event,item,'widgetspace')"  [ngStyle]="{'bottom': yourBottomProperty,'right': yourRightProperty}">

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

Is there a way to link my mapDispatchToProps with an onClick property in React?

I'm currently facing some challenges while trying to integrate redux into a basic react project I'm working on. It's actually a react 360 webvr project but I've noticed similarities with react native that make me believe it should work. ...

What's the best way to avoid global application of stylesheets imported for svelte carbon components?

My dilemma lies in wanting to utilize the DatePicker feature from carbon-components-svelte. Unfortunately, when I do so, the global application of styles from carbon-components ends up causing some conflicts with my own custom styles. As per the documenta ...

Angularfire2 throws an error with the message, "app/bad-app-name," when using Firebase

Encountering an error in my Angular app where Firebase is returning a code bad-app-name. The app utilizes angularfire2 within the Angular framework. After verifying the Firebase configuration and confirming it is correct, how can this error be resolved? ...

Development of client and server using socket.io in node.js

I am trying to set up a basic demo using socket.io from http://socket.io The server (app.js) is functioning properly. However, I am encountering issues with the client side: <script src="/socket.io/socket.io.js"></script> <script ...

Having trouble with UI Router's $state.go not redirecting properly?

I'm encountering a common issue that I haven't been able to resolve despite trying different approaches. My goal is to implement dynamic animations in my application states, where the login process involves some animations before transitioning in ...

Combining edit and view functionalities in jqGrid form

I've been exploring the jqGrid wiki but I'm having trouble finding answers to a couple of things. It seems like it might be too customized. 1) Can jqGrid be configured to display all fields of a row when editing via form edit, but only make a fe ...

Moving from the center to the bottom-right with a CSS transition

I have a specific requirement where I need the container to cover the entire page and shrink when clicked, with an animation. Currently, I am using CSS transition to animate the container shrinking towards the top: The container shrinks slowly to the sp ...

Troubleshooting Vue and TypeScript issue while filtering and mapping a collection

I am puzzled about how to eliminate the following error that keeps popping up in my code: Here are the interfaces I have defined: export interface ClassifierTO { id?: number; classifierName?: string; userId?: number; intents?: Array<Inten ...

Centered text in <td> with CSS aligned to the right

https://i.sstatic.net/UrB5f.jpg Is there a way to align the 3 input fields so that their right edges are all vertical? I still want the text+Input to be centered within the column but aligned vertically... Using Bootstrap 3.3.7 HTML: <link href="h ...

Using Angular 2 - sass library to customize component css without turning off encapsulation

While working with ngx-tabset, I was able to successfully override the CSS by manually adding the class suffix [_ngcontent-..] for it to function properly. However, I encountered an issue when trying to create a Sass library that could be used universally ...

Can the loading gif be displayed when a website is loading or when content is being posted

I've implemented two functions in my site master to display and hide a loading GIF. However, I don't want to call it for every AJAX call or before every post method. Is there a way without using jQuery for me to check if the site is loading and ...

Having issues with Firebase Stripe extension and SDK version 9

I am currently facing a challenge in upgrading the firebase stripe extension SDK from version 8 to version 9. Despite successfully upgrading the one-time purchase and subscription purchase functionalities, I am struggling with upgrading the redirection to ...

Retrieve the value of an object without relying on hardcoded index values in TypeScript

I am working with an object structure retrieved from an API response. I need to extract various attributes from the data, which is nested within another object. Can someone assist me in achieving this in a cleaner way without relying on hardcoded indices? ...

Issues with recursive functions in Javascript

I'm currently facing a challenge with javascript recursion. Below is the snippet of code that I am having trouble with: _parseJson: function($obj, $json_arr) { for (i = 0; i < $json_arr.length; i++) { var $el = document_creator.create ...

Express.js experiencing issues with updating route file

Having recently started using both Node and Express, I was excited about the potential of Express.js. As a result, I set up a local deployment with a basic installation. When I visited http://localhost:3000/users, I was greeted with the message: respond ...

ng-table malfunctioning with an injection error

Encountering an error while using ng-table: angular.js:12332 Error: [$injector:unpr] Unknown provider: ngTableParamsProvider <- ngTableParams <- tableController http://errors.angularjs.org/1.4.2/$injector/unpr?p0=ngTableParamsProvider%20%3C-%20ngTa ...

Mutual TLS authentication and secure tunneling with ngrok

I am currently working on integrating a Payment Method with Shopify that requires me to validate their client requests using mTLS. Payment apps must utilize mTLS for processing all requests where they act as the server and Shopify as the client. This is ...

Uploading Files to the Server with Angular 2 and ExpressJS

In my Angular-2 project, I am currently working on uploading files to the server. The code snippet provided below showcases how the file is uploaded: My main question pertains to linking these uploaded files to specific mongodb documents. How can I achiev ...

Create a crimson triangle on the canvas

If you are interested, I have created a functional live codepen demonstration that can be accessed here. By clicking on the grid within the demo, a red square will appear. Is there any guidance available on transitioning this red square into a red triang ...

Exploring the depths of complex objects with the inclusion of optional parameters

I've been working on a custom object mapping function, but I've encountered an issue. I'm trying to preserve optional parameters as well. export declare type DeepMap<Values, T> = { [K in keyof Values]: Values[K] extends an ...