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..e8e20e25da 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 @@ -222,6 +228,30 @@ If everything went right, you should see this in your browser:
+## Events + +| Event | Description | Cancelable | +|-------|-------------|:----------:| +| `selectionChanging` | Emitted before an item from the dropdown is selected. Provides `value`, `cancel`, and `owner`. | Yes | + +Use `selectionChanging` to intercept or transform the selected value: + +```typescript +import { AutocompleteSelectionChangingEventArgs } from 'igniteui-angular/drop-down'; +// import { AutocompleteSelectionChangingEventArgs } from '@infragistics/igniteui-angular'; for licensed package + +public onSelectionChanging(args: AutocompleteSelectionChangingEventArgs) { + if (args.value === 'Restricted City') { + args.cancel = true; + } +} +``` + +```html + + +``` + ## Keyboard Navigation
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..0f209715ad 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 @@ -252,6 +258,35 @@ Finally, we will add a `toast`, displaying a message about the WiFi state. The r +## Events + +| Event | Description | Cancelable | +|-------|-------------|:----------:| +| `opening` | Emitted before the banner starts opening. Provides `BannerCancelEventArgs` with `banner` and `cancel`. | Yes | +| `opened` | Emitted after the banner finishes opening. | No | +| `closing` | Emitted before the banner starts closing. Provides `BannerCancelEventArgs` with `banner` and `cancel`. | Yes | +| `closed` | Emitted after the banner finishes closing. | No | + +Use `closing` to prevent the banner from being dismissed in specific scenarios: + +```typescript +import { BannerCancelEventArgs } from 'igniteui-angular/banner'; +// import { BannerCancelEventArgs } from '@infragistics/igniteui-angular'; for licensed package + +public onBannerClosing(args: BannerCancelEventArgs) { + if (this.requiresAcknowledgement) { + args.cancel = true; + } +} +``` + +```html + + warning + Please review the terms before continuing. + +``` + ## Styling First, in order to use the functions exposed by the theme engine, we need to import the index file in our style file: 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 @@ -232,6 +240,39 @@ public singleSelection(event: IComboSelectionChangeEventArgs) {
+## Events + +The ComboBox component emits the following events: + +| Event | Description | Cancelable | +|-------|-------------|:----------:| +| `opening` | Emitted before the dropdown opens. | Yes | +| `opened` | Emitted after the dropdown finishes opening. | No | +| `closing` | Emitted before the dropdown closes. | Yes | +| `closed` | Emitted after the dropdown finishes closing. | No | +| `selectionChanging` | Emitted before the selection changes. Provides `oldValue`, `newValue`, `added`, and `removed`. | Yes | +| `selectionChanged` | Emitted after the selection changes. Provides `oldValue`, `newValue`, `added`, and `removed`. | No | + +Use the cancelable `selectionChanging` event to prevent certain items from being selected: + +```typescript +import { IComboSelectionChangingEventArgs } from 'igniteui-angular/combo'; +// import { IComboSelectionChangingEventArgs } from '@infragistics/igniteui-angular'; for licensed package + +public onSelectionChanging(event: IComboSelectionChangingEventArgs) { + // Prevent selecting more than 3 items + if (event.newValue.length > 3) { + event.cancel = true; + } +} +``` + +```html + + +``` + ## Keyboard Navigation When combobox is closed and focused: diff --git a/docs/angular/src/content/en/components/date-picker.mdx b/docs/angular/src/content/en/components/date-picker.mdx index 212d989819..30960adadb 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 @@ -283,6 +287,85 @@ In reactive forms, we can handle the and inputs to mark specific days in the calendar. Both accept an array of `DateRangeDescriptor` objects, each with a `type` (`DateRangeType`) and an optional `dateRange` array. + +Disabling all weekends and a specific date: + +```typescript +import { DateRangeDescriptor, DateRangeType } from 'igniteui-angular/core'; +// import { DateRangeDescriptor, DateRangeType } from '@infragistics/igniteui-angular'; for licensed package + +@Component({...}) +export class MyComponent { + public disabledDates: DateRangeDescriptor[] = [ + { type: DateRangeType.Weekends }, + { type: DateRangeType.Specific, dateRange: [new Date(2024, 11, 25)] } + ]; +} +``` + +```html + + + +``` + +Highlighting holidays as special dates: + +```typescript +public specialDates: DateRangeDescriptor[] = [ + { + type: DateRangeType.Specific, + dateRange: [ + new Date(2024, 0, 1), // New Year's Day + new Date(2024, 11, 25) // Christmas + ] + } +]; +``` + +```html + + + +``` + +Available `DateRangeType` values: `After`, `Before`, `Between`, `Specific`, `Weekdays`, `Weekends`. + + + +### Events + +| Event | Description | +|-------|-------------| +| `valueChange` | Emitted when the selected date changes. Provides the new `Date` value. | +| `validationFailed` | Emitted when the user types an invalid date or a date that falls in `disabledDates`. Provides `prevValue` and `currentValue`. | + +```typescript +import { IDatePickerValidationFailedEventArgs } from 'igniteui-angular/date-picker'; +// import { IDatePickerValidationFailedEventArgs } from '@infragistics/igniteui-angular'; for licensed package + +public onValueChange(date: Date) { + console.log('Selected date:', date); +} + +public onValidationFailed(event: IDatePickerValidationFailedEventArgs) { + console.warn('Invalid date entered. Previous value:', event.prevValue); +} +``` + +```html + + + +``` + ### Calendar Specific settings The uses the [`IgxCalendarComponent`](/calendar) and you can modify some of its settings via the properties that the date picker exposes. Some of these include which allows more than one calendar to be displayed when the picker expands, which determines the starting day of the week, which shows the number for each week in the year and more. 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..dcf72a21c5 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 @@ -238,6 +245,31 @@ You can force the component to select all of the input text on focus using after the directive. The reason for this is both directives operate on the input `focus` event so text selection should happen after the mask is set. +## Events + +| Event | Description | Cancelable | +|-------|-------------|:----------:| +| `valueChange` | Emitted when the value changes. Provides the new `Date` or `string` value. | No | +| `validationFailed` | Emitted when the entered value fails `minValue`/`maxValue` validation. Provides `IgxDateTimeEditorEventArgs` with `oldValue`, `newValue`, and `userInput`. | No | + +```typescript +import { IgxDateTimeEditorEventArgs } from 'igniteui-angular/directives'; +// import { IgxDateTimeEditorEventArgs } from '@infragistics/igniteui-angular'; for licensed package + +public onValidationFailed(args: IgxDateTimeEditorEventArgs) { + console.warn('Invalid value entered:', args.userInput, 'Previous:', args.oldValue); +} +``` + +```html + + + +``` + ## Styling For details check out the [`Input Group styling guide`](/input-group#styling). 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..36c595ecc0 100644 --- a/docs/angular/src/content/en/components/divider.mdx +++ b/docs/angular/src/content/en/components/divider.mdx @@ -4,6 +4,7 @@ description: Ignite UI for Angular Divider component enables users to separate c keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library, Angular Divider component, Angular Divider directive, Angular Divider control license: MIT --- +import { Aside } from '@astrojs/starlight/components'; import Sample from 'docs-template/components/mdx/Sample.astro'; import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; @@ -29,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 `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 +50,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..11ae5c29f8 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 @@ -486,6 +493,39 @@ When the `allowItemsFocus` property is enabled, the drop down items gain tab ind ``` +## Events + +The Drop Down component emits the following events: + +| Event | Description | Cancelable | +|-------|-------------|:----------:| +| `opening` | Emitted before the dropdown opens. | Yes | +| `opened` | Emitted after the dropdown finishes opening. | No | +| `closing` | Emitted before the dropdown closes. | Yes | +| `closed` | Emitted after the dropdown finishes closing. | No | +| `selectionChanging` | Emitted before the selected item changes. Provides `oldSelection` and `newSelection`. | Yes | + +Use the cancelable `selectionChanging` event to prevent certain items from being selected: + +```typescript +import { ISelectionEventArgs } from 'igniteui-angular/drop-down'; +// import { ISelectionEventArgs } from '@infragistics/igniteui-angular'; for licensed package + +public onSelectionChanging(event: ISelectionEventArgs) { + if (event.newSelection?.disabled) { + event.cancel = true; + } +} +``` + +```html + + + {{ item.field }} + + +``` + ## Styling ### Dropdown Theme Property Map 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..be9df00ce9 100644 --- a/docs/angular/src/content/en/components/for-of.mdx +++ b/docs/angular/src/content/en/components/for-of.mdx @@ -4,6 +4,7 @@ description: Ignite UI for Angular now exposes a virtual igxFor directive simila keywords: Angular Virtual ForOf Directive, Native Angular Components Suite, Angular UI Components, Native Angular Components Library, Virtualization, Performance, Virtual directive, Angular Virtual For license: MIT --- +import { Aside } from '@astrojs/starlight/components'; import Sample from 'docs-template/components/mdx/Sample.astro'; import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; @@ -29,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 `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 +56,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.