{"_id":"@eddie666/ng-material-multilevel-menu","_rev":"6-a99c161d1cb1772ea663ba7c11efba39","name":"@eddie666/ng-material-multilevel-menu","dist-tags":{"latest":"6.0.6"},"versions":{"6.0.0":{"name":"@eddie666/ng-material-multilevel-menu","version":"6.0.0","repository":{"type":"git","url":"git+https://github.com/eddiefrank/ng-material-multilevel-menu.git"},"keywords":["Angular2","Angular16","Angular","multilevel-list","material-list","angular-multilevel-list"],"author":{"name":"Eduard Frank","email":"frankeduard@hotmail.com"},"license":"MIT","bugs":{"url":"https://github.com/eddiefrank/ng-material-multilevel-menu/issues"},"dependencies":{"tslib":"^2.5.0"},"peerDependencies":{"@angular/common":">= 16.0.0-rc.0 || >= 16.0.0","@angular/core":">= 16.0.0-rc.0 || >= 16.0.0"},"module":"fesm2022/eddie666-ng-material-multilevel-menu.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/eddie666-ng-material-multilevel-menu.mjs","esm":"./esm2022/eddie666-ng-material-multilevel-menu.mjs","default":"./fesm2022/eddie666-ng-material-multilevel-menu.mjs"}},"sideEffects":false,"gitHead":"a2e5f8c71f3daba91bcb0db3a07ae32bdfa96a32","homepage":"https://github.com/eddiefrank/ng-material-multilevel-menu#readme","_id":"@eddie666/ng-material-multilevel-menu@6.0.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-YA1yIVQHUM6YnN6G1LJqPqZ//VOIvnYQDcrCc4D96JL+bZSIwfxBa/5RAIcEqWzZH9j8Gr6AnyXIA6UGkVgmzQ==","shasum":"1e9c34d04783442e871c7239039a3371800e30a3","tarball":"https://registry.npmjs.org/@eddie666/ng-material-multilevel-menu/-/ng-material-multilevel-menu-6.0.0.tgz","fileCount":39,"unpackedSize":238884,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDo9ItyDayqpD/vRNUXj73lTZA73Da7ny9g2xaXn3ipWwIgWlKq4vPndxU3SGrfxUliaTzHaEK4A+xg9U3yqRGDNJU="}]},"_npmUser":{"name":"eddie666","email":"frankeduard@hotmail.com"},"directories":{},"maintainers":[{"name":"eddie666","email":"frankeduard@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-material-multilevel-menu_6.0.0_1683801463724_0.04888165702672964"},"_hasShrinkwrap":false},"6.0.1":{"name":"@eddie666/ng-material-multilevel-menu","version":"6.0.1","repository":{"type":"git","url":"git+https://github.com/eddiefrank/ng-material-multilevel-menu.git"},"keywords":["Angular2","Angular16","Angular","multilevel-list","material-list","angular-multilevel-list"],"author":{"name":"Eduard Frank","email":"frankeduard@hotmail.com"},"license":"MIT","bugs":{"url":"https://github.com/eddiefrank/ng-material-multilevel-menu/issues"},"dependencies":{"tslib":"^2.5.0"},"peerDependencies":{"@angular/common":">= 16.0.0-rc.0 || >= 16.0.0","@angular/core":">= 16.0.0-rc.0 || >= 16.0.0"},"module":"fesm2022/eddie666-ng-material-multilevel-menu.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/eddie666-ng-material-multilevel-menu.mjs","esm":"./esm2022/eddie666-ng-material-multilevel-menu.mjs","default":"./fesm2022/eddie666-ng-material-multilevel-menu.mjs"}},"sideEffects":false,"gitHead":"551628a32058be214dc1987757e7f8ff66af6cab","description":"Angular 16 compatible (ivy)","homepage":"https://github.com/eddiefrank/ng-material-multilevel-menu#readme","_id":"@eddie666/ng-material-multilevel-menu@6.0.1","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-W9H47FIlKpOTp3uSvJjqieUYKZom4P8ATWVw6C2SbD4SenKPCpemRvbQeZtmmrUsfxauCm+frzCJyUl9SVRimQ==","shasum":"abba8849950b913f075b5637de68d560ffac4542","tarball":"https://registry.npmjs.org/@eddie666/ng-material-multilevel-menu/-/ng-material-multilevel-menu-6.0.1.tgz","fileCount":40,"unpackedSize":250313,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArPpN7yCo7V8JlIlcRz/PCPmOVt2u94V/UJNeZzq+y5AiAM3x5gTBKLzjlwgIEHEua9UfovuaD+pZbH0V8ZIKM90g=="}]},"_npmUser":{"name":"eddie666","email":"frankeduard@hotmail.com"},"directories":{},"maintainers":[{"name":"eddie666","email":"frankeduard@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-material-multilevel-menu_6.0.1_1683810204151_0.7489380179706888"},"_hasShrinkwrap":false},"6.0.2":{"name":"@eddie666/ng-material-multilevel-menu","version":"6.0.2","repository":{"type":"git","url":"git+https://github.com/eddiefrank/ng-material-multilevel-menu.git"},"keywords":["Angular2","Angular16","Angular","multilevel-list","material-list","angular-multilevel-list"],"author":{"name":"Eduard Frank","email":"frankeduard@hotmail.com"},"license":"MIT","bugs":{"url":"https://github.com/eddiefrank/ng-material-multilevel-menu/issues"},"dependencies":{"tslib":"^2.5.0"},"peerDependencies":{"@angular/common":">= 16.0.0-rc.0 || >= 16.0.0","@angular/core":">= 16.0.0-rc.0 || >= 16.0.0"},"gitHead":"aa12c68a0a786888c9f51ce41d95e061018e4a4b","homepage":"https://github.com/eddiefrank/ng-material-multilevel-menu#readme","_id":"@eddie666/ng-material-multilevel-menu@6.0.2","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-wNrWee1t9qErUkciGU/uDSi2TOPADzvE3GnubJ5t+rTFC5mnUyPEsLFXzhb1GHzpS6PlibvU2p9R0vtn65jrxw==","shasum":"21fb19aa7f6b3b2a3c20332c890825aba0a0326b","tarball":"https://registry.npmjs.org/@eddie666/ng-material-multilevel-menu/-/ng-material-multilevel-menu-6.0.2.tgz","fileCount":30,"unpackedSize":38481,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUkc6OK8ah2n0rq9U7StsUU10ILwyD2XPJIWQwvCWOdAiEA3JpXWiOMbHbIGVW/7ff3O5ti7Rs7nlTUYeB0Ukypef0="}]},"_npmUser":{"name":"eddie666","email":"frankeduard@hotmail.com"},"directories":{},"maintainers":[{"name":"eddie666","email":"frankeduard@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-material-multilevel-menu_6.0.2_1683888766064_0.8176487384623228"},"_hasShrinkwrap":false},"6.0.3":{"name":"@eddie666/ng-material-multilevel-menu","version":"6.0.3","repository":{"type":"git","url":"git+https://github.com/eddiefrank/ng-material-multilevel-menu.git"},"keywords":["Angular2","Angular16","Angular","multilevel-list","material-list","angular-multilevel-list"],"author":{"name":"Eduard Frank","email":"frankeduard@hotmail.com"},"license":"MIT","bugs":{"url":"https://github.com/eddiefrank/ng-material-multilevel-menu/issues"},"dependencies":{"tslib":"^2.5.0"},"peerDependencies":{"@angular/common":">= 16.0.0-rc.0 || >= 16.0.0","@angular/core":">= 16.0.0-rc.0 || >= 16.0.0"},"gitHead":"aa12c68a0a786888c9f51ce41d95e061018e4a4b","homepage":"https://github.com/eddiefrank/ng-material-multilevel-menu#readme","_id":"@eddie666/ng-material-multilevel-menu@6.0.3","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-kjbxbliCpBAfNQSdkHC6O3/ZnRkoQFLh2Zqun0m8Xc/MLpEY3kytk4iOtNpRTBwgprjzhWHFQjRIMJf80HVfmQ==","shasum":"6f9be2ff96eafda485a79308fce1b5e7a6c2b469","tarball":"https://registry.npmjs.org/@eddie666/ng-material-multilevel-menu/-/ng-material-multilevel-menu-6.0.3.tgz","fileCount":30,"unpackedSize":38475,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj3h4z8q2XbTkURvu+fCIydyfBSjlrJ3chbG3CzE+lhAIgAXvbMYKew5vTFRdyIpcp0UWUJIRL+Xgh/HhgYEEbesI="}]},"_npmUser":{"name":"eddie666","email":"frankeduard@hotmail.com"},"directories":{},"maintainers":[{"name":"eddie666","email":"frankeduard@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-material-multilevel-menu_6.0.3_1683889890722_0.11668206768760325"},"_hasShrinkwrap":false},"6.0.4":{"name":"@eddie666/ng-material-multilevel-menu","version":"6.0.4","repository":{"type":"git","url":"git+https://github.com/eddiefrank/ng-material-multilevel-menu.git"},"keywords":["Angular2","Angular16","Angular","multilevel-list","material-list","angular-multilevel-list"],"author":{"name":"Eduard Frank","email":"frankeduard@hotmail.com"},"license":"MIT","bugs":{"url":"https://github.com/eddiefrank/ng-material-multilevel-menu/issues"},"dependencies":{"tslib":"^2.5.0"},"peerDependencies":{"@angular/common":">= 16.0.0-rc.0 || >= 16.0.0","@angular/core":">= 16.0.0-rc.0 || >= 16.0.0"},"gitHead":"aa12c68a0a786888c9f51ce41d95e061018e4a4b","homepage":"https://github.com/eddiefrank/ng-material-multilevel-menu#readme","_id":"@eddie666/ng-material-multilevel-menu@6.0.4","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-uiGRj2LE17dFF19AqZZAxTDoh4qWVBWx3tHDCync1XxT4NUHh1H/dU6mV8rjI46ZBJXOuD1K1fc0Bd59RYb/Lw==","shasum":"d9d0b296aed38ddf39fe1a3cf8ffd65834f681ab","tarball":"https://registry.npmjs.org/@eddie666/ng-material-multilevel-menu/-/ng-material-multilevel-menu-6.0.4.tgz","fileCount":30,"unpackedSize":38475,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA/kcoWLZAF5QH5lpPs7C8bnV/7oEqqR7MV5h5392YaAIgFbRzx4ZNqBjrdwsbpENGk4qwi27pUWRFZQQH5rX0eZ0="}]},"_npmUser":{"name":"eddie666","email":"frankeduard@hotmail.com"},"directories":{},"maintainers":[{"name":"eddie666","email":"frankeduard@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-material-multilevel-menu_6.0.4_1683890919899_0.4831860751833763"},"_hasShrinkwrap":false},"6.0.5":{"name":"@eddie666/ng-material-multilevel-menu","version":"6.0.5","repository":{"type":"git","url":"git+https://github.com/eddiefrank/ng-material-multilevel-menu.git"},"keywords":["Angular2","Angular16","Angular","multilevel-list","material-list","angular-multilevel-list"],"author":{"name":"Eduard Frank","email":"frankeduard@hotmail.com"},"license":"MIT","bugs":{"url":"https://github.com/eddiefrank/ng-material-multilevel-menu/issues"},"dependencies":{"tslib":"^2.5.0"},"peerDependencies":{"@angular/common":">= 16.0.0-rc.0 || >= 16.0.0","@angular/core":">= 16.0.0-rc.0 || >= 16.0.0"},"module":"fesm2022/eddie666-ng-material-multilevel-menu.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/eddie666-ng-material-multilevel-menu.mjs","esm":"./esm2022/eddie666-ng-material-multilevel-menu.mjs","default":"./fesm2022/eddie666-ng-material-multilevel-menu.mjs"}},"sideEffects":false,"gitHead":"aa12c68a0a786888c9f51ce41d95e061018e4a4b","description":"Angular 16 compatible (ivy)","homepage":"https://github.com/eddiefrank/ng-material-multilevel-menu#readme","_id":"@eddie666/ng-material-multilevel-menu@6.0.5","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-pksgl6iLvrCj6bHDSlMlnf+EgBoQWG/La13qHW84mIJweCL79lufk6dwASyhKzEi0evyFdNZugiQehPVwYXW1A==","shasum":"8bd22378459c3442219390dcd477f57a0a890aeb","tarball":"https://registry.npmjs.org/@eddie666/ng-material-multilevel-menu/-/ng-material-multilevel-menu-6.0.5.tgz","fileCount":40,"unpackedSize":256494,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3VfBuC3V3bUkGtjRGRkJf8k1k7upJ3sQCS+6tlRhiSwIgbEx7JYa09yyT9iYsDzF4FRUOkywh3s5azooBg+LXVVk="}]},"_npmUser":{"name":"eddie666","email":"frankeduard@hotmail.com"},"directories":{},"maintainers":[{"name":"eddie666","email":"frankeduard@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-material-multilevel-menu_6.0.5_1683891841099_0.24030506029230247"},"_hasShrinkwrap":false},"6.0.6":{"name":"@eddie666/ng-material-multilevel-menu","version":"6.0.6","repository":{"type":"git","url":"git+https://github.com/eddiefrank/ng-material-multilevel-menu.git"},"keywords":["Angular2","Angular16","Angular","multilevel-list","material-list","angular-multilevel-list"],"author":{"name":"Eduard Frank","email":"frankeduard@hotmail.com"},"license":"MIT","bugs":{"url":"https://github.com/eddiefrank/ng-material-multilevel-menu/issues"},"dependencies":{"tslib":"^2.5.0"},"peerDependencies":{"@angular/common":">= 16.0.0-rc.0 || >= 16.0.0","@angular/core":">= 16.0.0-rc.0 || >= 16.0.0"},"module":"fesm2022/eddie666-ng-material-multilevel-menu.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/eddie666-ng-material-multilevel-menu.mjs","esm":"./esm2022/eddie666-ng-material-multilevel-menu.mjs","default":"./fesm2022/eddie666-ng-material-multilevel-menu.mjs"}},"sideEffects":false,"gitHead":"b523c4fb0729f54f31aa10bd5f8ac58843f757d4","description":"Angular 16 compatible (ivy)","homepage":"https://github.com/eddiefrank/ng-material-multilevel-menu#readme","_id":"@eddie666/ng-material-multilevel-menu@6.0.6","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-vojKXz2HbzSsVwzrn5o0Qas3r47VNXod31mePq4y73XwW7hpDmzHuOO5bxTUzGSSfAN9QYouMmxuIRJY3BBXlQ==","shasum":"47fb53f27085cab62838c71364c4112efe49904b","tarball":"https://registry.npmjs.org/@eddie666/ng-material-multilevel-menu/-/ng-material-multilevel-menu-6.0.6.tgz","fileCount":40,"unpackedSize":251665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtnRocztLgZFgF0/aFqg5f3gPsUoVCYoqefHixGlfREgIgSaQlWi+bGuQB7OciOuiaDBXpJAfyz713lw0ZMWfACCU="}]},"_npmUser":{"name":"eddie666","email":"frankeduard@hotmail.com"},"directories":{},"maintainers":[{"name":"eddie666","email":"frankeduard@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-material-multilevel-menu_6.0.6_1683987238782_0.9143396371455565"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-11T10:37:43.670Z","6.0.0":"2023-05-11T10:37:43.884Z","modified":"2023-05-13T14:13:59.202Z","6.0.1":"2023-05-11T13:03:24.285Z","6.0.2":"2023-05-12T10:52:46.261Z","6.0.3":"2023-05-12T11:11:30.915Z","6.0.4":"2023-05-12T11:28:40.125Z","6.0.5":"2023-05-12T11:44:01.286Z","6.0.6":"2023-05-13T14:13:59.100Z"},"maintainers":[{"name":"eddie666","email":"frankeduard@hotmail.com"}],"homepage":"https://github.com/eddiefrank/ng-material-multilevel-menu#readme","keywords":["Angular2","Angular16","Angular","multilevel-list","material-list","angular-multilevel-list"],"repository":{"type":"git","url":"git+https://github.com/eddiefrank/ng-material-multilevel-menu.git"},"author":{"name":"Eduard Frank","email":"frankeduard@hotmail.com"},"bugs":{"url":"https://github.com/eddiefrank/ng-material-multilevel-menu/issues"},"license":"MIT","readme":"# temporary fork from ng-material-multilevel-menu\r\n\r\nAngular 16 compatible (ivy)\r\n\r\nfork from https://www.npmjs.com/package/ng-material-multilevel-menu v5.5.3\r\n\r\n# ng-material-multilevel-menu\r\n\r\nMaterial Multi-Level Menu for Angular Projects.\r\n\r\n## Demo\r\n\r\nCheck the Material Multi-Level Menu in action, [click here](http://plugins.codershood.info/#/plugins/ngmm-plugin).\r\n\r\n## Features\r\n\r\ncheck the documentation on the original page\r\n\r\nhttps://github.com/ShankyTiwari/ng-material-multilevel-menu\r\n\r\n## Installation\r\n\r\nYou can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate for your project in the examples below.\r\n\r\n#### NPM\r\n\r\n```\r\nnpm install --save @eddie666/ng-material-multilevel-menu\r\n```\r\n\r\n#### YARN\r\n\r\n```\r\nyarn add --save @eddie666/ng-material-multilevel-menu\r\n```\r\n\r\n## Usage\r\n\r\nFollow below steps to add multi level list in your project\r\n\r\n#### 1. Import NgMaterialMultilevelMenuModule\r\n\r\nYou need to import the `NgMaterialMultilevelMenuModule` in the module of your app where you want to use it.\r\n\r\n```typescript\r\nimport { BrowserModule } from \"@angular/platform-browser\";\r\nimport { NgModule } from \"@angular/core\";\r\n\r\n/* Import the module*/\r\nimport { NgMaterialMultilevelMenuModule, MultilevelMenuService } from \"@eddie666/ng-material-multilevel-menu\";\r\n\r\nimport { AppComponent } from \"./app.component\";\r\n\r\n@NgModule({\r\n  declarations: [AppComponent],\r\n  imports: [\r\n    BrowserModule,\r\n    NgMaterialMultilevelMenuModule, // Import here\r\n  ],\r\n  providers: [MultilevelMenuService],\r\n  bootstrap: [AppComponent],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n#### 2. Use <ng-material-multilevel-menu> in your HTML\r\n\r\nIn your HTML: Use the `<ng-material-multilevel-menu>` wherever you like in your project.\r\n\r\n```html\r\n<ng-material-multilevel-menu [configuration]=\"config\" [items]=\"appitems\" (selectedItem)=\"selectedItem($event)\" (menuIsReady)=\"menuIsReady($event)\" (selectedLabel)=\"selectedLabel($event)\"> </ng-material-multilevel-menu>\r\n```\r\n\r\n#### 3. Structure of array to display the list\r\n\r\nMake sure you structure of array should look like array shown below,\r\n\r\n```typescript\r\nappitems = [\r\n  {\r\n    label: \"NPM\",\r\n    imageIcon: \"/assets/batman.jpg\",\r\n    link: \"https://www.npmjs.com/package/ng-material-multilevel-menu\",\r\n    externalRedirect: true,\r\n    hrefTargetType: \"_blank\", // _blank|_self|_parent|_top|framename\r\n  },\r\n  {\r\n    label: \"Item 1 (with Font awesome icon)\",\r\n    faIcon: \"fab fa-500px\",\r\n    items: [\r\n      {\r\n        label: \"Item 1.1\",\r\n        link: \"/item-1-1\",\r\n        faIcon: \"fab fa-accusoft\",\r\n      },\r\n      {\r\n        label: \"Item 1.2\",\r\n        faIcon: \"fab fa-accessible-icon\",\r\n        disabled: true,\r\n        items: [\r\n          {\r\n            label: \"Item 1.2.1\",\r\n            link: \"/item-1-2-1\",\r\n            faIcon: \"fa-allergies\", // Font awesome default prefix is fas\r\n          },\r\n          {\r\n            label: \"Item 1.2.2\",\r\n            faIcon: \"fas fa-ambulance\",\r\n            items: [\r\n              {\r\n                label: \"Item 1.2.2.1\",\r\n                faIcon: \"fas fa-anchor\", // Still you can specify if you want to\r\n                onSelected: function () {\r\n                  console.log(\"Item 1.2.2.1\");\r\n                },\r\n              },\r\n            ],\r\n          },\r\n        ],\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    label: \"Item 2\",\r\n    icon: \"alarm\",\r\n    items: [\r\n      {\r\n        label: \"Item 2.1\",\r\n        link: \"/item-2-1\",\r\n        icon: \"favorite_border\",\r\n        activeIcon: \"favorite\",\r\n        disabled: true,\r\n      },\r\n      {\r\n        label: \"Item 2.2\",\r\n        link: \"/item-2-2\",\r\n        icon: \"favorite_border\",\r\n        activeIcon: \"favorite\",\r\n        navigationExtras: {\r\n          queryParams: { order: \"popular\", filter: \"new\" },\r\n        },\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    label: \"Item 3\",\r\n    icon: \"offline_pin\",\r\n    onSelected: function () {\r\n      console.log(\"Item 3\");\r\n    },\r\n  },\r\n  {\r\n    label: \"Item 4\",\r\n    link: \"/item-4\",\r\n    icon: \"star_rate\",\r\n    hidden: true,\r\n  },\r\n];\r\n```\r\n\r\n## API\r\n\r\n- Using `configuration`, You can customise the appearance of the list.\r\n  - `paddingAtStart: boolean` => _[optional]_ If you don't want padding at the start of the list item, then you can give `false`. The default value will be `true`.\r\n  - `interfaceWithRoute: boolean` => _[required]_ only if you want to use Angular Routing with this menu.\r\n  - `highlightOnSelect: boolean` => _[optional]_ If you want to highlight the clicked item in the list, then you can do that by making it `true`. The default value will be `false`.\r\n  - `useDividers: boolean` => _[optional]_ If you want to the list to have dividers. The default value will be `true`.\r\n  - `collapseOnSelect: boolean;` => _[optional]_ You have the option to collapse another parent when clicked on the current parent. The default value will be `false`.\r\n  - `rtlLayout: boolean;` => _[optional]_ whether display is Right To Left. The default value will be `false`.\r\n  - `classname: string;` => _[optional]_ You can give your own custom class name in order to modify the list appearance.\r\n  - `listBackgroundColor: string;` => _[optional]_ You can apply custom color to the background of the list.\r\n  - `fontColor: string;` => _[optional]_ Changes the color of Text and icons inside the list.\r\n  - `backgroundColor: string;` => _[optional]_ This will change the background color list container.\r\n  - `selectedListFontColor: string;` => _[optional]_ This will change the font color of selected list item.\r\n\r\nBelow is example how you can apply different background and Font colors,\r\n\r\n```typescript\r\nconfig = {\r\n  paddingAtStart: true,\r\n  interfaceWithRoute: true,\r\n  classname: \"my-custom-class\",\r\n  listBackgroundColor: `rgb(208, 241, 239)`,\r\n  fontColor: `rgb(8, 54, 71)`,\r\n  backgroundColor: `rgb(208, 241, 239)`,\r\n  selectedListFontColor: `red`,\r\n  highlightOnSelect: true,\r\n  collapseOnSelect: true,\r\n  useDividers: false,\r\n  rtlLayout: false,\r\n};\r\n```\r\n\r\n## Misc\r\n\r\n### 1. Exapand/ Collapse all Menu\r\n\r\nYou can expand all the menu and Collapse all the menus. Below is example how you can do that,\r\n\r\n```typescript\r\nimport { MultilevelMenuService, ExpandCollapseStatusEnum } from \"ng-material-multilevel-menu\";\r\n\r\nexport class AppComponent {\r\n  constructor(private multilevelMenuService: MultilevelMenuService) {}\r\n\r\n  setExpandCollapseStatus(type: ExpandCollapseStatusEnum) {\r\n    this.multilevelMenuService.setMenuExapandCollpaseStatus(type);\r\n  }\r\n}\r\n```\r\n\r\n### 2. Select Menu By ID\r\n\r\nYou can expand all the menu and Collapse all the menus. Below is example how you can do that,\r\n\r\n```typescript\r\nimport { MultilevelMenuService, MultilevelNodes } from \"ng-material-multilevel-menu\";\r\n\r\nexport class AppComponent {\r\n  menuWithID: MultilevelNodes[] = null;\r\n\r\n  constructor(private multilevelMenuService: MultilevelMenuService) {}\r\n\r\n  menuIsReady(menus: MultilevelNodes[]) {\r\n    this.menuWithID = menus;\r\n  }\r\n\r\n  selectMenuID(MenuID) {\r\n    this.multilevelMenuService.selectMenuByID(MenuID);\r\n  }\r\n}\r\n```\r\n\r\n### 3. Building Custom Templates\r\n\r\nIn this section, you will find useful information if you are planning to write your own templates.\r\n\r\n1. First and very important is `MultilevelNodes` interface, every menu item implements this interface. Make sure you look into each property of this interface when building custom menu templates. For example properties like `isSelected`, `hasChilden`, `expanded`, `disabled`, `items`, `label`, and so on are extremely helpful, have look into some demos [here](https://multilevel-menu-demo.web.app/pages/layout-variations/demo-six/version-one).\r\n2. You actually don't have to write _Slide-In_/ _Slide-Out_, _Arrow Rotation_ animation. The module exports these animations out of the box, so you can import them and use it as shown below.\r\n\r\n**demo.component.ts:**\r\n\r\n```typescript\r\nimport {SlideInOut, ExpandedRTL, ExpandedLTR } from 'ng-material-multilevel-menu';\r\n\r\n@Component({\r\n    selector: 'app-demo',\r\n    templateUrl: './demo.component.html',\r\n    styleUrls: ['./demo.component.css'],\r\n    animations: [\r\n      SlideInOut,\r\n      ExpandedLTR,\r\n      ExpandedRTL,\r\n    ]\r\n})\r\n```\r\n\r\n3. You have decided to write a custom template, then you have to write the corresponding CSS for the same.\r\n4. Below is a very simple example of the custom menu templates,\r\n\r\n**demo.component.html:**\r\n\r\n```html\r\n<ng-material-multilevel-menu [items]=\"appitems\" [configuration]=\"config\" (selectedItem)=\"selectedItem($event)\">\r\n  <ng-template #listTemplate let-item=\"item\" let-configuration=\"configuration\">\r\n    <div class=\"my-cool-menu-item\" [dir]=\"configuration.rtlLayout  ? 'rtl' : 'ltr'\">\r\n      <div class=\"title-and-image\">\r\n        <div class=\"icon-container\">\r\n          <span [ngClass]=\"getClass(item)\"></span>\r\n        </div>\r\n        <div class=\"label-container\">\r\n          <span>{{item.label}}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"icon-arrow-container\" *ngIf=\"item.hasChilden\">\r\n        <mat-icon *ngIf=\"!configuration.rtlLayout\" [@ExpandedLTR]=\"item.expanded ? 'yes' : 'no'\"> keyboard_arrow_down </mat-icon>\r\n        <mat-icon *ngIf=\"configuration.rtlLayout\" [@ExpandedRTL]=\"item.expanded ? 'yes' : 'no'\"> keyboard_arrow_down </mat-icon>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</ng-material-multilevel-menu>\r\n```\r\n\r\n**demo.component.ts:**\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\nimport { MultilevelNodes, Configuration, ExpandedRTL, ExpandedLTR } from 'ng-material-multilevel-menu';\r\n\r\n@Component({\r\n    selector: 'app-demo',\r\n    templateUrl: './demo.component.html',\r\n    styleUrls: ['./demo.component.css'],\r\n    animations: [ExpandedRTL, ExpandedLTR]\r\n})\r\nexport class DemoComponent  {\r\n    appitems: MultilevelNodes[] = [\r\n        ...\r\n        {\r\n        label: 'Item 3',\r\n        faIcon: 'fas fa-anchor',\r\n        }\r\n        ...\r\n    ];\r\n\r\n    config: Configuration = {\r\n        rtlLayout: true,\r\n        customTemplate: true,\r\n    }\r\n\r\n    constructor() { }\r\n\r\n    getClass(item) {\r\n        return {\r\n            [item.faIcon]: true\r\n        }\r\n    }\r\n\r\n    selectedItem($event) {\r\n        console.log($event);\r\n    }\r\n}\r\n```\r\n\r\n**demo.component.css:**\r\n\r\n```css\r\n.my-cool-menu-item {\r\n  display: flex;\r\n  padding-left: 10px;\r\n  padding-right: 10px;\r\n  border-bottom: solid 1px rgba(0, 0, 0, 0.12);\r\n  height: 48px;\r\n}\r\n\r\n.my-cool-menu-item .title-and-image {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: flex-start;\r\n}\r\n\r\n.my-cool-menu-item .title-and-image .icon-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n}\r\n\r\ndiv[dir=\"rtl\"] .icon-container {\r\n  padding-left: 5px;\r\n}\r\n\r\ndiv[dir=\"ltr\"] .icon-container {\r\n  padding-right: 5px;\r\n}\r\n\r\n.my-cool-menu-item .title-and-image .label-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n}\r\n\r\n.my-cool-menu-item .icon-arrow-container {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n```\r\n\r\n## Default classes\r\n\r\n- `selected-amml-item`: This class will be applied to currently selected link and it's father links.\r\n- `active-amml-item`: This class will be applied to currently selected link.\r\n\r\n## Dependencies\r\n\r\n1. [Angular Material](https://material.angular.io)\r\n\r\n## Contribution\r\n\r\nI welcome you to fork and add more features into it. If you have any bugs or feature request, please create an issue at [github repository](https://https://github.com/eddiefrank/ng-material-multilevel-menu/issues).\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md","description":"Angular 16 compatible (ivy)"}