Bonjour,

Voila je rencontre un petit problème avec mon code.

Ajout au modification de classe sur un élément du dom

J'aimerais au click sur une function ajouter ou supprimer une classe sur un élément de mon template.
Pour cela j'ai déclarer l'élément en ref :

<div class="showNavigation">
  <button  type="button" (click)="showMenu()">
  </button>
</div>
<div #slideNavigation class="slideNavigation">
  <ul class="list-group">
    <!--Liste de <li></li>-->
  </ul>
</div>

Mon clique fonctionne très bien j'ai un alert('test') qui se lance parfaitement. J'ai beau lire la documentation dans tous les sens je ne comprend pas comment récupéré mon élément côté component pour le manipuler. Avec Angular JS 1 aucun sous via un angular.element('.slideNavigation); Mais avec cette version je comprend pas le principe j'ai juste capter que je devais déclarer mon élément avec un # ( #slideNavigation)

Si vous avez une piste je suis preneur j'ai essayé plein de truc sans jamais réussir a faire marcher ce que je voyais sur le net. Merci

Mon component :

import {Component, ElementRef} from '@angular/core';

@Component({
  selector: 'navigation',
  templateUrl: '/app/components/shares/navigation.html',
  directives: []
})
export class NavigationComponent {
    showMenu = function(){
        alert("test");
    }
}

2 réponses


Maenhyr
Réponse acceptée

Bonjour, la bonne pratique est de modifier une variable au clic et ensuite de jouer avec ngClass https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngClass

Polaris
Auteur

Personne n'a de pistes ? De mon côté toujours rien j'ai avancé sur d'autre partie c'est en train de m'énerver --"