I am currently developing a web app using Angular 2. I'm facing an issue where the active element should receive an extra CSS class when clicked, but adding the ":active" CSS attribute with a custom class doesn't work as expected. The ":focus" property also doesn't seem to be working properly. I've tried using Angular 2 directives like Ng-click, ng-switch, ng-if, and ng-class to no avail.
Here's the code snippet so far:
<footer>
<div class="thumbnail-slider">
<div class="thumbnail-img-container">
<img class="thumbnail-slider-img" (click)="getActualImage(url)"
*ngFor="let url of urls" [src]="url"/>
</div>
</div>
</footer>
The component code:
import { Component, NgModule, Input, Output, ViewChild, EventEmitter, ElementRef, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import { BrowserModule, DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Http, Response, ResponseContentType } from '@angular/http';
ReqConstImages } from '../../services';
import { Subscription } from 'rxjs/Subscription';
import { Subject } from 'rxjs/Subject';
import { ObservableUtility } from '../../helper/index';
import { trigger, state, style, transition, animate } from '@angular/animations';
let css: any = require('!raw-loader!less-loader!./thumbnail-slider.less');
@Component({
selector: 'thumbnail-slider',
templateUrl: 'thumbnail-slider.html',
styleUrls: [css],
animations: [
trigger('click', [
state('inactive', style({
border: '5px yellow solid'
})),
state('active', style({
border: '6px green solid'
}))
])
]
})
export class ThumbnailSliderComponent implements OnInit, AfterViewInit, OnDestroy {
constructor(private http: Http, private sanitizer: DomSanitizer, private observableUtility: ObservableUtility) { };
}
It may not seem like a major issue, but I haven't been able to find the right solution yet. Any tips or guidance on how to add an additional CSS class to the clicked element in Angular 2 would be greatly appreciated!