How can I apply styles dynamically with ngStyle?

ngstyle multiple styles
angular set height of element dynamically
ngstyle conditional
angular dynamic style
ng-reflect-ng-style="[object object]"
ngstyle=('background-color)
angular dynamic css
ngstyle important

How can i switch left px value with right based on a boolean ?

I want to switch [ngStyle]="{ 'left.px': offSetX } with [ngStyle]="{ 'right.px': offSetX } based on a condition

    import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <div class="myDiv" [ngStyle]="{ 'left.px': offSetX }"></div>

    <button (click)="applyRightStyle()">Apply Right Style</button>
  `,
  styles: [
    `
      .myDiv {
        border: 1px solid black;
        height: 200px;
        width: 200px;
        position: absolute;
        top: 100px;
        margin-left: 50px;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;

  offSetX = 100;
  applyRightBoolean = false;

  applyRightStyle() {}
}

Stackblitz Demo

Edit: I want to replace the style as in Remove the left if I apply right, and Remove Right when left is applied because left: 0px, right: 10px is not equal to right: 10px.

Solution: The correct way to reset left or right is to use initial instead of 0px

Why not keep them both and reset based on a condition ?

Stackblitz

import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <div class="myDiv" [ngStyle]="{ 'left.px': !applyRightBoolean ? offSetX : 0, 'right.px': applyRightBoolean ? offSetX : 0 }"></div>

    <button (click)="applyRightStyle()">Apply Right Style</button>
  `,
  styles: [
    `
      .myDiv {
        border: 1px solid black;
        height: 200px;
        width: 200px;
        position: absolute;
        top: 100px;
        margin-left: 50px;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;

  offSetX = 100;
  applyRightBoolean = false;

  applyRightStyle() {
    this.applyRightBoolean = true;
  }
}

Angular6 ngStyle to apply style dynamically, We will take a look at different methods to dynamically assign a CSS styles on or off, depending on the state of the application with ngStyle  Use property binding to style one CSS property of an element and use the ngStyle directive to set multiple CSS properties. Both tools make it super easy to dynamically style elements. To learn more techniques, best practices and real-world expert knowledge I’d highly recommend checking out my Angular courses - they will guide you through your journey to mastering Angular to the fullest!

I think we will have to manage both styles. It would work with ngStyle as well but I like the [style.xxx] syntax:

@Component({
  selector: "hello",
  template: `
    <div class="myDiv" [style.left.px]="offSetLeft" [style.right.px]="offSetRight"></div>

    <button (click)="applyRightStyle()">Apply Right Style</button>
    <button (click)="applyLeftStyle()">Apply Left Style</button>

  `
})
export class HelloComponent {
  @Input() name: string;

  offSetLeft = 100;
  offSetRight = 0;
  applyRightBoolean = false;

  applyRightStyle() {
    this.offSetLeft = 0;
    this.offSetRight = 50;
  }

  applyLeftStyle() {
    this.offSetLeft = 100;
    this.offSetRight = 0;
  }
}

Forked your stackblitz.

NgStyle: How to assign CSS styles in Angular, If you want to set style dynamically in Angular.js then this tutorial will help you to apply style dynamically in Angular component using ngStyle. I will give three  NgStyle directive is used to set many inline styles dynamically. Setting styles using NgStyle works as key:value pair. key is the style property name and value is the style value. Find the code snippet.

public bgcolor = "red";

 [style.backgroundColor]="bgcolor"
second way used like that for multiple

public bgcolor = {
    backgroundColor:"orange"
};

[ngStyle]="bgcolor"

for your style used like that

[ngStyle]="{ backgroundColor:'#' + element.color }"

<ng-container matColumnDef="color">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> color </th>
  <td mat-cell *matCellDef="let element" [ngStyle]="{ backgroundColor:'#' + element.color }" > #{{element.color}} </td>
</ng-container>

NgStyle & NgClass • Angular, NgStyle directive is used to set many inline styles dynamically. Setting styles using NgStyle works as key:value pair. key is the style property  How to dynamically add and remove inline styles in angular? We need to use [ngStyle] directive instead of the normal html style attribute and we need to pass styles as an object. export class AppComponent {

UPDATE:

[ngStyle]="{ condition ? '\'left.px\': offSetX' : '\'right.px\': offSetX'}

How to use ngStyle in Angular for Set Style Dynamically?, Angular NgStyle directive lets you set a given DOM element's style at how we can dynamically assign CSS styles to elements using angular. Both the NgStyle and NgClass directives can be used to conditionally set the look and feel of your application. NgStyle gives you fine grained control on individual properties. But if you want to make changes to multiple properties at once, creating a class which bundles those properties and adding…

Angular NgStyle and Style Binding Example, When you need to apply dynamic styles to a HTML element using Angular, there are different options to consider. The first and most obvious  NgStyle: How to assign CSS styles in Angular. In this tutorial, we are going to take a look at how we can dynamically assign CSS styles to elements using angular. We will take a look at different methods to dynamically assign a CSS style to an element using the style property.

Angular NgStyle Example, Learn how to dynamically control CSS and CSS classes and in Out of the box with the new syntax we don't need special ng-class or ng-style directives like in Angular 1. Sign up to get the latest dev posts and content! Now you can express as many different styles as needed. ngStyle is an Angular directive that gives you the flexibility to do this, where as style is a regular HTML property to which you can only bind values one by one. That’s the difference between the two of them.

What's the difference between [style] and [ngStyle] in Angular?, Styling HTML with ngClass and ngStyle Angular has two excellent directives that allow us to dynamically set styles on any element and toggle CSS classes. Angular has a couple of inbuilt attribute directives ngStyle and ngClass which makes easy to apply styles dynamically on a component or an element. Sample use case/requirement.

Comments