Want to change style of reusable nested componet in angular

Question

I am having one table in my component with certain width .The problem is when I am reusing that component selector in another component I am not able to override table style in angular.

I tried below CSS:

:host /deep/ component-selector {
  width:50px;
}

can please add the code that you have tried to the above question — Joel Joseph, Jun 21 '19 at 05:28
HI Welcome to StackOverflow. Please create stackblitz or postcode so that we can help you — HaSnen Tai, Jun 21 '19 at 05:29
@SonaliPawde [This](https://stackoverflow.com/questions/54328837/right-way-to-override-child-component-style-from-host-component-angular) will definitely help! — Prashant Pimpale, Jun 21 '19 at 05:55

score 1 · Answer 1 · answered Jun 21 '19 at 05:31

1

That is because of view encapsulation. You can turn it of or write css styles that break with

::ng-deep your style

answered Jun 21 '19 at 05:31

Adrian Brand

20,384
4
39
60

I have used :host /deep/ component-selector{width:50px} but still not able to override selector – Sonali Pawde Jun 21 '19 at 05:34
1

@SonaliPawde also try setting `encapsulation: ViewEncapsulation.None,` in the reusable component ts code and also make sure you set `!important` flag to css – Joel Joseph Jun 21 '19 at 05:40

score 0 · Answer 2 · answered Jun 21 '19 at 05:37

0

Try with following

/deep/ <css selector>{width:50px}

If still doesn't work the use !important

/deep/ <css selector>{width:50px !important}

answered Jun 21 '19 at 05:37

Sunil Singh

11,001
2
27
48

score 0 · Answer 3 · answered Jun 21 '19 at 05:53

According to angular style guide , the style should not flow from parent to child ie -> the component that has your < component-selector > should not take care of child's style.

What you should do is, make use of host-context.

Apply a class to the parent (let's say widht-mid). In the child's css you need to check that does my parent has a class widht-mid, if yes then it should change it's width.

In the child's css file ->

:host-context(.width-mid) table{
width: 50px
}

You should not transfer styles from parent to child essentialy because it spoils the ViewEncapsulation goodness that Angular is proud of. Here is some refrence . :Style Guide (also the above answers are deprecated, and angular team is thinking of removing them entirely)

Also, the child component should be responsible for how does it table looks. The parent should be concerned about itself. In the future, if you will have two children to your parent (it two < component-selector > . in one parent), it will be difficult to manage what style to pass to what child. Using this method, altering style is not only easy but also manageable.

Upvote and mark as solved if I was able to help.Cheers.

Want to change style of reusable nested componet in angular

3 Answers3