Ngstyle and Ngif control the difference between HTML tag display

Typically, the web developer chooses to set the element style attribute display to none to hide the target element. In this way, although these elements are not visible but remain in the DOM, the benefit is that if the element needs to be displayed again soon, the component does not need to be reinitialized, and the component's state can be displayed immediately because it was previously reserved. But hiding elements also poses other problems, in the angular application, if you hide an element that remains in the DOM tree, angular will continue to detect data bindings that might change, and all of the behavior of the component will persist, in which case the component and all its child nodes will still consume resources , consuming more memory, which can affect performance.

Ngstyle and ngif Two kinds of instructions can realize the display of control elements, as follows:

You can use the Ngstyle directive to hide elements by changing the style, and you can hide the components in the DOM tree when using the Ngstyle directive in the component, as shown in the following example code:

ngstyle Directive

<[Ngstyle]= "{' Display ': ' None '}">display none</  div>

The ngif instruction does not hide the element by changing the style, but rather the input variable Boolean value, when the input variable value is false, remove these elements from the DOM, stop monitoring the related component binding properties change, release its DOM event listener and destroy the component, The component will be garbage collected and free of memory. The sample code is as follows:

ngif Directive

<*ngif= "condition" > when the value of condition is true, this component is visible </div>

--I am the porter of Nature, the original digest from: "Secret angular 2"--228 pages.

Ngstyle and Ngif control the difference between HTML tag display