angular2: ElementRef get CSS padding attribute

Question

I am exploring the ElementRef object in Angular2 (Ionic2), and I cannot get a hold on the padding CSS attribute of an ElementRef.

For the following question, I won't give details of my files: [my project]\src\app\app.component.ts and [my project]\src\app\app.module.ts. Please assume those work correctly.

I have this code in a Component under [my project]\src\pages\my-component\my-component.ts:

import { Component,  ContentChild, ViewChild, ElementRef } from '@angular/core';
import { NavController, Card, CardContent } from 'ionic-angular';

@Component({
    selector:'my-component',
    templateUrl: 'my-component.html'
})
export class MyComponentPage {
    // @ContentChild("ionCard") ionCard:Card;
    // @ContentChild("ionCardContent") ionCardContent:CardContent;
    @ViewChild("ionCard") ionCard:ElementRef;
    @ViewChild("ionCardContent") ionCardContent:ElementRef;
    constructor(public navCtrl:NavController){

    }
    ionViewWillEnter(){
        console.log("ionCard: ", ionCard);
        console.log("ionCardContent: ", ionCardContent);

    }
}

Then this html template in [my project]\src\pages\my-component\my-component.html, I have:

<ion-header>
...
</ion-header>
<ion-content >
  <ion-card #ionCard>
    <ion-card-content #ionCardContent>
    </ion-card-content >
  </ion-card>
</ion-content>

When I look at the log (given by the console.log in the ionWillEnter()) for #ionCard and #ionCardContent: Both of them happen to have for ElementRef.nativeElement.clientWidth the same value. And that is probably good, but I can see in my Chrome inspect console (thru the Styles tab) that the #IonCardContent has a padding. And the real usable space width in <ion-card-content> is: (ElementRef.nativeElement.clientWidth - padding). And I cannot find where this padding is in ElementRef.nativeElement attributes.

When I look at ElementRef.nativeElement.style, all attributes have an empty string value (among them paddingLeft).

I have also tried with ContentChild (as you can see those lines are commented in my code, and corresponding import are on top of the file). Since <ion-card> and <ion-card-content> are not standard DOM syntax, I suppose it was worth a try. But in that case, I get an undefined in the log.

Anyone knows how to reach the padding attribute of a ElementRef.nativeElement in Angular2?

@Günter Zöchbauer Ok you lead me to a solution: [window object].getComputedStyle(ionCardContent.nativeElement,null).paddingLeft); gives me the padding left (with px suffix). Do you want to write it as an answer? — nyluje
– nyluje, Commented Dec 9, 2016 at 13:20

Community · Accepted Answer · 2017-05-23 10:31:25Z

8

(Thanks to Günter Zöchbauer for this one).

The solution is: [window object].getComputedStyle(ionCardContent.nativeElement,null).‌paddingLeft;

It gives the padding left with px suffix.

More input about the getComputedStyle() function in this thread.

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Dec 10, 2016 at 10:17

nyluje

3,8037 gold badges41 silver badges71 bronze badges

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

Collectives™ on Stack Overflow

angular2: ElementRef get CSS padding attribute

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related