0

My component is app-menu which is a recersive component and its first tag is li. on the other hand, I have a css that change the font of any li that is inside <div> but it is not work in my html because my li is wrapped by <app-menu>. so what can I do? how is possible to use <app-menu> as well as my css?

my html:

<div>
     <app-menu [catList]="catList"></app-menu>
</div>

my app-menu:

<li *ngFor="let cat of subCat()">
  <a href="#">{{cat.title}}</a>
.....
</li>

my html after it rendered:

<div>
<app-menu>
<li>
      <a href="#">....</a>
    .....
</li>
</app-menu>
</div>
helenDeveloper
  • 624
  • 3
  • 8
  • 15

1 Answers1

0

You have to specify the entire path to the li or you need to put it in the style.(s)css file that is general.

In Angular, the components have its own style so, every thing you change in it will be applied only to it.

To be able to aplly a style in a tag inside a child component, you must provide the entire path.

I think your css selector should be div app-menu li {...}.

If it not work, try to put a class in <app-menu> like <app-menu class="my-menu" [catList]="catList"></app-menu> and use the class to find the li. It would be this div .my-menu li {...}.

Bruno João
  • 5,105
  • 2
  • 21
  • 26
  • Thank you for the answer. I solved my problem by the help of this:https://stackoverflow.com/questions/46671235/remove-host-component-tag-from-html-in-angular-4 @vinagreti – helenDeveloper Feb 02 '18 at 16:29
  • So, I think you could answer your own question to help the next person looking for the answer in your question. That is how SO want you to do ;) – Bruno João Feb 02 '18 at 16:37