title: Mat-menu in for loop: performance issues
body: <p>I want to use the mat-menu of Material in Angular as a dropdown directive and found a way to manipulate it so that it would fit the needs of our application (see related question here: <a href="https://stackoverflow.com/questions/48260700/override-angular-material-component/48261017#48261017">Override Angular Material Component</a>)</p>
  
  <p>Now I integrated the mat-menu in our component. But the menu opens and closes very slowly. It may be related to the issue that the mat-menu is inside a child component of a for loop, so many mat-menus will be generated.</p>
  
  <p>I created a stackblitz to show the issue: <a href="https://stackblitz.com/edit/angular-uzlezn-nh7dbu?file=app/menu-icons-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-uzlezn-nh7dbu?file=app/menu-icons-example.html</a></p>
  
  <p>The first 'test test' is a mat-menu which is not inside a for-loop. Here it opens and closes at a reasonable time.</p>
  
  <p>The 'bla bla' mat-menus are inside a loop. And when you click around with them you see that sometimes a mat-menu at the beginning would open too and to close the menu you would need to click twice. I think this happens because you need to click to close it for each menu.</p>
  
  <p>Now I think this happens because each menu has the same template-name (although I read that it is not an issue when the mat-menu is inside a loop because each menu would get its own scope).</p>
  
  <p>I also tried surrounding the loop with ng-container but that also didn't increased the performance. </p>
  
  <p>Has somebody an idea what I could do to improve the performance or could suggest a different alternative for a dropdown with Angular (5)?</p>