From ea2b925c4ab67b85b148348995da5666ae780f2c Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 24 Apr 2026 14:38:55 +0300 Subject: [PATCH 1/3] Improve angular topics content --- .../src/content/en/components/accordion.mdx | 73 +++++++---- .../content/en/components/action-strip.mdx | 67 +++++++--- .../content/en/components/autocomplete.mdx | 56 +++++---- .../src/content/en/components/avatar.mdx | 42 ++++--- .../src/content/en/components/badge.mdx | 77 +++++++++--- .../src/content/en/components/banner.mdx | 44 ++++--- .../content/en/components/button-group.mdx | 44 ++++--- .../src/content/en/components/button.mdx | 58 ++++++--- .../src/content/en/components/calendar.mdx | 49 ++++---- .../src/content/en/components/card.mdx | 41 +++--- .../src/content/en/components/carousel.mdx | 48 +++---- .../src/content/en/components/checkbox.mdx | 79 +++++++++--- .../src/content/en/components/chip.mdx | 119 +++++++++++++++--- .../en/components/circular-progress.mdx | 43 ++++--- .../content/en/components/combo-features.mdx | 18 ++- .../content/en/components/combo-remote.mdx | 17 ++- .../content/en/components/combo-templates.mdx | 17 ++- .../src/content/en/components/combo.mdx | 42 ++++--- .../src/content/en/components/date-picker.mdx | 46 +++---- .../en/components/date-range-picker.mdx | 50 ++++---- .../en/components/date-time-editor.mdx | 41 +++--- .../src/content/en/components/dialog.mdx | 115 ++++++++++++++--- .../src/content/en/components/divider.mdx | 41 +++--- .../src/content/en/components/drag-drop.mdx | 43 ++++--- .../en/components/drop-down-virtual.mdx | 17 ++- .../src/content/en/components/drop-down.mdx | 43 ++++--- .../content/en/components/expansion-panel.mdx | 99 ++++++++++++--- .../src/content/en/components/for-of.mdx | 46 ++++--- .../general/how-to/how-to-customize-theme.mdx | 17 +++ .../src/content/en/components/grid/grid.mdx | 46 ++++--- .../hierarchicalgrid/hierarchical-grid.mdx | 46 ++++--- .../src/content/en/components/icon.mdx | 44 ++++--- .../src/content/en/components/input-group.mdx | 46 ++++--- .../src/content/en/components/label-input.mdx | 44 ++++--- .../content/en/components/linear-progress.mdx | 43 ++++--- .../src/content/en/components/list.mdx | 102 +++++++++++---- .../src/content/en/components/mask.mdx | 64 ++++++---- .../content/en/components/month-picker.mdx | 47 +++---- .../src/content/en/components/navbar.mdx | 61 ++++++--- .../src/content/en/components/navdrawer.mdx | 49 ++++---- .../src/content/en/components/paginator.mdx | 42 ++++--- .../en/components/pivotGrid/pivot-grid.mdx | 46 ++++--- .../content/en/components/query-builder.mdx | 42 ++++--- .../content/en/components/radio-button.mdx | 111 ++++++++++++---- .../src/content/en/components/rating.mdx | 36 +++--- .../src/content/en/components/ripple.mdx | 44 ++++--- .../src/content/en/components/select.mdx | 71 ++++++++--- .../content/en/components/simple-combo.mdx | 42 ++++--- .../content/en/components/slider/slider.mdx | 48 +++---- .../src/content/en/components/snackbar.mdx | 41 +++--- .../src/content/en/components/splitter.mdx | 41 +++--- .../src/content/en/components/stepper.mdx | 43 ++++--- .../src/content/en/components/switch.mdx | 41 +++--- .../src/content/en/components/tabbar.mdx | 43 ++++--- .../src/content/en/components/tabs.mdx | 91 +++++++++++--- .../content/en/components/texthighlight.mdx | 39 +++--- .../src/content/en/components/time-picker.mdx | 67 ++++++---- .../src/content/en/components/toast.mdx | 41 +++--- .../src/content/en/components/toggle.mdx | 41 +++--- .../src/content/en/components/tooltip.mdx | 76 ++++++++--- .../src/content/en/components/tree.mdx | 43 ++++--- .../en/components/treegrid/tree-grid.mdx | 46 ++++--- 62 files changed, 2136 insertions(+), 1083 deletions(-) diff --git a/docs/angular/src/content/en/components/accordion.mdx b/docs/angular/src/content/en/components/accordion.mdx index eadb230781..eb95621579 100644 --- a/docs/angular/src/content/en/components/accordion.mdx +++ b/docs/angular/src/content/en/components/accordion.mdx @@ -20,7 +20,7 @@ Users are enabled to interact and navigate among a list of items, such as thumbn The following is a basic Angular Accordion example of a FAQ section. It operates as an accordion, with individually working sections. You can toggle each text block with a single click, while expanding multiple panels at the same time. This way you can read information more easily, without having to go back and forth between an automatically expanding and collapsing panel, which conceals the previously opened section every time. -In it, you can see how to define an `igx-accrodion` and its . The sample also demonstrates the two types of expansion behavior. The switch button sets the property to toggle between single and multiple branches to be expanded at a time. +In it, you can see how to define an `igx-accordion` and its . The sample also demonstrates the two types of expansion behavior. The switch button sets the property to toggle between single and multiple branches to be expanded at a time. @@ -36,29 +36,13 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxAccordionModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxAccordionModule } from 'igniteui-angular/accordion'; -// import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxAccordionModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxAccordionComponent` as a standalone dependency, or use the [`IGX_ACCORDION_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/accordion/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxAccordionComponent` is a standalone component. Import `IgxAccordionComponent` directly or use the `IGX_ACCORDION_DIRECTIVES` token, which includes the accordion and all of its supporting components and directives. ```typescript // home.component.ts -... import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion'; // import { IGX_ACCORDION_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package @@ -76,7 +60,6 @@ import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion'; `, - styleUrls: ['home.component.scss'], standalone: true, imports: [IGX_ACCORDION_DIRECTIVES] /* or imports: [IgxAccordionComponent] */ @@ -84,7 +67,27 @@ import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion'; export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Accordion module or directives imported, you can start with a basic configuration of the `igx-accordion` and its panels. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxAccordionModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxAccordionModule } from 'igniteui-angular/accordion'; +// import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [..., IgxAccordionModule], +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Accordion directives imported, you can start with a basic configuration of the `igx-accordion` and its panels. ## Using the Angular Accordion Component @@ -245,6 +248,32 @@ You can see the result below.
+## Events + +The emits the following events during panel expansion and collapse: + +| Event | Description | Cancelable | +|-------|-------------|:----------:| +| | Emitted before a panel expands. | Yes | +| | Emitted after a panel has expanded. | No | +| | Emitted before a panel collapses. | Yes | +| | Emitted after a panel has collapsed. | No | + +The cancelable events expose a `cancel` property. Setting it to `true` prevents the expansion or collapse from occurring: + +```html + + +``` + +```typescript +public handleExpanding(event: IAccordionCancelableEventArgs) { + if (event.panel.disabled) { + event.cancel = true; + } +} +``` + ## Keyboard Navigation Keyboard navigation in the Ignite UI for Angular Accordion provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the panels. @@ -305,6 +334,8 @@ The last step is to include the component's theme. - - - +- +- - [IgxExpansionPanel Styles]({environment:sassApiUrl}/themes#mixin-igx-expansion-panel) ## Additional Resources diff --git a/docs/angular/src/content/en/components/action-strip.mdx b/docs/angular/src/content/en/components/action-strip.mdx index 3810a13df9..9746dc0c71 100644 --- a/docs/angular/src/content/en/components/action-strip.mdx +++ b/docs/angular/src/content/en/components/action-strip.mdx @@ -31,29 +31,13 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxActionStripModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxActionStripModule } from 'igniteui-angular/action-strip'; -// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxActionStripModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxActionStripComponent` as a standalone dependency, or use the [`IGX_ACTION_STRIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/action-strip/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxActionStripComponent` is a standalone component. Import it directly or use the `IGX_ACTION_STRIP_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts -... import { IGX_ACTION_STRIP_DIRECTIVES } from 'igniteui-angular/action-strip'; import { IgxButtonDirective } from 'igniteui-angular/button'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -78,7 +62,29 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Action Strip module or directives imported, you can start with a basic configuration of the `igx-action-strip` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxActionStripModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxActionStripModule } from 'igniteui-angular/action-strip'; +// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxActionStripModule], + ... +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Action Strip directives imported, you can start with a basic configuration of the `igx-action-strip` component. ## Using the Angular Action Strip Component @@ -118,6 +124,29 @@ For scenarios where more than three action items will be shown, it is best to us +### Programmatic Visibility + +Use `show()` and `hide()` to control the Action Strip programmatically: + +```typescript +@ViewChild('actionStrip') actionStrip: IgxActionStripComponent; + +// Show the strip for a specific context (e.g. a hovered row) +this.actionStrip.show(rowComponent); + +// Hide it when interaction ends +this.actionStrip.hide(); +``` + +The `hidden` input can also be set declaratively as an initial state: + +```html + + + +``` + + ### Reusing the Action Strip The same Action Strip instance can be used in multiple places in the document as long as the actions need not be visible simultaneously for them. diff --git a/docs/angular/src/content/en/components/autocomplete.mdx b/docs/angular/src/content/en/components/autocomplete.mdx index 93b7a0d29a..35b2588cb1 100644 --- a/docs/angular/src/content/en/components/autocomplete.mdx +++ b/docs/angular/src/content/en/components/autocomplete.mdx @@ -35,36 +35,13 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the **IgxAutocompleteModule** and **IgxDropDownModule** in our **app.module**. If is applied on an , the **igxInputGroupModule** is also required: +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxAutocompleteModule, IgxDropDownModule } from 'igniteui-angular/drop-down'; -import { IgxInputGroupModule } from 'igniteui-angular/input-group'; -// import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [ - ..., - IgxAutocompleteModule, - IgxDropDownModule, - IgxInputGroupModule, - .... - ], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxAutocompleteDirective` as a standalone directive. +Since `16.0.0`, `IgxAutocompleteDirective` is a standalone component. Import it directly or use the `IGX_DROP_DOWN_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts -... import { IgxAutocompleteDirective, IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular/drop-down'; import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group'; // import { IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package @@ -89,6 +66,35 @@ import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group'; export class HomeComponent {} ``` +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxAutocompleteModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxAutocompleteModule, IgxDropDownModule } from 'igniteui-angular/drop-down'; +import { IgxInputGroupModule } from 'igniteui-angular/input-group'; +// import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [ + ..., + IgxAutocompleteModule, + IgxDropDownModule, + IgxInputGroupModule, + .... + ], + ... +}) +export class AppModule {} +``` + + + Now that you have the Ignite UI for Angular Action Strip module or directive imported, you can start with a basic configuration of the `igxAutocomplete` component. ## Using the Angular Autocomplete diff --git a/docs/angular/src/content/en/components/avatar.mdx b/docs/angular/src/content/en/components/avatar.mdx index 0b2974f623..3307589b27 100644 --- a/docs/angular/src/content/en/components/avatar.mdx +++ b/docs/angular/src/content/en/components/avatar.mdx @@ -31,29 +31,13 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxAvatarModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxAvatarModule } from 'igniteui-angular/avatar'; -// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxAvatarModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxAvatarComponent` as a standalone dependency. +Since `16.0.0`, `IgxAvatarComponent` is a standalone component. Import it directly into your component's `imports` array. ```typescript // home.component.ts -... import { IgxAvatarComponent } from 'igniteui-angular/avatar'; // import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package @@ -67,6 +51,28 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar'; export class HomeComponent {} ``` +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxAvatarModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxAvatarModule } from 'igniteui-angular/avatar'; +// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxAvatarModule], + ... +}) +export class AppModule {} +``` + + + Now that you have the Ignite UI for Angular Avatar module or component imported, you can start with a basic configuration of the `igx-avatar` component. ## Using the Angular Avatar Component diff --git a/docs/angular/src/content/en/components/badge.mdx b/docs/angular/src/content/en/components/badge.mdx index 58fd186afb..650185195a 100644 --- a/docs/angular/src/content/en/components/badge.mdx +++ b/docs/angular/src/content/en/components/badge.mdx @@ -30,12 +30,33 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxBadgeModule` in your **app.module.ts** file. +### Standalone Component + +Since `16.0.0`, `IgxBadgeComponent` is a standalone component. Import it directly into your component's `imports` array. + +```typescript +// home.component.ts + +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +// import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxBadgeComponent] +}) +export class HomeComponent {} +``` + +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxBadgeModule` in your **app.module.ts**: ```typescript // app.module.ts -... import { IgxBadgeModule } from 'igniteui-angular/badge'; // import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package @@ -47,30 +68,31 @@ import { IgxBadgeModule } from 'igniteui-angular/badge'; export class AppModule {} ``` -Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` as a standalone dependency. + -```typescript -// home.component.ts +Now that you have the Ignite UI for Angular Badge module or component imported, you can start with a basic configuration of the `igx-badge` component. -... +## Using the Angular Badge Component + +Let's see how the demo sample is done. It's a simple success badge on an avatar. To build that, we need to import `IgxBadgeComponent` and `IgxAvatarComponent`: + +```typescript import { IgxBadgeComponent } from 'igniteui-angular/badge'; -// import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +// import { IgxBadgeComponent, IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package @Component({ - selector: 'app-home', - template: '', - styleUrls: ['home.component.scss'], + selector: 'app-example', standalone: true, - imports: [IgxBadgeComponent] + imports: [IgxBadgeComponent, IgxAvatarComponent], + /* ... */ }) -export class HomeComponent {} +export class ExampleComponent {} ``` -Now that you have the Ignite UI for Angular Badge module or component imported, you can start with a basic configuration of the `igx-badge` component. - -## Using the Angular Badge Component - -Let's see how the demo sample is done. It's a simple success badge on an avatar. To build that, we need to import the `IgxAvatarModule`, along with the `IgxBadgeModule`: +Alternatively, for NgModule-based applications:_ ```typescript // app.module.ts @@ -88,8 +110,6 @@ import { IgxAvatarModule } from 'igniteui-angular/avatar'; export class AppModule {} ``` -_Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` and `IgxAvatarComponent` as standalone dependencies._ - Next, we will add those components to our template: ```html @@ -172,7 +192,24 @@ The `igx-badge` component can also render as a minimal dot indicator for notific Let's extend the previous sample and create a list with contacts, similar to those in chat clients. In addition to the contact name, we want to display an avatar and the current state of the contact (online, offline or away). To achieve this, we're using the and components. For a container, is used. -To continue, include all needed modules and import them in the **app.module.ts** file. +To continue, import the required components: + +```typescript +import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +// import { IGX_LIST_DIRECTIVES, IgxAvatarComponent, IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-example', + standalone: true, + imports: [IGX_LIST_DIRECTIVES, IgxAvatarComponent, IgxBadgeComponent], + /* ... */ +}) +export class ExampleComponent {} +``` + +Alternatively, for NgModule-based applications:_ ```typescript // app.module.ts diff --git a/docs/angular/src/content/en/components/banner.mdx b/docs/angular/src/content/en/components/banner.mdx index 791c860c2c..3b8884055d 100644 --- a/docs/angular/src/content/en/components/banner.mdx +++ b/docs/angular/src/content/en/components/banner.mdx @@ -30,29 +30,13 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxBannerModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxBannerModule } from 'igniteui-angular/banner'; -// import { IgxBannerModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxBannerModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxBannerComponent` as a standalone dependency, or use the [`IGX_BANNER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/banner/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxBannerComponent` is a standalone component. Import it directly or use the `IGX_BANNER_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts -... import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular/banner'; // import { IGX_BANNER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package @@ -71,7 +55,29 @@ import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular/banner'; export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Banner module or directives imported, you can start with a basic configuration of the `igx-banner` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxBannerModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxBannerModule } from 'igniteui-angular/banner'; +// import { IgxBannerModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxBannerModule], + ... +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Banner directives imported, you can start with a basic configuration of the `igx-banner` component. ## Using the Angular Banner Component diff --git a/docs/angular/src/content/en/components/button-group.mdx b/docs/angular/src/content/en/components/button-group.mdx index 8387967daa..3e2afbb9f7 100644 --- a/docs/angular/src/content/en/components/button-group.mdx +++ b/docs/angular/src/content/en/components/button-group.mdx @@ -30,29 +30,13 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxButtonGroupModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxButtonGroupModule } from 'igniteui-angular/button-group'; -// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxButtonGroupModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxButtonGroupComponent` as a standalone dependency, or use the [`IGX_BUTTON_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/buttonGroup/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxButtonGroupComponent` is a standalone component. Import it directly or use the `IGX_BUTTON_GROUP_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts -... import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; // import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package @@ -83,7 +67,29 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Button Group module or directives imported, you can start with a basic configuration of the `igx-buttongroup` and its buttons. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxButtonGroupModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxButtonGroupModule } from 'igniteui-angular/button-group'; +// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxButtonGroupModule], + ... +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Button Group directives imported, you can start with a basic configuration of the `igx-buttongroup` and its buttons. ## Using for Angular Button Group Component diff --git a/docs/angular/src/content/en/components/button.mdx b/docs/angular/src/content/en/components/button.mdx index 040eec90d3..394fe6cede 100644 --- a/docs/angular/src/content/en/components/button.mdx +++ b/docs/angular/src/content/en/components/button.mdx @@ -34,28 +34,13 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxButtonModule` in your **app.module.ts** file. +### Standalone Directive -```typescript -// app.module.ts -import { IgxButtonModule } from 'igniteui-angular/button'; -// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package -@NgModule({ - imports: [ - ... - IgxButtonModule, - ... - ] -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxButtonDirective` as a standalone dependency. +Since `16.0.0`, `IgxButtonDirective` is a standalone directive. Import it directly into your component's `imports` array. ```typescript // home.component.ts -... import { IgxButtonDirective } from 'igniteui-angular/button'; // import { IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package @@ -69,6 +54,28 @@ import { IgxButtonDirective } from 'igniteui-angular/button'; export class HomeComponent {} ``` +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxButtonModule` in your **app.module.ts**: + +```typescript +// app.module.ts +import { IgxButtonModule } from 'igniteui-angular/button'; +// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package +@NgModule({ + imports: [ + ... + IgxButtonModule, + ... + ] +}) +export class AppModule {} +``` + + + Now that you have the Ignite UI for Angular Button module or directive imported, you can start using the `igxButton` directive on elements. ## Angular Button Types @@ -194,7 +201,22 @@ We can also use the `igxButton` directive to turn elements like `span` and `div` ## Size -We can allow the user to choose the size of the `igxButton` by using the `--ig-size` custom CSS property. To do this, first we have to import the `IgxButtonGroupModule`, and then use the component to display size values. This way whenever one gets selected, we will update the **--ig-size** CSS property. +We can allow the user to choose the size of the `igxButton` by using the `--ig-size` custom CSS property. To do this, import `IGX_BUTTON_GROUP_DIRECTIVES` and use the component to display size values. This way whenever one gets selected, we will update the **--ig-size** CSS property. + +```typescript +import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group'; +// import { IGX_BUTTON_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-example', + standalone: true, + imports: [IGX_BUTTON_GROUP_DIRECTIVES], + /* ... */ +}) +export class ExampleComponent {} +``` + +Alternatively, for NgModule-based applications:_ ```typescript // app.module.ts diff --git a/docs/angular/src/content/en/components/calendar.mdx b/docs/angular/src/content/en/components/calendar.mdx index 522bfa06d4..73d51f67fe 100644 --- a/docs/angular/src/content/en/components/calendar.mdx +++ b/docs/angular/src/content/en/components/calendar.mdx @@ -35,29 +35,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxCalendarModule` in your **app.module.ts** file. +### Standalone Component - - -```typescript -// app.module.ts -... -import { HammerModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxCalendarModule } from 'igniteui-angular/calendar'; -// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxCalendarComponent` as a standalone dependency, or use the [`IGX_CALENDAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/calendar/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxCalendarComponent` is a standalone component. Import it directly or use the `IGX_CALENDAR_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -78,7 +58,30 @@ import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular/calendar'; export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Calendar module or directives imported, you can start using the `igx-calendar` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxCalendarModule` in your **app.module.ts**: + +```typescript +// app.module.ts +import { HammerModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { IgxCalendarModule } from 'igniteui-angular/calendar'; +// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule], + ... +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Calendar directives imported, you can start using the `igx-calendar` component. + +Now that you have the Ignite UI for Angular Combo directives imported, you can start using the `igx-combo` component. ## Using the Angular ComboBox Component diff --git a/docs/angular/src/content/en/components/date-picker.mdx b/docs/angular/src/content/en/components/date-picker.mdx index 212d989819..3ccd4920c5 100644 --- a/docs/angular/src/content/en/components/date-picker.mdx +++ b/docs/angular/src/content/en/components/date-picker.mdx @@ -33,27 +33,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxDatePickerModule` in your **app.module.ts** file. +### Standalone Component - - -```typescript -import { HammerModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxDatePickerModule } from 'igniteui-angular/date-picker'; -// import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxDatePickerModule, BrowserAnimationsModule, HammerModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxDatePickerComponent` as a standalone dependency, or use the [`IGX_DATE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxDatePickerComponent` is a standalone component. Import it directly or use the `IGX_DATE_PICKER_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -78,7 +60,29 @@ import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker'; export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Date Picker module or directives imported, you can start using the `igx-date-picker` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxDatePickerModule` in your **app.module.ts**: + +```typescript +import { HammerModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { IgxDatePickerModule } from 'igniteui-angular/date-picker'; +// import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDatePickerModule, BrowserAnimationsModule, HammerModule], + ... +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Date Picker directives imported, you can start using the `igx-date-picker` component. ## Using the Angular Date Picker Component diff --git a/docs/angular/src/content/en/components/date-range-picker.mdx b/docs/angular/src/content/en/components/date-range-picker.mdx index d7a0a1ff6d..a3b26832e0 100644 --- a/docs/angular/src/content/en/components/date-range-picker.mdx +++ b/docs/angular/src/content/en/components/date-range-picker.mdx @@ -30,28 +30,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxDateRangePickerModule` in your **app.module.ts** file. +### Standalone Component -As the uses the , it also has a dependency on the **BrowserAnimationsModule** and **optionally** the **HammerModule** for touch interactions, so they need to be added to the `AppModule` as well: - -```typescript -// app.module.ts - -import { IgxDateRangePickerModule } from 'igniteui-angular/date-picker'; -// import { IgxDateRangePickerModule } from '@infragistics/igniteui-angular'; for licensed package - -import { HammerModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -@NgModule({ - ... - imports: [..., IgxDateRangePickerModule, BrowserAnimationsModule, HammerModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the as a standalone dependency, or use the [`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxDateRangePickerComponent` is a standalone component. Import it directly or use the `IGX_DATE_RANGE_PICKER_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -72,7 +53,32 @@ import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker'; export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Date Range Picker module or directives imported, you can start using the `igx-date-range-picker` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxDateRangePickerModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxDateRangePickerModule } from 'igniteui-angular/date-picker'; +// import { IgxDateRangePickerModule } from '@infragistics/igniteui-angular'; for licensed package + +import { HammerModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +@NgModule({ + ... + imports: [..., IgxDateRangePickerModule, BrowserAnimationsModule, HammerModule], + ... +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Date Range Picker directives imported, you can start using the `igx-date-range-picker` component. ## Using the Angular Date Range Picker Component diff --git a/docs/angular/src/content/en/components/date-time-editor.mdx b/docs/angular/src/content/en/components/date-time-editor.mdx index 978bcd8efe..5bd9ea6981 100644 --- a/docs/angular/src/content/en/components/date-time-editor.mdx +++ b/docs/angular/src/content/en/components/date-time-editor.mdx @@ -30,24 +30,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxDateTimeEditorModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxDateTimeEditorModule } from 'igniteui-angular/directives'; -// import { IgxDateTimeEditorModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxDateTimeEditorModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxDateTimeEditorDirective` as a standalone dependency. +Since `16.0.0`, `IgxDateTimeEditorComponent` is a standalone component. Import it directly or use the `IGX_INPUT_GROUP_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -72,6 +57,28 @@ export class HomeComponent { } ``` +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxDateTimeEditorModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxDateTimeEditorModule } from 'igniteui-angular/directives'; +// import { IgxDateTimeEditorModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDateTimeEditorModule], + ... +}) +export class AppModule {} +``` + + + Now that you have the Ignite UI for Angular Date Time Editor module or directive imported, you can start using the `igxDateTimeEditor` directive. ## Using the Angular Date Time Editor Directive diff --git a/docs/angular/src/content/en/components/dialog.mdx b/docs/angular/src/content/en/components/dialog.mdx index b5e706b536..068cdcf4e4 100644 --- a/docs/angular/src/content/en/components/dialog.mdx +++ b/docs/angular/src/content/en/components/dialog.mdx @@ -30,24 +30,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxDialogModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxDialogModule } from 'igniteui-angular/dialog'; -// import { IgxDialogModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxDialogModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxDialogComponent` as a standalone dependency, or use the [`IGX_DIALOG_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/dialog/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxDialogComponent` is a standalone component. Import it directly or use the `IGX_DIALOG_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -77,7 +62,29 @@ import { IgxRippleDirective } from 'igniteui-angular/directives'; export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Dialog Window module or directives imported, you can start using the `igx-dialog` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxDialogModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxDialogModule } from 'igniteui-angular/dialog'; +// import { IgxDialogModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDialogModule], + ... +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Dialog Window directives imported, you can start using the `igx-dialog` component.
@@ -250,6 +257,78 @@ params: { } ``` +### Button Customization + +The left and right buttons support `type` (`flat`, `contained`, `fab`) and `ripple` color properties: + +```html + + +``` + +### Two-Way Binding for Open State + +The `isOpen` property supports two-way binding, letting you control dialog visibility from the component: + +```html + + {/* content */} + +``` + +```typescript +public isDialogOpen = false; + +public openDialog() { this.isDialogOpen = true; } +public closeDialog() { this.isDialogOpen = false; } +``` + +Use the `toggle()` method to flip the state without tracking it manually: + +```typescript +@ViewChild('dialog') dialog: IgxDialogComponent; + +public toggleDialog() { + this.dialog.toggle(); +} +``` + +## Events + +| Event | Description | Cancelable | +|-------|-------------|:----------:| +| `opening` | Emitted before the dialog opens. | Yes | +| `opened` | Emitted after the dialog finishes opening. | No | +| `closing` | Emitted before the dialog closes. | Yes | +| `closed` | Emitted after the dialog finishes closing. | No | +| `leftButtonSelect` | Emitted when the left button is clicked. | No | +| `rightButtonSelect` | Emitted when the right button is clicked. | No | + +Use the cancelable `opening` and `closing` events to conditionally prevent the dialog from opening or closing: + +```typescript +import { IDialogCancellableEventArgs } from 'igniteui-angular/dialog'; +// import { IDialogCancellableEventArgs } from '@infragistics/igniteui-angular'; for licensed package + +public onClosing(event: IDialogCancellableEventArgs) { + if (this.hasUnsavedChanges) { + event.cancel = true; + } +} +``` + +```html + + +``` + ### Trap focus inside dialog By default when the dialog is opened the Tab key focus is trapped within it, i.e. the focus does not leave the element when the user keeps tabbing through the focusable elements. When the focus leaves the last element, it moves to the first one and vice versa, when SHIFT + TAB is pressed, when the focus leaves the first element, the last element should be focused. In case the dialog does not contain any focusable elements, the focus will be trapped on the dialog container itself. This behavior can be changed by setting the property. diff --git a/docs/angular/src/content/en/components/divider.mdx b/docs/angular/src/content/en/components/divider.mdx index 3424e4c4c6..7f79fcff6f 100644 --- a/docs/angular/src/content/en/components/divider.mdx +++ b/docs/angular/src/content/en/components/divider.mdx @@ -29,24 +29,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxDividerModule` in your **app.module.ts** file. +### Standalone Directive -```typescript -// app.module.ts - -... -import { IgxDividerModule } from 'igniteui-angular/directives'; -// import { IgxDividerModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxDividerModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxDividerDirective` as a standalone dependency. +Since `16.0.0`, `IgxDividerDirective` is a standalone directive. Import it directly into your component's `imports` array. ```typescript // home.component.ts @@ -64,6 +49,28 @@ import { IgxDividerDirective } from 'igniteui-angular/directives'; export class HomeComponent {} ``` +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxDividerModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxDividerModule } from 'igniteui-angular/directives'; +// import { IgxDividerModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDividerModule], + ... +}) +export class AppModule {} +``` + + + Now that you have the Ignite UI for Angular Divider module or directive imported, you can start using the `igx-divider` component. ## Using the Angular Divider diff --git a/docs/angular/src/content/en/components/drag-drop.mdx b/docs/angular/src/content/en/components/drag-drop.mdx index 855b8d6756..14db61a49b 100644 --- a/docs/angular/src/content/en/components/drag-drop.mdx +++ b/docs/angular/src/content/en/components/drag-drop.mdx @@ -32,24 +32,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxDragDropModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxDragDropModule } from 'igniteui-angular/directives'; -// import { IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxDragDropModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxDragDirective` and `IgxDropDirective` as standalone dependencies, or use the [`IGX_DRAG_DROP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/drag-drop/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxDragDropComponent` is a standalone component. Import it directly or use the `IGX_DRAG_DROP_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -73,7 +58,29 @@ import { IGX_DRAG_DROP_DIRECTIVES } from 'igniteui-angular/directives'; export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Drag and Drop module or directives imported, you can start using the `igxDrag` and `igxDrop` directives. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxDragDropModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxDragDropModule } from 'igniteui-angular/directives'; +// import { IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDragDropModule], + ... +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Drag and Drop directives imported, you can start using the `igxDrag` and `igxDrop` directives. ## Using the Angular Drag Directive diff --git a/docs/angular/src/content/en/components/drop-down-virtual.mdx b/docs/angular/src/content/en/components/drop-down-virtual.mdx index 07994c6afd..0157bbc6ce 100644 --- a/docs/angular/src/content/en/components/drop-down-virtual.mdx +++ b/docs/angular/src/content/en/components/drop-down-virtual.mdx @@ -23,7 +23,22 @@ The Ignite UI for Angular Drop Down component can fully integrate with the [`Igx ### First Steps In order to configure the drop-down to display a list of virtual items, you need to fulfill some prerequisites. -First, we need to import the `IgxForOfModule` in the module of the component that will declare our drop-down. +First, import `IgxForOfDirective` into your component: + +```typescript +import { IgxForOfDirective } from 'igniteui-angular/directives'; +// import { IgxForOfDirective } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-example', + standalone: true, + imports: [IgxForOfDirective], + /* ... */ +}) +export class ExampleComponent {} +``` + +Alternatively, for NgModule-based applications:_ ```typescript // app.module.ts diff --git a/docs/angular/src/content/en/components/drop-down.mdx b/docs/angular/src/content/en/components/drop-down.mdx index e36dc4bd22..9259a31169 100644 --- a/docs/angular/src/content/en/components/drop-down.mdx +++ b/docs/angular/src/content/en/components/drop-down.mdx @@ -32,24 +32,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxDropDownModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxDropDownModule } from 'igniteui-angular/drop-down'; -// import { IgxDropDownModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxDropDownModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxDropDownComponent` as a standalone dependency, or use the [`IGX_DROP_DOWN_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/drop-down/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxDropDownComponent` is a standalone component. Import it directly or use the `IGX_DROP_DOWN_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -84,7 +69,29 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Drop Down module or directives imported, you can start using the `igx-drop-down` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxDropDownModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxDropDownModule } from 'igniteui-angular/drop-down'; +// import { IgxDropDownModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDropDownModule], + ... +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Drop Down directives imported, you can start using the `igx-drop-down` component. ## Using the Angular Drop Down diff --git a/docs/angular/src/content/en/components/expansion-panel.mdx b/docs/angular/src/content/en/components/expansion-panel.mdx index 111a84ce2b..355de1a040 100644 --- a/docs/angular/src/content/en/components/expansion-panel.mdx +++ b/docs/angular/src/content/en/components/expansion-panel.mdx @@ -34,23 +34,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxExpansionPanelModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts -... -import { IgxExpansionPanelModule } from 'igniteui-angular/expansion-panel'; -// import { IgxExpansionPanelModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxExpansionPanelModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxExpansionPanelComponent` as a standalone dependency, or use the [`IGX_EXPANSION_PANEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/expansion-panel/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxExpansionPanelComponent` is a standalone component. Import it directly or use the `IGX_EXPANSION_PANEL_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -86,7 +72,28 @@ import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular/expansion-panel export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Expansion Panel module or directives imported, you can start using the `igx-expansion-panel` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxExpansionPanelModule` in your **app.module.ts**: + +```typescript +// app.module.ts +import { IgxExpansionPanelModule } from 'igniteui-angular/expansion-panel'; +// import { IgxExpansionPanelModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxExpansionPanelModule], + ... +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Expansion Panel directives imported, you can start using the `igx-expansion-panel` component. ## Using the Angular Expansion Panel @@ -148,7 +155,7 @@ export class ExpansionPanelComponent { ```html {/* in expansion-component.component.html */} - + ``` Below we have the results: @@ -214,6 +221,62 @@ Lets see the result from all the above changes: +## Programmatic Control + +Use `expand()`, `collapse()`, or `toggle()` to control the panel state from TypeScript: + +```typescript +import { IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel'; +// import { IgxExpansionPanelComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({...}) +export class MyComponent { + @ViewChild(IgxExpansionPanelComponent) + public panel: IgxExpansionPanelComponent; + + public expandPanel() { this.panel.expand(); } + public collapsePanel() { this.panel.collapse(); } + public togglePanel() { this.panel.toggle(); } +} +``` + +The `collapsed` input also supports two-way binding: + +```html + + Title + Content + +``` + +## Events + +| Event | Description | Cancelable | +|-------|-------------|:----------:| +| `contentExpanding` | Emitted before the panel expands. | Yes | +| `contentExpanded` | Emitted after the panel finishes expanding. | No | +| `contentCollapsing` | Emitted before the panel collapses. | Yes | +| `contentCollapsed` | Emitted after the panel finishes collapsing. | No | + +Use `contentExpanding` to conditionally prevent expansion: + +```typescript +import { IExpansionPanelCancelableEventArgs } from 'igniteui-angular/expansion-panel'; +// import { IExpansionPanelCancelableEventArgs } from '@infragistics/igniteui-angular'; for licensed package + +public onExpanding(event: IExpansionPanelCancelableEventArgs) { + if (this.isLocked) { + event.cancel = true; + } +} +``` + +```html + + ... + +``` + ## Styling ### Expansion Panel Theme Property Map diff --git a/docs/angular/src/content/en/components/for-of.mdx b/docs/angular/src/content/en/components/for-of.mdx index 92256cd275..e9f68282df 100644 --- a/docs/angular/src/content/en/components/for-of.mdx +++ b/docs/angular/src/content/en/components/for-of.mdx @@ -29,25 +29,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxForOfModule` in your **app.module.ts** file. +### Standalone Directive -```typescript -// app.module.ts - -import { IgxForOfModule } from 'igniteui-angular/directives'; -// import { IgxForOfModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - imports: [ - ... - IgxForOfModule, - ... - ] -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxForOfDirective` as a standalone dependency. +Since `16.0.0`, `IgxForOfDirective` is a standalone directive. Import it directly into your component's `imports` array. ```typescript // home.component.ts @@ -71,7 +55,31 @@ export class HomeComponent { } ``` -Now that you have the Ignite UI for Angular Tree Grid module or directives imported, you can start using the `igxFor` directive. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxForOfModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxForOfModule } from 'igniteui-angular/directives'; +// import { IgxForOfModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxForOfModule, + ... + ] +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Tree Grid directives imported, you can start using the `igxFor` directive. ## Using the Angular Virtual ForOf diff --git a/docs/angular/src/content/en/components/general/how-to/how-to-customize-theme.mdx b/docs/angular/src/content/en/components/general/how-to/how-to-customize-theme.mdx index f2121d0fd8..dbcba38379 100644 --- a/docs/angular/src/content/en/components/general/how-to/how-to-customize-theme.mdx +++ b/docs/angular/src/content/en/components/general/how-to/how-to-customize-theme.mdx @@ -270,6 +270,23 @@ As you can see, our styles size is reduced to almost half it's original size. Th We will start by creating a new module and a new routing module in the folder with the employees component in our app. +```typescript +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IGX_COMBO_DIRECTIVES } from 'igniteui-angular/combo'; +import { IGX_TREE_GRID_DIRECTIVES } from 'igniteui-angular/grids/tree-grid'; +// import { IgxButtonDirective, IGX_COMBO_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-example', + standalone: true, + imports: [IgxButtonDirective, IGX_COMBO_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES], + /* ... */ +}) +export class ExampleComponent {} +``` + +Alternatively, for NgModule-based applications:_ + ```typescript // employees.module.ts import { NgModule } from '@angular/core'; diff --git a/docs/angular/src/content/en/components/grid/grid.mdx b/docs/angular/src/content/en/components/grid/grid.mdx index 860f72880b..dbe5cde36b 100644 --- a/docs/angular/src/content/en/components/grid/grid.mdx +++ b/docs/angular/src/content/en/components/grid/grid.mdx @@ -82,25 +82,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxGridModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -import { IgxGridModule } from 'igniteui-angular/grids/grid'; -// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - imports: [ - ... - IgxGridModule, - ... - ] -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxGridComponent` as a standalone dependency, or use the [`IGX_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/grid/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxGridComponent` is a standalone component. Import it directly or use the `IGX_GRID_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -121,7 +105,31 @@ export class HomeComponent { } ``` -Now that you have the Ignite UI for Angular Grid module or directives imported, you can start using the `igx-grid` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxGridModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxGridModule } from 'igniteui-angular/grids/grid'; +// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxGridModule, + ... + ] +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Grid directives imported, you can start using the `igx-grid` component. ## Using the Angular Data Grid diff --git a/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx b/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx index 4fde888c41..2cf4456930 100644 --- a/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx +++ b/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx @@ -36,25 +36,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxHierarchicalGridModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -import { IgxHierarchicalGridModule } from 'igniteui-angular/grids/hierarchical-grid'; -// import { IgxHierarchicalGridModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - imports: [ - ... - IgxHierarchicalGridModule, - ... - ] -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxHierarchicalGridComponent` as a standalone dependency, or use the [`IGX_HIERARCHICAL_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/hierarchical-grid/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxHierarchicalGridComponent` is a standalone component. Import it directly or use the `IGX_HIERARCHICAL_GRID_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -84,7 +68,31 @@ export class HomeComponent { } ``` -Now that you have the Ignite UI for Angular Hierarchical Grid module or directives imported, you can start using the `igx-hierarchical-grid` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxHierarchicalGridModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxHierarchicalGridModule } from 'igniteui-angular/grids/hierarchical-grid'; +// import { IgxHierarchicalGridModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxHierarchicalGridModule, + ... + ] +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Hierarchical Grid directives imported, you can start using the `igx-hierarchical-grid` component. ## Using the Angular Hierarchical Data Grid diff --git a/docs/angular/src/content/en/components/icon.mdx b/docs/angular/src/content/en/components/icon.mdx index 3000da0a36..a8d2b3d589 100644 --- a/docs/angular/src/content/en/components/icon.mdx +++ b/docs/angular/src/content/en/components/icon.mdx @@ -30,25 +30,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxIconModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -import { IgxIconModule } from 'igniteui-angular/icon'; -// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - imports: [ - ... - IgxIconModule, - ... - ] -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxIconComponent` as a standalone dependency. +Since `16.0.0`, `IgxIconComponent` is a standalone component. Import it directly into your component's `imports` array. ```typescript // home.component.ts @@ -68,6 +52,30 @@ export class HomeComponent { } ``` +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxIconModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxIconModule } from 'igniteui-angular/icon'; +// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxIconModule, + ... + ] +}) +export class AppModule {} +``` + + + Now that you have the Ignite UI for Angular Icon module or component imported, you can start using the `igx-icon` component. ## Using the Angular Icon diff --git a/docs/angular/src/content/en/components/input-group.mdx b/docs/angular/src/content/en/components/input-group.mdx index b0f2997a95..29c0a7dbcd 100644 --- a/docs/angular/src/content/en/components/input-group.mdx +++ b/docs/angular/src/content/en/components/input-group.mdx @@ -28,26 +28,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxInputGroupModule` in your **app.module.ts** file. +### Standalone Component -Note that the `IgxInputGroupComponent` also depends on the Angular **FormsModule** in order to have a working Template Driven Form: - -```typescript -// app.module.ts - -import { FormsModule } from '@angular/forms'; -import { IgxInputGroupModule } from 'igniteui-angular/input-group'; -// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxInputGroupModule, FormsModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxInputGroupComponent` as a standalone dependency, or use the [`IGX_INPUT_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxInputGroupComponent` is a standalone component. Import it directly or use the `IGX_INPUT_GROUP_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -77,7 +60,30 @@ export class HomeComponent { } ``` -Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using the `igx-input-group` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxInputGroupModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { FormsModule } from '@angular/forms'; +import { IgxInputGroupModule } from 'igniteui-angular/input-group'; +// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxInputGroupModule, FormsModule], + ... +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Input Group directives imported, you can start using the `igx-input-group` component. + Now that you have the Ignite UI for Angular Toast module or component imported, you can start using the `igx-toast` component. ## Using the Angular Toast diff --git a/docs/angular/src/content/en/components/toggle.mdx b/docs/angular/src/content/en/components/toggle.mdx index b34378a7df..fd3d2a103e 100644 --- a/docs/angular/src/content/en/components/toggle.mdx +++ b/docs/angular/src/content/en/components/toggle.mdx @@ -28,24 +28,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxToggleModule` in your **app.module.ts** file. +### Standalone Directive -```typescript -// app.module.ts - -... -import { IgxToggleModule } from 'igniteui-angular/directives'; -// import { IgxToggleModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxToggleModule] - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxToggleDirective` as a standalone dependency. +Since `16.0.0`, `IgxToggleDirective` is a standalone directive. Import it directly into your component's `imports` array. ```typescript // home.component.ts @@ -72,6 +57,28 @@ import { IgxToggleDirective, IgxButtonDirective } from 'igniteui-angular/directi export class HomeComponent {} ``` +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxToggleModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxToggleModule } from 'igniteui-angular/directives'; +// import { IgxToggleModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxToggleModule] + ... +}) +export class AppModule {} +``` + + + Now that you have the Ignite UI for Angular Toggle module or directive imported, you can start using the `igxToggle` directive. ## Using the Angular Toggle Directive diff --git a/docs/angular/src/content/en/components/tooltip.mdx b/docs/angular/src/content/en/components/tooltip.mdx index 2e06ed1378..3df76984ee 100644 --- a/docs/angular/src/content/en/components/tooltip.mdx +++ b/docs/angular/src/content/en/components/tooltip.mdx @@ -29,23 +29,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxTooltipModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxTooltipModule } from 'igniteui-angular/tooltip'; -// import { IgxTooltipModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [IgxTooltipModule], -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxTooltipDirective` as a standalone dependency, or use the [`IGX_TOOLTIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/directives/src/directives/tooltip/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxTooltipComponent` is a standalone component. Import it directly or use the `IGX_TOOLTIP_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -78,11 +64,48 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar'; export class HomeComponent {} ``` -Now that you have the Ignite UI for Angular Tooltip module or directives imported, you can start using the `igxTooltip` directive. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxTooltipModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxTooltipModule } from 'igniteui-angular/tooltip'; +// import { IgxTooltipModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [IgxTooltipModule], +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Tooltip directives imported, you can start using the `igxTooltip` directive. ## Using the Angular Tooltip -Let's say we want to create a simple text tooltip like the one above. In our case, we're using our awesome [`IgxAvatar`](/avatar) as the element, so we start by importing the `IgxAvatarModule` first. +Let's say we want to create a simple text tooltip like the one above. In our case, we're using our awesome [`IgxAvatar`](/avatar) as the element, so we need to import `IGX_TOOLTIP_DIRECTIVES` and `IgxAvatarComponent`: + +```typescript +import { IGX_TOOLTIP_DIRECTIVES } from 'igniteui-angular/directives'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +// import { IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-example', + standalone: true, + imports: [IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent], + /* ... */ +}) +export class ExampleComponent {} +``` + +Alternatively, for NgModule-based applications:_ ```typescript // app.module.ts @@ -160,6 +183,23 @@ The conten Let's expand on the use of the and use it to provide more details for a specific location on a map! We'll use a simple div to represent our map, the [`IgxAvatar`](/avatar) for a logo in our tooltip and the [`IgxIcon`](/icon) for the location icon on our map. For this purpose, we will get their respective modules. +```typescript +import { IGX_TOOLTIP_DIRECTIVES } from 'igniteui-angular/directives'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +// import { IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-example', + standalone: true, + imports: [IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent, IgxIconComponent], + /* ... */ +}) +export class ExampleComponent {} +``` + +Alternatively, for NgModule-based applications:_ + ```typescript // app.module.ts diff --git a/docs/angular/src/content/en/components/tree.mdx b/docs/angular/src/content/en/components/tree.mdx index 488c745bce..01bbb9cde1 100644 --- a/docs/angular/src/content/en/components/tree.mdx +++ b/docs/angular/src/content/en/components/tree.mdx @@ -36,24 +36,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxTreeModule` in your app.module file. +### Standalone Component -```typescript -// app.module.ts - -... -import { IgxTreeModule } from 'igniteui-angular/tree'; -// import { IgxTreeModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxTreeModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxTreeComponent` as a standalone dependency, or use the [`IGX_TREE_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tree/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxTreeComponent` is a standalone component. Import it directly or use the `IGX_TREE_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -89,7 +74,29 @@ import { IGX_TREE_DIRECTIVES } from 'igniteui-angular/tree'; export class HomeComponent {} ``` -Now that we have the Ignite UI for Angular Tree module or directives imported, let’s get started with a basic configuration of the `igx-tree` and its nodes. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxTreeModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxTreeModule } from 'igniteui-angular/tree'; +// import { IgxTreeModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxTreeModule], + ... +}) +export class AppModule {} +``` + + + +Now that we have the Ignite UI for Angular Tree directives imported, let’s get started with a basic configuration of the `igx-tree` and its nodes. ## Using the Angular Tree diff --git a/docs/angular/src/content/en/components/treegrid/tree-grid.mdx b/docs/angular/src/content/en/components/treegrid/tree-grid.mdx index 19da225e57..6f4af6480b 100644 --- a/docs/angular/src/content/en/components/treegrid/tree-grid.mdx +++ b/docs/angular/src/content/en/components/treegrid/tree-grid.mdx @@ -32,25 +32,9 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the `IgxTreeGridModule` in your **app.module.ts** file. +### Standalone Component -```typescript -// app.module.ts - -import { IgxTreeGridModule } from 'igniteui-angular/grids/tree-grid'; -// import { IgxTreeGridModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - imports: [ - ... - IgxTreeGridModule, - ... - ] -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxTreeGridComponent` as a standalone dependency, or use the [`IGX_TREE_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/tree-grid/public_api.ts) token to import the component and all of its supporting components and directives. +Since `16.0.0`, `IgxTreeGridComponent` is a standalone component. Import it directly or use the `IGX_TREE_GRID_DIRECTIVES` token, which includes the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -71,7 +55,31 @@ export class HomeComponent { } ``` -Now that you have the Ignite UI for Angular Tree Grid module or directives imported, you can start using the `igx-tree-grid` component. +### NgModule (Legacy) + +For applications using NgModules (Angular versions prior to standalone support), import `IgxTreeGridModule` in your **app.module.ts**: + +```typescript +// app.module.ts + +import { IgxTreeGridModule } from 'igniteui-angular/grids/tree-grid'; +// import { IgxTreeGridModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxTreeGridModule, + ... + ] +}) +export class AppModule {} +``` + + + +Now that you have the Ignite UI for Angular Tree Grid directives imported, you can start using the `igx-tree-grid` component. ## Using the Angular Tree Grid From 609267ee996bd46527c238e38de0dadc16653b9e Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 24 Apr 2026 15:53:03 +0300 Subject: [PATCH 2/3] jp topics changes --- .../src/content/jp/components/accordion.mdx | 42 ++++--- .../content/jp/components/action-strip.mdx | 42 ++++--- .../content/jp/components/autocomplete.mdx | 58 +++++----- .../src/content/jp/components/avatar.mdx | 42 ++++--- .../src/content/jp/components/badge.mdx | 77 +++++++++---- .../src/content/jp/components/banner.mdx | 42 ++++--- .../content/jp/components/button-group.mdx | 42 ++++--- .../src/content/jp/components/button.mdx | 40 ++++--- .../src/content/jp/components/calendar.mdx | 50 +++++---- .../src/content/jp/components/card.mdx | 48 ++++---- .../src/content/jp/components/carousel.mdx | 50 +++++---- .../src/content/jp/components/checkbox.mdx | 40 ++++--- .../src/content/jp/components/chip.mdx | 40 ++++--- .../jp/components/circular-progress.mdx | 42 ++++--- .../content/jp/components/combo-features.mdx | 18 ++- .../content/jp/components/combo-remote.mdx | 17 ++- .../content/jp/components/combo-templates.mdx | 17 ++- .../src/content/jp/components/combo.mdx | 40 ++++--- .../src/content/jp/components/date-picker.mdx | 48 ++++---- .../jp/components/date-range-picker.mdx | 50 +++++---- .../jp/components/date-time-editor.mdx | 42 ++++--- .../src/content/jp/components/dialog.mdx | 42 ++++--- .../src/content/jp/components/divider.mdx | 42 ++++--- .../src/content/jp/components/drag-drop.mdx | 42 ++++--- .../jp/components/drop-down-virtual.mdx | 17 ++- .../src/content/jp/components/drop-down.mdx | 42 ++++--- .../content/jp/components/expansion-panel.mdx | 40 ++++--- .../src/content/jp/components/for-of.mdx | 44 +++++--- .../general/how-to/how-to-customize-theme.mdx | 19 +++- .../src/content/jp/components/grid/grid.mdx | 52 +++++---- .../hierarchicalgrid/hierarchical-grid.mdx | 52 +++++---- .../src/content/jp/components/icon.mdx | 44 +++++--- .../src/content/jp/components/input-group.mdx | 46 ++++---- .../src/content/jp/components/label-input.mdx | 42 ++++--- .../content/jp/components/linear-progress.mdx | 42 ++++--- .../src/content/jp/components/list.mdx | 106 +++++++++++++----- .../src/content/jp/components/mask.mdx | 69 ++++++++---- .../content/jp/components/month-picker.mdx | 50 +++++---- .../src/content/jp/components/navbar.mdx | 59 +++++++--- .../src/content/jp/components/navdrawer.mdx | 52 +++++---- .../src/content/jp/components/paginator.mdx | 40 ++++--- .../jp/components/pivotgrid/pivot-grid.mdx | 44 +++++--- .../content/jp/components/query-builder.mdx | 40 ++++--- .../content/jp/components/radio-button.mdx | 46 ++++---- .../src/content/jp/components/rating.mdx | 38 +++---- .../src/content/jp/components/ripple.mdx | 44 +++++--- .../src/content/jp/components/select.mdx | 38 ++++--- .../content/jp/components/simple-combo.mdx | 40 ++++--- .../content/jp/components/slider/slider.mdx | 50 +++++---- .../src/content/jp/components/snackbar.mdx | 42 ++++--- .../src/content/jp/components/splitter.mdx | 40 ++++--- .../src/content/jp/components/stepper.mdx | 42 ++++--- .../src/content/jp/components/switch.mdx | 42 ++++--- .../src/content/jp/components/tabbar.mdx | 42 ++++--- .../src/content/jp/components/tabs.mdx | 42 ++++--- .../content/jp/components/texthighlight.mdx | 40 ++++--- .../src/content/jp/components/time-picker.mdx | 52 +++++---- .../src/content/jp/components/toast.mdx | 42 ++++--- .../src/content/jp/components/toggle.mdx | 42 ++++--- .../src/content/jp/components/tooltip.mdx | 58 +++++++--- .../src/content/jp/components/tree.mdx | 42 ++++--- .../jp/components/treegrid/tree-grid.mdx | 44 +++++--- 62 files changed, 1696 insertions(+), 1043 deletions(-) diff --git a/docs/angular/src/content/jp/components/accordion.mdx b/docs/angular/src/content/jp/components/accordion.mdx index aaeafe46fe..0cf754a23d 100644 --- a/docs/angular/src/content/jp/components/accordion.mdx +++ b/docs/angular/src/content/jp/components/accordion.mdx @@ -37,24 +37,9 @@ ng add igniteui-angular Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。 -次に、**app.module.ts** ファイルに `IgxAccordionModule` をインポートします。 +### スタンドアロン コンポーネント -```typescript -// app.module.ts - -... -import { IgxAccordionModule } from 'igniteui-angular/accordion'; -// import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxAccordionModule], - ... -}) -export class AppModule {} -``` - -あるいは、`16.0.0` 以降、`IgxAccordionComponent` をスタンドアロンの依存関係としてインポートすることも、[`IGX_ACCORDION_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/accordion/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。 +`16.0.0` 以降、`IgxAccordionComponent` はスタンドアロン コンポーネントです。直接インポートするか、コンポーネントとそのすべてのサポート コンポーネントおよびディレクティブを含む `IGX_ACCORDION_DIRECTIVES` トークンを使用してください。 ```typescript // home.component.ts @@ -85,6 +70,29 @@ import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion'; export class HomeComponent {} ``` +### NgModule (レガシー) + +NgModule を使用するアプリケーションの場合は、**app.module.ts** で `IgxAccordionModule` をインポートします: + +```typescript +// app.module.ts + +... +import { IgxAccordionModule } from 'igniteui-angular/accordion'; +// import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxAccordionModule], + ... +}) +export class AppModule {} +``` + + + Ignite UI for Angular Accordion モジュールまたはディレクティブをインポートしたので、`igx-accordion` とそのパネルの基本構成を開始できます。 ## Angular Accordion コンポーネントの使用 diff --git a/docs/angular/src/content/jp/components/action-strip.mdx b/docs/angular/src/content/jp/components/action-strip.mdx index beeb79c5c3..066eb7c80d 100644 --- a/docs/angular/src/content/jp/components/action-strip.mdx +++ b/docs/angular/src/content/jp/components/action-strip.mdx @@ -32,24 +32,9 @@ ng add igniteui-angular Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。 -次に、**app.module.ts** ファイルに `IgxActionStripModule` をインポートします。 +### スタンドアロン コンポーネント -```typescript -// app.module.ts - -... -import { IgxActionStripModule } from 'igniteui-angular/action-strip'; -// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxActionStripModule], - ... -}) -export class AppModule {} -``` - -あるいは、`16.0.0` 以降、`IgxActionStripComponent` をスタンドアロンの依存関係としてインポートすることも、[`IGX_ACTION_STRIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/action-strip/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。 +`16.0.0` 以降、`IgxActionStripComponent` はスタンドアロン コンポーネントです。直接インポートするか、コンポーネントとそのすべてのサポート コンポーネントおよびディレクティブを含む `IGX_ACTION_STRIP_DIRECTIVES` トークンを使用してください。 ```typescript // home.component.ts @@ -79,6 +64,29 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; export class HomeComponent {} ``` +### NgModule (レガシー) + +NgModule を使用するアプリケーションの場合は、**app.module.ts** で `IgxActionStripModule` をインポートします: + +```typescript +// app.module.ts + +... +import { IgxActionStripModule } from 'igniteui-angular/action-strip'; +// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxActionStripModule], + ... +}) +export class AppModule {} +``` + + + Ignite UI for Angular Action Strip モジュールまたはディレクティブをインポートしたので、`igx-action-strip` コンポーネントの基本構成を開始できます。 ## Angular Action Strip コンポーネントの使用 diff --git a/docs/angular/src/content/jp/components/autocomplete.mdx b/docs/angular/src/content/jp/components/autocomplete.mdx index 2d21ced4c4..45066b4774 100644 --- a/docs/angular/src/content/jp/components/autocomplete.mdx +++ b/docs/angular/src/content/jp/components/autocomplete.mdx @@ -36,31 +36,9 @@ ng add igniteui-angular Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。 -はじめに、**app.module** で **IgxAutocompleteModule** と **IgxDropDownModule** をインポートします。 が に適用される場合、**igxInputGroupModule** も必要です。 +### スタンドアロン コンポーネント -```typescript -// app.module.ts - -... -import { IgxAutocompleteModule, IgxDropDownModule } from 'igniteui-angular/drop-down'; -import { IgxInputGroupModule } from 'igniteui-angular/input-group'; -// import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [ - ..., - IgxAutocompleteModule, - IgxDropDownModule, - IgxInputGroupModule, - .... - ], - ... -}) -export class AppModule {} -``` - -あるいは、`16.0.0` 以降、`IgxAutocompleteDirective` をスタンドアロンのディレクティブとしてインポートできます。 +`16.0.0` 以降、`IgxAutocompleteDirective` はスタンドアロン ディレクティブです。`IgxAutocompleteDirective` をインポートするか、`IGX_DROP_DOWN_DIRECTIVES` および `IGX_INPUT_GROUP_DIRECTIVES` トークンを使用してください。 ```typescript // home.component.ts @@ -90,7 +68,37 @@ import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group'; export class HomeComponent {} ``` -Ignite UI for Angular Action Strip モジュールまたはディレクティブをインポートしたので、`igxAutocomplete` コンポーネントの基本構成を開始できます。 +### NgModule (レガシー) + +NgModule を使用するアプリケーションの場合は、**app.module** で `IgxAutocompleteModule`、`IgxDropDownModule`、および `IgxInputGroupModule` をインポートします: + +```typescript +// app.module.ts + +... +import { IgxAutocompleteModule, IgxDropDownModule } from 'igniteui-angular/drop-down'; +import { IgxInputGroupModule } from 'igniteui-angular/input-group'; +// import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [ + ..., + IgxAutocompleteModule, + IgxDropDownModule, + IgxInputGroupModule, + .... + ], + ... +}) +export class AppModule {} +``` + + + +Ignite UI for Angular Autocomplete モジュールまたはディレクティブをインポートしたので、`igxAutocomplete` コンポーネントの基本構成を開始できます。 ## Angular Autocomplete の使用 diff --git a/docs/angular/src/content/jp/components/avatar.mdx b/docs/angular/src/content/jp/components/avatar.mdx index 74fccefc89..2f7aa559c8 100644 --- a/docs/angular/src/content/jp/components/avatar.mdx +++ b/docs/angular/src/content/jp/components/avatar.mdx @@ -32,24 +32,9 @@ ng add igniteui-angular Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。 -次に、**app.module.ts** ファイルに `IgxAvatarModule` をインポートします。 +### スタンドアロン コンポーネント -```typescript -// app.module.ts - -... -import { IgxAvatarModule } from 'igniteui-angular/avatar'; -// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxAvatarModule], - ... -}) -export class AppModule {} -``` - -あるいは、`16.0.0` 以降、`IgxAvatarComponent` をスタンドアロンの依存関係としてインポートできます。 +`16.0.0` 以降、`IgxAvatarComponent` はスタンドアロン コンポーネントです。直接インポートするか、コンポーネントとそのすべてのサポート コンポーネントおよびディレクティブを含む `IgxAvatarComponent` トークンを使用してください。 ```typescript // home.component.ts @@ -68,6 +53,29 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar'; export class HomeComponent {} ``` +### NgModule (レガシー) + +NgModule を使用するアプリケーションの場合は、**app.module.ts** で `IgxAvatarModule` をインポートします: + +```typescript +// app.module.ts + +... +import { IgxAvatarModule } from 'igniteui-angular/avatar'; +// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxAvatarModule], + ... +}) +export class AppModule {} +``` + + + Ignite UI for Angular Avatar モジュールまたはコンポーネントをインポートしたので、`igx-avatar` コンポーネントの基本構成を開始できます。 ## Angular Avatar コンポーネントの使用 diff --git a/docs/angular/src/content/jp/components/badge.mdx b/docs/angular/src/content/jp/components/badge.mdx index 9ffb7b4130..d57d7147eb 100644 --- a/docs/angular/src/content/jp/components/badge.mdx +++ b/docs/angular/src/content/jp/components/badge.mdx @@ -31,7 +31,30 @@ ng add igniteui-angular Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。 -次に、**app.module.ts** ファイルに `IgxBadgeModule` をインポートします。 +### スタンドアロン コンポーネント + +`16.0.0` 以降、`IgxBadgeComponent` はスタンドアロン コンポーネントです。直接インポートしてください。 + +```typescript +// home.component.ts + +... +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +// import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxBadgeComponent] +}) +export class HomeComponent {} +``` + +### NgModule (レガシー) + +NgModule を使用するアプリケーションの場合は、**app.module.ts** で `IgxBadgeModule` をインポートします: ```typescript // app.module.ts @@ -48,30 +71,31 @@ import { IgxBadgeModule } from 'igniteui-angular/badge'; export class AppModule {} ``` -あるいは、`16.0.0` 以降、`IgxBadgeComponent` をスタンドアロンの依存関係としてインポートできます。 + -```typescript -// home.component.ts +Ignite UI for Angular Badge モジュールまたはコンポーネントをインポートしたので、`igx-badge` コンポーネントの基本構成を開始できます。 -... +## Angular Badge コンポーネントの使用 + +デモ サンプルの実行方法を見てみましょう。アバターのシンプルな success スタイルのバッジです。これを構築するためには、`IgxBadgeComponent` と `IgxAvatarComponent` をインポートする必要があります。 + +```typescript import { IgxBadgeComponent } from 'igniteui-angular/badge'; -// import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +// import { IgxBadgeComponent, IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package @Component({ - selector: 'app-home', - template: '', - styleUrls: ['home.component.scss'], + selector: 'app-example', standalone: true, - imports: [IgxBadgeComponent] + imports: [IgxBadgeComponent, IgxAvatarComponent], + /* ... */ }) -export class HomeComponent {} +export class ExampleComponent {} ``` -Ignite UI for Angular Badge モジュールまたはコンポーネントをインポートしたので、`igx-badge` コンポーネントの基本構成を開始できます。 - -## Angular Badge コンポーネントの使用 - -デモ サンプルの実行方法を見てみましょう。アバターのシンプルな success スタイルのバッジです。これを構築するためには、`IgxBadgeModule` とともに `IgxAvatarModule` をインポートする必要があります。 +NgModule ベースのアプリケーションの場合:_ ```typescript // app.module.ts @@ -89,8 +113,6 @@ import { IgxAvatarModule } from 'igniteui-angular/avatar'; export class AppModule {} ``` -_あるいは、`16.0.0` 以降、`IgxBadgeComponent` と `IgxAvatarComponent` をスタンドアロンの依存関係としてインポートできます。_ - 次に、これらのコンポーネントをテンプレートに追加します。 ```html @@ -172,7 +194,24 @@ export class BadgeIconComponent implements OnInit { チャット クライアントのような連絡先リストを作成します。連絡先の名前を表示し、アバターおよび連絡先の現在状態 (オンライン、オフライン、退席中) を表示します。これを達成するには、 および コンポーネントを使用します。コンテナーの場合、 が使用されます。 -続行するには、必要なすべてのモジュールを含めて、**app.module.ts** ファイルにインポートします。 +続行するには、必要なコンポーネントをインポートします。 + +```typescript +import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +// import { IGX_LIST_DIRECTIVES, IgxAvatarComponent, IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-example', + standalone: true, + imports: [IGX_LIST_DIRECTIVES, IgxAvatarComponent, IgxBadgeComponent], + /* ... */ +}) +export class ExampleComponent {} +``` + +NgModule ベースのアプリケーションの場合:_ ```typescript // app.module.ts diff --git a/docs/angular/src/content/jp/components/banner.mdx b/docs/angular/src/content/jp/components/banner.mdx index 9b104ac913..c54b80c7d3 100644 --- a/docs/angular/src/content/jp/components/banner.mdx +++ b/docs/angular/src/content/jp/components/banner.mdx @@ -31,24 +31,9 @@ ng add igniteui-angular Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。 -次に、**app.module.ts** ファイルに `IgxBannerModule` をインポートします。 +### スタンドアロン コンポーネント -```typescript -// app.module.ts - -... -import { IgxBannerModule } from 'igniteui-angular/banner'; -// import { IgxBannerModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxBannerModule], - ... -}) -export class AppModule {} -``` - -あるいは、`16.0.0` 以降、`IgxBannerComponent` をスタンドアロンの依存関係としてインポートすることも、[`IGX_BANNER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/banner/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。 +`16.0.0` 以降、`IgxBannerComponent` はスタンドアロン コンポーネントです。直接インポートするか、コンポーネントとそのすべてのサポート コンポーネントおよびディレクティブを含む `IGX_BANNER_DIRECTIVES` トークンを使用してください。 ```typescript // home.component.ts @@ -72,6 +57,29 @@ import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular/banner'; export class HomeComponent {} ``` +### NgModule (レガシー) + +NgModule を使用するアプリケーションの場合は、**app.module.ts** で `IgxBannerModule` をインポートします: + +```typescript +// app.module.ts + +... +import { IgxBannerModule } from 'igniteui-angular/banner'; +// import { IgxBannerModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxBannerModule], + ... +}) +export class AppModule {} +``` + + + Ignite UI for Angular Banner モジュールまたはディレクティブをインポートしたので、`igx-banner` コンポーネントの基本構成を開始できます。 ## Angular Banner コンポーネントの使用 diff --git a/docs/angular/src/content/jp/components/button-group.mdx b/docs/angular/src/content/jp/components/button-group.mdx index 5d0fb9bd67..0cc0f7c7d4 100644 --- a/docs/angular/src/content/jp/components/button-group.mdx +++ b/docs/angular/src/content/jp/components/button-group.mdx @@ -31,24 +31,9 @@ ng add igniteui-angular Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。 -次に、**app.module.ts** ファイルに `IgxButtonGroupModule` をインポートします。 +### スタンドアロン コンポーネント -```typescript -// app.module.ts - -... -import { IgxButtonGroupModule } from 'igniteui-angular/button-group'; -// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxButtonGroupModule], - ... -}) -export class AppModule {} -``` - -あるいは、`16.0.0` 以降、`IgxButtonGroupComponent` をスタンドアロンの依存関係としてインポートすることも、[`IGX_BUTTON_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/buttonGroup/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。 +`16.0.0` 以降、`IgxButtonGroupComponent` はスタンドアロン コンポーネントです。直接インポートするか、コンポーネントとそのすべてのサポート コンポーネントおよびディレクティブを含む `IGX_BUTTON_GROUP_DIRECTIVES` トークンを使用してください。 ```typescript // home.component.ts @@ -84,6 +69,29 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; export class HomeComponent {} ``` +### NgModule (レガシー) + +NgModule を使用するアプリケーションの場合は、**app.module.ts** で `IgxButtonGroupModule` をインポートします: + +```typescript +// app.module.ts + +... +import { IgxButtonGroupModule } from 'igniteui-angular/button-group'; +// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxButtonGroupModule], + ... +}) +export class AppModule {} +``` + + + Ignite UI for Angular Button Group モジュールまたはディレクティブをインポートしたので、`igx-buttongroup` とそのボタンの基本構成を開始できます。 ## Angular Button Group コンポーネントの使用 diff --git a/docs/angular/src/content/jp/components/button.mdx b/docs/angular/src/content/jp/components/button.mdx index 3fef70f5ae..fb11ff28eb 100644 --- a/docs/angular/src/content/jp/components/button.mdx +++ b/docs/angular/src/content/jp/components/button.mdx @@ -35,23 +35,9 @@ ng add igniteui-angular Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。 -次に、**app.module.ts** ファイルに `IgxButtonModule` をインポートします。 +### スタンドアロン コンポーネント -```typescript -// app.module.ts -import { IgxButtonModule } from 'igniteui-angular/button'; -// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package -@NgModule({ - imports: [ - ... - IgxButtonModule, - ... - ] -}) -export class AppModule {} -``` - -あるいは、`16.0.0` 以降、`IgxButtonDirective` をスタンドアロンの依存関係としてインポートできます。 +`16.0.0` 以降、`IgxButtonDirective` はスタンドアロン コンポーネントです。直接インポートしてください。 ```typescript // home.component.ts @@ -70,6 +56,28 @@ import { IgxButtonDirective } from 'igniteui-angular/button'; export class HomeComponent {} ``` +### NgModule (レガシー) + +NgModule を使用するアプリケーションの場合は、**app.module.ts** で `IgxButtonModule` をインポートします: + +```typescript +// app.module.ts +import { IgxButtonModule } from 'igniteui-angular/button'; +// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package +@NgModule({ + imports: [ + ... + IgxButtonModule, + ... + ] +}) +export class AppModule {} +``` + + + Ignite UI for Angular Button モジュールまたはディレクティブをインポートしたので、要素で `igxButton` ディレクティブの使用を開始できます。 ## Angular ボタン タイプ diff --git a/docs/angular/src/content/jp/components/calendar.mdx b/docs/angular/src/content/jp/components/calendar.mdx index c0b484e040..31cb8dd143 100644 --- a/docs/angular/src/content/jp/components/calendar.mdx +++ b/docs/angular/src/content/jp/components/calendar.mdx @@ -36,7 +36,32 @@ ng add igniteui-angular Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。 -次に、**app.module.ts** ファイルに `IgxCalendarModule` をインポートします。 +### スタンドアロン コンポーネント + +`16.0.0` 以降、`IgxCalendarComponent` はスタンドアロン コンポーネントです。直接インポートするか、コンポーネントとそのすべてのサポート コンポーネントおよびディレクティブを含む `IGX_CALENDAR_DIRECTIVES` トークンを使用してください。 + +```typescript +// home.component.ts + +import { HammerModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular/calendar'; +// import { IGX_CALENDAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES] + /* or imports: [BrowserAnimationsModule, HammerModule, IgxCalendarComponent] */ +}) +export class HomeComponent {} +``` + +### NgModule (レガシー) + +NgModule を使用するアプリケーションの場合は、**app.module.ts** で `IgxCalendarModule` をインポートします: