Have link click trigger unique toggle button? - html

Question

I am using AngularJS and just CSS/HTML to create this webpage. I have a list of book links that I loop through and create a new 'card' (just creating a div) for each link. As part of this loop, I am also creating a toggle so that each card has a toggle switch next to it. I want the toggle to be switched on/true when the book link is clicked but right now it only seems to work for the first link as I want. If I click any other link in the list, the toggle doesn't seem to be working.
I essentially have it set up so that when the link is clicked, it triggers toggleSwitch() function which goes and toggles the button. I think the problem is that the way I have my angular written is so that it looks for the first link every time, but I'm not sure how to loop through the list. (I am new to web development so forgive me if this seems dumb)
<span *ngIf="selectedTitles">
<div *ngFor="let audibleTitle of selectedTitles" class="justify-content-center">
<a class="bookLink" href="link to a book" (click)="toggleSwitch()" target="_blank">
<div class="audible-title card-body">
<strong>title name</strong> <br>
title author <strong> | </strong>
<!--<span *ngFor="let genre of audibleTitle.genre"> {{genre}} > </span>-->
<span>title genre</span>
</div>
</a>
<label class="switch">
<input #link type="checkbox" id="sliderButton" >
<span class="slider round" ></span>
</label>
</div>
</span>
export class ContentRecommendationComponent implements OnInit {
#ViewChild('link') testLink;
#Input() prometheusResponse: PrometheusResponse;
selectedTitles: AudibleTitle[] = [];
constructor() {
}
ngOnInit() {
}
toggleSwitch(){
this.testLink.nativeElement.checked = true;
console.log('this is showing');
}
}
I want every toggle to be associated to it's correct link. I guess my question is how do I link through every link in angular?

Answer 1

One way would be to send the link template variable through your toggleSwitch method like this:
<span *ngIf="selectedTitles">
<div *ngFor="let audibleTitle of selectedTitles" class="justify-content-center">
<a class="bookLink" href="link to a book" (click)="toggleSwitch(link)" target="_blank">
<div class="audible-title card-body">
<strong>title name</strong> <br> title author <strong> | </strong>
<!--<span *ngFor="let genre of audibleTitle.genre"> {{genre}} </span>-->
<span>title genre</span>
</div>
</a>
<label class="switch">
<input #link type="checkbox" id="sliderButton" >
<span class="slider round" ></span>
</label>
</div>
</span>
Now your toggleSwitch would be like this:
toggleSwitch(link){
link.nativeElement.checked = true;
console.log('this is showing');
}
In this way, in each iteration, toggleSwitch will receive the actual link in that iteration, and only that specific switch will be toggled

Answer 2

I want every toggle to be associated to it's correct link. I guess my question is how do I link through every link in angular?
You need to pass the iterator index of the loop to the toggle function. *ngFor="let item of items; let i=index" then pass i to toggleswitch(i).

Answer 3

I don't advise accessing the HTML nativeElement for something like this. You already have an underlying data structure, so you can add a checked property to this instead. You are having problems with only being able to check the first link because you are not telling your toggleSwitch() method which audibleTitle you want to check or uncheck. Think about the underlying data model, not the HTML itself.
I also question your use of a (click) action on a link which also has a href. If the link is clicked twice (thereby opening a second window), you will unset its checked property. Just food for thought.
In your TypeScript:
export interface AudibleTitle {
checked: boolean;
link: string;
}
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
audibleTitles: Array<AudibleTitle> = [
{
checked: false,
link: `https://example.com`
},
{
checked: false,
link: `https://google.com`
},
];
toggleSwitch(audibleTitle: AudibleTitle) {
audibleTitle.checked = !audibleTitle.checked;
console.log('this is showing');
}
}
audibleTitles: Array<AudibleTitle> = [
{
checked: false,
link: `https://example.com`
},
{
checked: false,
link: `https://google.com`
},
];
toggleSwitch(audibleTitle: AudibleTitle) {
audibleTitle.checked = !audibleTitle.checked;
console.log('this is showing');
}
}
In your HTML:
<span *ngIf="selectedTitles">
<div *ngFor="let audibleTitle of selectedTitles" class="justify-content-center">
<a class="bookLink" href="https://example.com/{{audibleTitle.link}}" (click)="toggleSwitch(audibleTitle)" target="_blank">
<div class="audible-title card-body">
<strong>title name</strong> <br>
title author <strong> | </strong>
<!--<span *ngFor="let genre of audibleTitle.genre"> {{genre}} > </span>-->
<span>title genre</span>
</div>
</a>
<label class="switch">
<input #link type="checkbox" id="sliderButton">
<span class="slider round"></span>
</label>
</div>
</span>