I try to append a div into my page via a function in my component like this :
showTile($event: any,id: number){
$($event.target).append('<div (click)="somefunction(id)"></div>'))
}
somefunction(id :number){ console.log(id) }
The div has been appended by somefunction is not handled, in angular js 1.x I used to work with $compile.
You should not use jQuery to affect the DOM tree when your application works with Angular2. There is always a way to avoid this kind of the anti-pattern.
If I understand properly, you want to append the div on every click on the element. Why don't you create another component for this? In template, use *ngIf directive in order to show/hide additional content and bind click event to @Component, which will toggle boolean property. Then in parent component just use this component as many as you want. If these child components are specific and needs information, which are available in parent component, just @Input them. If you want to invoke parent component function, you could use @Output in child and then - invoke parent function.
There you can read a lot about this - https://angular.io/docs/ts/latest/cookbook/component-communication.html
Inside component.html file
<div *ngIf="condition" (click)="dosomething(data)">
<label >Click here </label>
</div>
//You div will appear only if condition is true
Inside component.ts file
dosomething(item){
console.log(item);
//do something here
}
