Latest Update:
After utilizing ::ng-deep, some progress was made.
:host {
&::ng-deep*:hover {
background: red;
}
}
This method applies the hover effect to individual items instead of the whole container. However, it also affects all children and grandchildren of the item.
I experimented with using :first-child instead of *, but it seems like ::ng-deep is required to reach this level of depth.
The goal is to create a template that styles all included children.
@Component({
selector: 'custom-template',
template: '<ng-content></ng-content>',
styles: [`
:host {
display: flex;
flex-direction: column;
}
`]
})
export class Template {
}
Currently, the template functions correctly by styling the content within it.
The issue arises when trying to style the content itself which does not reflect any changes:
style.scss:
:host {
display: flex;
flex-direction: column;
* {
&:hover {
background: red;
}
}
}
In my case, an array of items is being passed:
<custom-template>
<div *ngFor="let item of items">
</custom-template>
My objective is to add hover behavior to any child elements passed into the template.
LATEST UPDATE:
Previous attempts:
:host {
&*:hover {
background: red;
}
}