Angular 9 Tutorial For Beginners #16 - NgClass

Angular 9 Tutorial For Beginners #16 - NgClass, Angular Tutorials NgClass, Angular NgClass, Angular 9 NgClass, Angular tutorial learn NgClass, angular 9 NgClass tutorial, angular 9 NgClass examples, Angular application folder structure and Angular boot process.

Angular 9 tutorial for beginners, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular introduction, angular version history, angular full tutorial series, best angular tutorial.

Install bootstrap angular tutorial, Learn how to install Bootstrap in Angular 9 app. In this course you will learn how to create small, medium, large applications with Angular 9 in this development tutorial.

Part 1: Angular Introduction and Version History

Part 2: How to upgrade to Angular Version 9

Part 3: How to Install Angular CLI and Run Angular Application

Part 4: How to Install Bootstrap Framework in Angular 9 application

Part 5: Understanding Angular Folder Structure and Boot Process

Part 7: Angular CLI - Complete Guide

Part 8: Angular Modules

Part 9: Angular Decorators

Part 10: Angular Components

Part 11: Angular Directives

Part 12: Angular NgIf

Part 13: Angular NgSwitch

Part 14: Angular NgFor

Part 15: Angular NgStyle

Part 16: Angular NgClass

[shishirdkm]

You are the best teacher available on online platforms

[sreenuksr]

notes of this session

- ngClass is is directive which is used to set the class name for DOM elements
- [ngClass]=""
- Examples:
- simple using static class name
<div [ngClass]='one'>Example Of ngClass</div>
- dynamic- from the component
<div [ngClass]='clsOne'>Example Of ngClass</div>
- array classes - to pass more than 1 class - we use an array
<div [ngClass]="[clsOne, clsTwo]">Example Of ngClass</div>
- ngClass with expressions to true or false
<div [ngClass]="{'one':false, 'two':true}">Example Of ngClass</div>

[SaiKumar-jmww]

Hi Sir, What is the use of ngStyle or ngClass When we have component.css to style?

[amannavasap]

The notes are really helpful...helped a lot!!!

[EzeWaffle]

Hi,
I started following your tutorial a week ago and it's really nice !
I've started typing my own notes (roughly the same thing as you), but lost the file.
Is there any way you could share the notes file you've been writing during these videos somewhere so we could keep it as a cheatsheet ?
Thanks for everything and keep up the good work !

[salluridilip]

Thank you so much sir lots of tutorials I searched in you Tube. But I am satisfied and I am able to understand it thank you so much

[puttypg]

Could u please show us how work on stories by using angular

[ponvarshini]

Hi bro, How to change div color by using ngClass with Boolean condition based on particular url page. Can u help me to perform the above task in html and typescript.

[coolaman]

Can we give ngClass and class like this
Ex <div class="one" [ngClass]='{'two': true}">
???

[josbexerr]

Excelente gran maestro....gracias saludos desde los andes peruanos

[artisticallyfoodie]

What is the difference between Ngclass and NgStyle. I think both are giving same feature?

[mithileshpandey]

How to Access/Use/ Call Stored Procedure in Entity Framework Core 3.1 using Database First Approach C#

[shivamagarwal]

Hi,

I tried ngClass expression with dynamic parameters, but it is not working.

Not Working (No css is applied, just simple text is shown clsName='one', clsName='two')
<div [ngClass] = "{ clsName:true, clsName2:false }">
Learning ngClass with expression
</div>

Working
<div [ngClass] = "{ 'one':true, 'two':false }">
Learning ngClass with expression
</div>

[CodeWithJamil]

Sir i have a problem could you help me plz

[kishoredeshpande]

Hi, currently I'm using ngClass to highlight the table row when a row is clicked.
now if I click the same row I want to remove the ngClass applied, i.e. remove highlighting on row
Pls help me out with this


<td [ngClass]="{'data-selected': rowClickId ===