title: Angular *ngIf Condition inside *ngFor to show hide items
body: <p>I am working with angular 12. Here is the angular html code.</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;ul id=&quot;respMenu&quot; class=&quot;horizontal-menu&quot;&gt;
              &lt;ng-container *ngFor=&quot;let menuItem of menuItems; let i = index&quot;&gt;
                   &lt;ng-container *ngIf=&quot;IsAllowed(['admin','user'])&quot;&gt;
                   &lt;li&gt;
                       &lt;a&gt;
                           &lt;span class=&quot;title&quot;&gt;{{menuItem.title}}&lt;/span&gt;
                       &lt;/a&gt;
                   &lt;/li&gt;
               &lt;/ng-container&gt;
               &lt;/ng-container&gt;
           &lt;/ul&gt;
  </code></pre>
  <p>i am calling this method show hide my li</p>
  <pre><code>  IsAllowed(allowedRoles){
      console.log(&quot;test&quot;);
      for (var i = 0; i &lt; userRoles.length; i++) {
          if(allowedRoles.includes(userRoles[i])){
             return true;
          }
      }
    }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/GnyCS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GnyCS.png" alt="enter image description here" /></a></p>
  <p>But it console the test text like thousands of times. why is this so please suggest me better way to do it.I Have 8 menuItems its shows 8 in UI but console many times.</p>
  <p>IsAllowed Method parameter will be loaded dynamically and will be different for every item.</p>