Issue
I'm trying to change the title attribute inside an tag when clicked. If you click it again the title attribute should change it back to its initial state and so it goes. I can make the change of the title happen, but I'm having trouble making it go back to its initial state when clicked again. Here's the code:
HTML
<a title="1" id="initial" role="button" (click)="magic()">
<p>test</p>
</a>
TS
magic(): void {
document.getElementById("initial")?.setAttribute("title", "2");
}
Solution
To do that you need to store somewhere a default value of the title and then toggle it on click.
For example you can have defaultTitle
property in your class, and then when you need to switch back to a default value you can just reuse that property:
TS
private defaultTitle = 'default-value';
title = this.defaultTitle;
magic(): void {
if (this.title === this.defaultTitle) {
this.title = 'new-value';
} else {
this.title = this.defaultTitle;
}
}
HTML
<a [title]="title" id="initial" role="button" (click)="magic()">
<p>test</p>
</a>
Answered By - Telman
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.