En essayant d'ajouter active-span
à un élément lors de la sélection d'une taille
, c'est assez simple de le faire en jQuery mais je suis un peu confus quand je le fais en Angular. Ainsi, lorsque vous sélectionnez une taille S/M/L
, il ajoutera une nouvelle classe appelée active-span
ainsi que lorsque la page est rafraîchie puisque la valeur de sizeVal
est enregistrée dans localStorage()
.
J'ai essayé d'utiliser ngClass
mais il n'ajoute pas la classe à l'élément div
.
size: any;
sizeOpt:any;
private sizeOptionStorage = localStorage.getItem('sizeOpt');
constructor() {
this.size = ['XS', 'S', 'M', 'L', 'XL'];
}
selectSize(event) {
this.sizeOpt = event.target.innerText;
localStorage.setItem('sizeOpt', this.sizeOpt);
console.log(this.sizeOpt);
// add class when size is selected
}
template html --
{{ s }}
Voici un plnkr pour reproduire ce que j'essaie de faire.
En jQuery, ce serait quelque chose comme ceci
$('.size').on('click', function () {
spanText = $(this).text();
localStorage.setItem('sizeOption', spanText);
spanText = $(this).text();
$('div.size').each(function () {
$(this).removeClass('active-span');
});
$(this).addClass('active-span');
})
$('div.size').each(function () {
if ($(this).html() == sizeOption) {
$(this).addClass('active-span');
}
});