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

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

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

 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">

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

                    <li [class.expand]="showMenu === menu.cssId" class="nested">
                        <ul class="submenu">

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

            </ng-container>

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

        </ng-container>

ব্যাস, হয়ে গেলো ড্যানমিক মেনু