Angular 10 Tutorial #23 - ngClass in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in the last episode we learned about ng style which is a way to set css properties directly to the dom elements think of it like an inline styling in your angular application today we are going to learn about ng class using ng class we can provide a class name to a dom element and we can directly set that particular style properties using classes the advantage is that we can reuse the code multiple times to different elements so if you are building a common theme or a style sheet so you can have the same look and feel reused throughout your application using ng class welcome back friends this is part 23 of the angular complete tutorial playlist i am planning around 100 tutorials for you in this particular series that will include the live projects also so make sure that you stay tuned the tutorial link and the do to pass tutorial series are all in the description box below make sure you check it out all right so so far uh we have covered all these topics in our previous episodes so make sure that you have checked them out because we have covered them in detail with examples and you don't want to miss on them make sure that you have continuity in learning so that way you would be able to master angular today we are learning about ng class and this is episode number 23. all right so ng class is yet another directive just like ng style through which which we can apply to any dom element and provide a class name right we can set more than one class name using ng class right so we can pass a string we can pass array we can pass an object or we can pass a component method also right so that also we can use now these are some of the examples uh how you use um using a simple string or with an object right so that we can based on the conditions we can set or reset right so that being said let's jump into hands-on again uh before we go there i request you to kindly subscribe to my channel so that you get notifications and you follow the series thank you in advance all right let's get started uh first thing um so what we are going to do in the uh app.component.html i'm going to throw in a div right um so let's make some notes also maybe for you so number 23 we're learning about ng class right so first ng class is a directive used for setting setting the class name of a dom elements right now um we can provide more than one class names right using obviously ng class right we can pass we can pass strings we can pass array right and we can pass array values we can pass objects right so there are multiple combinations of how you can use ng class so let me show you all of that first let's get started you write it in square bracket just like ng style you write ng class with c capital and here make sure you write it in single quotes right so yet another common mistakes that people do not not writing incorrect quotes right in single quotes or double quotes that's a mistake not putting ng class in square brackets right that's another mistake that i have seen people do this is ng class example okay now since we have given c1 i already have a simple c1 defined here in my css which is background color red and color white right so let's see this in action um so when you go here it says this is ng class example right so this is yet another example now let's change it a little bit so instead of red let's make it purple now you would see this will become purple right because i have changed it in the class so that is an advantage of using a class right a lot of times people use why do we need to use a class right so using a class we can always we can reuse the same code i use the same code for multiple dom elements right like how i have used it here for header and this heading right so i'm using same class so if i change anything in one css it would obviously um it would it would reflect everywhere else right so let's say equal marine right now see so this has changed now i say font size to be black now see so that's how easy it will become for you to change the theming of your application when you use classes so this is first style where we are using the value and make sure that you are using it as a string right this is what we are using as a string now let me show you how to pass multiple classes so here i am passing c 1 space c 2 that means i am passing c 1 class as well as c 2 class so now you see the second example is having blue color the first one is having black because the first c1 will set the color to aqua background and color here it will override and make it blue so see the second one is blue right even better example let me throw up the font size right so 30 pixel so see right this is increased so it is applying both the styles right c1 and c2 right so that is second example in the first example we passed a string in the second example we are passing multiple classes right ng class multiple classes example now let us say we want to have a dynamic value we do not want this right we do not want a static value we want a dynamic value so what do we do we give a variable name and say style cls problem right any name you can give any name to that doesn't matter but make sure that whatever name you give here is the one that you define in your component and here i'm saying i'll define a new class c3 right you can give any name you want now we need to define c3 c3 here i'm saying background color should be i'm very bad in picking colors but i'm sure you guys can show me your creativity right so we have i have defined a new class c3 and that is what is coming from the app component class so here i have defined a very variable assigning a value c3 right in the app component.ts file all right so now we have it here and here i am saying equal to variable so let's see the output here you see this is example 3. i know it's looking cluttered but the reason i'm doing it here is because i want all of you to have the same code in one place which can act as a reference for you and that's exactly why i'm putting all of this in one place i know it looks little messy right now but soon we'll be doing live project um so we will refactor it there entirely brand new don't worry all righty that being said let's bring this back to normal i'd say 16 pixel or something right so you have ng class which is the third example of what we saw now a lot of times common mistake that they do is they will you will use right using codes codes for variables right now that doesn't work boy because when you pass codes right if you put it this in codes it will think this is a class name it will not work it is correct it is syntax is correct because it's thinking that it's a class name but it's not class name it's a variable name right this is the variable this is the variable this is the name of the class right which is in your here in css right so you can say this is the class name that is you're applying here it's not a class name it's a variable which is in your app component right so you will just pass it without quotes then it will think that yes it is a variable so it has applied brown color right this is use case number three right using variable right now the fourth one is you can put some conditions to it in an object right so for example you can take this and now i am going to define one more variable and i will say condition class prop equal to c4 right and take this and here i will come and say if is equal to equal to c4 then apply c4k class or else apply c5 now see what we are doing here we are saying that now this is class name that's why it has to be in quotes this is a condition this is a variable that's why it's not in quotes okay here i am saying if the condition class property is equal to equal to c4 apply c4 class else apply c5 now see this is using conditional property now go back here it says there is no class right that is because we haven't defined c4 and c5 let's throw in those values with quickly with some so this is really interesting because there are so many use cases right that you are seeing now so you can understand that there is no one single way to do things if someone tells you that there is only one single way to do please don't believe them you can you can use your logic in any way that you want and it's all correct it's totally fine yes there might be performance issues sometimes but that's not the point we are learning today right the idea here is we are just beginning out we are starting to learn let's continue doing that all right so now i have c4 and c5 class names so now the condition says if the property is c4 add c4 class else put c5 class so now it is applying the c4 class the light brown color this one or let me throw up some dark color right red now it will become red right so this is c4 class right so what happens now okay all right so this is c4 right so you can see that there is a green color and white color background color so now let's change the value in the component here instead of c4 i am making it c6 and now the condition but our condition is if it is c4 apply c4 else apply c5 so now you see it is applying c5 because it's not equal to c4 it's some other random value right it's not c4 that's why this is purple color that's what is in our c5 class right so this is using conditional right conditional check right all right so one last um so you can also use object to set right so if you are getting confused don't get confused this is absolutely very very simple uh you know very very easy stuff okay so you can say c4 is true comma c5 is false or you can put multiple um you know criterias so you can apply now let me put one more just i'll add just a paragraph so that this is true object so i'm putting this so that you get a sense that it can apply multiple classes right so c4 and c5 now let's see so for now i'm going to change this back to font size and make it 30 pixel so now you see this is class c4 is background green and white this is green and white and it is applying c5 that is font 30 pixel right these are bad examples but you get an idea right you get the clear idea that how you can use using object right so this is using object so see we learned five different ways of how you can use right so let me move it to nodes so for your reference here right so hands-on examples right so here you see we are use passing a class name it should be in double quotes this is number one next we are passing multiple values that is c1 c2 you can pass anything c3 c4 etc etc doesn't matter okay then you have number three you have ng class which is style css property that means now i am passing a variable right dynamic variable fourth we are passing conditional operator right which is conditional check here right and last but not the least we are using ng class as an in using an object now right so you can set true false property like this and you can switch on switch off the class names accordingly right so these are the real-time use cases that you will find yourself using ng class right you can also use using method right so you can also return a method and do that also let me just quickly show you that also as a bonus so copy this so i'm just copying because i don't want to waste too much time typing rather make it interesting right all right so here we can say get class cls name right and this is your method this is using method right let's implement this and go to component and define the method and say return c3 all right so simple this is a class name which would return you the class name so let's just do it here all right so this i'll leave it as an example to you try this out right try try out the method returning class name right to ng class it's a simple code you should be able to get it working all right cool so these are the six in-depth way that i have taught you make sure you try it out let me know if you have any doubts i'll be happy to help you right thank you so much for joining and we'll see you in the next um episode where we will learn about data binding and once we do data binding uh we will start our live project i'm so looking forward for that i'm sure you too so stay tuned thank you so much for your support as usual if you like my work please do like the video do subscribe to my channel and if you really want to help me please buy me a coffee at buy me a coffee dot com slash arc tutorials thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 7,055

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular 2021 full course, Angular ngclass tutorial

Id: 9zAbM1EUbRE

Length: 16min 51sec (1011 seconds)

Published: Mon Nov 16 2020