@progress/kendo-angular-navigation 19.1.2-develop.4 → 19.1.2-develop.5

package/breadcrumb.module.d.ts

@@ -6,34 +6,22 @@ import * as i0 from "@angular/core";
 import * as i1 from "./breadcrumb/breadcrumb.component";
 import * as i2 from "./breadcrumb/template-directives/item-template.directive";
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the BreadCrumb component.
- * @example
  *
- * ```ts-no-run
- * // Import the BreadCrumb module
+ * @example
+ * ```typescript
  * import { BreadCrumbModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  * import { BrowserModule } from '@angular/platform-browser';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, BreadCrumbModule], // import BreadCrumb module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, BreadCrumbModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 export declare class BreadCrumbModule {

package/directives.d.ts

@@ -13,22 +13,111 @@ import { BottomNavigationItemTemplateDirective } from "./bottomnavigation/templa
 import { BreadCrumbComponent } from "./breadcrumb/breadcrumb.component";
 import { BreadCrumbItemTemplateDirective } from "./breadcrumb/template-directives/item-template.directive";
 /**
-* Utility array that contains all `ActionSheet` related components and directives.
+* Use this utility array to access all ActionSheet-related components and directives in a standalone Angular component.
+*
+* @example
+* ```typescript
+* import { Component } from '@angular/core';
+* import { KENDO_ACTIONSHEET } from '@progress/kendo-angular-navigation';
+*
+* @Component({
+*   selector: 'my-app',
+*   standalone: true,
+*   imports: [KENDO_ACTIONSHEET],
+*   template: `
+*     <kendo-actionsheet [items]="items">
+*     </kendo-actionsheet>
+*   `
+* })
+* export class AppComponent {}
+* ```
 */
 export declare const KENDO_ACTIONSHEET: readonly [typeof ActionSheetComponent, typeof ActionSheetViewComponent, typeof ActionSheetHeaderTemplateDirective, typeof ActionSheetItemTemplateDirective, typeof ActionSheetContentTemplateDirective, typeof ActionSheetFooterTemplateDirective, typeof ActionSheetTemplateDirective];
 /**
-* Utility array that contains all `AppBar` related components and directives.
+* Use this utility array to access all AppBar-related components and directives in a standalone Angular component.
+*
+* @example
+* ```typescript
+* import { Component } from '@angular/core';
+* import { KENDO_APPBAR } from '@progress/kendo-angular-navigation';
+*
+* @Component({
+*   selector: 'my-app',
+*   standalone: true,
+*   imports: [KENDO_APPBAR],
+*   template: `
+*     <kendo-appbar>
+*       <!-- AppBar content -->
+*     </kendo-appbar>
+*   `
+* })
+* export class AppComponent {}
+* ```
 */
 export declare const KENDO_APPBAR: readonly [typeof AppBarComponent, typeof AppBarSectionComponent, typeof AppBarSpacerComponent];
 /**
-* Utility array that contains all `BottomNavigation` related components and directives.
+* Use this utility array to access all BottomNavigation-related components and directives in a standalone Angular component.
+*
+* @example
+* ```typescript
+* import { Component } from '@angular/core';
+* import { KENDO_BOTTOMNAVIGATION } from '@progress/kendo-angular-navigation';
+*
+* @Component({
+*   selector: 'my-app',
+*   standalone: true,
+*   imports: [KENDO_BOTTOMNAVIGATION],
+*   template: `
+*     <kendo-bottomnavigation [items]="items">
+*     </kendo-bottomnavigation>
+*   `
+* })
+* export class AppComponent {}
+* ```
 */
 export declare const KENDO_BOTTOMNAVIGATION: readonly [typeof BottomNavigationComponent, typeof BottomNavigationItemTemplateDirective];
 /**
-* Utility array that contains all `BreadCrumb` related components and directives.
+* Use this utility array to access all BreadCrumb-related components and directives in a standalone Angular component.
+*
+* @example
+* ```typescript
+* import { Component } from '@angular/core';
+* import { KENDO_BREADCRUMB } from '@progress/kendo-angular-navigation';
+*
+* @Component({
+*   selector: 'my-app',
+*   standalone: true,
+*   imports: [KENDO_BREADCRUMB],
+*   template: `
+*     <kendo-breadcrumb [items]="items">
+*     </kendo-breadcrumb>
+*   `
+* })
+* export class AppComponent {}
+* ```
 */
 export declare const KENDO_BREADCRUMB: readonly [typeof BreadCrumbComponent, typeof BreadCrumbItemTemplateDirective];
 /**
-* Utility array that contains all `@progress/kendo-angular-navigation` related components and directives.
+* Use this utility array to access all `@progress/kendo-angular-navigation`-related components and directives in a standalone Angular component.
+*
+* @example
+* ```typescript
+* import { Component } from '@angular/core';
+* import { KENDO_NAVIGATION } from '@progress/kendo-angular-navigation';
+*
+* @Component({
+*   selector: 'my-app',
+*   standalone: true,
+*   imports: [KENDO_NAVIGATION],
+*   template: `
+*     <kendo-appbar>
+*        <!-- AppBar content -->
+*     </kendo-appbar>
+*     <kendo-breadcrumb [items]="breadcrumbItems">
+*     </kendo-breadcrumb>
+*   `
+* })
+* export class AppComponent {}
+* ```
 */
 export declare const KENDO_NAVIGATION: readonly [typeof ActionSheetComponent, typeof ActionSheetViewComponent, typeof ActionSheetHeaderTemplateDirective, typeof ActionSheetItemTemplateDirective, typeof ActionSheetContentTemplateDirective, typeof ActionSheetFooterTemplateDirective, typeof ActionSheetTemplateDirective, typeof AppBarComponent, typeof AppBarSectionComponent, typeof AppBarSpacerComponent, typeof BottomNavigationComponent, typeof BottomNavigationItemTemplateDirective, typeof BreadCrumbComponent, typeof BreadCrumbItemTemplateDirective];

