Datepicker can be used either inline or inside of the popup.
Handling the popup
When using a button (or any other element) to open the popup, the styling and content of the button is left up to
you. In the example above, the button is simply given the text "Toggle", but you could also use an icon, or even
- group the input and button with an
+ group the
+ input and button with an
input group.
You have several ways of knowing when user selects a date. The date is selected either by clicking on it, pressing
Space or Enter, typing text in the input or programmatically.
@@ -87,7 +88,7 @@
Handling the popup
The model, however, is NOT a native javascript date, see the following - Date Model section for more info. + Date Model section for more info.
Handling the popup
Datepicker uses NgbDateStruct interface as a model
and not the native Date object. It's a simple data structure with 3 fields, but note that months start
@@ -156,10 +157,10 @@
Input date parsing and formatting
NgbDateParserFormatter methods, as in
custom date parser formatter example.
-Date selection and navigation are two different things. You might have a date selected in January, but August currently displayed. @@ -177,10 +178,10 @@
Input date parsing and formatting
You can limit the dates available for navigation and selection using
[minDate] and [maxDate] inputs. If you don't specify any of them, you'll have infinite
@@ -195,10 +196,10 @@
Input date parsing and formatting
You can completely replace how each date is rendered by providing a custom template and rendering anything you want inside. You'll get a date context available inside the template with info on whether current date is disabled, @@ -217,13 +218,14 @@
Input date parsing and formatting
let-date="date" in the template. See
$implicit example in Angular documentation.
-
It is often useful to highlight a today's date in the calendar view or add a certain logic to it. Today's date is
- the date returned by the NgbCalendar's getToday()
+ the date returned by the NgbCalendar's
+ getToday()
method.
Input date parsing and formatting
You can replace the content of the datepicker. Combined with the NgbDatepickerMonthView you can customize the layout of months as in the @@ -253,23 +255,24 @@
Input date parsing and formatting
You can insert anything you want in a datepicker footer by providing a template.
The datepicker model is a single date, however you still can implement range selection functionality. With
(select) and (dateSelect) outputs you'll know which dates are being selected and with the
[dayTemplate] input you can customize the way any particular date looks. If you want to use the
NgbDatepickerInput, you can also tell the popup to stay open by tuning the
- [autoClose] input. Check the range selection example
+ [autoClose] input. Check the
+ range selection example
and the initial demo on this page for more details.
Input date parsing and formatting
NgbDatepicker inside of it. In this case we'll handle everything related to date selection and
navigation for you and you can create a completely customized popup with any data model you want.
-
Since the 2.0.0 release datepicker will use the
application locale
if it is present to get translations of weekdays and month names. The internal service that does translation is
- called NgbDatepickerI18n and you could provide your own implementation if necessary.
+ called
+ NgbDatepickerI18n and you could provide your own implementation if necessary.
Input date parsing and formatting
month label is extracted under thengb.datepicker.previous-month
name.
-You can customize keyboard navigation as in the custom keyboard navigation example. The default keys are as @@ -358,4 +362,4 @@
Input date parsing and formatting
-Nav directives will help you to build navigation components.
-
Nav includes NgbNav, NgbNavItem, NgbNavLink,
NgbNavContent directives and the NgbNavOutlet component.
@@ -90,9 +90,9 @@
Selection / active nav
won't be raised in case of programmatic nav selection. It is not possible to select disabled tabs by clicking on them. -.nav-tabs or
.nav-pills classes. Otherwise active nav will not be highlighted,
@@ -126,9 +126,9 @@ Accessibility
Router integration is simple: just use standard <router-outlet> component instead of
ngbNavOutlet and add [routerLink] directives to nav links.
@@ -144,9 +144,9 @@
Accessibility
and in your template:
@@ -180,4 +180,4 @@
Accessibility
-
In order to properly operate a pagination behaviour, there are 3 important notions you have to be familiar with,
which are actually available as @Input() on the widget:
@@ -43,9 +43,9 @@
Filtering and sorting
>, you don't need to reimplement dedicated pipes for that purpose. Recommendation is to move filtering and sorting logic into the component itself where some property getters could be exposed. -It is possible to customize what exactly is displayed in each pagination link and there are several ways of doing it. @@ -89,4 +89,4 @@
Using templates
Also see the Customization example for a live version.
-
and get notified when a part of it is scrolled into or out of the viewport.
-
+
The core scrollspy implementation is a
NgbScrollSpyService that is based on an
@@ -34,9 +34,9 @@
You can use the service together with the routerLink directive and its [fragment] input,
or you can force the scrollspy to get to a specific fragment via the .scrollTo() method.
-
+
-
+
The directive will help you to setup the scrollspy service instance on a specific container. It is merely a
syntactic sugar around the service that will start and add fragments automatically, as well as clean everything up
@@ -52,9 +52,9 @@
NgbScrollSpy API for all available inputs and
outputs.
-
+
-
+
There are also two helper directives: NgbScrollSpyMenu and NgbScrollSpyItem. They will
highlight the active item in a menu, nav or any custom list.
@@ -93,9 +93,9 @@
Hierarchical menus
For more details, please see the related remo
-
+
-
+
If you want to customize the IntersectionObserver you can pass rootMargin and
threshold options when starting the service.
@@ -121,4 +121,4 @@
Hierarchical menus
+
diff --git a/demo/src/app/components/scrollspy/overview/scrollspy-overview.component.ts b/demo/src/app/components/scrollspy/overview/scrollspy-overview.component.ts
index 15a0c02707..cde2c96d67 100644
--- a/demo/src/app/components/scrollspy/overview/scrollspy-overview.component.ts
+++ b/demo/src/app/components/scrollspy/overview/scrollspy-overview.component.ts
@@ -1,29 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
import { Snippet } from '../../../services/snippet';
-import { NgbdDemoListService } from '../../../services/demo-list.service';
import { NgbAlertModule, NgbScrollSpyModule } from '@ng-bootstrap/ng-bootstrap';
import { CodeComponent } from '../../../shared/code.component';
import { RouterLink } from '@angular/router';
import { NgbdApiDocsBadge } from '../../../shared/api-docs';
-import { NgbdOverviewSectionComponent } from '../../../shared/overview/overview-section.component';
-import { NgbdOverview } from '../../../shared/overview/overview';
+import { PageHeaderComponent } from '../../../shared/page-header.component';
@Component({
selector: 'ngbd-scrollspy-overview',
standalone: true,
- imports: [
- NgbAlertModule,
- NgbScrollSpyModule,
- NgbdOverviewSectionComponent,
- CodeComponent,
- RouterLink,
- NgbdApiDocsBadge,
- ],
+ imports: [NgbAlertModule, NgbScrollSpyModule, CodeComponent, RouterLink, NgbdApiDocsBadge, PageHeaderComponent],
templateUrl: './scrollspy-overview.component.html',
host: { '[class.overview]': 'true' },
})
export class NgbdScrollSpyOverviewComponent {
+ @Input() overview: { fragment: string; title: string };
+
SERVICE = Snippet({
lang: 'ts',
code: `
@@ -120,10 +113,4 @@ export class NgbdScrollSpyOverviewComponent {
{{ spy.active }} // 'one'
`,
});
-
- sections: NgbdOverview = {};
-
- constructor(demoList: NgbdDemoListService) {
- this.sections = demoList.getOverviewSections('scrollspy');
- }
}
diff --git a/demo/src/app/components/scrollspy/scrollspy.routes.ts b/demo/src/app/components/scrollspy/scrollspy.routes.ts
index bb3b1f0eae..5fb3b3d0b6 100644
--- a/demo/src/app/components/scrollspy/scrollspy.routes.ts
+++ b/demo/src/app/components/scrollspy/scrollspy.routes.ts
@@ -1,11 +1,9 @@
/* eslint-disable @typescript-eslint/no-var-requires */
import { ComponentWrapper } from '../../shared/component-wrapper/component-wrapper.component';
import { NgbdApiPage } from '../../shared/api-page/api-page.component';
-import { NgbdExamplesPage } from '../../shared/examples-page/examples.component';
+import { DemoListComponent } from '../../shared/examples-page/demo-list.component';
import { NgbdScrollSpyOverviewComponent } from './overview/scrollspy-overview.component';
import { Routes } from '@angular/router';
-import { ENVIRONMENT_INITIALIZER, inject } from '@angular/core';
-import { NgbdDemoListService } from '../../services/demo-list.service';
import { NgbdScrollSpyBasic } from './demos/basic/scrollspy-basic';
import { NgbdScrollSpyNavbar } from './demos/navbar/scrollspy-navbar';
import { NgbdScrollSpyItems } from './demos/items/scrollspy-items';
@@ -19,38 +17,43 @@ const OVERVIEW = {
customization: 'Customization',
};
-const DEMOS = {
- basic: {
+const DEMOS = [
+ {
+ fragment: 'basic',
title: 'Basic',
type: NgbdScrollSpyBasic,
code: 'scrollspy/demos/basic/scrollspy-basic.ts',
markup: 'scrollspy/demos/basic/scrollspy-basic.html',
},
- items: {
+ {
+ fragment: 'items',
title: 'Menu items',
type: NgbdScrollSpyItems,
code: 'scrollspy/demos/items/scrollspy-items.ts',
markup: 'scrollspy/demos/items/scrollspy-items.html',
},
- service: {
+ {
+ fragment: 'service',
title: 'Service',
type: NgbdScrollSpyService,
code: 'scrollspy/demos/service/scrollspy-service.ts',
markup: 'scrollspy/demos/service/scrollspy-service.html',
},
- nested: {
+ {
+ fragment: 'nested',
title: 'Nested items',
type: NgbdScrollSpyNested,
code: 'scrollspy/demos/nested/scrollspy-nested.ts',
markup: 'scrollspy/demos/nested/scrollspy-nested.html',
},
- navbar: {
+ {
+ fragment: 'navbar',
title: 'Navbar',
type: NgbdScrollSpyNavbar,
code: 'scrollspy/demos/navbar/scrollspy-navbar.ts',
markup: 'scrollspy/demos/navbar/scrollspy-navbar.html',
},
-};
+];
export const ROUTES: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'overview' },
@@ -61,16 +64,17 @@ export const ROUTES: Routes = [
name: 'Scrollspy',
bootstrap: 'https://getbootstrap.com/docs/%version%/components/scrollspy/',
},
- providers: [
+ children: [
{
- provide: ENVIRONMENT_INITIALIZER,
- multi: true,
- useValue: () => inject(NgbdDemoListService).register('scrollspy', DEMOS, OVERVIEW),
+ path: 'overview',
+ component: NgbdScrollSpyOverviewComponent,
+ data: { overview: OVERVIEW },
+ },
+ {
+ path: 'examples',
+ component: DemoListComponent,
+ data: { demos: DEMOS },
},
- ],
- children: [
- { path: 'overview', component: NgbdScrollSpyOverviewComponent },
- { path: 'examples', component: NgbdExamplesPage },
{ path: 'api', component: NgbdApiPage },
],
},
diff --git a/demo/src/app/components/table/overview/table-overview.component.html b/demo/src/app/components/table/overview/table-overview.component.html
index 34238f7b8d..a488f76fa0 100644
--- a/demo/src/app/components/table/overview/table-overview.component.html
+++ b/demo/src/app/components/table/overview/table-overview.component.html
@@ -15,7 +15,7 @@
GitHub.
-
+
Most importantly, there are way too many different use cases and options for such a complex component. Instead of
building a monster-of-a-widget with hundreds of options and customizations, we would encourage you to use
@@ -36,9 +36,9 @@
doesn't bloat your resulting bundle size by bringing 3rd party dependencies
doesn't pretend to be an Angular library by wrapping something else
-
+
-
+
Having said that, we decided to give you some simple examples of common table features. Take a look at them for the
inspiration and maybe even use them as a starting point.
@@ -64,4 +64,4 @@
custom delay for the data fetch.
-
+
diff --git a/demo/src/app/components/table/overview/table-overview.component.ts b/demo/src/app/components/table/overview/table-overview.component.ts
index c1e07eebb7..ef08155f62 100644
--- a/demo/src/app/components/table/overview/table-overview.component.ts
+++ b/demo/src/app/components/table/overview/table-overview.component.ts
@@ -1,17 +1,15 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
import { LIB_VERSIONS } from '../../../tokens';
-import { NgbdDemoListService } from '../../../services/demo-list.service';
import { RouterLink } from '@angular/router';
import { NgbdTableOverviewDemo } from './demo/table-overview-demo.component';
-import { NgbdOverviewSectionComponent } from '../../../shared/overview/overview-section.component';
-import { NgbdOverview } from '../../../shared/overview/overview';
+import { PageHeaderComponent } from '../../../shared/page-header.component';
@Component({
selector: 'ngbd-table-overview',
standalone: true,
- imports: [NgbAlertModule, NgbdOverviewSectionComponent, RouterLink, NgbdTableOverviewDemo],
+ imports: [NgbAlertModule, RouterLink, NgbdTableOverviewDemo, PageHeaderComponent],
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './table-overview.component.html',
host: {
@@ -19,11 +17,6 @@ import { NgbdOverview } from '../../../shared/overview/overview';
},
})
export class NgbdTableOverviewComponent {
+ @Input() overview: { fragment: string; title: string };
bootstrapVersion = inject(LIB_VERSIONS).bootstrap;
-
- sections: NgbdOverview = {};
-
- constructor(demoList: NgbdDemoListService) {
- this.sections = demoList.getOverviewSections('table');
- }
}
diff --git a/demo/src/app/components/table/table.routes.ts b/demo/src/app/components/table/table.routes.ts
index cc93670f5a..f266bec067 100644
--- a/demo/src/app/components/table/table.routes.ts
+++ b/demo/src/app/components/table/table.routes.ts
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-var-requires */
import { ComponentWrapper } from '../../shared/component-wrapper/component-wrapper.component';
-import { NgbdExamplesPage } from '../../shared/examples-page/examples.component';
+import { DemoListComponent } from '../../shared/examples-page/demo-list.component';
import { NgbdTableBasic } from './demos/basic/table-basic';
import { NgbdTableComplete } from './demos/complete/table-complete';
import { NgbdTableFiltering } from './demos/filtering/table-filtering';
@@ -8,16 +8,15 @@ import { NgbdTablePagination } from './demos/pagination/table-pagination';
import { NgbdTableSortable } from './demos/sortable/table-sortable';
import { NgbdTableOverviewComponent } from './overview/table-overview.component';
import { Routes } from '@angular/router';
-import { ENVIRONMENT_INITIALIZER, inject } from '@angular/core';
-import { NgbdDemoListService } from '../../services/demo-list.service';
const OVERVIEW = {
'why-not': 'Why not?',
examples: 'Code examples',
};
-const DEMOS = {
- basic: {
+const DEMOS = [
+ {
+ fragment: 'basic',
title: 'Basic table',
type: NgbdTableBasic,
files: [
@@ -31,7 +30,8 @@ const DEMOS = {
},
],
},
- sortable: {
+ {
+ fragment: 'sortable',
title: 'Sortable table',
type: NgbdTableSortable,
files: [
@@ -45,7 +45,8 @@ const DEMOS = {
},
],
},
- filtering: {
+ {
+ fragment: 'filtering',
title: 'Search and filtering',
type: NgbdTableFiltering,
files: [
@@ -59,7 +60,8 @@ const DEMOS = {
},
],
},
- pagination: {
+ {
+ fragment: 'pagination',
title: 'Pagination',
type: NgbdTablePagination,
files: [
@@ -73,7 +75,8 @@ const DEMOS = {
},
],
},
- complete: {
+ {
+ fragment: 'complete',
title: 'Complete example',
type: NgbdTableComplete,
files: [
@@ -103,7 +106,7 @@ const DEMOS = {
},
],
},
-};
+];
export const ROUTES: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'overview' },
@@ -113,16 +116,17 @@ export const ROUTES: Routes = [
data: {
name: 'Table',
},
- providers: [
+ children: [
{
- provide: ENVIRONMENT_INITIALIZER,
- multi: true,
- useValue: () => inject(NgbdDemoListService).register('table', DEMOS, OVERVIEW),
+ path: 'overview',
+ component: NgbdTableOverviewComponent,
+ data: { overview: OVERVIEW },
+ },
+ {
+ path: 'examples',
+ component: DemoListComponent,
+ data: { demos: DEMOS },
},
- ],
- children: [
- { path: 'overview', component: NgbdTableOverviewComponent },
- { path: 'examples', component: NgbdExamplesPage },
],
},
];
diff --git a/demo/src/app/components/timepicker/timepicker.routes.ts b/demo/src/app/components/timepicker/timepicker.routes.ts
index 7d666eee47..a74c347e16 100644
--- a/demo/src/app/components/timepicker/timepicker.routes.ts
+++ b/demo/src/app/components/timepicker/timepicker.routes.ts
@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-var-requires */
import { ComponentWrapper } from '../../shared/component-wrapper/component-wrapper.component';
import { NgbdApiPage } from '../../shared/api-page/api-page.component';
-import { NgbdExamplesPage } from '../../shared/examples-page/examples.component';
+import { DemoListComponent } from '../../shared/examples-page/demo-list.component';
import { NgbdTimepickerAdapter } from './demos/adapter/timepicker-adapter';
import { NgbdTimepickerBasic } from './demos/basic/timepicker-basic';
import { NgbdTimepickerConfig } from './demos/config/timepicker-config';
@@ -12,65 +12,72 @@ import { NgbdTimepickerSteps } from './demos/steps/timepicker-steps';
import { NgbdTimepickerValidation } from './demos/validation/timepicker-validation';
import { NgbdTimepickerI18n } from './demos/i18n/timepicker-i18n';
import { Routes } from '@angular/router';
-import { ENVIRONMENT_INITIALIZER, inject } from '@angular/core';
-import { NgbdDemoListService } from '../../services/demo-list.service';
-const DEMOS = {
- basic: {
+const DEMOS = [
+ {
+ fragment: 'basic',
title: 'Timepicker',
type: NgbdTimepickerBasic,
code: 'timepicker/demos/basic/timepicker-basic.ts',
markup: 'timepicker/demos/basic/timepicker-basic.html',
},
- meridian: {
+ {
+ fragment: 'meridian',
title: 'Meridian',
type: NgbdTimepickerMeridian,
code: 'timepicker/demos/meridian/timepicker-meridian.ts',
markup: 'timepicker/demos/meridian/timepicker-meridian.html',
},
- seconds: {
+ {
+ fragment: 'seconds',
title: 'Seconds',
type: NgbdTimepickerSeconds,
code: 'timepicker/demos/seconds/timepicker-seconds.ts',
markup: 'timepicker/demos/seconds/timepicker-seconds.html',
},
- spinners: {
+ {
+ fragment: 'spinners',
title: 'Spinners',
type: NgbdTimepickerSpinners,
code: 'timepicker/demos/spinners/timepicker-spinners.ts',
markup: 'timepicker/demos/spinners/timepicker-spinners.html',
},
- steps: {
+ {
+ fragment: 'steps',
title: 'Custom steps',
type: NgbdTimepickerSteps,
code: 'timepicker/demos/steps/timepicker-steps.ts',
markup: 'timepicker/demos/steps/timepicker-steps.html',
},
- validation: {
+ {
+ fragment: 'validation',
title: 'Custom validation',
type: NgbdTimepickerValidation,
code: 'timepicker/demos/validation/timepicker-validation.ts',
markup: 'timepicker/demos/validation/timepicker-validation.html',
},
- adapter: {
+ {
+ fragment: 'adapter',
title: 'Custom time adapter',
type: NgbdTimepickerAdapter,
code: 'timepicker/demos/adapter/timepicker-adapter.ts',
markup: 'timepicker/demos/adapter/timepicker-adapter.html',
},
- i18n: {
+ {
+ fragment: 'i18n',
title: 'Internationalization of timepickers',
type: NgbdTimepickerI18n,
code: 'timepicker/demos/i18n/timepicker-i18n.ts',
markup: 'timepicker/demos/i18n/timepicker-i18n.html',
},
- config: {
+ {
+ fragment: 'config',
title: 'Global configuration of timepickers',
type: NgbdTimepickerConfig,
code: 'timepicker/demos/config/timepicker-config.ts',
markup: 'timepicker/demos/config/timepicker-config.html',
},
-};
+];
export const ROUTES: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'examples' },
@@ -80,15 +87,8 @@ export const ROUTES: Routes = [
data: {
name: 'Timepicker',
},
- providers: [
- {
- provide: ENVIRONMENT_INITIALIZER,
- multi: true,
- useValue: () => inject(NgbdDemoListService).register('timepicker', DEMOS),
- },
- ],
children: [
- { path: 'examples', component: NgbdExamplesPage },
+ { path: 'examples', component: DemoListComponent, data: { demos: DEMOS } },
{ path: 'api', component: NgbdApiPage },
],
},
diff --git a/demo/src/app/components/toast/overview/toast-overview.component.html b/demo/src/app/components/toast/overview/toast-overview.component.html
index 39318c3b1e..3d8b3e3d29 100644
--- a/demo/src/app/components/toast/overview/toast-overview.component.html
+++ b/demo/src/app/components/toast/overview/toast-overview.component.html
@@ -3,7 +3,7 @@
Goal is to mimic the push notifications available both on mobile and desktop operating systems.
-
+
NgbToast component allows you to only render the
corresponding markup. Use it in one of your templates, and you are done. It will render a toast.
@@ -25,9 +25,9 @@
application environment.
+
-
+
Let's take the opportunity to demonstrate how to simply build a global toast management service.
TLDR;
@@ -130,4 +130,4 @@ 2. Toast container component
Click here to see
an example a bit more advanced of this how-to.
-
+
diff --git a/demo/src/app/components/toast/overview/toast-overview.component.ts b/demo/src/app/components/toast/overview/toast-overview.component.ts
index e928404019..688c1004e2 100644
--- a/demo/src/app/components/toast/overview/toast-overview.component.ts
+++ b/demo/src/app/components/toast/overview/toast-overview.component.ts
@@ -1,24 +1,23 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
import { Snippet } from '../../../services/snippet';
-import { NgbdDemoListService } from '../../../services/demo-list.service';
import { LIB_VERSIONS } from '../../../tokens';
import { RouterLink } from '@angular/router';
import { CodeComponent } from '../../../shared/code.component';
import { NgbAlertModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgbdOverviewSectionComponent } from '../../../shared/overview/overview-section.component';
-import { NgbdOverview } from '../../../shared/overview/overview';
+import { PageHeaderComponent } from '../../../shared/page-header.component';
@Component({
selector: 'ngbd-toast-overview',
standalone: true,
- imports: [NgbAlertModule, NgbNavModule, NgbdOverviewSectionComponent, RouterLink, CodeComponent],
+ imports: [NgbAlertModule, NgbNavModule, RouterLink, CodeComponent, PageHeaderComponent],
templateUrl: './toast-overview.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { '[class.overview]': 'true' },
})
export class NgbdToastOverviewComponent {
bootstrapVersion = inject(LIB_VERSIONS).bootstrap;
+ @Input() overview: { fragment: string; title: string };
TOAST_INLINE_BASIC = Snippet({
lang: 'html',
@@ -111,10 +110,4 @@ export class NgbdToastOverviewComponent {
+
+ `,
+})
+export class DemoListComponent {
+ componentName = inject(ActivatedRoute).parent!.snapshot.data.name;
+ @Input() demos: any;
+}
diff --git a/demo/src/app/shared/examples-page/demo.component.html b/demo/src/app/shared/examples-page/demo.component.html
index 3f655c9990..46360c2292 100644
--- a/demo/src/app/shared/examples-page/demo.component.html
+++ b/demo/src/app/shared/examples-page/demo.component.html
@@ -1,6 +1,6 @@
-
-
+
+
{{ demoTitle }}
@@ -23,7 +23,7 @@
(click)="trackStackBlitzClick()"
class="stackblitz btn-sm btn btn-outline-secondary"
target="_blank"
- href="stackblitzes/{{ component }}/{{ id }}/stackblitz.html"
+ href="stackblitzes/{{ component }}/{{ fragment }}/stackblitz.html"
title="Edit in StackBlitz"
>
@@ -50,15 +50,15 @@
-
+
- {{ component }}-{{ id }}.html
+ {{ component }}-{{ fragment }}.html
-
+
- {{ component }}-{{ id }}.ts
+ {{ component }}-{{ fragment }}.ts
diff --git a/demo/src/app/shared/examples-page/demo.component.ts b/demo/src/app/shared/examples-page/demo.component.ts
index 7c15416681..9ea308ef80 100644
--- a/demo/src/app/shared/examples-page/demo.component.ts
+++ b/demo/src/app/shared/examples-page/demo.component.ts
@@ -25,12 +25,12 @@ const TYPES: { [name: string]: string } = {
export class NgbdWidgetDemoComponent {
@Input() demoTitle: string;
@Input() component: string;
- @Input() id: string;
+ @Input() fragment: string;
@Input() code: string;
@Input() markup: string;
@Input() files: { name: string; source: string }[];
@Input() showCode = false;
- @Input() showStackblitz;
+ @Input() showStackblitz: boolean;
codeService = inject(NgbdDemoCodeService);
@@ -56,11 +56,11 @@ export class NgbdWidgetDemoComponent {
}
trackStackBlitzClick() {
- this._analytics.trackEvent('StackBlitz View', this.component + ' ' + this.id);
+ this._analytics.trackEvent('StackBlitz View', this.component + ' ' + this.fragment);
}
trackShowCodeClick() {
if (this.showCode) {
- this._analytics.trackEvent('Show Code View', this.component + ' ' + this.id);
+ this._analytics.trackEvent('Show Code View', this.component + ' ' + this.fragment);
}
}
}
diff --git a/demo/src/app/shared/examples-page/examples.component.ts b/demo/src/app/shared/examples-page/examples.component.ts
deleted file mode 100644
index 41e736a217..0000000000
--- a/demo/src/app/shared/examples-page/examples.component.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-import { NgbdDemoListService } from '../../services/demo-list.service';
-import { NgbdWidgetDemoComponent } from './demo.component';
-import { NgComponentOutlet, NgFor } from '@angular/common';
-
-@Component({
- standalone: true,
- imports: [NgbdWidgetDemoComponent, NgComponentOutlet, NgFor],
- template: `
-
-
- `,
-})
-export class NgbdExamplesPage {
- component: string;
- demos: any = [];
-
- constructor(route: ActivatedRoute, demoList: NgbdDemoListService) {
- // We go up to parent route defining /components/:widget to read the widget name
- // This route is declared in root app.routing.ts.
- const componentName = (this.component = route.parent!.parent!.snapshot.url[1].path);
- if (componentName) {
- const demos = demoList.getDemos(componentName);
- if (demos) {
- this.demos = Object.keys(demos).map((id) => {
- return { id, ...demos[id] };
- });
- }
- }
- }
-}
diff --git a/demo/src/app/shared/overview/overview-section.component.ts b/demo/src/app/shared/overview/overview-section.component.ts
deleted file mode 100644
index fd61631f29..0000000000
--- a/demo/src/app/shared/overview/overview-section.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-import { NgbdOverviewSection } from './overview';
-import { RouterLink } from '@angular/router';
-
-@Component({
- selector: 'ngbd-overview-section',
- standalone: true,
- imports: [RouterLink],
- changeDetection: ChangeDetectionStrategy.OnPush,
- host: {
- class: 'd-block',
- },
- template: `
-
-
-
-
- {{ section.title }}
-
-
-
{{ title }}
+ ;
+ @ContentChildren(PageHeaderComponent) private _tableOfContents: QueryList;
sidebarCollapsed = true;
isLargeScreenOrLess: boolean;
diff --git a/demo/src/main.ts b/demo/src/main.ts
index 0d37273b72..ecdafe9f7c 100644
--- a/demo/src/main.ts
+++ b/demo/src/main.ts
@@ -5,6 +5,7 @@ import { AppComponent } from './app/app.component';
import {
PreloadAllModules,
provideRouter,
+ withComponentInputBinding,
withHashLocation,
withInMemoryScrolling,
withPreloading,
@@ -20,6 +21,7 @@ bootstrapApplication(AppComponent, {
ROUTES,
withPreloading(PreloadAllModules),
withHashLocation(),
+ withComponentInputBinding(),
withInMemoryScrolling({
anchorScrolling: 'enabled',
scrollPositionRestoration: 'enabled',
The core scrollspy implementation is a
NgbScrollSpyService that is based on an
@@ -34,9 +34,9 @@
You can use the service together with the routerLink directive and its [fragment] input,
or you can force the scrollspy to get to a specific fragment via the .scrollTo() method.
-
The directive will help you to setup the scrollspy service instance on a specific container. It is merely a syntactic sugar around the service that will start and add fragments automatically, as well as clean everything up @@ -52,9 +52,9 @@
NgbScrollSpy API for all available inputs and
outputs.
-
There are also two helper directives: NgbScrollSpyMenu and NgbScrollSpyItem. They will
highlight the active item in a menu, nav or any custom list.
@@ -93,9 +93,9 @@
Hierarchical menus
For more details, please see the related remo
-
If you want to customize the IntersectionObserver you can pass rootMargin and
threshold options when starting the service.
@@ -121,4 +121,4 @@
Hierarchical menus
Most importantly, there are way too many different use cases and options for such a complex component. Instead of building a monster-of-a-widget with hundreds of options and customizations, we would encourage you to use @@ -36,9 +36,9 @@
Having said that, we decided to give you some simple examples of common table features. Take a look at them for the inspiration and maybe even use them as a starting point. @@ -64,4 +64,4 @@ custom delay for the data fetch. -
NgbToast component allows you to only render the corresponding markup. Use it in one of your templates, and you are done. It will render a toast. @@ -25,9 +25,9 @@ application environment.
Let's take the opportunity to demonstrate how to simply build a global toast management service.