Ajouter une classe à un élément dans Angular 4

Question

J'ai essayé de créer une galerie d'images avec Angulaire 4.La logique derrière cela est d'ajouter une Feuille de Style en Cascade (CSS) de la classe à l'image sélectionnée qui va afficher une bordure rouge sur le (clic) de l'image. C'est la feuille de style CSS pour une galerie d'images.

J'en veux pour preuve un rouge carré de sélection sur l'image que j'ai cliqué. this-is-a-class doit être ajoutée à l'image sélectionnée.

#container{
  border:1px solid red;
  height:auto;
}

ul li{
  margin-right:20px;
  margin-left:0;
  list-style-type:none;
  display:inline;
}

ul li img{
  width: 200px;
  height:200px;
  border:1px solid grey;
}

#select{
  border:2px solid violet;
}

.this-is-a-class{
  border: 10px solid red !important;
}

voici le code du template

<div id="container">
  <ul>
    <li><img class="this-is-a-class" id="1" src="../../assets/images/1.jpg" (click)="addClass(id=1)"/></li>
    <li><img id="select" src="../../assets/images/2.png" (click)="addClass(id=2)"/></li>
    <li><img id="3" src="../../assets/images/3.jpg" (click)="addClass(id=3)"/></li>
    <li><img id="4" src="../../assets/images/4.png" (click)="addClass(id=4)"/></li>
    <li><img id="5" src="../../assets/images/5.jpg" (click)="addClass(id=5)"/></li>
  </ul>
</div>

<div>
  <h1>You Clicked on: {{id}}</h1>
</div>

Le code du composant est comme suit

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})

export class UserComponent implements OnInit {
  id: number;
  constructor() {
    console.log("Constructor working..")

  }

  ngOnInit() {
    console.log('ngOnInit works..');
  }

  //function to add the class to selected image to show the border.
  addClass(id) {
    this.id = id;
    //id = this.id? 'selectedImg' : 'null';
  }
}

Answer 1

Utilisez [ngClass] et appliquez conditionnellement la classe basée sur le id .

Dans votre fichier HTML :

 <li>
    <img [ngClass]="{'this-is-a-class': id === 1 }" id="1"  
         src="../../assets/images/1.jpg" (click)="addClass(id=1)"/>
</li>
<li>
    <img [ngClass]="{'this-is-a-class': id === 2 }" id="2"  
         src="../../assets/images/2.png" (click)="addClass(id=2)"/>
</li>
 

Dans votre fichier TypeScript:

 addClass(id: any) {
    this.id = id;
}
 

Answer 2

Voici un plongeur montrant comment vous pouvez l'utiliser avec la directive ngClass .

Je montre cependant avec div s au lieu de img s.

Modèle:

 <ul>
      <li><div [ngClass]="{'this-is-a-class': selectedIndex == 1}" (click)="setSelected(1)"> </div></li>
      <li><div [ngClass]="{'this-is-a-class': selectedIndex == 2}" (click)="setSelected(2)"> </div></li>
      <li><div [ngClass]="{'this-is-a-class': selectedIndex == 3}" (click)="setSelected(3)"> </div></li>
</ul>
 

TS:

 export class App {
  selectedIndex = -1;

  setSelected(id: number) {
    this.selectedIndex = id;
  }
}
 

Answer 3

Si vous souhaitez définir une seule classe spécifique, vous pouvez écrire une fonction TypeScript renvoyant un booléen pour déterminer quand la classe doit être ajoutée.

Manuscrit

 function hideThumbnail():boolean{
    if (/* Your criteria here */)
        return true;
}
 

CSS :

 .request-card-hidden {
    display: none;
}
 

HTML :

 <ion-note [class.request-card-hidden]="hideThumbnail()"></ion-note>
 

Answer 4

Si vous avez besoin que chaque div ait sa propre bascule et que vous ne souhaitiez pas que les clics affectent d'autres div, procédez comme suit:

Voici ce que j'ai fait pour résoudre ce problème ...

 <div [ngClass]="{'teaser': !teaser_1 }" (click)="teaser_1=!teaser_1">
...content...
</div>

<div [ngClass]="{'teaser': !teaser_2 }" (click)="teaser_2=!teaser_2">
...content...
</div>

<div [ngClass]="{'teaser': !teaser_3 }" (click)="teaser_3=!teaser_3">
...content...
</div>
 

il nécessite une numérotation personnalisée qui craint, mais cela fonctionne.

Answer 5

vous pouvez essayer ceci sans aucun script java, vous pouvez le faire simplement en utilisant CSS

 img:active,
img:focus,
img:hover{ 
border: 10px solid red !important
}
 

si votre cas consiste à ajouter une autre classe css en cliquant, vous pouvez utiliser le sélecteur de requête comme

 <img id="image1" ng-click="changeClass(id)" >
<img id="image2" ng-click="changeClass(id)" >
<img id="image3" ng-click="changeClass(id)" >
<img id="image3" ng-click="changeClass(id)" >
 

dans le contrôleur, recherchez d'abord une image avec une bordure rouge et supprimez-la, puis en passant l'ID de l'image, ajoutez la classe de bordure à cette image

 $scope.changeClass = function(id){
angular.element(document.querySelector('.some-class').removeClass('.some-class');
angular.element(document.querySelector(id)).addClass('.some-class');
}