package/esm2022/actionsheet/actionsheet.component.mjs

@@ -23,7 +23,13 @@ import * as i2 from "@angular/animations";
 const DEFAULT_ANIMATION_CONFIG = { duration: 300 };
 /**
  * Represents the [Kendo UI ActionSheet component for Angular](slug:overview_actionsheet).
- * Used to display a set of choices related to a task the user initiates.
+ * Use this component to display a set of choices related to a user-initiated task in a modal sheet that slides up from the bottom of the screen.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet [items]="actionItems" [expanded]="true">
+ * </kendo-actionsheet>
+ * ```
  */
 export class ActionSheetComponent {
     element;
@@ -47,54 +53,50 @@ export class ActionSheetComponent {
      */
     direction;
     /**
-     * Specifies the ActionSheet action buttons.
+     * Specifies the action buttons displayed in the ActionSheet footer.
      */
     actions;
     /**
-     * Specifies the layout of the action buttons.
-     * By default, the action buttons are rendered horizontally and stretched.
+     * Configures the layout of the action buttons in the footer. By default, actions are arranged horizontally and stretched to fill the container.
      */
     actionsLayout = {
         orientation: 'horizontal',
         alignment: 'stretched'
     };
     /**
-     * Specifies if the ActionSheet is closed on overlay click.
+     * Determines whether the ActionSheet closes when the overlay is clicked.
      *
      * @default false
      */
     overlayClickClose = false;
     /**
-     * Specifies the text that is rendered as title.
+     * Sets the title text displayed in the ActionSheet header.
      */
     title;
     /**
-     * Specifies the text that is rendered under the title.
+     * Sets the subtitle text displayed below the title in the header.
      */
     subtitle;
     /**
-     * The collection of items that will be rendered in the ActionSheet.
+     * Provides the collection of items rendered in the ActionSheet content area.
      */
     items;
     /**
-     * The CSS classes that will be rendered on the inner ActionSheet element.
-     * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
+     * Applies CSS classes to the inner ActionSheet element. Accepts any value supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     cssClass;
     /**
-     * The inline styles that will be rendered on the inner ActionSheet element.
-     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     * Applies inline styles to the inner ActionSheet element. Accepts any value supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
      */
     cssStyle;
     /**
-     * Configures the ActionSheet opening and closing animations ([see example](slug:animations_actionsheet)).
-     * By default, the animations are turned off. The default animations' duration is `300ms`.
+     * Configures the opening and closing animations for the ActionSheet ([see example](slug:animations_actionsheet)).
      *
      * @default true
      */
     animation = true;
     /**
-     * Specifies the state of the ActionSheet.
+     * Controls whether the ActionSheet is expanded or collapsed.
      *
      * @default false
      */
@@ -103,7 +105,6 @@ export class ActionSheetComponent {
      * Sets the `aria-labelledby` attribute of the ActionSheet wrapper element.
      * Use this option when the built-in header element is replaced through the [`ActionSheetHeaderTemplate`](slug:api_navigation_actionsheetheadertemplatedirective)
      * or [`ActionSheetContentTemplate`](slug:api_navigation_actionsheetcontenttemplatedirective).
-     *
      */
     titleId = getId('k-actionsheet-title');
     /**
@@ -114,7 +115,7 @@ export class ActionSheetComponent {
     initialFocus = true;
     /**
      * Fires when the `expanded` property of the component is updated.
-     * Used to provide a two-way binding for the `expanded` property.
+     * You can use this event to provide two-way binding for the `expanded` property.
      */
     expandedChange = new EventEmitter();
     /**

package/esm2022/actionsheet/models/item-click.event.mjs

@@ -3,15 +3,17 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Arguments for the `itemClick` event of the ActionSheet.
+ * Provides the event data for the `itemClick` event of the ActionSheet component.
+ *
+ * Use this event to access the clicked item and the original DOM event.
  */
 export class ActionSheetItemClickEvent {
     /**
-     * The ActionSheet item that was clicked.
+     * Provides the ActionSheet item that was clicked.
      */
     item;
     /**
-     * The DOM event that triggered the `itemClick` event.
+     * Represents the original DOM event that triggered the `itemClick` event.
      */
     originalEvent;
 }

package/esm2022/actionsheet/templates/actionsheet-template.mjs

@@ -5,9 +5,18 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the content of the ActionSheet.
+ * Represents a template for customizing the overall content of the ActionSheet.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoActionSheetTemplate` directive inside the `<kendo-actionsheet>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet>
+ *   <ng-template kendoActionSheetTemplate>
+ *     <div>Custom ActionSheet content</div>
+ *   </ng-template>
+ * </kendo-actionsheet>
+ * ```
  */
 export class ActionSheetTemplateDirective {
     templateRef;

package/esm2022/actionsheet/templates/content-template.directive.mjs

@@ -5,9 +5,18 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the items list content of the ActionSheet.
+ * Represents a template for customizing the list content of the ActionSheet items.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoActionSheetContentTemplate` directive inside the `<kendo-actionsheet>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet [items]="items">
+ *   <ng-template kendoActionSheetContentTemplate>
+ *     <div>Custom content here</div>
+ *   </ng-template>
+ * </kendo-actionsheet>
+ * ```
  */
 export class ActionSheetContentTemplateDirective {
     templateRef;

package/esm2022/actionsheet/templates/footer-template.directive.mjs

@@ -5,9 +5,18 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the footer of the ActionSheet.
+ * Represents a template for customizing the footer of the ActionSheet.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoActionSheetFooterTemplate` directive inside the `<kendo-actionsheet>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet>
+ *   <ng-template kendoActionSheetFooterTemplate>
+ *     <button kendoButton>Custom Footer Button</button>
+ *   </ng-template>
+ * </kendo-actionsheet>
+ * ```
  */
 export class ActionSheetFooterTemplateDirective {
     templateRef;

package/esm2022/actionsheet/templates/header-template.directive.mjs

@@ -5,9 +5,18 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the header content of the ActionSheet. Utilizing the template overrides both the `title` and `subtitle` of the ActionSheet.
+ * Represents a template for customizing the header content of the ActionSheet. If you implement this template, it will override the `title` and `subtitle` of the ActionSheet.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoActionSheetHeaderTemplate` directive inside the `<kendo-actionsheet>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet>
+ *   <ng-template kendoActionSheetHeaderTemplate>
+ *     <h3>Custom Header</h3>
+ *   </ng-template>
+ * </kendo-actionsheet>
+ * ```
  */
 export class ActionSheetHeaderTemplateDirective {
     templateRef;

package/esm2022/actionsheet/templates/item-template.directive.mjs

@@ -5,9 +5,18 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the item content of the ActionSheet.
+ * Represents a template for customizing the content of each ActionSheet item.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoActionSheetItemTemplate` directive inside the `<kendo-actionsheet>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet [items]="items">
+ *   <ng-template kendoActionSheetItemTemplate let-item>
+ *     <span>{{ item.title }} (custom)</span>
+ *   </ng-template>
+ * </kendo-actionsheet>
+ * ```
  */
 export class ActionSheetItemTemplateDirective {
     templateRef;

package/esm2022/actionsheet.module.mjs

@@ -15,35 +15,22 @@ import * as i6 from "./actionsheet/templates/footer-template.directive";
 import * as i7 from "./actionsheet/templates/actionsheet-template";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the ActionSheet component.
  *
  * @example
- *
- * ```ts-no-run
- * // Import the ActionSheet module
+ * ```typescript
  * import { ActionSheetModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  * import { BrowserModule } from '@angular/platform-browser';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, ActionSheetModule], // import ActionSheet module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, ActionSheetModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 export class ActionSheetModule {

package/esm2022/appbar/appbar-section.component.mjs

@@ -7,20 +7,16 @@ import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI AppBarSection component for Angular]({% slug contentarrangement_appbar %}#toc-sections).
  *
- * @example
+ * Use the AppBarSection component to group content, actions, or navigation items within the AppBar.
  *
- * ```ts-no-run
- *  * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-appbar>
- *            <kendo-appbar-section>
- *                <h2>Page Title</h2>
- *            </kendo-appbar-section>
- *        </kendo-appbar>
- *    `
- * })
- * class AppComponent {}
+ * @example
+ * ```html
+ * <kendo-appbar>
+ *    <kendo-appbar-section>
+ *         <h2>Page Title</h2>
+ *     </kendo-appbar-section>
+ * </kendo-appbar>
+ * ```
  */
 export class AppBarSectionComponent {
     hostClass = true;

package/esm2022/appbar/appbar-spacer.component.mjs

@@ -7,30 +7,22 @@ import { isPresent } from '../common/util';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI AppBarSpacer component for Angular]({% slug contentarrangement_appbar %}#toc-spacings).
- * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
  *
- * @example
+ * Use the AppBarSpacer component to add white space between AppBar sections and customize its width.
  *
- * ```ts-no-run
- *  * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-appbar>
- *            <kendo-appbar-section>
- *                 <button kendoButton fillMode="flat">
- *                     <kendo-icon name="menu"></kendo-icon>
- *                 </button>
- *            </kendo-appbar-section>
+ * @example
+ * ```html
+ * <kendo-appbar>
+ *    <kendo-appbar-section>
+ *        <button kendoButton fillMode="flat" [svgIcon]="menuIcon"></button>
+ *    </kendo-appbar-section>
  *
- *            <kendo-appbar-spacer></kendo-appbar-spacer>
+ *    <kendo-appbar-spacer></kendo-appbar-spacer>
  *
- *            <kendo-appbar-section>
- *                <h2>Page Title</h2>
- *            </kendo-appbar-section>
- *        </kendo-appbar>
- *    `
- * })
- * class AppComponent {}
+ *     <kendo-appbar-section>
+ *          <h2>Page Title</h2>
+ *     </kendo-appbar-section>
+ * </kendo-appbar>
  * ```
  */
 export class AppBarSpacerComponent {
@@ -43,7 +35,7 @@ export class AppBarSpacerComponent {
     /**
      * Specifies the width of the AppBarSpacer.
      *
-     * If not set, the AppBarSpacer will take all the available space.
+     * If not set, the AppBarSpacer will take all of the available space.
      */
     width;
     constructor(renderer, element) {

package/esm2022/appbar/appbar.component.mjs

@@ -13,7 +13,20 @@ const DEFAULT_POSITION = 'top';
 const DEFAULT_POSITION_MODE = 'static';
 /**
  * Represents the [Kendo UI AppBar component for Angular]({% slug overview_appbar %}).
- * Used to display information, actions, branding titles and additional navigation on the current screen.
+ *
+ * Use the AppBar component to display information, actions, brand titles, and additional navigation on the current screen.
+ *
+ * @example
+ * ```html
+ * <kendo-appbar>
+ *    <kendo-appbar-section>
+ *        <h2>Page Title</h2>
+ *    </kendo-appbar-section>
+ * </kendo-appbar>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link AppBarSectionComponent}, {@link AppBarSpacerComponent}
  */
 export class AppBarComponent {
     localizationService;
@@ -28,15 +41,7 @@ export class AppBarComponent {
      * Specifies the position of the AppBar
      * ([see example]({% slug positioning_appbar %}#toc-position)).
      *
-     * * The possible values are:
-     * * `top` (Default)&mdash;Positions the AppBar at the top of the content.
-     *    Setting the `position` property to `top` requires adding the Appbar component before the page content.
-     *    The position property applies CSS `top: 0` style in [`fixed mode`](slug:api_navigation_appbarcomponent#toc-positionmode) and also adds a `box-shadow` to the bottom of the AppBar.
-     *
-     * * `bottom`&mdash;Positions the AppBar at the bottom of the content.
-     *    Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
-     *   The position property applies CSS `bottom: 0` style in [`fixed mode`](slug:api_navigation_appbarcomponent#toc-positionmode) and also adds a `box-shadow ` to the top of the AppBar.
-     *
+     * @default 'top'
      */
     set position(position) {
         const newPosition = position ? position : DEFAULT_POSITION;
@@ -47,13 +52,9 @@ export class AppBarComponent {
         return this._position;
     }
     /**
-     * Specifies the positionMode of the AppBar
-     * ([see example](slug:positioning_appbar#toc-position-mode)).
+     * Sets the position mode of the AppBar ([see example](slug:positioning_appbar#toc-position-mode)).
      *
-     * * The possible values are:
-     * * `static` (Default)&mdash;Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
-     * * `sticky`&mdash;Positions the AppBar based on the user's scroll position. A sticky element toggles between static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
-     * * `fixed`&mdash;Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
+     * @default 'static'
      */
     set positionMode(positionMode) {
         const newPositionMode = positionMode ? positionMode : DEFAULT_POSITION_MODE;
@@ -64,16 +65,9 @@ export class AppBarComponent {
         return this._positionMode;
     }
     /**
-     * Specifies the theme color of the AppBar.
-     * The theme color will be applied as background color of the component.
-     *
-     *
-     * * The possible values are:
-     * * `light` (Default)&mdash;Applies coloring based on light theme color.
-     * * `dark`&mdash;Applies coloring based on dark theme color.
-     * * `inherit`&mdash; Applies inherited coloring value.
-     * * `primary`&mdash; Applies primary coloring value.
+     * Sets the theme color of the AppBar. The theme color is applied as the background color of the component.
      *
+     * @default 'light'
      */
     set themeColor(themeColor) {
         const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;

package/esm2022/appbar.module.mjs

@@ -10,35 +10,22 @@ import * as i2 from "./appbar/appbar-section.component";
 import * as i3 from "./appbar/appbar-spacer.component";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the AppBar component.
  *
  * @example
- *
- * ```ts-no-run
- * // Import the AppBar module
+ * ```typescript
  * import { AppBarModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  * import { BrowserModule } from '@angular/platform-browser';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, AppBarModule], // import AppBar module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, AppBarModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 export class AppBarModule {