3

I am trying to show my component when it's parent is hovered.

The action-list component will display a list of possible actions when an element is hovered. The goal is to have a kind of contextual actions.

I am using host-context to detect the when a parent is hovered, but the issue is that will go through the parent tree. If I'm have the following : :host-context(:hover) {...} the action-listwill be shown as soon any of its ancestor (until body)are hover. In that case it will always be displayed Demo

I managed to make it work by setting a css class on the parent and in scss :host-context(.parent:hover) {...}` Demo

It is working well, but I'd like to avoid having to set an extra class on the parent.

QUESTION:

I know it is not possible in pure CSS, but is there an angular/scss magic syntax that will allow to select the direct parent?

Something like :host-context(parent():hover) {...}

Mikado68
  • 113
  • 1
  • 9

1 Answers1

6

Here is two solutions :

  • In the parent component :
.parent-component:hover ::ng-deep app-child-component .div-in-child {}
  • In the children component
:host-context(app-parent-component:hover) .child-component-div {}

::ng-deep let you to force a style down through the child component tree into all the child component views.

Martin Paucot
  • 1,191
  • 14
  • 30
  • 1
    Thanks for the answer, but I cannot accept it because: 1. ng-deep is deprecated : https://angular.io/guide/component-styles 2. the parent component can be any type of component (in your solution it will work only if the parent is an `app-parent-component` – Mikado68 Mar 13 '19 at 11:40
  • https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep It's actually deprecated but there is nothing to replace it. "Keep using ::ng-deep and its alternatives until a replacement is created - the deprecation is just an early notice so that people aren't blindsided whenever the actual change materializes." What are you talking about "is an `app-parent-component` ? – Martin Paucot Mar 13 '19 at 11:52
  • 1
    In your 2nd solution: `:host-context(app-parent-component:hover) .child-component-div {}`, `app-parent-component` must be known by the child component, which I want to avoid. I would like to have a generic component. – Mikado68 Mar 13 '19 at 11:55
  • Oh okay, i see. The cleanest solution to do that is to work with an input with boolean (`@Input() showActions`) and in the parent. And the other solution, not clean but more generic, is to get the component `constructor(element: ElementRef) {}` and accessing to the parent with `element.nativeElement`. – Martin Paucot Mar 13 '19 at 12:03