Hidden Property
- Html hidden attribute hides an element.
- An hidden property also present in DOM
- Use property binding to show or hide elements
- Using hidden attribute (From IE 11)
<div hidden></div>
<div [hidden]="courses.length == 0">List of Courses</div>
<div [hidden]="courses.length > 0">No courses</div>
ngIf vs Hidden
- When we use ngIf on an element if the condition evaluates to falsey that element is removed from DOM
- When we use hidden attribute the element is in the DOM but it is hidden
ngIf
- If you are working with large tree with lot of children it is better to use
ngIf because these elements can take substantial memory and resources. Don't need to add it in DOM it not shown to user.
- Angular may continue to check for changes even for invisible elements
- Angular change detection keeps the views in sync with components running in background
- When elements are in DOM, angular continues to peform change tracking on these elements
hidden
- Normally for small element trees
- Use if building a large element tree in right state may be costly because
ngIf may have a negative impact on performance of the page
- Keep it in the DOM and hide with hidden attribute