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

[@rishitharajesh8878]

Awesome explanation easy way to understand thanks so much for such wonderful videos

[@lipunpatel5937]

Very informative... keep it up sir..

[@ARCTutorials]

So nice of you. Thanks for your kind words

[@karthickvickram8109]

Good Learning

[@user-glory-of-ukraine]

great tutorials sir!!! thank you very much

[@ARCTutorials]

Glad you like them!

[@kallipalliashokkumar8114]

Thank you so much bro for this tutorial

[@ARCTutorials]

Thank you for your kind words 🙏

[@tirtheshpawar9614]

Great Stuff Man! I hope you reach more and more people. Binge watching this playlist from the start for a long time now! clearing concepts! P.S. This man solves your doubts in comment section too!!

[@ARCTutorials]

Much appreciated! Thanks for your kind words and support

[@dineshguptha8225]

Yes bro waiting for live project eagarly

[@ARCTutorials]

Yes dinesh. Starting after data-binding tutorial

[@sureshmolabanti4268]

Hello Sridhar, Simply i just loved your videos bcoz the way of presenting, PPT designing and cool heart with good explanation.

[@ARCTutorials]

Thank you so much Suresh for your kind words and support 🙏

[@mumps59]

Hi there, thanks for these videos. Just wondering what the difference is between [ngClass] and [class]. If I google it, mostly I see that you can use [class] with a [class.]=boolean syntax, however from my experimentation it seems I can use the two interchangeably, at least in terms of [class]="'classname'", [class]="'classname1 classname2'"], [class]="expression", [class]="object", etc. If I 'inspect' my output I can see a small difference, but output is the same. I feel like I'm missing something obvious.

[@danielw1592]

hi Sridhar, I love your angular tutorials. I was just wondering if you had any videos on manipulating the DOM (like adding or removing classes from HTML elements from the component). Thanks.

[@ARCTutorials]

Hi Daniel. We do manipulation with just setting classes to true or false in Angular or based on a condition. I know you are trying to relate/connect with jquery sort of DOM manipulation, but no we don't do that in Angular. Its all driven by variables and conditions

[@webdevelopment9808]

In object type variation of ngClass should we use quotes for the class names inside the object?

[@ankeshanand6496]

Hello sir single and double quotes are quite confusing can u help to identify?

[@vikneshramesh3529]

Super sir

[@ARCTutorials]

Thank you Ramesh. Glad you liked the tutorials

[@kusumadhanush5765]

What is the difference between normal class in the html and ngClass

[@vivekg482]

i have 2 components , if 1st component is updated then then automatically 2nd component must updated, how can we do this, please explain?

[@ARCTutorials]

Hi Vivek. Pls follow this tutorial and you should be able to do it yourself. kzbin.info/www/bejne/qqPbn2SGfrxjfNE

[@sowmyakarumanchi2826]

👍

[@ARCTutorials]

Glad you are enjoying the tutorials 👍

[@dineshguptha8225]

Full stack developer avvataniki front end angular choose chesukunta backend suggest me bro

[@ARCTutorials]

With Angular, best advice I can give you is Node JS and Express JS

[@dineshguptha8225]

Bro front end angular tho patu backend e language suitable ga nerchukunta best bro as a fresher

[@ARCTutorials]

Hi Dinesh. For Fullstack developer with Angular, the market trend is MEAN stack ( MongoDB, Express JS, Angular and Node JS) I have playlists for the same. Keep watching them and you will learn practical knowledge

[@dineshguptha8225]

@@ARCTutorials thank u so much bro

[@0254Manoj]

This is ngClass using Method example is showing the below error "Parser Error: Binding expression cannot contain chained expression at the end of the expression [getClsName();]"

[@PelpsRoxXx]

Just remove the semicolon. It should work.

[@sunnykarthik1566]

sir difference between ngStyle and ngClass . can u explain it.

[@PelpsRoxXx]

Basically, ngStyle would be setting a style directly into one component and it's more limited in its usage, as you cannot set methods or objects to it. ngClass is a bit more wide and could be used in multiple components, if a master stylesheet is applied to them.

[@amanuellebassi7294]

Thanks, Sridhar. Please check your Buy ARC Tutorials a coffee!

[@ARCTutorials]

Thank you so much my friend. You have been supporting me from the beginning. I cannot thank you enough for your contribution. The least I can do for you, is to be available whenever you need any help or info. Please do let me know the time, we can always hop on the call quickly. Thanks again.

[@amanuellebassi7294]

​@@ARCTutorials It is an expression of a small token of appreciation for your kindness, time, and effort. Great, I will email you in the coming weeks.

[@ARCTutorials]

Looking forward to talking to you mate!!!

[@amanuellebassi7294]

@@ARCTutorialsThanks so much, my friend.

[@mayurpatil2729]

Hindi main bataon sir plz

[@ARCTutorials]

Sure Mayur. Will try to add some in hindi tutorials

[@abdulhaqsafi110]

i am creating reactive form and showing the result in console. but the result is shown in console.log below is my code. import { Component, OnInit } from '@angular/core'; import {FormGroup, FormControl, FormBuilder} from '@angular/forms'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.scss'] }) export class ProductComponent implements OnInit { registrationForm: FormGroup; constructor(private fb: FormBuilder) { this.registrationForm = this.fb.group({ email: new FormControl(), password: new FormControl(), }); } ngOnInit(): void { } // tslint:disable-next-line:typedef SaveData(){ console.log(this.registrationForm.value); } } please guide us what will be the mistake

[@rajshreelandage935]

currentClasses: Record = {}; setCurrentClasses() { this.currentClasses = { saveable: this.canSave, modified: !this.isUnchanged, special: this.isSpecial }; } how to use this using ngClass?