help-hint-structural-step1.directive.ts

@Component({
  selector: 'app-help-hint-dynamic',
  templateUrl: `
   <div class="help-hint-container">
     <div *ngTemplateOutlet="templateRef"></div>
     <img src="https://cdn.onlinewebfonts.com/svg/img_28550.png"
          [title]="hint"
          (mouseover)="onMouseOver();"
          *ngIf="hint">
   </div>`,
  styleUrls: ['./help-hint-dynamic.component.css']
})
export class HelpHintDynamicComponent {
  @Input()
  hint: string;
  @Input()
  templateRef: TemplateRef<any>;
  
  @Output()
  helpHovered = new EventEmitter<void>();
  
  onMouseOver() {
    this.helpHovered.emit();
  }
}