Adicionar classe a um elemento em Angular 4

Estava a tentar criar uma galeria de imagens com o Angular 4.A lógica por trás disto é adicionar uma classe de folha de estilo em cascata (CSS) à imagem seleccionada que irá mostrar um contorno vermelho na imagem seleccionada (clicada). Esta é a folha de estilo CSS para uma galeria de imagens.

Quero mostrar um quadrado de selecção vermelho na imagem que carreguei. this-is-a-class deve ser adicionado à imagem seleccionada.

#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;
}

segue-se o código do Modelo 

<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>

o código do componente é: 

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';
  }
}
 37
cssangular
Author: banan3'14, 2017-08-22
Source

5 answers

Utilizar [ngClass] e, condicionalmente, aplicar a classe baseada em id.

No seu ficheiro 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>

No seu ficheiro de texto:

addClass(id: any) {
    this.id = id;
}
 77
Author: Arun Kumaresh, 2018-10-06 13:57:24
Aqui está um mergulhador mostrando como você pode usá-lo com a diretiva ngClass. Estou a demonstrar com divS em vez de {[4] s embora.

Modelo: 

<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>

To: 

export class App {
  selectedIndex = -1;

  setSelected(id: number) {
    this.selectedIndex = id;
  }
}
 7
Author: Fredrik Lundin, 2017-08-22 11:42:05

Se você quiser definir apenas uma classe específica, você pode escrever uma função de dactilografia retornando um booleano para determinar quando a classe deve ser adicionado.

Tipescript

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>
 6
Author: Mahendra Hirapra, 2018-10-06 15:25:41

Se precisar que cada div tenha a sua própria comutação e não queira que os cliques afectem outras divs, faça isto:

Eis o que fiz para resolver isto... 
<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>
Requer numeração personalizada que não presta, mas funciona.
 0
Author: Elron, 2018-06-02 02:00:26

Você pode tentar isso sem qualquer script java você pode fazer isso apenas usando CSS 

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

Of if your case is to add any other css class by click you can use query selector like 

<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)" >

No controlador primeiro procurar por qualquer imagem com contorno vermelho e removê-la, em seguida, passando o id da imagem adicionar a classe de contorno a essa imagem 

$scope.changeClass = function(id){
angular.element(document.querySelector('.some-class').removeClass('.some-class');
angular.element(document.querySelector(id)).addClass('.some-class');
}
 -4
Author: Aravind Reddy, 2017-08-22 11:43:45