Geoffrey Geoffrey - 10 months ago 82
TypeScript Question

ng-class not working on

Quick question. I am trying to deal with ng-class for the first time and I am wondering what I am doing wrong.

So in my HTML I have:

<ion-icon name="logo-facebook" class="big" ng-class="{selected: facebook.selected}" (tap)="addSocial('Facebook')" ></ion-icon>
<ion-icon name="logo-twitter" class="big" ng-class="{selected: twitter.selected}" (tap)="addSocial('Twitter')"></ion-icon>

In my css I have:

page-social {

display: inline-block;


In my ts I have:

facebook = {
"selected" : false,
"type" : "Facebook"

twitter = {
"selected" : false,
"type" : "Twitter"
// reinit all to selected false
for(var i in this.all){
this.all[i].selected = false;
switch(type) {
case "Facebook":
this.facebook.selected = true;
case "Twitter":
this.twitter.selected = true;
case "Instagram":
this.insta.selected = true;
case "LinkedIn":
this.linkedin.selected = true;
case "Github":
this.github.selected = true;
this.atLeastOneSelected = true;
this.currentSocial = type;

When I click on facebook I can see the text field appearing with "Entrez votre Facebook" and in my log I have:


Same thing for twitter

When I apply the class 'selected' to the class directly it is working but with ng class it is not. What I am doing wrong?

I followed the topic here ng-class not being applied but not working for me with the '' in the class

Answer Source

Assuming you are using a recent Angular2 version (you mention typescript and ionic2) your binding needs to be [ngClass]=..., not ng-class=...

So you have the wrong property name as well as the missing brackets for the binding.

See here for documentation/examples:

According to that you might also need quotes around the CSS class names, although I'm not sure whether they are really required.