CODEWITHSUNDEEP
angular
user14526302
user14526302

Reputation:

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

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?

Upvotes: 0

Views: 54

Answers (2)

JBoothUA
JBoothUA

Reputation: 3149

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.

Upvotes: 0

Aditya Menon
Aditya Menon

Reputation: 774

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.

Upvotes: 1

Related Questions