Merge pull request #50 from maxime1992/feat/optional-custom-template-above-the-hover-opacity

feat: add an optional custom template to display above the hover opacity

Author: maxime1992

projects/ngx-hover-opacity/src/lib/ngx-hover-opacity.component.html

@@ -1,5 +1,7 @@
 <div class="content" [class.is-full-height]="isFullHeight">
   <ng-content></ng-content>
 
-  <div class="hover" *ngIf="isHoverVisible"></div>
+  <div class="hover" *ngIf="isHoverVisible">
+    <ng-container *ngTemplateOutlet="hoverOpacityTpl ?? null"></ng-container>
+  </div>
 </div>

projects/ngx-hover-opacity/src/lib/ngx-hover-opacity.component.ts

@@ -1,11 +1,22 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  Directive,
+  Input,
+  TemplateRef,
+  ViewEncapsulation,
+} from '@angular/core';
 import { Nilable } from 'tsdef';
 
 export interface INgxHoverOpacityComponentCustomStyle {
   backgroundColor: string;
   zIndex: number;
 }
 
+@Directive({ selector: '[hoverOpacityTpl]' })
+export class HoverOpacityTplDirective {}
+
 @Component({
   selector: 'ngx-hover-opacity',
   templateUrl: './ngx-hover-opacity.component.html',
@@ -17,4 +28,7 @@ export class NgxHoverOpacityComponent {
   @Input() isHoverVisible: Nilable<boolean>;
   @Input() isFullHeight = true;
   @Input() style: Nilable<INgxHoverOpacityComponentCustomStyle>;
+
+  @ContentChild(HoverOpacityTplDirective, { static: true, read: TemplateRef })
+  public hoverOpacityTpl?: TemplateRef<any>;
 }

projects/ngx-hover-opacity/src/lib/ngx-hover-opacity.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NgxHoverOpacityComponent } from './ngx-hover-opacity.component';
+import { HoverOpacityTplDirective, NgxHoverOpacityComponent } from './ngx-hover-opacity.component';
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [NgxHoverOpacityComponent],
-  exports: [NgxHoverOpacityComponent],
+  declarations: [NgxHoverOpacityComponent, HoverOpacityTplDirective],
+  exports: [NgxHoverOpacityComponent, HoverOpacityTplDirective],
 })
 export class NgxHoverOpacityModule {}

src/app/app.component.html

@@ -2,6 +2,10 @@
 
 <!--use the ngx-hover-opacity component to wrap the element to hover -->
 <ngx-hover-opacity [isHoverVisible]="isHoverVisible">
+  <ng-template hoverOpacityTpl>
+    <div class="wrapper">This is a template that can go above the hover!</div>
+  </ng-template>
+
   <mat-card>
     <mat-card-header>
       <mat-card-title>Card Title</mat-card-title>

src/app/app.component.scss

@@ -6,3 +6,11 @@ ngx-hover-opacity {
   max-width: 500px;
   display: block;
 }
+
+.wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}