I have the following html structure

https://stackblitz.com/edit/angular-bootstrap-4-starter-31tboc?file=src/app/testing-one/testing-one.component.html

As you can see, here i have component called app-testing-one where i am rendering some data.

If i put my component inside col-7 column width then it will get that width, if i put inside col-3 then it will be smaller.

But in my case where it is col-3` i need to render my component to have full width of the root parent.

So below i want this below to be fuyll width i need to render my component with 100% width.

But i nneed to do this automatically without adding it in col-12.

CodePudding user response：

Make the child component's display: block then set the width: 100%

eg:

:host {
  display: block;
  width: 100%;
}