ডায়নামিক মেন্যু

এঙ্গুলার ফ্রেমওযার্কে সহজেই মেন্যুকে ডায়নামিক মেনুতে পরিবর্তন করা যায়।

প্রথমে মেনু ইন্টারফেস তৈরি করতে হবে 

 export interface Menu {
        name: string;
        type: string;
        icon: string;
        cssId: string;
        state: string;
        children?: Menu[];
    }

তারপর ইন্টারফেস অনুযায়ী JSON রেন্ডার করতে হবে 

const DOCTOR_MENUS: Menu[] = [
        { cssId: 'sidenav-dashboard-btn', state: '/admin/dashboard', name: 'Dashboard', type: 'link', icon: 'dashboard' },
        { cssId: 'sidenav-patient-list-btn', state: '/admin/patient/list', name: 'Patient', type: 'link', icon: 'industry' },
        { cssId: 'sidenav-appointment-list-btn', state: '/admin/appointment/list', name: 'Appointment', type: 'link', icon: 'calendar-check' },
        {
            cssId: 'sidenav-doctor-data-btn', state: '/admin/doctor-data', name: 'Doctor data', type: 'link', icon: 'calendar-check',
            children: [
                { cssId: 'sidenav-doctor-data-visiting-hour-btn', state: '/admin/doctor-data/visiting-hour', name: 'Visiting hour', type: 'link', icon: 'calendar-check' },
                { cssId: 'sidenav-doctor-data-cc-btn', state: '/admin/doctor-data/chief-complaint', name: 'Chief Complaint', type: 'link', icon: 'calendar-check' },
                { cssId: 'sidenav-doctor-data-treatment-btn', state: '/admin/doctor-data/treatment', name: 'Treatment', type: 'link', icon: 'calendar-check' },
            ]
        },
    ];

তারপর মেনু দেখানোর জন্য একটা ডিরেক্টিভ বানাতে হবে 

<ng-container *ngFor="let menu of menus">
        &lt;ng-container *ngIf="menu.children &amp;&amp; menu.children.length &gt; 0"&gt;
            &lt;div class="nested-menu"&gt;
                &lt;a (click)="addExpandClass(menu.cssId)" class="list-group-item"&gt;
                    &lt;i class="fa fa-plus"&gt;&lt;/i&gt;&amp;nbsp;
                    &lt;span&gt;{{ menu.name | translate }}&lt;/span&gt;
                &lt;/a&gt;

                &lt;li [class.expand]="showMenu === menu.cssId" class="nested"&gt;
                    &lt;ul class="submenu"&gt;

                        &lt;li *ngFor="let child of menu.children"&gt;
                            &lt;a [routerLinkActive]="['router-link-active']" [routerLink]="child.state" class="list-group-item"  id="{{child.cssId}}"&gt;
                                &lt;fa-icon icon="{{child.icon}}"&gt;&lt;/fa-icon&gt; &amp;nbsp;
                                &lt;span&gt;{{child.name}}&lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/div&gt;

        &lt;/ng-container&gt;

        &lt;ng-container *ngIf="!menu.children || (menu.children &amp;&amp; menu.children.length === 0)"&gt;
            &lt;a [routerLinkActive]="['router-link-active']" [routerLink]="menu.state" class="list-group-item"  id="{{menu.cssId}}"&gt;
                &lt;fa-icon icon="{{menu.icon}}"&gt;&lt;/fa-icon&gt; &amp;nbsp;
                &lt;span&gt;{{menu.name}}&lt;/span&gt;
            &lt;/a&gt;
        &lt;/ng-container&gt;

    &lt;/ng-container&gt;<br></pre><p></p><p>ব্যাস, হয়ে গেলো ড্যানমিক মেনু&nbsp;</p>