<a (click)> in a string

angular
1

Hi !
I have html content as string
Var content = "some text <b>in bold</b>"
I output it well in
<div [innerHTML]="content"></div>
Avoiding html sanitizing I got it well bold as expected.

But I need to have more than bold: links
Var content = "some <a (click)="aMethod()">link</a> here"

Of course it doesn’t work cause (click) is not compiled. I have a lot of content so I need to store this html in string. How could I do ? I cannot have my html code stored in components, I would have dozens of them, should I use HotListeners ? What else ?

Merci, Sylvain

2

Edit: Welcome to the forums @chaouidelgado!

I don’t think this is a very good way of operating. Normally dozens of components are quite common so I wouldn’t let that put you off.

Unless this is a kind of CMS and the html content is entered by the user and stored in a database?

One solution is to put the listener on the parent element and figure out what to do with the event when it happens. Where does aMethod() come from?

Try this as a starting point: https://jsfiddle.net/ynqpgLub/

De rein, Chris.

3

I’ve just realised I’m in the wrong forum! I have the Vue forum open in another tab and thought your question was relating to Vue, but actually it’s Angular. Je suis desole!

Maybe my answer can be translated to Angular…

1 Like
4

Thanks a lot ! That s the spirit… for Angular, so aMethod() is declared in the component. I would dig in Vue js, looks beautifull.
Sylvain