How can I apply styles dynamically with ngStyle?

Question

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

score 4 · Answer 1 · answered Oct 09 '19 at 19:15

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.

score 2 · Accepted Answer · edited Oct 09 '19 at 20:00

2

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;
  }
}

edited Oct 09 '19 at 20:00

dota2pro

7,220
7
44
79

answered Oct 09 '19 at 19:09

Dhananjai Pai

5,914
1
10
25

i didn't understand how this would work created a stackblitz of your answer https://stackblitz.com/edit/angular-k63eb8?file=src/app/hello.component.ts – dota2pro Oct 09 '19 at 19:52
its working fine @dota2pro just add this.applyRightBoolean = true inside the function – Dhananjai Pai Oct 09 '19 at 19:55

score 0 · Answer 3 · edited Oct 09 '19 at 20:02

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>

score 0 · Answer 4 · edited Oct 09 '19 at 20:54

0

UPDATE:

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

edited Oct 09 '19 at 20:54

Amir Christian

597
6
20

answered Oct 09 '19 at 19:15

Friv

11
2

How can I apply styles dynamically with ngStyle?

4 Answers4