Set component style from variable in Angular 2

Question

My goal is to set a style (height and width in this case) from a component variable using the "styles" attribute. I would think there is a simple data binding method but that may be wishful thinking...

For example if I were using the html mustache binding it might look like this:

@Component({
    selector: '[sidebar]',
    templateUrl: 'app/Nav/sidebar.comp.html',
    styles: [`
        .sidebar-nav {
            overflow: scroll;
            height: {{ height }};
        }
        .sidebar {
            height: {{ 0.9 * height }};
            width: {{ 0.21 * width }};
        }
    `]
})

export class SidebarComp {
    width: number;
    height: number;

    constructor() {
        this.height = window.innerHeight;
        this.width = window.innerWidth;
    }
}

Obviously this is all wrong but I've tried some more likely permutations and had no luck finding solutions on the Angular site, Stack Overflow, or Google. I may be reduced to using ngStyle inline but that's not ideal in this case.

You don't show what you want to style. Is .sidebar the SidebarComp itself or something inside sidebar.comp.html? — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 30, 2016 at 18:37

Günter Zöchbauer · Accepted Answer · 2016-06-30 18:40:30Z

27

You can style the host element like

@Component({
  selector: '[sidebar]',
  templateUrl: 'app/Nav/sidebar.comp.html',
  host: {
    '[style.height.px]':'0.9 * height',
    '[style.width.px]':'0.21 * width'
  }

})

export class SidebarComp {
    width: number;
    height: number;

    constructor() {
        this.height = window.innerHeight;
        this.width = window.innerWidth;
    }
}

and the content (app/Nav/sidebar.comp.html) like

<div class="sidebar-nav" [style.overflow]="'scroll'" [style.height.px]="height">

or

<div class="sidebar-nav" [ngStyle]="{overflow: 'scroll', height: height + 'px'}">

answered Jun 30, 2016 at 18:40

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jamlfy Over a year ago

And in PsudoClass?

Günter Zöchbauer Over a year ago

@AlejoNext sorry, no idea what you mean

Jamlfy Over a year ago

::before how edit the style? in typescript or javascript

Günter Zöchbauer Over a year ago

I'm pretty sure that's not supported

NinjaOnSafari Over a year ago

@GünterZöchbauer where did you find the documention for this?

|

MedElmaachi · Accepted Answer · 2019-05-13 10:18:40Z

4

If you are using percent (%) try this :

<div class="sidebar-nav"   [style.height.%]="height">

answered May 13, 2019 at 10:18

MedElmaachi

9107 silver badges7 bronze badges

Comments

Hien Nguyen · Accepted Answer · 2020-06-23 04:31:50Z

1

In my case, I need change image style dynamic switch between px and % unit.

So I use [ngStyle] instead of [style.height.px]

I share for whom concern.

HTML

<img [src]="imageUrl | safe: 'url'" [ngStyle]="{width: imagewidth, height: imageheight}">

TS

    if (this.properties.imageStyle == 'Stretch') {
      this.imagewidth = this.cols * this.unitWidth + 'px';
      this.imageheight = this.rows * this.unitHeight + 'px';
    }

    if (this.properties.imageStyle == 'Clip') {
      this.imagewidth = 100 + '%';
      this.imageheight = 100 + '%';
    }

https://stackblitz.com/edit/angular-image-clip-stretch

edited Jun 23, 2020 at 4:31

answered Jun 23, 2020 at 4:15

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Collectives™ on Stack Overflow

Set component style from variable in Angular 2

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related