I have a custom component defined:
@Component({
selector: 'preload-image',
template: `<img [src]="imgSrc">`,
styleUrls: []
})
export class ImageWithPreloadComponent implements OnInit {
@Input() src: string;
@Input() srcPreload: string;
...
// codigo omitido para que no sea tan largo
}
which I use inside another component.
<preload-image class="small-image"
[src]="'https://wsurveyw.blob.core.windows.net/multimedia/profile/ef6c883c-8cd6-48d6-84f4-b4f38b8d9a76.jpg'"
[srcPreload]="'/assets/preload-image/progress.gif'"
[srcError]="'https://cdn.browshot.com/static/images/not-found.png'"></preload-image>
The problem is that I define a css class .small-image
in the parent component, but it is not being applied to the child component. My question is if there is any way to apply styles to a child component from the parent, in many third party components it works without problem doing things like:
[style.width]="'100px'"
class="mi-clase-css"
style="width: 100px"
I don't understand why it doesn't take it in my custom component.
This behavior basically has to do with the encapsulation model you're using in your child component, and it's a property you set in the decorator called
encapsulation
. There are currently 3 types of encapsulation,Emulated
,Native
andNone
, the first being the one providedAngular
by default.As I said, the default encapsulation of angular is ( you import
ViewEncapsulation.Emulated
the Object from ) and it simulates the operation of adding random attributes to each component and then specifying the css rules that you have defined within your component with the corresponding attribute, therefore, the css rules that you define in your component are valid only for that component.ViewEncapsulation
@angular/core
ShadowDOM
If you inspect you
HTML
can see that angular adds classes and attributes to components and their children and they look something like this:That implies that the rule
CSS
that Angular will generate for thath1
with the class.title
is something like this:Now, if you have another component inside
custom-component
, this one will generate its own custom attribute, let's say,_nghost-c10
and its children will have the attribute_ngcontent-c10
instead of_ngcontent-c9
, so if you use the class.title
, the selector of that HTML element will be.title[_ngcontent-c10]
y consequently the style you defined earlier will not work. HeHTML
would look something like this:There are 3 alternatives to solve this:
styles.css
the foldersrc
. The rules that you define there are not associated with any component, therefore the attribute is not added to them and they affect the entire application.:host /deep/
in your parent component's style sheet to determine that you want to use its attribute to declare that css. The syntax would be like this:host /deep/ .title { ... }
and the output would be[_nghost-c9] .title { ... }
.ViewEncapsulation.None
, so that whatever style is defined in the component's chain of ancestors affects the nodes of the child element (this is the least recommended). More information on encapsulation strategies hereTo assign styles to a child component in angular, you can do it like this:
All this thanks to css3, I recommend you look for more information about css3 styles, it helps you a lot in the design part of your app.