Add class to an element in Angular 4

Question

I was trying to create an image gallery with Angular 4.The logic behind this is to add a Cascading Style Sheet (CSS) class to the selected image that will show a red border on the selected (clicked) image. This is the CSS stylesheet for an image gallery.

I want to show a red selection square on the image I have clicked. this-is-a-class should be added to the selected image.

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

following is the template code

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

The component code is as follows

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

Use [ngClass] and conditionally apply class based on the id.

In your HTML file:

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

In your TypeScript file:

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

Answer 2

Here is a plunker showing how you can use it with the ngClass directive.

I'm demonstrating with divs instead of imgs though.

Template:

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