0

I need to add the angular 4 click-event binding (click) in an HTML element from TS Component. Here the code:

$('.swiper-wrapper').append('<div class="swiper-slide basic-button" (click)="goToComponent(\'home/labels/\'' + label.id + ')" style="background-image: url(' + label.image + '); height: 300px; width: 300px;"></div>')

In angularJs i would use $compile, but in angular 4? Don't answer me with this other question because i don't understand the explanation.

It would be so useful if someone can explain me how to do this thing step by step (i'm new in Angular 4).

Thanks a lot

Phyrum Tea
  • 2,623
  • 1
  • 19
  • 20
nobald282
  • 75
  • 3
  • 13
  • 3
    Why are you using jQuery to add the element? – Venomy Nov 13 '17 at 10:52
  • You want to append an element or bind the `(click)` function ? Please elaborate what you want to achieve ... – anteAdamovic Nov 13 '17 at 10:56
  • Hi Venomy, because with the Swiper library i had problem with have dynamic managing of images with ngFor – nobald282 Nov 13 '17 at 10:57
  • Hi Ante, i have a Swiper slider and i want to manage it dinamicaly (add and remove images). I want to add the click event to these images, where when i click one of them, i will be go in a specific route – nobald282 Nov 13 '17 at 10:58
  • why not add the click method separately, when the element has been added to DOM? That would make a "compile" not necessary, the rest of the html having no other angular code – Kaddath Nov 13 '17 at 11:01
  • Hi Kaddath, how can i do it? – nobald282 Nov 13 '17 at 11:02
  • Possible duplicate of [Equivalent of $compile in Angular 2](https://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2). Kindly check the all answers. it has been solutions for your question. take some times to understand those answers – Ramesh Rajendran Nov 13 '17 at 11:09
  • there are (a bit more complicated) solutions proper to angular, but if your case is simple, you should be able to use good old JS `addEventListener`; the function you bind will be defined in your scope, so it will be parsed by angular and can contain angular code. – Kaddath Nov 13 '17 at 11:20

0 Answers0