I'm creating a data tree where the child components are just new instances of the parent. When I hover over the folder name in the parent, I show edit and delete buttons. I want that same behavior when my folder is expanded to show the child components, but the hover does not work. I have tried disabling the view encapsulation and also the /deep/ approach in the css file, but I couldn't get either to work. I've also tried binding a css class and then passing it to the new instance, but again that didn't work.
library-tree.html (parent to Library)
<div id="scrollbar-style">
<div *ngFor="let media of libraries">
<library
[media]="media">
</library>
</div>
</div>
library.html (child of Library Tree)
<h4 class="category-name>{{media.name}}</h4> //hover here
<div class="edit-delete-btns"> //buttons that show on hover at the top level, but not in child Library components
<button name="media.id" (click)="onCategoryNameEdit()"></button>
<button name="media.id" (click)="onCategoryDelete(media.id)"></button>
</div>
<div *ngIf="libraryVisible">
<ul *ngIf="media.category">
<li *ngFor="let category of media.category">
<library [media]="category" [ngClass]="libraryCompClass" [libraryCompClass]="libraryComp"></library>
</li>
</ul>
</div>
Library.ts
import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
import { Media } from '../../../shared/models/media';
export class LibraryComponent implements OnInit {
@Input() libraryCompClass: string;
@Input() media: Media;
constructor() {}
}
library.scss
.edit-delete-btns {
display: none;
z-index: 102;
}
.category-name:hover ~ .edit-delete-btns {
display: inline-block; //this works in the top level to show the buttons
}
/deep/ div > ul > li > .libraryCompClass > .library > .category-name:hover ~ .edit-delete-btns {
display: inline-block; //my attempt at chaining classes to reach the deeper elements in the child component
}
.category-name {
z-index: 101;
}
.edit-delete-btns:hover {
display: inline-block;
}
Any ideas would be helpful, thanks!
