Angular 2, use variable in @Component styles

Question

I have a plunker here - https://plnkr.co/edit/fzNJ7FLYxWbLPoxtYpEw?p=preview

Its a simple angular app.

I'm capturing the height of a div using @ViewChild and nativeElement.offsetHeight

Is it possible to uss this number in the styles block of the component.

In my example I have attempted it but commmented it out.

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html',
  styles: [`
    .blockTwo {
      background: yellow;
      //height: this.contentHeight+px;
      height: 200px;
    }
  `]
})

=

import {Component, ElementRef, ViewChild, AfterViewInit} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html',
  styles: [`
    .blockTwo {
      background: yellow;
      //height: this.contentHeight+px;
      height: 200px;
    }
  `]
})

export class AppComponent implements AfterViewInit{

  @ViewChild('content') 
  elementView: ElementRef;

  contentHeight: number;

  constructor() {

  }

  ngAfterViewInit() {
      this.contentHeight = this.elementView.nativeElement.offsetHeight;
  }

}

You can use this style binding syntax: [style.height.px]="contentHeight". — Martin Parenteau
– Martin Parenteau, Commented Apr 24, 2018 at 13:57

Sayegh · Accepted Answer · 2018-04-24 13:46:06Z

2

This is doable using ngStyle

In your app.html change the yellow div to this:

<div class="blockTwo" [ngStyle]="style">
</div>

and in your app.ts

style: any;
ngAfterViewInit() {
  this.contentHeight = this.elementView.nativeElement.offsetHeight;
  this.style = {"height": this.contentHeight+"px"}
}

answered Apr 24, 2018 at 13:46

Sayegh

1,48111 silver badges18 bronze badges

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

Comments

ranjeet8082 · Accepted Answer · 2018-04-24 13:40:17Z

1

User [ngStyle] Directive.

<div class="content" #content [ngStyle]="{'height':'contentHeight'}">

</div>

<div>
  <h2>{{contentHeight}}</h2>

  <div class="blockTwo">

  </div>
</div>

answered Apr 24, 2018 at 13:40

ranjeet8082

2,3891 gold badge21 silver badges26 bronze badges

2 Comments

ttmt Over a year ago

This doesn't seem to work for me - I need the '.blockTwo' to use the height - plnkr.co/edit/fzNJ7FLYxWbLPoxtYpEw?p=preview

ranjeet8082 Over a year ago

In your plnkr style is not defined. Use this code below elementView to define. elementView: ElementRef; style:{"height": string};

Pranay Rana · Accepted Answer · 2018-04-24 13:47:23Z

1

you can just do like this

//this line is exaple , but point is make use of ngStyle
<some-element [ngStyle]="{'max-height.px': height}">...</some-element>

and define and initialize height in your ts file , that will do work for you

or kind of this help

<div #parentdiv style="background-color:blue;height:1000px">
  <div [ngStyle]="{'max-height.px': parentdiv.offsetHeight}">
    hallo
  </div>
</div>

edited Apr 24, 2018 at 13:47

answered Apr 24, 2018 at 13:39

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

Collectives™ on Stack Overflow

Angular 2, use variable in @Component styles

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related