Making click event in TS in Angular 2+
up vote
1
down vote
favorite
Normally when adding a click event in Angular you would write this
<div (click)="myfunc()">click me </div>
but I want to do something like this in TS instead
`<div (click)="${this.myfunc()}">click me</div>`
It works a bit, but the click is made on load.
Then I tried this
`<div (click)="() => ${this.myfunc}">click me</div>`
But that did not work at all. Any help ?
Here is how I call the modal, where I want to use the code
openModalWithComponent(img) {
const initialState = {
title: 'Modal with component',
content: `
<img src="${img}" />
<div (click)="${this.onImageRemoveHandler()}">delete</div>`,
header: false,
footer: false
};
this.bsModalRef = this._modalService.show(
ModalContentComponent, {initialState});
}
angular typescript
edited Nov 19 at 16:24
JJJ
29k147591
asked Nov 19 at 12:55
Johansrk
3,54322325
|
show 13 more comments
up vote
1
down vote
favorite
Normally when adding a click event in Angular you would write this
<div (click)="myfunc()">click me </div>
but I want to do something like this in TS instead
`<div (click)="${this.myfunc()}">click me</div>`
It works a bit, but the click is made on load.
Then I tried this
`<div (click)="() => ${this.myfunc}">click me</div>`
But that did not work at all. Any help ?
Here is how I call the modal, where I want to use the code
openModalWithComponent(img) {
const initialState = {
title: 'Modal with component',
content: `
<img src="${img}" />
<div (click)="${this.onImageRemoveHandler()}">delete</div>`,
header: false,
footer: false
};
this.bsModalRef = this._modalService.show(
ModalContentComponent, {initialState});
}
angular typescript
edited Nov 19 at 16:24
JJJ
29k147591
asked Nov 19 at 12:55
Johansrk
3,54322325
Why would you do that in the first place ? Seems like an XY problem
– trichetriche
Nov 19 at 13:03
because I am calling a modal component, where I want to inject some code
– Johansrk
Nov 19 at 14:03
And how is changing the syntax going to change how you call your modal ? We would need the framework used for the modal and the code of the function to help you. Otherwise, only the first solution would work.
– trichetriche
Nov 19 at 14:05
I updated my description, so you can see the modal
– Johansrk
Nov 19 at 14:12
1
I mean you have to explain why you would use this syntax, this is a template litteral syntax and it's used for strings. So again, explain the issue, not what you think is the solution.
– trichetriche
Nov 19 at 14:47
|
show 13 more comments
up vote
1
down vote
favorite
up vote
1
down vote
favorite
Normally when adding a click event in Angular you would write this
<div (click)="myfunc()">click me </div>
but I want to do something like this in TS instead
`<div (click)="${this.myfunc()}">click me</div>`
It works a bit, but the click is made on load.
Then I tried this
`<div (click)="() => ${this.myfunc}">click me</div>`
But that did not work at all. Any help ?
Here is how I call the modal, where I want to use the code
openModalWithComponent(img) {
const initialState = {
title: 'Modal with component',
content: `
<img src="${img}" />
<div (click)="${this.onImageRemoveHandler()}">delete</div>`,
header: false,
footer: false
};
this.bsModalRef = this._modalService.show(
ModalContentComponent, {initialState});
}
angular typescript
edited Nov 19 at 16:24
JJJ
29k147591
asked Nov 19 at 12:55
Johansrk
3,54322325
Normally when adding a click event in Angular you would write this
<div (click)="myfunc()">click me </div>
but I want to do something like this in TS instead
`<div (click)="${this.myfunc()}">click me</div>`
It works a bit, but the click is made on load.
Then I tried this
`<div (click)="() => ${this.myfunc}">click me</div>`
But that did not work at all. Any help ?
Here is how I call the modal, where I want to use the code
openModalWithComponent(img) {
const initialState = {
title: 'Modal with component',
content: `
<img src="${img}" />
<div (click)="${this.onImageRemoveHandler()}">delete</div>`,
header: false,
footer: false
};
this.bsModalRef = this._modalService.show(
ModalContentComponent, {initialState});
}
angular typescript
angular typescript
edited Nov 19 at 16:24
JJJ
29k147591
asked Nov 19 at 12:55
Johansrk
3,54322325
edited Nov 19 at 16:24
JJJ
29k147591
asked Nov 19 at 12:55
Johansrk
3,54322325
edited Nov 19 at 16:24
JJJ
29k147591
edited Nov 19 at 16:24
JJJ
29k147591
edited Nov 19 at 16:24
JJJ
29k147591
29k147591
asked Nov 19 at 12:55
Johansrk
3,54322325
asked Nov 19 at 12:55
Johansrk
3,54322325
asked Nov 19 at 12:55
Johansrk
3,54322325
3,54322325
Why would you do that in the first place ? Seems like an XY problem
– trichetriche
Nov 19 at 13:03
because I am calling a modal component, where I want to inject some code
– Johansrk
Nov 19 at 14:03
And how is changing the syntax going to change how you call your modal ? We would need the framework used for the modal and the code of the function to help you. Otherwise, only the first solution would work.
– trichetriche
Nov 19 at 14:05
I updated my description, so you can see the modal
– Johansrk
Nov 19 at 14:12
1
I mean you have to explain why you would use this syntax, this is a template litteral syntax and it's used for strings. So again, explain the issue, not what you think is the solution.
– trichetriche
Nov 19 at 14:47
|
show 13 more comments
Why would you do that in the first place ? Seems like an XY problem
– trichetriche
Nov 19 at 13:03
because I am calling a modal component, where I want to inject some code
– Johansrk
Nov 19 at 14:03
And how is changing the syntax going to change how you call your modal ? We would need the framework used for the modal and the code of the function to help you. Otherwise, only the first solution would work.
– trichetriche
Nov 19 at 14:05
I updated my description, so you can see the modal
– Johansrk
Nov 19 at 14:12
1
I mean you have to explain why you would use this syntax, this is a template litteral syntax and it's used for strings. So again, explain the issue, not what you think is the solution.
– trichetriche
Nov 19 at 14:47
Why would you do that in the first place ? Seems like an XY problem
– trichetriche
Nov 19 at 13:03
Why would you do that in the first place ? Seems like an XY problem
– trichetriche
Nov 19 at 13:03
because I am calling a modal component, where I want to inject some code
– Johansrk
Nov 19 at 14:03
because I am calling a modal component, where I want to inject some code
– Johansrk
Nov 19 at 14:03
And how is changing the syntax going to change how you call your modal ? We would need the framework used for the modal and the code of the function to help you. Otherwise, only the first solution would work.
– trichetriche
Nov 19 at 14:05
And how is changing the syntax going to change how you call your modal ? We would need the framework used for the modal and the code of the function to help you. Otherwise, only the first solution would work.
– trichetriche
Nov 19 at 14:05
I updated my description, so you can see the modal
– Johansrk
Nov 19 at 14:12
I updated my description, so you can see the modal
– Johansrk
Nov 19 at 14:12
1
1
I mean you have to explain why you would use this syntax, this is a template litteral syntax and it's used for strings. So again, explain the issue, not what you think is the solution.
– trichetriche
Nov 19 at 14:47
I mean you have to explain why you would use this syntax, this is a template litteral syntax and it's used for strings. So again, explain the issue, not what you think is the solution.
– trichetriche
Nov 19 at 14:47
|
show 13 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375118%2fmaking-click-event-in-ts-in-angular-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why would you do that in the first place ? Seems like an XY problem
– trichetriche
Nov 19 at 13:03
because I am calling a modal component, where I want to inject some code
– Johansrk
Nov 19 at 14:03
And how is changing the syntax going to change how you call your modal ? We would need the framework used for the modal and the code of the function to help you. Otherwise, only the first solution would work.
– trichetriche
Nov 19 at 14:05
I updated my description, so you can see the modal
– Johansrk
Nov 19 at 14:12
1
I mean you have to explain why you would use this syntax, this is a template litteral syntax and it's used for strings. So again, explain the issue, not what you think is the solution.
– trichetriche
Nov 19 at 14:47