CODEWITHSUNDEEP
angularblur
Vinay Dangwal
Vinay Dangwal

Reputation: 27

How to blur the span attribute in angular

I want to blur the span element having test "Blur me" whenever I click on checkbox

html file

 <input (click)="clickbox()" type="checkbox">
 <span>
   <span class="blur"> Blur Me </span>
   <input [disabled]="ischecked" type="month">
 </span>

TS file

ischecked = true;
clickbox() {
  console.log(this.ischecked);
  this.ischecked = !this.ischecked;
}

Upvotes: 0

Views: 912

Answers (4)

Ruslan Gataullin
Ruslan Gataullin

Reputation: 458

In your html:

<span [class.blurred]="isChecked">
</span>

And add a class into styles with the following code:

.blurred {
    color: darkgrey;
}

Upvotes: 2

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

you can use ngClass directive to toggle a class like this 👇

 <span [ngClass]="{blur:ischecked }" > Blur Me </span>

Upvotes: 0

Santosh Shinde
Santosh Shinde

Reputation: 1212

Try this component.html

<input (click)="clickbox()" type="checkbox">
 <span>
   <span [ngClass]="(!ischecked) ? '': 'blur'"> Blur Me </span>
   <input [disabled]="ischecked" type="month">
 </span>

component.css

.blur {
  opacity: 0.5;
}

component.ts

clickbox() {
  console.log(this.ischecked);
  this.ischecked = !this.ischecked;
}

Upvotes: 1

Gourav Pokharkar
Gourav Pokharkar

Reputation: 1648

Update this line in code

<span class="blur"> Blur Me </span>

to this 

<span [ngClass]="{'blur': ischecked}"> Blur Me </span>

Upvotes: 0

Related Questions