title: How can i build a custom angular component with the width settable in CSS?
body: <p>This <a href="https://material.angular.io/components/sidenav/overviewhttp://" rel="nofollow noreferrer">site</a> states, that I can change the width of the side-nav with CSS like this:</p>
  
  <pre><code>md-sidenav {
     width: 200px;
  }
  </code></pre>
  
  <p>This arouses the following question for me: Can I apply the standard CSS properties like <code>width</code>, <code>position</code>, etc... to custom components without to define them in my component? </p>
  
  <p>Example:</p>
  
  <pre><code>my-component {
      width: 500px;
  }
  </code></pre>
  
  <p>I tried it out and it does not work. So I think, that the answer is no, am I right?</p>
  
  <p>To find out how they set <code>width</code> with CSS I have read through the sources on <a href="https://github.com/angular/material2/blob/master/src/lib/sidenav/drawer.ts" rel="nofollow noreferrer">github</a>. But I can't figure out how they did that. The component has no <code>width</code> property. So, how did they make <code>width</code> accessible with CSS?</p>
  
  <hr>
  
  <p><strong>EDIT:</strong></p>
  
  <p>To clarify the question I will give you the following example:</p>
  
  <p>I have programmed the following component:</p>
  
  <p><strong>test.component.html:</strong></p>
  
  <pre><code>&lt;p&gt;test works!&lt;/p&gt;
  </code></pre>
  
  <p><strong>test.component.css:</strong></p>
  
  <pre><code>p {
     border: 2px solid red;
  }
  </code></pre>
  
  <p><strong>test.component.ts:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
  })
  export class TestComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() { }
  
  }
  </code></pre>
  
  <p>This is my app root, that gets bootstrapped by angular:</p>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>&lt;app-test&gt;
  
  &lt;/app-test&gt;
  </code></pre>
  
  <p><strong>app.component.css</strong></p>
  
  <pre><code>app-test {
    height: 100px;
    width: 200px;
  }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'Test App';
    constructor() { }
  
  }
  </code></pre>
  
  <p>The <code>_app.component.css_</code> shows what I want to do. I want to set the size of the <code>_app-test_</code> component with CSS. I saw this working with the <code>_side-nav_</code> component of the angular material and I want to understand how they have enabled the <code>_side-nav_</code> to get its width from the parent components CSS file.</p>