How can i build a custom angular component with the width settable in CSS?

Question

This site states, that I can change the width of the side-nav with CSS like this:

md-sidenav {
   width: 200px;
}

This arouses the following question for me: Can I apply the standard CSS properties like width, position, etc... to custom components without to define them in my component?

Example:

my-component {
    width: 500px;
}

I tried it out and it does not work. So I think, that the answer is no, am I right?

To find out how they set width with CSS I have read through the sources on github. But I can't figure out how they did that. The component has no width property. So, how did they make width accessible with CSS?

---

EDIT:

To clarify the question I will give you the following example:

I have programmed the following component:

test.component.html:

<p>test works!</p>

test.component.css:

p {
   border: 2px solid red;
}

test.component.ts:

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() { }

}

This is my app root, that gets bootstrapped by angular:

app.component.html:

<app-test>

</app-test>

app.component.css

app-test {
  height: 100px;
  width: 200px;
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Test App';
  constructor() { }

}

The _app.component.css_ shows what I want to do. I want to set the size of the _app-test_ component with CSS. I saw this working with the _side-nav_ component of the angular material and I want to understand how they have enabled the _side-nav_ to get its width from the parent components CSS file.

Answer 1

UPDATE After OP's edit:

Change your app.component.css to this:

:host {
  display:block; 
  height: 100px;
  width: 200px;
}

This will apply the styles on the <app-test> selector. Here is the plunker demo.

---

ORIGINAL Answer:

You can override the default styles of Material 2 components by setting encapsulation: ViewEncapsulation.None in the component.

Then you'll have to define the styles in your component.css file.

.mat-sidenav {
    width: 250px;
}

See this plunker demo with user defined width.

---

Update after OP's comments:

Suppose you have a component file, my.component.ts and it has styles in my.component.css, you can define the styles of the component in the css file and apply then on the component selector using :host.

my.component.ts :

@Component({
    selector: 'my-comp', 
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent{
}

my.component.css :

:host {
    width: 500px;
    background-color: red;
}

my.component.html:

<h2>Some Heading in the Template </h2>

Answer 2

My Question was answered with the comment of Will howel beneath my question. This post should recap what I have learnered through the comments of the other users, so that people with a similar question could learn from it.

The template of every component is wrapped in a host element. In the sidenav example, this element is the md-sidenav tag. The host element is a regular dom-element, wherefore you can add standard css rules to that element. That means that you can apply css rules like width to every custom angular component out of the box. But you have to take into account that you need to set the display property of the host element to block. If you don't do that, the width rule has no effect to the element. To accomplish that in case of the md-sidenav component they applied the class mat-drawer within the component-decorator to the element.

exerpt from sidenav.ts:

    host: {
    'class': 'mat-drawer mat-sidenav',
    ...
  },

Then they set the rule in the stylesheet. Exerpt of drawer.scss:

 .mat-drawer {
     @include mat-drawer-stacking-context();

     display: block;
}