loading...
Cover image for Controlling Angular Display Properties in HTML

Controlling Angular Display Properties in HTML

jwp profile image John Peters ・1 min read
<div  
   [style.display]=
     "person.id === -1 ? 'grid' : 'none'">
      First Save New Person, 
      then proceed.
</div>

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!

Discussion

pic
Editor guide