Why the difference?

The way you control the visibility of DOM elements could have a great impact on the performance of your applications.

Take for instance, you have an accordion that is expected to be clicked by the user to show more information. The user might decide to hide the accordion's content after viewing the content and, at a later time, come back to reopen it for references. It starts becoming obvious that the accordion's content has the tendency of being displayed and hidden at any time.

When this is the case, it is best that we use an attribute directive that doesn't hide/remove the accordion content but rather just hides it. This makes it really fast to show and hide again when needed. Using a structural directive such as 

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.