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

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.