Angular Tutorial - 7 - Class Binding

[@marcodelpercio]

You are really good at explaining things. Thank you for these videos on Angular. That difference you explained at the beginning is SO important to avoid confusion. You really know what is the best angle to explain a concept

[@jaypatel2471]

still in 2024 , this is the best course i have ever seen for Angular, i hope sir you make it for angular 17.

[@omerdoron1110]

This is the best tutorial I found for Angular. thank you and keep uploading videos!

[@allnoyz7895]

Absolutely agree with you!!!!

[@ffsecretagent3276]

Same to me

[@IndianYakker]

2:00 -2:15 , In my case codevolution is showing in green with Italic , its mean I can use both in same time. Codevolution

[@debarshibhattacharya9141]

Same for me, I think in later version of Angular this thing is added

[@shahidparwez3187]

you are one of the best tutors I found for angular on youtube...

[@PabloBvch]

I could use both without problems. Codevolution Maybe because it works in my version of angular.

[@StripesChaosGremlin]

Can confirm this is the case, given that this was done in 2017 it wouldn't be surprising if something has changed so that you can now do both and have them take effect.

[@mrcMiracle]

Both too

[@anupamr437]

Same for me, regular class attribute and class binding both are working.

[@quasi_verum]

seem working in the new version of angular.

[@panimuthyam5780]

@codevolution pin this comment

[@KaushikGanguly72]

Using multiple class both classes impacts now.

[@shahazhanatova2185]

you are literally the only person that makes me understand Angular

[@cedrics7374]

I love how you cover every aspect so methodically. This is quality material! No pun intended :)

[@senthilbalakrishnan6098]

Excellent Tutorial which I saw in the youtube. you are one of the best tutors I found for angular on youtube..

[@sugathganegoda]

Viswa, Thank you very much, I am currently into the seventh tutorial, indications are that I would be up the whole night all the way, the greatest online for Angular so far. Awesome.

[@PABackpacker]

Great videos so far. Moving from AngularJS (1) to Angular 6. Nice to get a refresher and see what is new. Helpful. Thanks!

[@mahabuburrahman8155]

you are just awesome.... a great person who knows how to teach in an effective way!!!

[@najimali32]

Hey , at 1:35 when we are using both class attribute & class binding , my output shows green & italic style.

[@natalyshulzhenko8237]

This is the best tutorial I have watched! it really helped a lot with understanding complex things

[@kholoudaldeyarbi5161]

In Angular 8 Hello Angular Italic and green color applied to the text , not like in the video !!

[@shivaprasadgurram]

Agree, In Angular 8 {{site_url}} applied italic and green. @Viswas your videos are too good. But re-check few things when changing title to 8.

[@keralacodingacademykca4597]

Yes Indeed

[@aviet90]

In latest angular it supports

[@dexterdofus435]

in angualar 9 is support

[@rukhsarqawi7697]

Yeah same here

[@DriveandThrive]

I love your tutorials I know this is old but very valuable still. Thank you

[@divyachandana]

Great explanation of each and every concept in detail. Thanks a lot for the help. :)

[@ruma9338012757]

I am damn sure that your channel will reach 1 million subscriber very soon because of your teaching style

[@uppuuppu1]

Best tutorial I ever watch. Thanks

[@ONEHLOFIOCHIOCHEME]

thank you Vishwas, i used both class attribute and class binding on the h2 element and both worked. could it be a case of newer versions in angular?

[@sanskar_choudhary]

2:02 I didn't understand this point. What is dummy attribute?

[@Wael100]

Oh, man, your knowledge is so deep. I just subscribed!

[@lmrclo]

Hi! greetings from Chile! first of all thanks a lot for your dedication and patience, and I'm doing this on the year 2020 and for my works Text you wantshowing italics and green color a the same time Do you know why? just curious about.

[@praveshthakur777]

In present versions there is error when we bind property using [ngClass] , so before it remember to add CommonModule in the component.ts file of that component. as imports:[CommonModule],

[@Patryc]

Coming from a background in React, this all does not seem very robust. What, if any, build time checks are available for ensuring class bindings and interpolations are valid? Is it possible to enable any intellisense for writing bindings?

[@superchannel5860]

you are really good sir , you clear all concept now I have no confusion. Please make a video on how to upload a website made in angularjs and php

[@Lmao-ke9lq]

2:10 well...for some reason.....both are aplied for this h2 tag..so it works for me..

[@AdrianA-yo8jd]

did anyone else notice when using class binding on Angular 10 that when binding the class to an object, changing the boolean of that object doesn't reflect the change in HTML? It's as if once the classes are loaded they're static. But if I put the object inline it works

