I was experimenting with Angular 4 to create an image gallery. The idea is to assign a CSS class to the clicked image, which will display a red border around it. Below is the CSS stylesheet for this image gallery.
When I click on an image, I want a red selection square to appear around it. The 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;
}
Here 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>
Below is the component code:
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';
}
}