Sometimes you need to hide some HTML element or Angular component in your template. One example scenario is you have a UI where a lot of information is displayed. You want to provide users a toggle to switch between full mode and lite mode.

You could use *ngIf on the blocks/elements you want to hide on toggling. The problem with *ngIf is it will remove the element completely from the DOM when you make the value false. It might break your UI, especially if you are using flexbox. Again, on toggling to true , all the components/elements will be rerendered which is tiny but still a performance issue. If your components have a lot to do, such as calling API, heavy computation, etc., it won’t be a good idea to frequently remove and re-render them to DOM.

Another option, [hidden] input is available for HTML Div elements in Angular. So you could hide them based on toggled state. But it only works on a limited set of elements and not on angular components.

In this case, the following directive comes in handy. It works similar to the [hidden] input, where an element is rendered but hidden by using CSS property visibility. So it is not an alternative to *ngIf . Unlike [hidden] input, it works on angular components as well.

#javascript #web-development #angular #html