0
174
ViewsHow to make angular child component stretch css grid column defined in parent component
I have defined the styles of an angular parent component using css grid and want the child component to stretch across the 5 columns. Though other styles are getting applied on the the child component but the child component is not stretching from column 4 till column 99(defined in css file).
Here is the code for parent component
.parent-comp {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
::ng-deep .child-comp {
grid-column-start: 4;
grid-column-end: 9;
background: red;
}
<div class="parent-comp">
<app-child></app-child>
</div>
Child component
<p class="child-comp">
child works!
</p>
My understanding is child component should start from column 4 of parent and end at starting line of column 9. But this is not working as my understand. Please help me to understand my mistake and how can I make it work
2 answers
Answer question0
If you look at the HTML in the browser dev tools you will see that angular inserts a host element for the child component called <app-child>.
The HTML will look something like...
<div class="parent-comp">
<app-child>
<p class="child-comp">child works!</p>
</app-child>
</div>
You need to target the app-child element in your css selector in your parent component's css file...
::ng-deep app-child {
grid-column-start: 4;
grid-column-end: 9;
}
https://stackblitz.com/edit/angular-ivy-enagwe?file=src%2Fapp%2Fapp.component.css
0
And what about this?:
<app-child class="child-comp"></app-child>
It works for you?
https://stackblitz.com/edit/angular-ivy-avijo8?file=src%2Fapp%2Fapp.component.html