My parent component HTML code is below:
<div class="col-md-6">
<div class="categories">
<div class="title">All Categories</div>
<nested-cat [data]="data" [key]="key" (action)="onClicked($event)" class="cat-container"></nested-cat>
</div>
</div>
</div>
This is the HTML code for my child component:
<ul class="categorys" *ngIf="items.length">
<li class="cat" *ngFor="let item of items">
<div class="content">
<span class="name">{{item.name}}</span>
<span class="action">
<button md-icon-button><md-icon color="primary" (click)="hello('hello')">edit</md-icon></button>
<button md-icon-button><md-icon color="warn">delete</md-icon></button>
</span>
</div>
<nested-cat *ngIf="item[key].length" [key]="key" [data]="item[key]" (action)="onClicked($event)"></nested-cat>
</li>
</ul>
I came across this and this links which talk about using :host(selector) and :host-context(selector) to target parent and child components. However, I'm struggling to implement this in my scenario.
In order to style the parent, I used the following CSS:
:host ::ng-deep nested-cat{
width: 100%;
padding:0;
}
It works well, but when attempting to target the first ul element, the style is applied to all ul elements.
:host(nested-cat) ::ng-deep ul:first-of-type{
padding:0; // This will affect all ul
}
How can I specifically target the first child (ul) of the first nested-cat and set its padding to 0?
Update:
You can view a plunkr example here.
Here's the working solution:
:host ::ng-deep .categories>nested-cat>ul {
padding: 0 4px;
}