[@akshaymeena4159]

felt so

[@sheetalshelke679]

Hi..pls let me know from where can I get this this angular material in text format?

[@ahmedfarag8492]

in angular 11 the binding class will be dummy and it will create only the regular class

[@PareshRao]

Superb tutorial with really very good practical examples...

[@walterwhite1186]

Thanks a lot 👏👏👏👏👏❤️

[@geo_mukkath]

I have added the css code to the css file of test and it's not working as expected. The colors are not getting applied nor is the italic text. Is it that if we include inline style in test.component that we get the expected results ? Pls help.

[@chivalrous_chevy1163]

Keep on rocking in the free world, wooo

[@kakashitv4865]

you sound like @pewdiepie!! good tutorial btw!!

[@laughoutmeow]

in the end he has both text-success and text-danger set to true. Why in this case the text-danger overrides text-success? Arent they both using class binding? My guess is because in thge messageclasses text -danger came after text-success?

[@rishukumar7586]

since class is not a property of a dom element how come we are able to use it as a property binding ?

[@shrutiingale9618]

in angular 5 Text in this i am getting a error which says that it can't bind to 'ngClass' since it doesn't know the property 'h2' what should i do? i am not getting any solution.

[@geethasamynathan6598]

instead of writing messageclasses in component try the below code in html. Binding -Class it is working

[@adnankhuwaja1234]

simple class and class binding both are working in same element

[@manusha5940]

hello sir...I got the output correct even same like by creating object how I got ????that you are said we cannot ?? don't try to type it!!!!!

[@Ryuudo123]

writing all the html in the ts file template area >

[@Codevolution]

Did not want to switch between files for simple concepts :)

[@Ryuudo123]

yes i just saw the explanation in a previous video. thanks.

[@guitar602991]

great videos , thank you

[@shikhapareta5419]

For me If there is an error this line will be in Red. , this statement is not evaluating the condition check, whether haserror is true or false, for both true and false it shows the text in red. Please help!!!!

[@ananthuskumar1286]

check if hasError=true; not "true"

[@akshaymeena4159]

same problem I am facing changing hasError is not reflecting in output

[@calvinzhu7438]

It should implement ngClass in Angular 7!

[@Sachin-qc7nd]

[class] can also be used to invoke a function , then why [ngClass] is used

[@mohsinriaz4827]

[ngClass] for objects method. If you will use [class] for objects method then it will not work

[@VIjayKumartheh2o]

@@mohsinriaz4827 Thanks for the clarification

[@AhamedKabeer-wn1jb]

Well explained bro....

[@abhimanyurathore7185]

Somebody Help! Why are we using expressions like hasError and isSpecial when we can directly set the values of class to true or false... Another thing when this syntax works perfectly || class="text-special" || why are we using || [class]="expression" || and defining it in the class to the respective class or (true and false)????

[@shaik_mohammedimran]

It is very useful but how to make this in mouseover event I want the bgcolor is primary color by default If I hover then it wants to change from primary color to orange color Please help in this

[@kathiravant1668]

nice explanation

[@sajans5377]

Usually when we give ng serve it starts running the code of app.module.ts, how we switch to the new component test.component.ts file and run it ?

[@tiredoftheliesalready]

First off, you do not run components, you run modules. In order to see the component, you would add it to the project, and include its selector under the main application root (usually set up as the *app.component.html* file by default).

[@orz5516]

why not use regular style classes and put them in a css file ? what's the advantage of this? in my opinion, it makes the component messy to mix it with css but mayb i'm missing something... you can apply classes regularly (like in angularJs etc...) Hello and in css file : .myGreenText { ... ... ... }

[@nahaing]

One More thing i need to clear? Why we can't use more than one class in class attribute like " Nahaing " ?

[@nomanahmed7646]

sir i want to ask that is this an angular 6 tutorial???? bcz i am little bit confuse bcz when i saw some video so he is working with angular 5

[@Codevolution]

It works with version 6 as well :)

[@nahaing]

Why we can't use more than one class in class attribute like " Nahaing " ?

[@SamSam-rg4lk]

you can do it by writing this:

[@saeedahmad3809]

Thank you

[@zeusaurel6714]

How does he time his last words with the end of the video so perfectly in EVERY video????

[@jovictor3007]

Have you ever used a video editing app ?

[@zeusaurel6714]

Hold on brb

[@ivandrofly]

Thanks

[@piyushkumarsingh8926]

Mine looks notNice tutorialng like the way you guys started it would be amazing if soone told how to get the multiple tracks

[@mickedansar]

