0

Here is code

<div *ngIf="active"><app-p-detail></app-p-detail></div>

Whenever I do active = false and again true. It reloads whole 'app-p-detail' component, means all services inside component, I do not want that. I just want to show the component data once load it completely and show/hide. Is this ngIf and component behavior normal or Am I doing something wrong? I am using Angular 11.

emles
  • 35
  • 10
  • 2
    Use `hidden` -> `
    ...
    `     – Anurag Srivastava Feb 12 '21 at 16:35
  • @AnuragSrivastava I have a problem with [hidden] but why not '*ngIf' ? Can you please explain? Thanks. – emles Feb 12 '21 at 16:37
  • 1
    https://stackoverflow.com/questions/43034758/what-is-the-difference-between-ngif-and-hidden – Anurag Srivastava Feb 12 '21 at 16:38
  • 2
    `*ngIf` removes element from DOM when `false` and re-render it when it's `true`. So, in your case, as @Anurag Srivastava mentioned above, you must hide it instead of removing it from DOM. – Harinder Singh Feb 12 '21 at 16:42
  • Yes that's how `*ngIf` works. Angular generates the DOM, and re-generates it when the data changes. if `*ngIf` is false, whatever's inside won't be rendered on the next pass. If you only want to hide it from view, use CSS. – Jeremy Thille Feb 12 '21 at 16:50
  • this might help you https://stackoverflow.com/questions/43034758/what-is-the-difference-between-ngif-and-hidden#:~:text=There%20is%20actually%20a%20performance,if%20the%20expression%20is%20false.&text=%5Bhidden%5D%20will%20load%20the%20data,if%20they%20are%20not%20visible. – Hossein Mousavi Feb 16 '21 at 11:10

0 Answers0