ngClass Directive in Angular | Directives | Angular 12+

[@gabrieldonizettidario6169]

This one is interesting too. Good job!

[@lacertezzadellapena]

For some reasons on my side It works only with 'fadeOut' [ngClass]="{ 'fadeOut': displayNotification }" with speech marks, otherwise it throws error. Anyway, thank you very much for your service. Looking forward to learning with the rest of the course.

[@procademy]

If there is a hyphen or space between your CSS class name e.x. fade-out, then it is required to include it withing quotes, otherwise it will throw error. But if there is no hyphen or space then it should work fine.

[@lacertezzadellapena]

@@procademy It was the hyphen indeed! I did use fade-out, but why this kind of issue? Thank you so much for the channel again

[@procademy]

@@lacertezzadellapena we specify the class name and the condition for that as a key-value pair inside curly braces. So basically we are creating an object which has a property with the class name. Now a property name of an object cannot have spaces or hyphen in it. If we want to use a space or a hyphen in property name, we need to wrap it within quotes.

[@lacertezzadellapena]

@@procademy thank you very much for explaining it so clearly

[@JaySharma8878]

it is fading out but the search input should take its space right? there is an empty space after closing the notification

[@iNestchandan]

Where are all lectures after Lec no. 22 of eShopping?

[@mightyprogrammer2899]

.fadeOut { visibility: hidden; opacity: 0; transition: 0s 2s, opacity 2s linear; } this is the code if you are using external css styleUrls

[@ADA-yl3dm]

NG8002: Can't bind to 'ngСlass' since it isn't a known property of 'button

[@shahidshaikh148]

".fadeOut {visibility: hidden; opacity:0; transition: visibility 0s 2s, opacity 2s linear;}"

[@bohthard5723]

can i get the source code because i want to modify and see how it works

[@urwrong108]

add class renderer you would have shown

[@amoghchavan970]

just like dom manipulation in js

[@jayakumar2927]

github link