angular2: ElementRef get CSS padding attribute
<p>I am exploring the <code>ElementRef</code> object in Angular2 (Ionic2), and I cannot get a hold on the <code>padding</code> CSS attribute of an <code>ElementRef</code>. </p>

<p>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. </p>

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

<pre><code>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);

    }
}
</code></pre>

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

<pre><code>&lt;ion-header&gt;
...
&lt;/ion-header&gt;
&lt;ion-content &gt;
  &lt;ion-card #ionCard&gt;
    &lt;ion-card-content #ionCardContent&gt;
    &lt;/ion-card-content &gt;
  &lt;/ion-card&gt;
&lt;/ion-content&gt;
</code></pre>

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

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

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

<p><strong>Anyone knows how to reach the padding attribute of a ElementRef.nativeElement in Angular2?</strong></p>