The latest articles on DEV Community by tt0686 (@tt0686). https://dev.to/tt0686 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F172206%2F2801e753-36d6-476d-b4c1-9cf7194b0621.png https://dev.to/tt0686 en tt0686 Mon, 27 May 2019 08:48:17 +0000 https://dev.to/tt0686/angular-dynamic-menu-using-material-design-1kfh https://dev.to/tt0686/angular-dynamic-menu-using-material-design-1kfh <p>I want to create a dynamic menu, where the data is fetch from database for instance. Here is the <a href="https://stackblitz.com/edit/angular-dmenu">https://stackblitz.com/edit/angular-dmenu</a> project </p> <p>In the dynamic-menu.component.html in the StackBlitz project there are the dynamic solution and the static solution(that is commented). </p> <p>The static solution should be how the dynamic solution will be rendered after executes. <br> If i just run with the static solution(uncomment and commented the dynamic) everything runs as expected, but if i try with the dynamic solution the menu does not work as expected (the main buttons stays on top of each other and the submenus do not display and work properly). <br> Is this related with how ng-template affect the CSS styles ? <br> Looking through Chrome developer tools i am able to see that the class="mat-menu-item ng-star-inserted" attribute in the dynamic version is added to the button for instance and this does not happen in the static version. I have try everything but i can not get it why is this happening. And how can i fix this. I am new to Angular but i want really understands how the frameworks works </p> <p>Thanks in advance </p> <p>Best regards</p> angular