Angular ngClass and click event for toggling class
AngularAngular Ng-ClassAngular Problem Overview
In Angular, I would like to use ngClass
and click event to toggle class. I looked through online but some are angular1 and there isn't any clear instruction or example. Any help will be much appreciated!
In HTML, I have the following:
<div class="my_class" (click)="clickEvent($event)" ngClass="{'active': toggle}">
Some content
</div>
In .ts
:
clickEvent(event) {
// Haven't really got far
var targetEle = event.srcElement.attributes.class;
}
Angular Solutions
Solution 1 - Angular
This should work for you.
In .html:
<div class="my_class" (click)="clickEvent()"
[ngClass]="status ? 'success' : 'danger'">
Some content
</div>
In .ts:
status: boolean = false;
clickEvent(){
this.status = !this.status;
}
Solution 2 - Angular
Instead of having to create a function in the ts file you can toggle a variable from the template itself. You can then use the variable to apply a specific class to the element. Like so-
component.html -
<div (click)="status=!status"
[ngClass]="status ? 'success' : 'danger'">
Some content
</div>
So when status is true the class success is applied. When it is false danger class is applied.
This will work without any additional code in the ts file.
EDIT: Recent versions of angular require the variable to be declared in the controller -
component.ts -
status: boolean = false;
Solution 3 - Angular
Angular6 using the renderer2 without any variables and a clean template:
template:
<div (click)="toggleClass($event,'testClass')"></div>
in ts:
toggleClass(event: any, className: string) {
const hasClass = event.target.classList.contains(className);
if(hasClass) {
this.renderer.removeClass(event.target, className);
} else {
this.renderer.addClass(event.target, className);
}
}
One could put this in a directive too ;)
Solution 4 - Angular
ngClass
should be wrapped in square brackets as this is a property binding. Try this:
<div class="my_class" (click)="clickEvent($event)" [ngClass]="{'active': toggle}">
Some content
</div>
In your component:
//define the toogle property
private toggle : boolean = false;
//define your method
clickEvent(event){
//if you just want to toggle the class; change toggle variable.
this.toggle = !this.toggle;
}
Hope that helps.
Solution 5 - Angular
If you're looking for an HTML only way of doing this in angular...
<div #myDiv class="my_class" (click)="myDiv.classList.toggle('active')">
Some content
</div>
The important bit is the #myDiv
part.
It's a HTML Node reference, so you can use that variable as if it was assigned to document.querySelector('.my_class')
NOTE: this variable is scope specific, so you can use it in *ngFor
statements
Solution 6 - Angular
We can also use ngClass to assign multiple CSS classes based on multiple conditions as below:
<div
[ngClass]="{
'class-name': trueCondition,
'other-class': !trueCondition
}"
></div>
Solution 7 - Angular
If you want to toggle text with a toggle button.
HTMLfile which is using bootstrap:
<input class="btn" (click)="muteStream()" type="button"
[ngClass]="status ? 'btn-success' : 'btn-danger'"
[value]="status ? 'unmute' : 'mute'"/>
TS file:
muteStream() {
this.status = !this.status;
}
Solution 8 - Angular
So normally you would create a backing variable in the class and toggle it on click and tie a class binding to the variable. Something like:
@Component(
selector:'foo',
template:`<a (click)="onClick()"
[class.selected]="wasClicked">Link</a>
`)
export class MyComponent {
wasClicked = false;
onClick() {
this.wasClicked= !this.wasClicked;
}
}
Solution 9 - Angular
You can try this.
Html.
<button *ngFor="let color of colors; let index=index" class="example1"
(click)="selectColor(index)" [class.choose__color]="viewMode == index">
<mat-icon>fiber_manual_record</mat-icon>
</button>
css.
.example1:hover {
border-bottom: 2px solid black;
}
.choose__color {
border-bottom: 2px solid black;
}
ts.
selectColor(index: any) {
this.viewMode = index;
}