angular-router-menus
Advanced tools
Comparing version
import { type Routes } from "@angular/router"; | ||
import type { MenuStacks } from "./menu"; | ||
import type { RouterMenusOptions } from "./options"; | ||
export declare function buildRouterMenus(routes: Routes, menuStacks: MenuStacks, options: RouterMenusOptions): Promise<void>; | ||
export declare function buildRouterMenus(routes: Routes, menus: Menus[], options: RouterMenusOptions): Promise<void>; |
@@ -1,2 +0,1 @@ | ||
import type { Entries } from "type-fest"; | ||
/** | ||
@@ -15,5 +14,1 @@ * normalize-path | ||
export declare function sleep(milliseconds: number): Promise<unknown>; | ||
/** | ||
* To object entries properly typed. | ||
*/ | ||
export declare function toEntries<T extends object>(obj: T): Entries<T>; |
@@ -1,3 +0,13 @@ | ||
import type { InjectionToken, WritableSignal } from "@angular/core"; | ||
/** | ||
* Add the `menu` property to `Route`. | ||
*/ | ||
declare module "@angular/router" { | ||
interface Route { | ||
/** | ||
* Define if route should appear in a menu. | ||
*/ | ||
menu?: RouteMenuItem; | ||
} | ||
} | ||
/** | ||
* A menu item in a navigation context. | ||
@@ -34,19 +44,1 @@ */ | ||
export type MenuItems = MenuItem[]; | ||
/** | ||
* Define your menu stacks. | ||
* | ||
* @see {@link MenuItems} | ||
* @see {@link Menus} | ||
* | ||
* @example | ||
* ```ts | ||
* const MENU_STACK = new InjectionToken<WritableSignal<MenuItems>>("MENU_STACK", { | ||
* providedIn: "root", | ||
* factory: () => signal([]), | ||
* }) | ||
* const menuStacks: MenuStacks = { | ||
* main: MENU_STACK, | ||
* } | ||
* ``` | ||
*/ | ||
export type MenuStacks = Record<Menus, InjectionToken<WritableSignal<MenuItems>>>; |
import { type EnvironmentProviders } from "@angular/core"; | ||
import type { Routes } from "@angular/router"; | ||
import type { MenuStacks } from "./menu"; | ||
import type { RouterMenusOptions } from "./options"; | ||
export declare const provideRouterMenus: (routes: Routes, menuStacks: MenuStacks, options: RouterMenusOptions) => EnvironmentProviders; | ||
export declare function provideRouterMenus(routes: Routes, menus: Menus[], options: RouterMenusOptions): EnvironmentProviders; |
{ | ||
"name": "angular-router-menus", | ||
"version": "1.1.1", | ||
"version": "2.0.0", | ||
"description": "Angular Router menus that build itself on-the-fly with options", | ||
@@ -12,14 +12,2 @@ "license": "MIT", | ||
], | ||
"exports": { | ||
"./angular": { | ||
"types": "./angular.d.ts" | ||
}, | ||
"./package.json": { | ||
"default": "./package.json" | ||
}, | ||
".": { | ||
"types": "./index.d.ts", | ||
"default": "./fesm2022/angular-router-menus.mjs" | ||
} | ||
}, | ||
"dependencies": { | ||
@@ -51,3 +39,12 @@ "tslib": "^2.8.1" | ||
"module": "fesm2022/angular-router-menus.mjs", | ||
"typings": "index.d.ts" | ||
"typings": "index.d.ts", | ||
"exports": { | ||
"./package.json": { | ||
"default": "./package.json" | ||
}, | ||
".": { | ||
"types": "./index.d.ts", | ||
"default": "./fesm2022/angular-router-menus.mjs" | ||
} | ||
} | ||
} |
export * from "./lib/menu"; | ||
export * from "./lib/options"; | ||
export * from "./lib/provider"; | ||
export * from "./lib/service"; |
@@ -13,4 +13,2 @@ # Angular Router Menus | ||
- [Installation](#installation) | ||
- [`menus.ts`](#menusts) | ||
- [`main.ts`](#maints) | ||
- [Usage](#usage) | ||
@@ -23,45 +21,17 @@ - [Configuration](#configuration) | ||
1. Install the package | ||
2. Add these entries to your tsconfig.json of your application | ||
- `angular-router-menus`: This ensures you have all required types globally | ||
- `angular-router-menus/angular`: This patches Angular's Route(r) type with a new entry | ||
3. Create a type definition file and add this line | ||
1. `declare type Menus = "main"` | ||
2. Create a type definition file or add to yours | ||
1. `declare type Menus = "main" | "aside"` | ||
2. Adjust menus by your needs, you will configure them later | ||
4. Create a [`menus.ts`](#menusts) file, this will hold your `Menus` stack injection tokens | ||
5. In your [`main.ts`](#maints) file import and configure the library [as described](#maints) below | ||
3. In your [`main.ts`](#maints) file import and configure the library | ||
4. Make sure you have all your declared menus in the menus array | ||
5. You must need a preloading strategy because I use internal api's | ||
- `NoPreloading` is the default in Angular | ||
### `menus.ts` | ||
```typescript | ||
import { InjectionToken, type WritableSignal, signal } from "@angular/core"; | ||
import type { MenuItems, MenuStacks } from "angular-router-menus"; | ||
export const MENU_STACK = new InjectionToken<WritableSignal<MenuItems>>("MENU_STACK", { | ||
providedIn: "root", | ||
factory: () => signal([]), | ||
}); | ||
export const menus: MenuStacks = { | ||
main: MENU_STACK, | ||
}; | ||
``` | ||
### `main.ts` | ||
```typescript | ||
import { bootstrapApplication } from "@angular/platform-browser"; | ||
import { provideRouter, withComponentInputBinding } from "@angular/router"; | ||
import { provideRouterMenus } from "angular-router-menus"; | ||
import { AppComponent } from "./app/app.component"; | ||
import { menus } from "./menus"; | ||
import { routes } from "./routes"; | ||
void bootstrapApplication(AppComponent, { | ||
providers: [ | ||
provideRouter(routes, withComponentInputBinding()), | ||
provideRouterMenus(routes, menus, { | ||
provideRouter(routes, withPreloading(NoPreloading)), | ||
provideRouterMenus(routes, ["main"], { | ||
defaultMenu: "main", // 👋🏻 | ||
debug: !environment.production, | ||
}), | ||
@@ -77,7 +47,2 @@ ], | ||
```typescript | ||
import { ChangeDetectionStrategy, Component, inject } from "@angular/core"; | ||
import { RouterLink, RouterLinkActive, RouterOutlet } from "@angular/router"; | ||
import { MENU_STACK } from "../menus"; | ||
@Component({ | ||
@@ -91,3 +56,3 @@ selector: "app-root", | ||
export class AppComponent { | ||
readonly menu = inject(MENU_STACK); // 👋🏻 | ||
readonly menu = inject(RouterMenusService).use("main"); // 👋🏻 | ||
} | ||
@@ -110,5 +75,6 @@ ``` | ||
| Property | Description | | ||
| ------------- | ------------------------------------------------- | | ||
| `defaultMenu` | If not defined via `in` this is the default menu. | | ||
| Property | Description | | ||
| ------------- | ----------------------------------------------------------------- | | ||
| `defaultMenu` | If not defined via `in` this is the default menu. | | ||
| `debug` | Enables debugging, because of internal API use I omit all errors. | | ||
@@ -115,0 +81,0 @@ ## Examples |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
29568
2.32%297
0.68%79
-30.09%