web-dev-qa-db-fra.com

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

J'essayais de créer une galerie d'images avec Angular 4.La logique sous-jacente consiste à ajouter une classe de feuille de style en cascade (CSS) à l'image sélectionnée pour afficher une bordure rouge sur l'image sélectionnée (sélectionnée). Ceci est la feuille de style CSS pour une galerie d'images.

Je souhaite afficher un carré de sélection rouge sur l'image sur laquelle j'ai cliqué. this-is-a-class devrait être ajouté à 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 modèle

<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 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';
  }
}
cssangular
22
Navaneeth S R

Utilisez [ngClass] et appliquez de manière conditionnelle une classe basée sur la 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;
}
49
Arun Kumaresh

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

Je montre cependant avec divs au lieu de imgs.

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;
  }
}
4
Fredrik Lundin

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

TypeScript 

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>
1
Mahendra Hirapra

Si vous avez besoin que chaque div ait son propre bascule et que vous ne voulez pas que les clics affectent d'autres divs, 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 est nul, mais cela fonctionne.

0
Elron