DEV Community

Cover image for Controlling Angular Display Properties in HTML
John Peters
John Peters

Posted on

Controlling Angular Display Properties in HTML

<div  
   [style.display]=
     "person.id === -1 ? 'grid' : 'none'">
      First Save New Person, 
      then proceed.
</div>

Enter fullscreen mode Exit fullscreen mode

Similar to the [ngclass] attribute; here we deal directly with the display style instead.

If the new person (id = -1) is shown then this message is displayed. Otherwise when person.id is other than -1 the display is set to none! This allows the remaining page to be rendered because, this element renders with a width of 500em pushing everything off the page. Probably not good practice but works.

Works like a charm!

Top comments (0)