how to access the class css properties from an attribute directive associated with the same element


Tags: javascript,css,angularjs,angular2

Problem :

Here is the component template

template: `<h1 class = "dragStyle" [drag] = "true">DRAG THIS ELEMENT</h1>`,
styles : [`
    .dragStyle{
        margin : 12px;
    }`
]    

Here is the constructor of [drag] attribute directive-

constructor(
    private _el: ElementRef, 
    private _renderer : Renderer,
    @Attribute('class') type : string) {
        console.log(type);

I need to access the value of margin property associated with the dragStyle class for some computations.



Solution :

I don't know if what you are to do 'inject the css class object into the constructor' is possible. But,since you only require the computed css property, why don't you use getComputedStyle() ?

In your example,

@Directive({
  selector:'[drag]' 
})
export class DragDirective{
  @Input() drag:boolean;
  constructor(
    private _el: ElementRef, 
    private _renderer : Renderer,
    @Attribute('class') type : string) {
        console.log(type);
  }
  ngOnInit(){
    let margin = getComputedStyle(this._el.nativeElement).getPropertyValue('margin');
    console.log(margin);
  }
}

Here is a plunker


    CSS Howto..

    How do I “smarten” my HTML/CSS tables so text fits to one line (cleverly)

    How do you overlay two divs and make them the same height?

    Sencha Touch how to load custom CSS , JS if user is using PC or Tablet or SmarthPhone?

    How to fix html border corner slope with css?

    How to style HTML select option hover and selected option effects

    How to do Background Image horizontal slide

    How do I provide navigation options on the sides of a centered logo?

    Simple CSS layout - how can I achieve this layout, and make it scale easily?

    Normalized CSS, option in JSFiddle, how to add it to document

    Two navbar-inner on the same page how to change the padding of each?

    How I do edit the css for just the home page on Magento?

    How to display a division over other element

    CSS triangle how to remove white space on the right

    How to re-render a page from a Google Chrome extension?

    Auto-scaled image not shown correctly with IE 10

    How do I change gradient color of text inside the Jumbotron?

    How to vary color of table row border based on div that it's in

    Cannot get Font Awesome Images to Show

    How to make a fixed menu/sidebar while using position:relative?

    How do you set a div's location to be centered when we don't know the screen size?

    How to trigger one element inside a div on mouse hover in CSS

    CSS media query height greater than width and visa versa (or how to imitate with JavaScript)

    How do I stop this div's width from decreasing?

    How to stay on selected tab after refresh?

    How to show the text overflow after showing two lines in the div using css?

    Show a box with text when hovering an image

    How to have an image overlap the edge of a div

    How to get parent DIV width and set child DIV width

    How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?

    How to disable CSS minifier in Liferay?