Hi! I don't get in messageClass how a class is added or not depending on this.haserror. what does this code do: {text-succes: !this.hasError}?

[@ashwanisekhar2496]

public messageclasses={ "text-danger":this.haserror, // as declared this.haserror i.e "false" "text-success":!this.haserror, //means not this.haserror i.e "true" "text-special":this.special // as declared this.special i.e "true" hence through ngClass only text.success and text.special will be applied ie "green+italic"

[@shashidaradk1427]

@@ashwanisekhar2496 don't give hasError="true" it should be hasError=true. Don't put it inside double quotes as it is treated as text not boolean.

[@hakimfazal426]

is it necessary to learn both angular and react? some body help me please.

[@tiredoftheliesalready]

Necessary is defined by what you want to do, and what your job is to do. No language is necessary to all developers, nor framework, nor code style.

[@manikumar1662]

getting below error when I use ngclass,can anyone please help me Can't bind to 'ngclass' since it isn't a known property of 'h2'

[@inhquangtien3844]

hi Mani Kumar, correct me if I wrong. It seems that the syntax for this property incorrect. The 'c' character in [ngclass] property is uppercase like that: [ngClass] not [ngclass].

[@strangelylookingperson]

Thanks!

[@miteshkumawat3623]

Code Ninja public messageClasses = { "text-success": !this.hasError, "text-danger": this.hasError, "text-special": this.isSpecial } This code doesn't work for me. Please suggest.

[@geethasamynathan6598]

same for me too instead of writing messageclasses in component try the below code in html. Binding -Class it is working

[@sonahayrapetyan8588]

thank you!

[@benb6813]

thank you so much

[@sillapriyadarshni7255]

better to write 0/1 than true false in boolean

[@ai.aspirations]

thanks much

[@suprakashpal8592]

hey when i did this public hasError = false; public isSpecial = true; public messageClasses = { "text-fail": !this.hasError, "text-success": !this.hasError, "text-special": this.isSpecial } the result is red. Why? Here "text-fail" and "text-success" both are true. [after 5.45 mins]

[@ravikant.chaudhary]

Because the second class gets preference over first one. Change the order of text-fail and text-success in messageClasses. You will get it as green

[@idlevandal69]

Phenomenal....

[@hendrapurnama3548]

is good tutorial

[@marcodelpercio]

I wish you had a tutorial series on Gradle with Eclipse. All the tutorials I found really suck or the author is completely crap at explaining

[@parthjangid3587]

You are damn good , thank you so much

[@tacticaltrooper2002]

Codevolution : As you can see the h2 tag is NOT in italics... Me : But my h2 tag is green and italics.... Code successfully failed

[@shadowind30]

This video is outdated, that's the problem

[@hassannasir1564]

please give me task for practice

[@kidoo1567]

4:21

[@shubhambhake6903]

kindly simple words and make simple statement while explaining code...most of word are high for beginer.

[@brandonflorida1092]

So, you show us what putting square brackets around the word class does, but never tell us what enclosing it with square brackets means. Also, you show us what ngClass does, but never really say what it is. I think I get it, but introducing terms by simply starting to use them without ever defining them is poor teaching. That being said, you're still a better teacher than most other people making educational videos on KZbin.

[@vinayn9110]

I actually like the way he goes through what you can do with each command. Previously I have been watching tutorials on Udemy, they helped me understand the basics, but I got frustrated that they did not explain all the ways you can use a command. For me what he is doing is not poor teaching. I can get through his course in about 10 days, which is much better than the slow pace of other courses. These slower courses however are good to start with, maybe you need to look at the Udemy course by Maximilian Schwarzmüller.

[@tiredoftheliesalready]

So, you want him to spend time explaining the deeper workings of Angular, rather than explaining how to use the common pieces therein? Why should he explain bindings in-depth in a course that is meant to get people producing and understanding basic concepts, when that is an advanced topic that most people will never actually recall or use in their daily work? Of the 40+ developers in my old department, only two of them ever needed to know the in-depth, and that is because they were writing custom directives and attributes. He is not a poor teacher; he is effectively teaching what his course set out to do, without bogging down the watcher with effectively useless (and confusing) details that will not impact them in any manner. Even now, four years later...it is still only those two developers needing to know the "plumbing" of Angular, although the department now has over 60 developers.

[@bruhaspati560]

its a good idea to write 1 and 0 instead of "true" or "false" !!

[@songlee8456]

5 🌟

[@Ryuudo123]

Title says class binding so i thought it was a typescript class, but you actually meant css classes

[@CodingByAmp]

thank you bro.

[@appalarajusimhadri2935]

good explanation