Angular 2 - Styling Component's selector border css property
<p><strong>Update:</strong> In my comment bellow you can find a zipped project on Google drive. Can anyone make a Plunker (I have never done it - what needs to be changed, any article/blog explaining this change).</p>

<p>I have a <code>SearchComponent</code> which extends <code>BaseComponent</code> and I am passing <code>ElementRef</code> down to <code>BaseComponent</code> so that <code>BaseComponent</code> can add a border style to <code>SearchComponent</code>'s selector tag: <code>auction-search</code>. </p>

<p>Basically I want to draw a border for all components (that extend <code>BaseComponent</code>) on a page, so I can easily identify them.</p>

<p>However it seems that the width of <code>auction-search</code> tag is auto (I don't know if this is 0px based on the CSS box in the picture below.</p>

<p>Using Chrome Tools inspection window when I add a div element with the same content and style below auction-search element (as shown in the picture below), I can then see a proper border and a real width is displayed.</p>

<p><strong>So the question is how to give a component's selector a proper width so it can become a normal container like a DIV? Add position: absolute??</strong></p>

<p>I played with adding ...</p>

<pre><code>style.border = '8px solid green';position:absolute
</code></pre>

<p>and I got the bounding border, however that affected the next div element which will have text overlapping the component's text.</p>

<p>I believe I cannot use host property of the base component because the decorator's properties are not inherited. Can someone confirm?</p>

<p><strong>What is the easiest way to propagate the same change in CSS e.g. throughout all components?</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>host: {
     'style': 'border: 8px solid green'
     }</code></pre>
</div>
</div>
</p>

<p>Thanks,
Rad </p>

<p><strong>Here is the code for my 2 components:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//base-component.ts
import {Component, OnInit, ElementRef} from "angular2/core";

@Component({selector: 'base-component'})
export class BaseComponent implements OnInit 
{
  constructor(private _elementRef: ElementRef){
    _elementRef.nativeElement.style.border = '4px solid green';
  }

  //auction-search.ts   
  import {Component, ElementRef} from 'angular2/core';
  import {BaseComponent} from "../base/base-component";

  @Component({
    selector: 'auction-search',
    templateUrl: 'app/components/search/search.html'
  })
  export default class SearchComponent extends BaseComponent
  {
    constructor(private _elementRef: ElementRef)
    {
      super(_elementRef);
    }
  }</code></pre>
</div>
</div>
</p>

<p>app/components/search/search.html</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
  Some text with &lt;br&gt;
  Another line
&lt;/p&gt;</code></pre>
</div>
</div>
</p>

<p>app/components/application/application.html</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-3"&gt;
  &lt;auction-search&gt;&lt;/auction-search&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

<a href="https://i.stack.imgur.com/7H1iL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7H1iL.jpg" alt="enter image description here"></a></p>