Bind to host's css property (and not class)

Question

How do I get a css property and not a class in Angular2?

I have the following code:

app.component.ts:

import { Component, HostBinding } from '@angular/core';

@Component({
    selector: 'body',
    templateUrl: 'views/masterpage.html'
})
export class AppComponent {
    @HostBinding('attr.class') hostClass = "sticky-header sidebar-open"; // Works, but not what i want
    @HostBinding('style.position') hostPosition:string; // Does not work

    sidebarToggle() {
        this.sidebarCollapsed = !this.sidebarCollapsed;
        this.hostClass = (this.sidebarCollapsed ? "sidebar-collapsed" : "sticky-header sidebar-open");

        // Here I wanna check what is the 'position' property of my host (body). 
        // See "style-responsive.css"
    }
}

style-responsive.css:

@media screen and (max-width: 1024px) {
    body {
        position: relative;
    }
}

So, as you can see, the page will add the position relative to the body whenever the user shrinks the window.

I just wanna get this information in my Angular component. hostPosition should be undefined if window is larger than 1024px and 'relative' if smaller than that.

How to achieve that?

Günter Zöchbauer · Accepted Answer · 2016-12-07 12:48:40Z

2

@HostBinding() is not for reading, only for writing.

You can use

@HostBinding('style.position') hostPosition:string;

to get the value of hostPosition assigned to the elements style.position, but not to read the current style.posotion.

constructor(private elRef:ElementRef) {
  console.log(elRef.nativeElement.offsetLeft);
  console.log(elRef.nativeElement.offsetTop);
}

answered Dec 7, 2016 at 12:48

Günter Zöchbauer

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

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

4 Comments

user3483282 Over a year ago

Well, that doesn't quite answer my question. So you mean it's not possible to achieve what I want?

Günter Zöchbauer Over a year ago

What do you want? You can of course read nativeElement.style.position instead of nativeElement.offsetLeft.

user3483282 Over a year ago

The problem is that I don't want to get the style of the element. this.elRef.nativeElement.style.position is always empty (""), because that seems to get what is in the style property and not in some class that's affecting the element. I have tried also to check document.body.style.position, but it's the same thing, what I need is something like the jQuery function $("body").css("position")

user3483282 Over a year ago

Just found the solution using window.getComputedStyle. I edited the post adding that and marked as answer. Thank you

kimy82 · Accepted Answer · 2016-12-07 12:31:22Z

0

Not sure if that will work, however is worth to try:

@HostListener('window:resize', ['$event'])
      handleClick(event: Event) {
       //Do something when resize window
      }

That should be notified when your window is resized and get current info your body position

answered Dec 7, 2016 at 12:31

kimy82

4,5343 gold badges25 silver badges25 bronze badges

Collectives™ on Stack Overflow

Bind to host's css property (and not class)

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related