title: Run Angular change detection only once and stop detecting changes for that component
body: <p>I need to detect changes in angular only once when the component is loaded or when route has changed and i want to stop detecting changes after that.</p>
  
  <p>Actually I need to show and hide functionality depending on user role. So i have many <code>*ngIf</code> in a single html template but i need to check <code>*ngIf</code> condition only once when the template is loaded first time and stop detecting changes after that because it is affecting performance.</p>
  
  <p>I want the page to be like static after single time change detection.</p>
  
  <p>For example :</p>
  
  <pre><code>       &lt;li *ngIf="doesHavePermission('templateName')"&gt;
         &lt;/li&gt;
  </code></pre>
  
  <p>should check once but what I am seeing is that it is checking the change many times for single <code>*ngIf</code> and I have many <code>*ngIf</code> like this:</p>
  
  <p>I found <code>markForCheck()</code> 
   and <code>detach()</code> in this angular document <a href="https://angular.io/api/core/ChangeDetectorRef" rel="nofollow noreferrer">https://angular.io/api/core/ChangeDetectorRef</a>.</p>
  
  <blockquote>
    <p>But what they are doing is that they are either allowing all change
    detection or none at all,</p>
  </blockquote>
  
  <p>And I need to detect changes only once and stop after that.</p>
  
  <p>Can we do this single time change detection in angular?</p>
  
  <p>Or is there a better way to handle the scenerio?</p>