Is that possible to make button click if it is from Directive

Question

Why this hi() is not calling?

InnerHTML button click is not working?

this code is inside Directive

@HostListener('mouseenter') onMouseEnter() {
 this.el.nativeElement.innerHTML ="<button (click)=hi()>dasdsad</button>";
  this.el.nativeElement.style.backgroundColor = this.hc;
}

hi() mehod is from app.component and in app.component.html

<p appMillahint="pink" dc="yellow" text="name" ml="#9c27b0" me="red" mo="blue">
  Start editing to see some magic happen :) {{name}}
</p>

full code

import { Directive } from '@angular/core';
import { ElementRef ,HostListener,Input } from '@angular/core'; 
import {MatTooltipModule} from '@angular/material/tooltip';
import { OverlayModule } from '@angular/cdk/overlay';

@Directive({
  selector: '[appMillahint]'
})
export class MillahintDirective {
@Input('appMillahint') hc: string;
@Input() dc: string;
@Input() mo: string;
@Input() callback2:Function;
@Input() me: string;
@Input() ml: string;
@Input() text: string;
@Input() rt:String; 
  constructor(   private el:ElementRef) { 
    el.nativeElement.style.backgroundColor = this.dc;
    this.text="milla";

  }


      ngOnInit() {
       this.    el.nativeElement.innerHTML ='<style>'+this.ribbonstyle+'</style><h1 class="ribbon">  <strong class="ribbon-content">'+this.rt+'</strong></h1>';
    }
  @HostListener('onmouseover') onmouseover(){
  this.    el.nativeElement.style.backgroundColor =this.mo;
}@HostListener('mouseenter') onMouseEnter() {
 this.    el.nativeElement.innerHTML ='<style>'+this.ribbonstyle+'</style><h1 class="ribbon">  <strong class="ribbon-content">'+this.rt+'</strong></h1>';


  //this.    el.nativeElement.style.backgroundColor = this.hc;

}table=' <style> table {  font-family: arial, sans-serif;   border-collapse: collapse;  width: 100%;}  td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}  tr:nth-child(even) { background-color: #dddddd; } </style><table>  <tr>   <th>Company</th>  <th>Contact</th>  <th>Country</th>  </tr>  <tr>  <td>Alfreds Futterkiste</td>  <td>Maria Anders</td>  <td>Germany</td>  </tr> <tr>  <td>Centro comercial Moctezuma</td>   <td>Francisco Chang</td>  <td>Mexico</td>  </tr> <tr>   <td>Ernst Handel</td>  <td>Roland Mendel</td>   <td>Austria</td>  </tr> <tr>  <td>Island Trading</td>  <td>Helen Bennett</td>  <td>UK</td>  </tr>  <tr>  <td>Laughing Bacchus Winecellars</td>   <td>Yoshi Tannamuri</td>  <td>Canada</td> </tr> <tr>  <td>Giovanni Rovelli</td>   </tr> </table>';
  ribbonstyle='.ribbon { font-size: 16px !important;  width: 50%; position: relative; background: #ba89b6; color: #fff; text-align: center; padding: 1em 2em; /* Adjust to suit */ margin: 2em auto 3em;   } .ribbon:before, .ribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #986794; z-index: -1; } .ribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; } .ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; } .ribbon .ribbon-content:before, .ribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #804f7c transparent transparent transparent; bottom: -1em; } .ribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em; } .ribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0; }';

 @HostListener('mouseleave') onMouseLeave() {

    this.    el.nativeElement.innerText="i am milla";
   //  this.    el.nativeElement.style.backgroundColor = this.ml;
  }

}

Can you please provide complete directive code? Also where `hi()` function is defined? — Plochie, May 28 '19 at 12:02
https://stackblitz.com/edit/angular-directive-my-first-class — WorkingSpace4, May 28 '19 at 12:34
the answer is in https://stackoverflow.com/questions/35080387/dynamically-add-event-listener. You can not simply use innerHtml="(click)='hi()'", because the function "hi" NOT exist. remember that Angular transpile to javascript and minimicy. So the funtion in java script becomes an unknow function. — Eliseo, May 28 '19 at 14:55

Veeraragavan · Answer 1 · 2019-05-28T12:56:50.503

0

In Angular you can't add templates like this. Do the following changes.

Inject ViewContainerRef and ElementRef in directive constructor

constructor(private vc: ViewContainerRef, private tl: TemplateRef, private El: ElementRef<any>) {
 this.vc.createEmbeddedView(this.tl);
 this.el.nativeElement.style.backgroundColor = this.hc;
}

use the directive inside the ng-template

<ng-template appMillahint="pink">
   <p dc="yellow" text="name" ml="#9c27b0" me="red" mo="blue">
     Start editing to see some magic happen :) {{name}}
   <button (click)=hi()>dasdsad</button>
   </p>
</ng-template>

edited May 28 '19 at 12:56

answered May 28 '19 at 12:18

Veeraragavan

343
1
8

Argument of type 'ElementRef' is not assignable to parameter of type 'TemplateRef<{}>'. Property 'elementRef' is missing in type 'ElementRef'. (parameter) el: ElementRef – WorkingSpace4 May 28 '19 at 12:29
please try here https://stackblitz.com/edit/angular-directive-my-first-class when i try your code it is not working – WorkingSpace4 May 28 '19 at 13:13

Is that possible to make button click if it is from Directive

1 Answers1