The instructions on this website suggest that the width of the side-nav can be changed using CSS like so:
md-sidenav {
width: 200px;
}
This leads me to wonder, can I apply standard CSS properties such as width, position, etc... to custom components without defining them in my component?
For example:
my-component {
width: 500px;
}
I experimented with it and found that it doesn't work. Therefore, I assume the answer is no, am I correct?
To investigate how they set the width with CSS, I looked through the source code on github. However, I couldn't determine how they achieved it since the component does not have a width property. So, how did they make width accessible with CSS?
EDIT:
To further clarify the question, here's an example:
I've created 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 Angular bootstraps:
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_ demonstrates what I intended to achieve. I aim to set the size of the _app-test_ component using CSS. I observed this working with the _side-nav_ component in Angular Material and I want to understand how they enabled the _side-nav_ to inherit its width from the parent component's CSS file.