ngx-dev-toolbar 3.1.0 → 3.2.0

package/README.md

@@ -32,22 +32,25 @@
 npm install ngx-dev-toolbar
 ```
 
-### 2. Initialize in main.ts
+### 2. Add to app.config.ts
 
 ```typescript
-import { bootstrapApplication } from '@angular/platform-browser';
-import { isDevMode } from '@angular/core';
-
-async function bootstrap() {
-  const appRef = await bootstrapApplication(AppComponent, appConfig);
-
-  if (isDevMode()) {
-    const { initToolbar } = await import('ngx-dev-toolbar');
-    initToolbar(appRef);
-  }
-}
+import { ApplicationConfig, isDevMode } from '@angular/core';
+import { provideToolbar } from 'ngx-dev-toolbar';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(appRoutes),
+    provideToolbar({
+      enabled: isDevMode(),
+    }),
+  ],
+};
+```
 
-bootstrap();
+```typescript
+// main.ts
+bootstrapApplication(AppComponent, appConfig);
 ```
 
 That's it! No template changes needed. The toolbar automatically attaches to the DOM.
@@ -154,15 +157,14 @@ export class AppComponent {
 Customize which tools are visible:
 
 ```typescript
-initToolbar(appRef, {
-  config: {
-    showFeatureFlagsTool: true,
-    showPermissionsTool: true,
-    showLanguageTool: true,
-    showAppFeaturesTool: true,
-    showPresetsTool: true,
-  }
-});
+provideToolbar({
+  enabled: isDevMode(),
+  showFeatureFlagsTool: true,
+  showPermissionsTool: true,
+  showLanguageTool: true,
+  showAppFeaturesTool: true,
+  showPresetsTool: true,
+})
 ```
 
 ### Keyboard Shortcuts

package/components/select/select.component.d.ts

@@ -12,14 +12,16 @@ export declare class ToolbarSelectComponent {
     ariaLabel: import("@angular/core").InputSignal<string>;
     label: import("@angular/core").InputSignal<string>;
     size: import("@angular/core").InputSignal<"small" | "medium">;
+    placeholder: import("@angular/core").InputSignal<string>;
     readonly theme: import("@angular/core").Signal<"light" | "dark">;
     protected readonly selectMenuId: string;
     isOpen: import("@angular/core").WritableSignal<boolean>;
+    isPlaceholder: import("@angular/core").Signal<boolean>;
     selectedLabel: import("@angular/core").Signal<string>;
     positions: ConnectedPosition[];
     toggle(): void;
     close(): void;
     selectOption(option: SelectOption): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarSelectComponent, "ngt-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarSelectComponent, "ngt-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }