Class binding in angular 2

Text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss CSS Class binding in Angular with examples.

.boldClass{
font-weight:bold;
}

.italicsClass{
font-style:italic;
}

.colorClass{
color:red;
}

@Component({
selector: 'my-app',
template: `
[button class='colorClass']My Button[/button]
`
})
export class AppComponent {
}

At this point, run the application and notice that the 'colorClass' is added to the button element as expected.

Replace all the existing css classes with one or more classes

We have introduced a property 'classesToApply' in AppComponent class
We have also specified class binding for the button element. The word 'class' is in a pair of square brackets and it is binded to the property 'classesToApply'
This will replace the existing css classes of the button with classes specified in the class binding

@Component({
selector: 'my-app',
template: `
[button class='colorClass' [class]='classesToApply']My Button[/button]
`
})
export class AppComponent {
classesToApply: string = 'italicsClass boldClass';
}

Run the application and notice 'colorClass' is removed and these classes (italicsClass & boldClass) are added.

Adding or removing a single class : To add or remove a single class, include the prefix 'class' in a pair of square brackets, followed by a DOT and then the name of the class that you want to add or remove. The following example adds boldClass to the button element. Notice it does not remove the existing colorClass already added using the class attribute. If you change applyBoldClass property to false or remove the property altogether from the AppComponent class, css class boldClass is not added to the button element.

@Component({
selector: 'my-app',
template: `
`
})
export class AppComponent {
applyBoldClass: boolean = true;
}

With class binding we can also use ! symbol. Notice in the example below applyBoldClass is set to false. Since we have used ! in the class binding the class is added as expected.

@Component({
selector: 'my-app',
template: `
`
})
export class AppComponent {
applyBoldClass: boolean = false;
}

You can also removed an existing class that is already applied. Consider the following example. Notice we have 3 classes (colorClass, boldClass & italicsClass) added to the button element using the class attribute. The class binding removes the boldClass.

@Component({
selector: 'my-app',
template: `
[button class='colorClass boldClass italicsClass'
`
})
export class AppComponent {
applyBoldClass: boolean = false;
}

[anhkhoa]

The way you explain this topic is much more comprehensive, and deeper than many Udemy courses. Thanks a lot, Sir!

[alritedave]

Thank you sir. You go at such a pace that I can easily remember the past tutorials. Thanks

[deepakgarg]

Hi Sir. First of all your speaking style is awesome. Thanks for these tutorial. Please let me know that ngClass is used to bind all styles classes with the function so that we would be able to use in the view in one go.

[inevitable.m]

The styles we are binding to html from typescript are not removing the hardcocoded styles, both class styles and html class styles applying may i know the reason

[TheINTERLECT]

I see that throughout the tutorial you are demonstrating class binding with property binding. Can you achieve the same thing using Interpolation?

[bhagwantsingh]

ThankYou Sir For Angular 2 Tutorial Series.

[shaileshbhat]

Thanq very much Sir....Right time you posted Sir...

[ashikagothi]

Hi
Can we bind class using interpolation also ? Or property binding is the only way ? And one more confusion, class is an attribute, so why its is not attribute binding ? How can we do property binding with class attribute. ? Please reply asap

[saptashwachakrabarti]

Sir, in your earlier video you told that the function in Angular 2 can be written like

getFullName(): string {
return this.firstName + ' ' + this.lastName;
}
But here you are giving the definition of the function like,
addClasses(){
//TODO Text
}

So what is the difference between this two definition types??

please elaborate....

[vasamsetti]

Sir I have a doubt i.e., ngClass is applicable only for style.css ???

[ZenOfTube]

FYI, I get an error telling me ng-class isn't a known property of button, which I solved by adding the attr. prefix to the ng-class attribute within the binding brackets. One issue I still have is that for the first button where the colorClass should be removed, I still get the colorClass in my generated HTML. Is that because I am using Angular 9 at this point or did I miss something?

[psreenu]

it is very good sir i am waiting for coming videos

[krishangopal]

I have a question, How to add class in ".bold-class" this format in add multiple class function?

[pranavpandey]

Getting 'Template parse errors:
Can't bind to 'ngclass' since it isn't a known property of 'button'. '. Here my template is in another html file . Can you please suggest the cause?

[ashu]

Is this tutorial helpful for java people

[AmanYadav-fetk]

hlw sir ..what should learn before angular js or angular 2

[sunnyRVrocks]

Sir, Please post life cycle hooks in angular 2.

[inevitable.m]

template:`<button class="float" [class]='fontClass'>
checkit
</button >`,

The float is hardcoded in css sheet fontClass is not removing the float

[sudipupadhyay]

in the develeoper tools in elements i can see the italics class and bold class, but MyButton is still not bold or italic, what the issue, can anyone help?

[mengtrikea]

could you show me about user online with codeigniter