How to set a background for a child component in Angular?

Issue

I have a parent component called landing.component, which has curretly two child componentes:

<app-land-top class="land-top"></app-land-top>
<app-land-btn></app-land-btn>

And I would like to set a SVG background to one of them. I tried doing using the CSS from my parent component, landing.component.css, with:

.land-top {
  background: #141414 url(assets/entireTop_bg.jpg) no-repeat top left;
  background-size: cover;

But it did'nt work.

I did find some questions here at StackOverflow, but I could'nt implement any of them. They seemed a little confusing.

The ones I took a read were:

• https://stackoverflow.com/a/26388437/8297745 - This one talks about creating a JS Directive, but I am not using JS, I am using TypeScript. (It's a answer for the old AngularJS which I am not using at the moment.). I tried implementing it using TypeScript but could'nt.

• https://stackoverflow.com/a/48890991/8297745 - So, this one actually answered the exact same thing I tried that did'nt work.

I believe that the following question is probably what I need, which is this one, that the user who answered talked about using NgClass, but I did'nt understand.

I tried adding [ngClass] = "land-top" to see if it worked, but it did'nt do nothing.

Can someone please help me?

Solution

The probable reason that it is not working is because in Anguler, parent component css does not apply/affect the child component.

In your case, follow below steps.

1. Define the CSS in the app-land-top. component.css file

<app-land-top class="land-top" [ngClass]="{'land-top-bg': condition}"></app-land-top>

2. and in your html

<app-land-top class="land-top"></app-land-top>

Let me know if it works.

Answered By - kevalsing