Toggle Class of the button using Angular 4

Question

I am trying to enable /disable button

App.component.html : Root component triggers on change and sets initial value.

<!--The content below is only a placeholder and can be replaced.-->
<div class="container">
<div style="text-align:center">
  <h1>
  {{ title }}!
  </h1>
  <favorite [isFavorite]="post.isFavorite" (change)="onFavoriteChange($event)" ></favorite>
</div>
<h1></h1>
<courses></courses>
</div>

app.component.ts : consists of root component consists on change function and post object

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello User';
  post={
  	title:'Pti',
  	isFavorite:true

  }
  onFavoriteChanged(isFav)
  {
  	console.log("On Favorite Changed",isFav);
  }
}

Favorite Component

favorite.component.ts

 <button  class="waves-effect waves-light btn" [class.enabled]="isSelected"
 [class.disabled]= "!isSelected" 
 (click)="onClick" >Click to {{isSelected}}</button>

favorite.component.ts : consists of onclick to toggled the class and emit the result

import { Component, OnInit, Input, Output ,EventEmitter } from '@angular/core';

@Component({
  selector: 'favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
	@Input('isFavorite') isSelected: boolean;
  	@Output() change=new EventEmitter();
   
  onClick()
  {
  	console.log("CLicked");
  	this.isSelected=!this.isSelected;
  	this.change.emit(isSelected);
  }

  ngOnInit() {
  }

}

The button is not toggling. No class change and emitter too does not emit any result.

have you tried this.change.emit(); because emit is a function? — bryan60
– bryan60, Commented Feb 10, 2018 at 21:09
Change (click)="onClick" to (click)="onClick()" in your favorite.component.ts — Daniel
– Daniel, Commented Feb 10, 2018 at 21:10
What about the console.log("clicked"), is it fired; and the button content {{isSelected}}, is it changed? — Tomas Varga
– Tomas Varga, Commented Feb 10, 2018 at 21:18

Akhil Sahu · Accepted Answer · 2018-02-10 21:47:22Z

1

Change (click)="onClick" to (click)="onClick()"

in favorite.component.ts

This is the correct answer .

Thanks @Daniel for pointing it out.

answered Feb 10, 2018 at 21:47

Akhil Sahu

6372 gold badges12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tomas Varga · Accepted Answer · 2018-02-10 21:34:06Z

0

It's not clear from the description if the onClick function is triggered at all, but as for adjusting classes in Angular setting it directly like [class.whatever]="expression" also won't work for me, instead I succeeded with this form:

<button [ngClass]="{ 'enabled': isSelected, 'disabled': !isSelected }">

answered Feb 10, 2018 at 21:34

Tomas Varga

1,44017 silver badges23 bronze badges

Collectives™ on Stack Overflow

Toggle Class of the button using Angular 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related