title: Angular 2 - Styling Component's selector border css property
body: <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>