What is the equivalent of ngShow and ngHide in Angular 2+?

Question

I have a number of elements that I want to be visible under certain conditions.

In AngularJS I would write

stuff
         


        

Answer 1

According to Angular 1 documentation of ngShow and ngHide, both of these directive adds the css style display: none !important;, to the element according to the condition of that directive (for ngShow adds the css on false value, and for ngHide adds the css for true value).

We can achieve this behavior using Angular 2 directive ngClass:

/* style.css */
.hide 
{
    display: none !important;
}


 I'm Angular1 ngShow... 


 I'm Angular2 ngShow... 


 I'm Angular1 ngHide... 


 I'm Angular2 ngHide... 

Notice that for show behavior in Angular2 we need to add ! (not) before the ngShowVal, and for hide behavior in Angular2 we don't need to add ! (not) before the ngHideVal.