How to add styles into a component element from the parent html it is placed in?

Question

I have a component which is app-details-banner-component.html:

<div class="container">
  <div class="row">
    <div class="col-7">
      <h1 class="project-title">Details</h1>
      <p class="project-details">Lorem Ipsum.....</p>
    </div>
    <div class="col-5">
      <img src="assets/images/colorful-beach.svg">
    </div>
  </div>
</div>

The selector of my component is named app-details-banner therefore I added <app-details-banner></app-details-banner> into my main html file where I want it to appear. However I also want to add the following css styles only into into my app-component.scss:

.project-details { display: none ;}

.project-title { color: #0A7790; }

However, this is not working and it has no effect. I only want the styles to be applied in the main component but not in the other components where <app-details-banner></app-details-banner> is called so how can I do this?

The code you shared it's from `app-details-banner` component or main component? — uiTeam324, Nov 18 '20 at 14:45
so basically your CSS is in the parent component css file but it is not affecting the child components? can you move the CSS to the child component css file? or am i misunderstanding the issue? — JBoothUA, Nov 18 '20 at 14:50
@JBoothUA Yes you are correct. I can't move it because I am reusing the component in different places but I only want to apply the styles when I add it to main.html — , Nov 18 '20 at 14:55
@uiTeam324 the html is from `app-details-banner` and the css is in the main.html where I call `` — , Nov 18 '20 at 14:56

score 1 · Answer 1 · answered Nov 18 '20 at 14:51

1

You could try using ng-deep. However it is now deprecated and I'm not sure if they've mentioned when Angular will drop support for it.

Here is a related answer on why there are no alternatives yet.

answered Nov 18 '20 at 14:51

Aditya Menon

744
5
13

Thanks! I will research deep and use it – Nov 18 '20 at 14:58

score 0 · Answer 2 · answered Nov 18 '20 at 14:58

0

You could try something like this in order to turn off the CSS component encapsulation

@Component({
      selector: 'app-example',
      templateUrl: './example.component.html',
      styleUrls: ['./example.component.scss'],
      encapsulation: ViewEncapsulation.None
    })

then you will just have to "prefix" (probably based on parent elements) your css rules correctly in order to only target the correct elements.

answered Nov 18 '20 at 14:58

JBoothUA

3,040
3
17
46

1

Thanks, good to know. Is there a way to select which component css encapsulation I want to turn off if I am adding multiple different components but want the others to keep it? – Nov 18 '20 at 15:13
you set it at the component level, if that's what you mean – JBoothUA Nov 18 '20 at 16:02

How to add styles into a component element from the parent html it is placed in?

2 Answers2