Thursday, September 28, 2017

How may I have a cascading CSS effect from a parent component to a child component in an Angular 4 application?

This allow for divs in a child component nested in an article tag in the parent component to be styled:

article ::ng-deep div {
   border-top: none;
   border-bottom: none;
}

 
 

The ::ng-deep combinator is new as of version 4.3.0 of @angular/core and I feared that it would only work in the styles metadata property for a component in a blob of embedded gunk inside of backticks and not in a stylesheet looped in at the stylesUrls metadata property which directly references a standalone Sass or LESS (Leaner CSS) or, I dunno, Stylus file. This would be bad because you cannot have a hodgepodge of stuff in the styles metadata property and stuff at the stylesUrls metadata property too, but as it turns out you may get away with ::ng-deep in the external files.

No comments:

Post a Comment