Within this particular implementation, I have utilized an md-sidenav component with a local template variable #sidenavsearchArea.
<md-sidenav #sidenavSearchArea align="" mode="push" opened="false">
sidenav content here..
</md-sidenav>
My goal is to customize the section that contains the "sidenav content here.." text.
How can I target this specific section in the styles.css file?
md-sidenav #sidenavSearchArea {
/* the styling does not seem to work as expected */
}
The only solution I found involved deviating from the Don't Repeat Yourself (DRY) principle by adding a new ID ( id="sidenavSearchArea" ) to the component and applying styling like this:
<md-sidenav id="sidenavSearchArea" #sidenavSearchArea align="" mode="push" opened="false">
sidenav content here..
</md-sidenav>
In the style.css file:
#sidenavSearchArea {
/* This method works but violates DRY principles */
}
Is there a more efficient way to achieve the same styling without introducing an id attribute?