From d6f61c786587a4921e2503368daa702b33f1acd8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Mar 2026 12:25:25 +0000
Subject: [PATCH 1/2] Initial plan
From 35bf50ee7c31b6dcfb73779a607d30588d10bf78 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Mar 2026 12:46:37 +0000
Subject: [PATCH 2/2] feat(docs): remove Angular-specific items from public API
docs
- Remove @igxModule, @igxTheme, @igxKeywords, @igxGroup, @igxFriendlyName,
@igxParent, @igxElementsAnchor tags from JSDoc comments across 171 files
- Remove all @example code blocks (HTML templates and TypeScript snippets)
- Remove standalone code blocks from descriptions and @remarks sections
- Remove bare HTML elements (igx- tags) from JSDoc descriptions
- Replace inline selector references with plain text names in component descriptions
- Build and tests verified to pass
Co-authored-by: dkamburov <1182001+dkamburov@users.noreply.github.com>
---
package-lock.json | 64 --
.../src/accordion/accordion.component.ts | 92 --
.../action-strip/action-strip.component.ts | 35 -
.../avatar/src/avatar/avatar.component.ts | 80 --
.../badge/src/badge/badge.component.ts | 58 --
.../banner/src/banner/banner.component.ts | 102 --
.../src/bottom-nav/bottom-nav.component.ts | 24 -
.../button-group/button-group.component.ts | 128 ---
.../calendar/src/calendar/calendar-base.ts | 49 -
.../src/calendar/calendar.component.ts | 77 --
.../common/calendar-view.directive.ts | 6 -
.../calendar/days-view/day-item.component.ts | 1 -
.../calendar/days-view/days-view.component.ts | 11 -
.../month-picker/month-picker.component.ts | 3 -
.../months-view/months-view.component.ts | 12 -
.../years-view/years-view.component.ts | 6 -
.../card/src/card/card.component.ts | 73 --
.../src/carousel/carousel.component.ts | 171 ----
.../carousel/src/carousel/slide.component.ts | 35 -
.../chat/src/chat.component.ts | 40 -
.../src/checkbox/checkbox.component.ts | 96 --
.../chips/src/chips/chip.component.ts | 168 ----
.../chips/src/chips/chips-area.component.ts | 65 --
.../src/combo/combo-dropdown.component.ts | 4 -
.../combo/src/combo/combo.common.ts | 382 --------
.../combo/src/combo/combo.component.ts | 52 -
.../combo/src/combo/combo.directives.ts | 105 --
.../combo/src/combo/combo.pipes.ts | 5 -
.../core/src/core/navigation/directives.ts | 6 -
.../igniteui-angular/core/src/core/touch.ts | 4 -
.../igniteui-angular/core/src/core/utils.ts | 27 -
.../data-operations/expressions-tree-util.ts | 6 -
.../filtering-expressions-tree.ts | 51 -
.../core/src/data-operations/grid-types.ts | 7 -
.../src/date-common/picker-icons.common.ts | 19 -
.../core/src/services/overlay/overlay.ts | 53 -
.../overlay/position/IPositionStrategy.ts | 6 -
.../position/base-fit-position-strategy.ts | 3 -
.../connected-positioning-strategy.ts | 3 -
.../position/global-position-strategy.ts | 6 -
.../overlay/scroll/IScrollStrategy.ts | 9 -
.../overlay/scroll/NoOpScrollStrategy.ts | 6 -
.../scroll/absolute-scroll-strategy.ts | 9 -
.../overlay/scroll/block-scroll-strategy.ts | 7 -
.../overlay/scroll/close-scroll-strategy.ts | 9 -
.../overlay/scroll/scroll-strategy.ts | 9 -
.../core/src/services/overlay/utilities.ts | 3 -
.../src/date-picker/date-picker.component.ts | 159 ---
.../src/date-picker/picker-base.directive.ts | 88 --
.../date-range-picker-inputs.common.ts | 60 --
.../date-range-picker.component.ts | 164 ----
.../dialog/src/dialog/dialog.component.ts | 152 ---
.../src/directives/button/button-base.ts | 17 -
.../src/directives/button/button.directive.ts | 28 -
.../button/icon-button.directive.ts | 12 -
.../checkbox/checkbox-base.directive.ts | 100 --
.../date-time-editor.directive.ts | 72 --
.../directives/divider/divider.directive.ts | 27 -
.../drag-drop/drag-drop.directive.ts | 199 ----
.../focus-trap/focus-trap.directive.ts | 5 -
.../src/directives/focus/focus.directive.ts | 20 -
.../src/directives/for-of/for_of.directive.ts | 115 ---
.../src/directives/layout/layout.directive.ts | 85 --
.../src/directives/mask/mask.directive.ts | 18 -
.../src/directives/ripple/ripple.directive.ts | 40 -
.../text-highlight.directive.ts | 61 --
.../text-selection.directive.ts | 52 -
.../src/directives/toggle/toggle.directive.ts | 101 --
.../tooltip/tooltip-target.directive.ts | 152 ---
.../directives/tooltip/tooltip.directive.ts | 26 -
.../autocomplete/autocomplete.directive.ts | 52 -
.../drop-down/drop-down-group.component.ts | 42 +-
.../src/drop-down/drop-down-item.base.ts | 75 --
.../src/drop-down/drop-down-item.component.ts | 21 +-
.../drop-down-navigation.directive.ts | 20 -
.../drop-down/src/drop-down/drop-down.base.ts | 52 -
.../src/drop-down/drop-down.component.ts | 63 --
.../expansion-panel-body.component.ts | 27 -
.../expansion-panel-header.component.ts | 51 -
.../expansion-panel/expansion-panel.common.ts | 11 -
.../expansion-panel.component.ts | 99 +-
.../grids/core/src/cell.component.ts | 124 ---
.../column-actions.component.ts | 102 --
.../src/columns/column-group.component.ts | 54 --
.../src/columns/column-layout.component.ts | 11 -
.../core/src/columns/column.component.ts | 494 ----------
.../grids/core/src/common/crud.service.ts | 4 -
.../advanced-filtering-dialog.component.ts | 5 -
.../excel-style-filtering.component.ts | 17 -
.../excel-style-header.component.ts | 15 -
.../grid-action-button.component.ts | 5 -
.../grid-actions-base.directive.ts | 6 -
.../grid-editing-actions.component.ts | 7 -
.../grid-pinning-actions.component.ts | 12 -
.../grids/core/src/grid-public-cell.ts | 39 -
.../grids/core/src/grid-public-row.ts | 92 --
.../grids/core/src/pivot-grid-aggregate.ts | 39 -
.../grids/core/src/pivot-grid-dimensions.ts | 5 -
.../grids/core/src/row.directive.ts | 67 --
.../core/src/selection/selection.service.ts | 1 -
.../src/services/csv/csv-exporter-options.ts | 12 -
.../core/src/services/csv/csv-exporter.ts | 18 -
.../services/excel/excel-exporter-options.ts | 26 -
.../core/src/services/excel/excel-exporter.ts | 17 -
.../exporter-common/base-export-service.ts | 21 -
.../exporter-common/exporter-options-base.ts | 42 -
.../src/services/pdf/pdf-exporter-options.ts | 83 --
.../core/src/services/pdf/pdf-exporter.ts | 17 -
.../grids/core/src/state-base.directive.ts | 21 -
.../grids/core/src/state.directive.ts | 24 -
.../grids/core/src/summaries/grid-summary.ts | 104 --
.../grids/core/src/toolbar/common.ts | 18 -
...id-toolbar-advanced-filtering.component.ts | 10 -
.../grid-toolbar-exporter.component.ts | 4 -
.../toolbar/grid-toolbar-hiding.component.ts | 9 -
.../toolbar/grid-toolbar-pinning.component.ts | 9 -
.../src/toolbar/grid-toolbar.component.ts | 4 -
.../grids/grid/src/grid-base.directive.ts | 916 ------------------
.../grids/grid/src/grid.component.ts | 197 ----
.../grids/grid/src/groupby-row.component.ts | 27 -
.../src/hierarchical-grid-base.directive.ts | 17 -
.../src/hierarchical-grid.component.ts | 85 --
.../src/hierarchical-row.component.ts | 6 -
.../src/row-island.component.ts | 35 -
.../lite/src/grid-lite-column.component.ts | 14 -
.../src/pivot-data-selector.component.ts | 70 --
.../grids/pivot-grid/src/pivot-grid-row.ts | 7 -
.../pivot-grid/src/pivot-grid.component.ts | 142 ---
.../pivot-grid/src/pivot-row.component.ts | 5 -
.../tree-grid/src/tree-cell.component.ts | 3 -
.../tree-grid/src/tree-grid-row.component.ts | 26 -
.../tree-grid/src/tree-grid.component.ts | 109 ---
.../icon/src/icon/icon.component.ts | 43 -
.../icon/src/icon/icon.service.ts | 46 -
.../directives-hint/hint.directive.ts | 27 -
.../directives-input/input.directive.ts | 110 ---
.../src/input-group/input-group.component.ts | 99 --
.../list/src/list/list-item.component.ts | 82 --
.../list/src/list/list.component.ts | 174 ----
.../migrations/common/UpdateChanges.ts | 4 -
.../migrations/common/util.ts | 1 -
.../navbar/src/navbar/navbar.component.ts | 38 -
.../navigation-drawer.component.ts | 132 ---
.../navigation-drawer.directives.ts | 15 -
.../src/paginator/paginator.component.ts | 59 --
.../src/progressbar/progressbar.component.ts | 122 ---
.../query-builder-drag.service.ts | 2 -
.../query-builder-header.component.ts | 10 -
.../query-builder/query-builder.component.ts | 24 -
.../query-builder/query-builder.directives.ts | 11 -
.../radio-group/radio-group.directive.ts | 77 --
.../radio/src/radio/radio.component.ts | 41 -
.../src/select/select-group.component.ts | 4 +-
.../src/select/select-item.component.ts | 16 -
.../src/select/select-positioning-strategy.ts | 3 -
.../select/src/select/select.component.ts | 100 --
.../simple-combo/simple-combo.component.ts | 29 -
.../slider/src/slider/slider.common.ts | 12 -
.../slider/src/slider/slider.component.ts | 226 -----
.../src/slider/ticks/ticks.component.ts | 9 -
.../src/snackbar/snackbar.component.ts | 55 --
.../splitter-pane/splitter-pane.component.ts | 51 -
.../src/splitter/splitter.component.ts | 59 --
.../src/stepper/step/step.component.ts | 85 --
.../stepper/src/stepper/stepper.component.ts | 100 --
.../stepper/src/stepper/stepper.directive.ts | 84 --
.../switch/src/switch/switch.component.ts | 42 -
.../tabs/src/tabs/tabs/tabs.component.ts | 24 -
.../src/time-picker/time-picker.component.ts | 105 --
.../toast/src/toast/toast.component.ts | 50 -
.../src/tree/tree-node/tree-node.component.ts | 156 ---
.../tree/src/tree/tree.component.ts | 178 ----
172 files changed, 8 insertions(+), 10147 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 651d87d2fa9..8d971d63204 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22355,31 +22355,6 @@
"sassdoc-extras": "^2.5.0"
}
},
- "node_modules/sassdoc-theme-default/node_modules/chokidar": {
- "version": "3.6.0",
- "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
- "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
- "extraneous": true,
- "license": "MIT",
- "dependencies": {
- "anymatch": "~3.1.2",
- "braces": "~3.0.2",
- "glob-parent": "~5.1.2",
- "is-binary-path": "~2.1.0",
- "is-glob": "~4.0.1",
- "normalize-path": "~3.0.0",
- "readdirp": "~3.6.0"
- },
- "engines": {
- "node": ">= 8.10.0"
- },
- "funding": {
- "url": "https://paulmillr.com/funding/"
- },
- "optionalDependencies": {
- "fsevents": "~2.3.2"
- }
- },
"node_modules/sassdoc-theme-default/node_modules/commander": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
@@ -22408,19 +22383,6 @@
"jsonfile": "^2.1.0"
}
},
- "node_modules/sassdoc-theme-default/node_modules/glob-parent": {
- "version": "5.1.2",
- "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
- "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
- "extraneous": true,
- "license": "ISC",
- "dependencies": {
- "is-glob": "^4.0.1"
- },
- "engines": {
- "node": ">= 6"
- }
- },
"node_modules/sassdoc-theme-default/node_modules/jsonfile": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
@@ -22457,32 +22419,6 @@
}
}
},
- "node_modules/sassdoc-theme-default/node_modules/picomatch": {
- "version": "2.3.1",
- "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
- "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
- "extraneous": true,
- "license": "MIT",
- "engines": {
- "node": ">=8.6"
- },
- "funding": {
- "url": "https://github.com/sponsors/jonschlinkert"
- }
- },
- "node_modules/sassdoc-theme-default/node_modules/readdirp": {
- "version": "3.6.0",
- "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
- "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
- "extraneous": true,
- "license": "MIT",
- "dependencies": {
- "picomatch": "^2.2.1"
- },
- "engines": {
- "node": ">=8.10.0"
- }
- },
"node_modules/sassdoc/node_modules/argparse": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
diff --git a/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts b/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts
index a5516df2921..478a1714c76 100644
--- a/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts
+++ b/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts
@@ -30,25 +30,10 @@ let NEXT_ID = 0;
/**
* IgxAccordion is a container-based component that contains that can house multiple expansion panels.
*
- * @igxModule IgxAccordionModule
- *
- * @igxKeywords accordion
- *
- * @igxGroup Layouts
- *
* @remarks
* The Ignite UI for Angular Accordion component enables the user to navigate among multiple collapsing panels
* displayed in a single container.
* The accordion offers keyboard navigation and API to control the underlying panels' expansion state.
- *
- * @example
- * ```html
- *
- *
- * ...
- *
- *
- * ```
*/
@Component({
selector: 'igx-accordion',
@@ -61,12 +46,6 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
/**
* Get/Set the `id` of the accordion component.
* Default value is `"igx-accordion-0"`;
- * ```html
- *
- * ```
- * ```typescript
- * const accordionId = this.accordion.id;
- * ```
*/
@HostBinding('attr.id')
@Input()
@@ -82,19 +61,6 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
/**
* Get/Set the animation settings that panels should use when expanding/collpasing.
- *
- * ```html
- *
- * ```
- *
- * ```typescript
- * const customAnimationSettings: ToggleAnimationSettings = {
- * openAnimation: growVerIn,
- * closeAnimation: growVerOut
- * };
- *
- * this.accordion.animationSettings = customAnimationSettings;
- * ```
*/
@Input()
public get animationSettings(): ToggleAnimationSettings {
@@ -109,16 +75,6 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
/**
* Get/Set how the accordion handles the expansion of the projected expansion panels.
* If set to `true`, only a single panel can be expanded at a time, collapsing all others
- *
- * ```html
- *
- * ...
- *
- * ```
- *
- * ```typescript
- * this.accordion.singleBranchExpand = false;
- * ```
*/
@Input({ transform: booleanAttribute })
public get singleBranchExpand(): boolean {
@@ -137,38 +93,12 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
*
* @remarks
* This event is cancelable.
- *
- * ```html
- *
- *
- * ```
- *
- *```typescript
- * public handlePanelExpanding(event: IExpansionPanelCancelableEventArgs){
- * const expandedPanel: IgxExpansionPanelComponent = event.panel;
- * if (expandedPanel.disabled) {
- * event.cancel = true;
- * }
- * }
- *```
*/
@Output()
public panelExpanding = new EventEmitter();
/**
* Emitted after a panel has been expanded.
- *
- * ```html
- *
- *
- * ```
- *
- *```typescript
- * public handlePanelExpanded(event: IExpansionPanelCancelableEventArgs) {
- * const expandedPanel: IgxExpansionPanelComponent = event.panel;
- * console.log("Panel is expanded: ", expandedPanel.id);
- * }
- *```
*/
@Output()
public panelExpanded = new EventEmitter();
@@ -178,32 +108,18 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
*
* @remarks
* This event is cancelable.
- *
- * ```html
- *
- *
- * ```
*/
@Output()
public panelCollapsing = new EventEmitter();
/**
* Emitted after a panel has been collapsed.
- *
- * ```html
- *
- *
- * ```
*/
@Output()
public panelCollapsed = new EventEmitter();
/**
* Get all panels.
- *
- * ```typescript
- * const panels: IgxExpansionPanelComponent[] = this.accordion.panels;
- * ```
*/
public get panels(): IgxExpansionPanelComponent[] {
return this._panels?.toArray();
@@ -247,10 +163,6 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
/**
* Expands all collapsed expansion panels.
- *
- * ```typescript
- * accordion.expandAll();
- * ```
*/
public expandAll(): void {
if (this.singleBranchExpand) {
@@ -266,10 +178,6 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
/**
* Collapses all expanded expansion panels.
- *
- * ```typescript
- * accordion.collapseAll();
- * ```
*/
public collapseAll(): void {
this.panels.forEach(panel => panel.collapse());
diff --git a/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts
index d56215f99d8..583aa450a37 100644
--- a/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts
+++ b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts
@@ -57,25 +57,9 @@ export class IgxActionStripMenuItemDirective {
/**
* Action Strip provides templatable area for one or more actions.
*
- * @igxModule IgxActionStripModule
- *
- * @igxTheme igx-action-strip-theme
- *
- * @igxKeywords action, strip, actionStrip, pinning, editing
- *
- * @igxGroup Data Entry & Display
- *
- * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent, *
- *
* @remarks
* The Ignite UI Action Strip is a container, overlaying its parent container,
* and displaying action buttons with action applicable to the parent component the strip is instantiated or shown for.
- *
- * @example
- * ```html
- *
- *
- *
*/
@Component({
selector: 'igx-action-strip',
@@ -105,11 +89,6 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterViewIn
* Sets the context of an action strip.
* The context should be an instance of a @Component, that has element property.
* This element will be the placeholder of the action strip.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public context: any;
@@ -140,11 +119,6 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterViewIn
/**
* Gets/Sets the visibility of the Action Strip.
* Could be used to set if the Action Strip will be initially hidden.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public hidden = true;
@@ -285,10 +259,6 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterViewIn
* Showing the Action Strip and appending it the specified context element.
*
* @param context
- * @example
- * ```typescript
- * this.actionStrip.show(row);
- * ```
*/
public show(context?: any): void {
this.hidden = false;
@@ -308,11 +278,6 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterViewIn
/**
* Hiding the Action Strip and removing it from its current context element.
- *
- * @example
- * ```typescript
- * this.actionStrip.hide();
- * ```
*/
public hide(): void {
this.hidden = true;
diff --git a/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts b/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts
index 91ead023fea..23724791a26 100644
--- a/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts
+++ b/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts
@@ -23,24 +23,10 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
/**
* Avatar provides a way to display an image, icon or initials to the user.
*
- * @igxModule IgxAvatarModule
- *
- * @igxTheme igx-avatar-theme, igx-icon-theme
- *
- * @igxKeywords avatar, profile, picture, initials
- *
- * @igxGroup Layouts
- *
* @remarks
*
* The Ignite UI Avatar provides an easy way to add an avatar icon to your application. This icon can be an
* image, someone's initials or a material icon from the Google Material icon set.
- *
- * @example
- * ```html
- *
- *
- * ```
*/
@Component({
selector: 'igx-avatar',
@@ -52,23 +38,12 @@ export class IgxAvatarComponent implements OnInit {
/**
* Returns the `aria-label` attribute of the avatar.
- *
- * @example
- * ```typescript
- * let ariaLabel = this.avatar.ariaLabel;
- * ```
- *
*/
@HostBinding('attr.aria-label')
public ariaLabel = 'avatar';
/**
* Returns the `role` attribute of the avatar.
- *
- * @example
- * ```typescript
- * let avatarRole = this.avatar.role;
- * ```
*/
@HostBinding('attr.role')
public role = 'img';
@@ -89,22 +64,12 @@ export class IgxAvatarComponent implements OnInit {
* - `"icon type avatar"`
* - `"image type avatar"`.
* - `"custom type avatar"`.
- *
- * @example
- * ```typescript
- * let avatarDescription = this.avatar.roleDescription;
- * ```
*/
@HostBinding('attr.aria-roledescription')
public roleDescription: string;
/**
* Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `"igx-avatar-0"`.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('attr.id')
@Input()
@@ -113,11 +78,6 @@ export class IgxAvatarComponent implements OnInit {
/**
* Sets square, rounded or circular shape to the avatar.
* By default the shape of the avatar is square.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public shape: 'square' | 'rounded' | 'circle' = 'square';
@@ -137,10 +97,6 @@ export class IgxAvatarComponent implements OnInit {
/**
* Sets the color of the avatar's initials or icon.
*
- * @example
- * ```html
- *
- * ```
* @deprecated in version 17.2.0.
*/
@@ -151,11 +107,6 @@ export class IgxAvatarComponent implements OnInit {
/**
* Sets the background color of the avatar.
*
- * @example
- * ```html
- *
- * ```
- * @igxFriendlyName Background color
* @deprecated in version 17.2.0.
*/
@@ -165,34 +116,18 @@ export class IgxAvatarComponent implements OnInit {
/**
* Sets initials to the avatar.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public initials: string;
/**
* Sets an icon to the avatar. All icons from the material icon set are supported.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public icon: string;
/**
* Sets the image source of the avatar.
- *
- * @example
- * ```html
- *
- * ```
- * @igxFriendlyName Image URL
*/
@Input()
public set src(value: string) {
@@ -228,11 +163,6 @@ export class IgxAvatarComponent implements OnInit {
/**
* Returns the size of the avatar.
- *
- * @example
- * ```typescript
- * let avatarSize = this.avatar.size;
- * ```
*/
@Input()
public get size(): string | IgxAvatarSize {
@@ -242,11 +172,6 @@ export class IgxAvatarComponent implements OnInit {
/**
* Sets the size of the avatar.
* By default, the size is `"small"`. It can be set to `"medium"` or `"large"`.
- *
- * @example
- * ```html
- *
- * ```
*/
public set size(value: string | IgxAvatarSize) {
switch (value) {
@@ -262,11 +187,6 @@ export class IgxAvatarComponent implements OnInit {
/**
* Returns the type of the avatar.
- *
- * @example
- * ```typescript
- * let avatarType = this.avatar.type;
- * ```
*/
public get type(): IgxAvatarType {
if (this.src) {
diff --git a/projects/igniteui-angular/badge/src/badge/badge.component.ts b/projects/igniteui-angular/badge/src/badge/badge.component.ts
index 99baa5ae77e..03e442eec8e 100644
--- a/projects/igniteui-angular/badge/src/badge/badge.component.ts
+++ b/projects/igniteui-angular/badge/src/badge/badge.component.ts
@@ -17,24 +17,10 @@ export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
/**
* Badge provides visual notifications used to decorate avatars, menus, etc.
*
- * @igxModule IgxBadgeModule
- *
- * @igxTheme igx-badge-theme
- *
- * @igxKeywords badge, icon, notification
- *
- * @igxGroup Data Entry & Display
- *
* @remarks
* The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the
* application when visual notification is needed. They are usually designed as icons with a predefined
* style to communicate information, success, warnings, or errors.
- *
- * @example
- * ```html
- *
- *
- *
*/
@Component({
selector: 'igx-badge',
@@ -48,11 +34,6 @@ export class IgxBadgeComponent {
*
* @remarks
* If not set, the `id` will have value `"igx-badge-0"`.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('attr.id')
@Input()
@@ -64,11 +45,6 @@ export class IgxBadgeComponent {
* @remarks
* Allowed values are `primary`, `info`, `success`, `warning`, `error`.
* Providing an invalid value won't display a badge.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public type: string | IgxBadgeType = IgxBadgeType.PRIMARY;
@@ -79,11 +55,6 @@ export class IgxBadgeComponent {
* @remarks
* If an `icon` property is already set the `icon` will be displayed.
* If neither a `value` nor an `icon` is set the content of the badge will be empty.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public value: string | number = '';
@@ -95,11 +66,6 @@ export class IgxBadgeComponent {
* Has priority over the `value` property.
* If neither a `value` nor an `icon` is set the content of the badge will be empty.
* Providing an invalid value won't display anything.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public icon: string;
@@ -113,13 +79,10 @@ export class IgxBadgeComponent {
/**
* Sets/gets the role attribute value.
*
- * @example
- * ```typescript
* @ViewChild("MyBadge", { read: IgxBadgeComponent })
* public badge: IgxBadgeComponent;
*
* badge.role = 'status';
- * ```
*/
@HostBinding('attr.role')
public role = 'status';
@@ -127,13 +90,10 @@ export class IgxBadgeComponent {
/**
* Sets/gets the css class to use on the badge.
*
- * @example
- * ```typescript
* @ViewChild("MyBadge", { read: IgxBadgeComponent })
* public badge: IgxBadgeComponent;
*
* badge.cssClass = 'my-badge-class';
- * ```
*/
@HostBinding('class.igx-badge')
public cssClass = 'igx-badge';
@@ -141,11 +101,6 @@ export class IgxBadgeComponent {
/**
* Sets a square shape to the badge, if `shape` is set to `square`.
* By default the shape of the badge is rounded.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public shape: 'rounded' | 'square' = 'rounded';
@@ -161,13 +116,10 @@ export class IgxBadgeComponent {
/**
* Sets/gets the aria-label attribute value.
*
- * @example
- * ```typescript
* @ViewChild("MyBadge", { read: IgxBadgeComponent })
* public badge: IgxBadgeComponent;
*
* badge.label = 'badge';
- * ```
*/
@HostBinding('attr.aria-label')
public label = 'badge';
@@ -175,11 +127,6 @@ export class IgxBadgeComponent {
/**
* Sets/gets whether the badge is outlined.
* Default value is `false`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input({transform: booleanAttribute})
@HostBinding('class.igx-badge--outlined')
@@ -189,11 +136,6 @@ export class IgxBadgeComponent {
* Sets/gets whether the badge is displayed as a dot.
* When true, the badge will be rendered as a minimal 8px indicator without any content.
* Default value is `false`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input({transform: booleanAttribute})
@HostBinding('class.igx-badge--dot')
diff --git a/projects/igniteui-angular/banner/src/banner/banner.component.ts b/projects/igniteui-angular/banner/src/banner/banner.component.ts
index 8de0f4b6ed6..855536da797 100644
--- a/projects/igniteui-angular/banner/src/banner/banner.component.ts
+++ b/projects/igniteui-angular/banner/src/banner/banner.component.ts
@@ -38,16 +38,6 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA
* The Ignite UI Banner provides a highly template-able and easy to use banner that can be shown in your application.
*
* Usage:
- *
- * ```html
- *
- * Our privacy settings have changed.
- *
- *
- *
- *
- *
- * ```
*/
@Component({
selector: 'igx-banner',
@@ -65,56 +55,24 @@ export class IgxBannerComponent implements IToggleView {
/**
* Fires after the banner shows up
- * ```typescript
- * public handleOpened(event) {
- * ...
- * }
- * ```
- * ```html
- *
- * ```
*/
@Output()
public opened = new EventEmitter();
/**
* Fires before the banner shows up
- * ```typescript
- * public handleOpening(event) {
- * ...
- * }
- * ```
- * ```html
- *
- * ```
*/
@Output()
public opening = new EventEmitter();
/**
* Fires after the banner hides
- * ```typescript
- * public handleClosed(event) {
- * ...
- * }
- * ```
- * ```html
- *
- * ```
*/
@Output()
public closed = new EventEmitter();
/**
* Fires before the banner hides
- * ```typescript
- * public handleClosing(event) {
- * ...
- * }
- * ```
- * ```html
- *
- * ```
*/
@Output()
public closing = new EventEmitter();
@@ -126,11 +84,6 @@ export class IgxBannerComponent implements IToggleView {
/**
* Set the animation settings used by the banner open/close methods
- * ```typescript
- * import { slideInLeft, slideOutRight } from 'igniteui-angular';
- * ...
- * banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };
- * ```
*/
public set animationSettings(settings: ToggleAnimationSettings) {
this._animationSettings = settings;
@@ -138,9 +91,6 @@ export class IgxBannerComponent implements IToggleView {
/**
* Get the animation settings used by the banner open/close methods
- * ```typescript
- * let currentAnimations: ToggleAnimationSettings = banner.animationSettings
- * ```
*/
@Input()
public get animationSettings(): ToggleAnimationSettings {
@@ -166,18 +116,6 @@ export class IgxBannerComponent implements IToggleView {
* Gets/Sets whether the banner is expanded (visible) or collapsed (hidden).
* Defaults to `false`.
* Setting to `true` opens the banner, while `false` closes it.
- *
- * @example
- * // Expand the banner
- * banner.expanded = true;
- *
- * @example
- * // Collapse the banner
- * banner.expanded = false;
- *
- * @example
- * // Check if the banner is expanded
- * const isExpanded = banner.expanded;
*/
@Input()
public get expanded(): boolean {
@@ -201,10 +139,6 @@ export class IgxBannerComponent implements IToggleView {
/**
* Gets whether the banner is collapsed.
- *
- * ```typescript
- * const isCollapsed: boolean = banner.collapsed;
- * ```
*/
public get collapsed(): boolean {
return this._expansionPanel.collapsed;
@@ -212,9 +146,6 @@ export class IgxBannerComponent implements IToggleView {
/**
* Returns the native element of the banner component
- * ```typescript
- * const myBannerElement: HTMLElement = banner.element;
- * ```
*/
public get element() {
return this.elementRef.nativeElement;
@@ -253,17 +184,6 @@ export class IgxBannerComponent implements IToggleView {
/**
* Opens the banner
- *
- * ```typescript
- * myBanner.open();
- * ```
- *
- * ```html
- *
- * ...
- *
- *
- * ```
*/
public open(event?: Event) {
this._bannerEvent = { owner: this, event };
@@ -283,17 +203,6 @@ export class IgxBannerComponent implements IToggleView {
/**
* Closes the banner
- *
- * ```typescript
- * myBanner.close();
- * ```
- *
- * ```html
- *
- * ...
- *
- *
- * ```
*/
public close(event?: Event) {
this._bannerEvent = { owner: this, event};
@@ -313,17 +222,6 @@ export class IgxBannerComponent implements IToggleView {
/**
* Toggles the banner
- *
- * ```typescript
- * myBanner.toggle();
- * ```
- *
- * ```html
- *
- * ...
- *
- *
- * ```
*/
public toggle(event?: Event) {
if (this.collapsed) {
diff --git a/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.ts b/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.ts
index 90de22cd5a7..34b943ec20a 100644
--- a/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.ts
+++ b/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.ts
@@ -9,33 +9,9 @@ let NEXT_BOTTOM_NAV_ITEM_ID = 0;
/**
* Bottom Navigation component enables the user to navigate among a number of contents displayed in a single view.
*
- * @igxModule IgxBottomNavModule
- *
- * @igxTheme igx-bottom-nav-theme
- *
- * @igxKeywords bottom navigation
- *
- * @igxGroup Layouts
- *
* @remarks
* The Ignite UI for Angular Bottom Navigation component enables the user to navigate among a number of contents
* displayed in a single view. The navigation through the contents is accomplished with the tab buttons located at bottom.
- *
- * @example
- * ```html
- *
- *
- *
- * folder
- * Tab 1
- *
- *
- * Content 1
- *
- *
- * ...
- *
- * ```
*/
@Component({
selector: 'igx-bottom-nav',
diff --git a/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts b/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts
index f11590b12c7..02bb9a5de80 100644
--- a/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts
+++ b/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts
@@ -26,17 +26,7 @@ let NEXT_ID = 0;
* single, multi and singleRequired selection.
*
* Example:
- * ```html
- *
- *
- * ```
* The `fontOptions` value shown above is defined as:
- * ```typescript
- * this.fontOptions = [
- * { icon: 'format_bold', selected: false },
- * { icon: 'format_italic', selected: false },
- * { icon: 'format_underlined', selected: false }];
- * ```
*/
@Component({
selector: 'igx-buttongroup',
@@ -57,9 +47,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
/**
* Gets/Sets the value of the `id` attribute. If not set it will be automatically generated.
- * ```html
- *
- * ```
*/
@HostBinding('attr.id')
@Input()
@@ -74,13 +61,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
/**
* Allows you to set a style using the `itemContentCssClass` input.
* The value should be the CSS class name that will be applied to the button group.
- * ```typescript
- * public style1 = "styleClass";
- * //..
- * ```
- * ```html
- *
- * ```
*/
@Input()
public set itemContentCssClass(value: string) {
@@ -89,13 +69,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
/**
* Returns the CSS class of the item content of the `IgxButtonGroup`.
- * ```typescript
- * @ViewChild("MyChild")
- * public buttonG: IgxButtonGroupComponent;
- * ngAfterViewInit(){
- * let buttonSelect = this.buttonG.itemContentCssClass;
- * }
- * ```
*/
public get itemContentCssClass(): string {
return this._itemContentCssClass;
@@ -124,9 +97,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
/**
* Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.
- * ```html
- *
- * ```
*/
@Input()
public get selectionMode() {
@@ -145,37 +115,11 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
/**
* Property that configures the buttons in the button group using a collection of `Button` objects.
- * ```typescript
- * public ngOnInit() {
- * this.cities = [
- * new Button({
- * label: "Sofia"
- * }),
- * new Button({
- * label: "London"
- * }),
- * new Button({
- * label: "New York",
- * selected: true
- * }),
- * new Button({
- * label: "Tokyo"
- * })
- * ];
- * }
- * //..
- * ```
- * ```html
- *
- * ```
*/
@Input() public values: any;
/**
* Disables the `igx-buttongroup` component. By default it's false.
- * ```html
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public get disabled(): boolean {
@@ -194,13 +138,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
/**
* Allows you to set the button group alignment.
* Available options are `ButtonGroupAlignment.horizontal` (default) and `ButtonGroupAlignment.vertical`.
- * ```typescript
- * public alignment = ButtonGroupAlignment.vertical;
- * //..
- * ```
- * ```html
- *
- * ```
*/
@Input()
public set alignment(value: ButtonGroupAlignment) {
@@ -208,13 +145,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
}
/**
* Returns the alignment of the `igx-buttongroup`.
- * ```typescript
- * @ViewChild("MyChild")
- * public buttonG: IgxButtonGroupComponent;
- * ngAfterViewInit(){
- * let buttonAlignment = this.buttonG.alignment;
- * }
- * ```
*/
public get alignment(): ButtonGroupAlignment {
return this._isVertical ? ButtonGroupAlignment.vertical : ButtonGroupAlignment.horizontal;
@@ -222,36 +152,12 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
/**
* An @Ouput property that emits an event when a button is selected.
- * ```typescript
- * @ViewChild("toast")
- * private toast: IgxToastComponent;
- * public selectedHandler(buttongroup) {
- * this.toast.open()
- * }
- * //...
- * ```
- * ```html
- *
- * You have made a selection!
- * ```
*/
@Output()
public selected = new EventEmitter();
/**
* An @Ouput property that emits an event when a button is deselected.
- * ```typescript
- * @ViewChild("toast")
- * private toast: IgxToastComponent;
- * public deselectedHandler(buttongroup){
- * this.toast.open()
- * }
- * //...
- * ```
- * ```html
- * #MyChild [selectionMode]="'multi'" (deselected)="deselectedHandler($event)">
- * You have deselected a button!
- * ```
*/
@Output()
public deselected = new EventEmitter();
@@ -262,17 +168,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
/**
* Returns true if the `igx-buttongroup` alignment is vertical.
* Note that in order for the accessor to work correctly the property should be set explicitly.
- * ```html
- *
- * ```
- * ```typescript
- * //...
- * @ViewChild("MyChild")
- * private buttonG: IgxButtonGroupComponent;
- * ngAfterViewInit(){
- * let orientation = this.buttonG.isVertical;
- * }
- * ```
*/
public get isVertical(): boolean {
return this._isVertical;
@@ -300,13 +195,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
/**
* Gets the selected button/buttons.
- * ```typescript
- * @ViewChild("MyChild")
- * private buttonG: IgxButtonGroupComponent;
- * ngAfterViewInit(){
- * let selectedButton = this.buttonG.selectedButtons;
- * }
- * ```
*/
public get selectedButtons(): IgxButtonDirective[] {
return this.buttons.filter((_, i) => this.selectedIndexes.indexOf(i) !== -1);
@@ -314,14 +202,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
/**
* Selects a button by its index.
- * ```typescript
- * @ViewChild("MyChild")
- * private buttonG: IgxButtonGroupComponent;
- * ngAfterViewInit(){
- * this.buttonG.selectButton(2);
- * this.cdr.detectChanges();
- * }
- * ```
*
* @memberOf {@link IgxButtonGroupComponent}
*/
@@ -382,14 +262,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
/**
* Deselects a button by its index.
- * ```typescript
- * @ViewChild("MyChild")
- * private buttonG: IgxButtonGroupComponent;
- * ngAfterViewInit(){
- * this.buttonG.deselectButton(2);
- * this.cdr.detectChanges();
- * }
- * ```
*
* @memberOf {@link IgxButtonGroupComponent}
*/
diff --git a/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts b/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts
index 98315a6fa0e..07b35247ea9 100644
--- a/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts
+++ b/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts
@@ -59,12 +59,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
/**
* Sets/gets whether the outside dates (dates that are out of the current month) will be hidden.
* Default value is `false`.
- * ```html
- *
- * ```
- * ```typescript
- * let hideOutsideDays = this.calendar.hideOutsideDays;
- * ```
*/
@Input({ transform: booleanAttribute })
@@ -79,28 +73,12 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
/**
* Emits an event when the month in view is changed.
- * ```html
- *
- * ```
- * ```typescript
- * public viewDateChanged(event: IViewDateChangeEventArgs) {
- * let viewDate = event.currentValue;
- * }
- * ```
*/
@Output()
public viewDateChanged = new EventEmitter();
/**
* Emits an event when the active view is changed.
- * ```html
- *
- * ```
- * ```typescript
- * public activeViewChanged(event: CalendarView) {
- * let activeView = event;
- * }
- * ```
*/
@Output()
public activeViewChanged = new EventEmitter();
@@ -366,9 +344,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
/**
* Gets the current active view.
- * ```typescript
- * this.activeView = calendar.activeView;
- * ```
*/
@Input()
public get activeView(): IgxCalendarView {
@@ -377,12 +352,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
/**
* Sets the current active view.
- * ```html
- *
- * ```
- * ```typescript
- * calendar.activeView = IgxCalendarView.YEAR;
- * ```
*/
public set activeView(val: IgxCalendarView) {
this._activeView = val;
@@ -570,15 +539,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
/**
* Sets the disabled dates' descriptors.
- * ```typescript
- * @ViewChild("MyCalendar")
- * public calendar: IgxCalendarComponent;
- * ngOnInit(){
- * this.calendar.disabledDates = [
- * {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
- * {type: DateRangeType.Weekends}];
- * }
- * ```
*/
public set disabledDates(value: DateRangeDescriptor[]) {
this._disabledDates = value;
@@ -611,15 +571,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
/**
* Sets the special dates' descriptors.
- * ```typescript
- * @ViewChild("MyCalendar")
- * public calendar: IgxCalendarComponent;
- * ngOnInit(){
- * this.calendar.specialDates = [
- * {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
- * {type: DateRangeType.Weekends}];
- * }
- * ```
*/
public set specialDates(value: DateRangeDescriptor[]) {
this._specialDates = value;
diff --git a/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts b/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts
index c8c8de763ac..129ee91b22f 100644
--- a/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts
+++ b/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts
@@ -39,22 +39,9 @@ let NEXT_ID = 0;
/**
* Calendar provides a way to display date information.
*
- * @igxModule IgxCalendarModule
- *
- * @igxTheme igx-calendar-theme, igx-icon-theme
- *
- * @igxKeywords calendar, datepicker, schedule, date
- *
- * @igxGroup Scheduling
- *
* @remarks
* The Ignite UI Calendar provides an easy way to display a calendar and allow users to select dates using single, multiple
* or range selection.
- *
- * @example:
- * ```html
- *
- * ```
*/
@Component({
providers: [
@@ -92,10 +79,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
* @remarks
* If not set, the `id` will have value `"igx-calendar-0"`.
*
- * @example
- * ```html
- *
- * ```
* @memberof IgxCalendarComponent
*/
@HostBinding('attr.id')
@@ -105,11 +88,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Sets/gets whether the calendar has header.
* Default value is `true`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public hasHeader = true;
@@ -117,11 +95,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Sets/gets whether the calendar header will be in vertical position.
* Default value is `false`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public vertical = false;
@@ -135,11 +108,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Sets/gets the number of month views displayed.
* Default value is `1`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public get monthsViewNumber() {
@@ -156,11 +124,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Show/hide week numbers
- *
- * @example
- * ```html
- *
- * ``
*/
@Input({ transform: booleanAttribute })
public showWeekNumbers = false;
@@ -261,10 +224,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Gets the header template.
*
- * @example
- * ```typescript
- * let headerTitleTemplate = this.calendar.headerTitleTeamplate;
- * ```
* @memberof IgxCalendarComponent
*/
public get headerTitleTemplate(): any {
@@ -277,10 +236,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Sets the header template.
*
- * @example
- * ```html
- *
- * ```
* @memberof IgxCalendarComponent
*/
public set headerTitleTemplate(directive: any) {
@@ -290,10 +245,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Gets the header template.
*
- * @example
- * ```typescript
- * let headerTemplate = this.calendar.headerTeamplate;
- * ```
* @memberof IgxCalendarComponent
*/
public get headerTemplate(): any {
@@ -306,10 +257,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Sets the header template.
*
- * @example
- * ```html
- *
- * ```
* @memberof IgxCalendarComponent
*/
public set headerTemplate(directive: any) {
@@ -318,11 +265,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Gets the subheader template.
- *
- * @example
- * ```typescript
- * let subheaderTemplate = this.calendar.subheaderTemplate;
- * ```
*/
public get subheaderTemplate(): any {
if (this.subheaderTemplateDirective) {
@@ -334,10 +276,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Sets the subheader template.
*
- * @example
- * ```html
- *
- * ```
* @memberof IgxCalendarComponent
*/
public set subheaderTemplate(directive: any) {
@@ -346,11 +284,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Gets the context for the template marked with the `igxCalendarHeader` directive.
- *
- * @example
- * ```typescript
- * let headerContext = this.calendar.headerContext;
- * ```
*/
public get headerContext() {
return this.generateContext(this.headerDate);
@@ -359,11 +292,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Gets the context for the template marked with either `igxCalendarSubHeaderMonth`
* or `igxCalendarSubHeaderYear` directive.
- *
- * @example
- * ```typescript
- * let context = this.calendar.context;
- * ```
*/
public get context() {
const date: Date = this.viewDate;
@@ -1016,11 +944,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
/**
* Deselects date(s) (based on the selection type).
- *
- * @example
- * ```typescript
- * this.calendar.deselectDate(new Date(`2018-06-12`));
- * ````
*/
public override deselectDate(value?: Date | Date[] | string) {
super.deselectDate(value);
diff --git a/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts b/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts
index ee239701fa3..4ea21dfd80c 100644
--- a/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts
+++ b/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts
@@ -148,9 +148,6 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor {
/**
* Gets/sets the selected date of the view.
* By default it's the current date.
- * ```typescript
- * let date = this.view.date;
- * ```
*
* @memberof IgxYearsViewComponent
*/
@@ -168,9 +165,6 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor {
/**
* Gets the `locale` of the view.
* Default value is `"en"`.
- * ```typescript
- * let locale = this.view.locale;
- * ```
*
* @memberof IgxCalendarViewDirective
*/
diff --git a/projects/igniteui-angular/calendar/src/calendar/days-view/day-item.component.ts b/projects/igniteui-angular/calendar/src/calendar/days-view/day-item.component.ts
index 69c708164a9..5c539422368 100644
--- a/projects/igniteui-angular/calendar/src/calendar/days-view/day-item.component.ts
+++ b/projects/igniteui-angular/calendar/src/calendar/days-view/day-item.component.ts
@@ -25,7 +25,6 @@ export class IgxDayItemComponent {
/**
* Returns boolean indicating if the day is selected
- *
*/
@Input()
public get selected(): any {
diff --git a/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts
index b6ccda0b399..93b2b771a12 100644
--- a/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts
+++ b/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts
@@ -64,12 +64,6 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Af
/**
* Sets/gets the `id` of the days view.
* If not set, the `id` will have value `"igx-days-view-0"`.
- * ```html
- *
- * ```
- * ```typescript
- * let daysViewId = this.daysView.id;
- * ```
*/
@HostBinding('attr.id')
@Input()
@@ -105,11 +99,6 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Af
/**
* Show/hide week numbers
- *
- * @example
- * ```html
- *
- * ``
*/
@Input({ transform: booleanAttribute })
public showWeekNumbers: boolean;
diff --git a/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts b/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts
index d41f3b4721d..0ca64c68d68 100644
--- a/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts
+++ b/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts
@@ -240,9 +240,6 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
/**
* Selects a date.
- * ```typescript
- * this.monthPicker.selectDate(new Date(`2018-06-12`));
- * ```
*/
public override selectDate(value: Date) {
if (!value) {
diff --git a/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts b/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts
index 41e34c6e3c8..1471111dadc 100644
--- a/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts
+++ b/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts
@@ -43,12 +43,6 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
/**
* Sets/gets the `id` of the months view.
* If not set, the `id` will have value `"igx-months-view-0"`.
- * ```html
- *
- * ```
- * ```typescript
- * let monthsViewId = this.monthsView.id;
- * ```
*
* @memberof IgxMonthsViewComponent
*/
@@ -79,9 +73,6 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
/**
* Gets the month format option of the months view.
- * ```typescript
- * let monthFormat = this.monthsView.monthFormat.
- * ```
*/
@Input()
public get monthFormat(): any {
@@ -90,9 +81,6 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
/**
* Sets the month format option of the months view.
- * ```html
- * [monthFormat]="short'"
- * ```
*
* @memberof IgxMonthsViewComponent
*/
diff --git a/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts b/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts
index adde79ae3d5..af1bb6cb03f 100644
--- a/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts
+++ b/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts
@@ -76,9 +76,6 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
/**
* Gets the year format option of the years view.
- * ```typescript
- * let yearFormat = this.yearsView.yearFormat.
- * ```
*/
@Input()
public get yearFormat(): any {
@@ -87,9 +84,6 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
/**
* Sets the year format option of the years view.
- * ```html
- *
- * ```
*
* @memberof IgxYearsViewComponent
*/
diff --git a/projects/igniteui-angular/card/src/card/card.component.ts b/projects/igniteui-angular/card/src/card/card.component.ts
index 8e1dda11c68..dc4cde0a9f6 100644
--- a/projects/igniteui-angular/card/src/card/card.component.ts
+++ b/projects/igniteui-angular/card/src/card/card.component.ts
@@ -19,11 +19,6 @@ export class IgxCardMediaDirective {
/**
* Sets the `width` and `min-width` style property
* of the media container. If not provided it will be set to `auto`.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('style.width')
@HostBinding('style.min-width')
@@ -33,11 +28,6 @@ export class IgxCardMediaDirective {
/**
* Sets the `height` style property of the media container.
* If not provided it will be set to `auto`.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('style.height')
@Input()
@@ -67,11 +57,6 @@ export class IgxCardHeaderComponent {
/**
* Sets the layout style of the header.
* By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('class.igx-card-header--vertical')
@Input({ transform: booleanAttribute })
@@ -141,11 +126,6 @@ export class IgxCardFooterDirective {
/**
* Sets the value of the `role` attribute of the card footer.
* By default the value is set to `footer`.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('attr.role')
@Input()
@@ -155,31 +135,9 @@ export class IgxCardFooterDirective {
/**
* Card provides a way to display organized content in appealing way.
*
- * @igxModule IgxCardModule
- *
- * @igxTheme igx-card-theme, igx-icon-theme, igx-button-theme
- *
- * @igxKeywords card, button, avatar, icon
- *
- * @igxGroup Layouts
- *
* @remarks
* The Ignite UI Card serves as a container that allows custom content to be organized in an appealing way. There are
* five sections in a card that you can use to organize your content. These are header, media, content, actions, and footer.
- *
- * @example
- * ```html
- *
- *
- *
{{title}}
- *
{{subtitle}}
- *
- *
- *
- *
- *
- *
- * ```
*/
@Component({
@@ -191,14 +149,6 @@ export class IgxCardComponent {
/**
* Sets/gets the `id` of the card.
* If not set, `id` will have value `"igx-card-0"`;
- *
- * @example
- * ```html
- *
- * ```
- * ```typescript
- * let cardId = this.card.id;
- * ```
*/
@HostBinding('attr.id')
@Input()
@@ -216,11 +166,6 @@ export class IgxCardComponent {
/**
* Sets the value of the `role` attribute of the card.
* By default the value is set to `group`.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('attr.role')
@Input()
@@ -229,14 +174,6 @@ export class IgxCardComponent {
/**
* Sets/gets whether the card is elevated.
* Default value is `false`.
- *
- * @example
- * ```html
- *
- * ```
- * ```typescript
- * let cardElevation = this.card.elevated;
- * ```
*/
@Input({transform: booleanAttribute})
@HostBinding('class.igx-card--elevated')
@@ -246,11 +183,6 @@ export class IgxCardComponent {
* Sets the value of the `horizontal` attribute of the card.
* Setting this to `true` will make the different card sections align horizontally,
* essentially flipping the card to the side.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('class.igx-card--horizontal')
@Input({ transform: booleanAttribute })
@@ -279,11 +211,6 @@ export class IgxCardActionsComponent implements OnInit, OnChanges {
* You can justify the elements slotted in the igx-card-action container
* so that they are positioned equally from one another taking up all the
* space available along the card actions axis.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('class.igx-card-actions')
@Input()
diff --git a/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts b/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts
index c7c27892c08..fe15c8e7770 100644
--- a/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts
+++ b/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts
@@ -32,17 +32,6 @@ export class CarouselHammerConfig extends HammerGestureConfig {
* It can be used as a separate fullscreen element or inside another component.
*
* Example:
- * ```html
- *
- *
- *
First Slide Header
- *
First slide Content
- *
- *
- *
Second Slide Header
- *
Second Slide Content
- *
- * ```
*/
@Component({
providers: [
@@ -71,9 +60,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Sets the `id` of the carousel.
* If not set, the `id` of the first carousel component will be `"igx-carousel-0"`.
- * ```html
- *
- * ```
*
* @memberof IgxCarouselComponent
*/
@@ -82,9 +68,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
public id = `igx-carousel-${NEXT_ID++}`;
/**
* Returns the `role` attribute of the carousel.
- * ```typescript
- * let carouselRole = this.carousel.role;
- * ```
*
* @memberof IgxCarouselComponent
*/
@@ -108,9 +91,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Returns the class of the carousel component.
- * ```typescript
- * let class = this.carousel.cssClass;
- * ```
*
* @memberof IgxCarouselComponent
*/
@@ -119,9 +99,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Gets the `touch-action` style of the `list item`.
- * ```typescript
- * let touchAction = this.listItem.touchAction;
- * ```
*/
@HostBinding('style.touch-action')
public get touchAction() {
@@ -131,9 +108,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Sets whether the carousel should `loop` back to the first slide after reaching the last slide.
* Default value is `true`.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -142,9 +116,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Sets whether the carousel will `pause` the slide transitions on user interactions.
* Default value is `true`.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -153,9 +124,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Controls whether the carousel should render the left/right `navigation` buttons.
* Default value is `true`.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -164,9 +132,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Controls whether the carousel should render the indicators.
* Default value is `true`.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -176,9 +141,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Controls whether the carousel has vertical alignment.
* Default value is `false`.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -187,9 +149,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Controls whether the carousel should support gestures.
* Default value is `true`.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -198,9 +157,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Controls the maximum indexes that can be shown.
* Default value is `10`.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -209,10 +165,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Gets/sets the display mode of carousel indicators. It can be `start` or `end`.
* Default value is `end`.
- * ```html
- *
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -221,10 +173,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Gets/sets the animation type of carousel.
* Default value is `slide`.
- * ```html
- *
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -232,77 +180,24 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* The custom template, if any, that should be used when rendering carousel indicators
- *
- * ```typescript
- * // Set in typescript
- * const myCustomTemplate: TemplateRef = myComponent.customTemplate;
- * myComponent.carousel.indicatorTemplate = myCustomTemplate;
- * ```
- * ```html
- *
- *
- * ...
- *
- * brightness_7
- * brightness_5
- *
- *
- * ```
*/
@ContentChild(IgxCarouselIndicatorDirective, { read: TemplateRef, static: false })
public indicatorTemplate: TemplateRef = null;
/**
* The custom template, if any, that should be used when rendering carousel next button
- *
- * ```typescript
- * // Set in typescript
- * const myCustomTemplate: TemplateRef = myComponent.customTemplate;
- * myComponent.carousel.nextButtonTemplate = myCustomTemplate;
- * ```
- * ```html
- *
- *
- * ...
- *
- *
- *
- *
- * ```
*/
@ContentChild(IgxCarouselNextButtonDirective, { read: TemplateRef, static: false })
public nextButtonTemplate: TemplateRef = null;
/**
* The custom template, if any, that should be used when rendering carousel previous button
- *
- * ```typescript
- * // Set in typescript
- * const myCustomTemplate: TemplateRef = myComponent.customTemplate;
- * myComponent.carousel.prevButtonTemplate = myCustomTemplate;
- * ```
- * ```html
- *
- *
- * ...
- *
- *
- *
- *
- * ```
*/
@ContentChild(IgxCarouselPrevButtonDirective, { read: TemplateRef, static: false })
public prevButtonTemplate: TemplateRef = null;
/**
* The collection of `slides` currently in the carousel.
- * ```typescript
- * let slides: QueryList = this.carousel.slides;
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -312,9 +207,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* An event that is emitted after a slide transition has happened.
* Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -323,9 +215,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* An event that is emitted after a slide has been added to the carousel.
* Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -334,9 +223,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* An event that is emitted after a slide has been removed from the carousel.
* Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -345,9 +231,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* An event that is emitted after the carousel has been paused.
* Provides a reference to the `IgxCarouselComponent` as an event argument.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -356,9 +239,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* An event that is emitted after the carousel has resumed transitioning between `slides`.
* Provides a reference to the `IgxCarouselComponent` as an event argument.
- * ```html
- *
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -461,9 +341,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Returns the total number of `slides` in the carousel.
- * ```typescript
- * let slideCount = this.carousel.total;
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -473,9 +350,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* The index of the slide being currently shown.
- * ```typescript
- * let currentSlideNumber = this.carousel.current;
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -485,9 +359,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Returns a boolean indicating if the carousel is playing.
- * ```typescript
- * let isPlaying = this.carousel.isPlaying;
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -497,9 +368,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Returns а boolean indicating if the carousel is destroyed.
- * ```typescript
- * let isDestroyed = this.carousel.isDestroyed;
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -508,9 +376,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
}
/**
* Returns a reference to the carousel element in the DOM.
- * ```typescript
- * let nativeElement = this.carousel.nativeElement;
- * ```
*
* @memberof IgxCarouselComponent
*/
@@ -520,9 +385,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Returns the time `interval` in milliseconds before the slide changes.
- * ```typescript
- * let timeInterval = this.carousel.interval;
- * ```
*
* @memberof IgxCarouselComponent
*/
@@ -534,9 +396,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Sets the time `interval` in milliseconds before the slide changes.
* If not set, the carousel will not change `slides` automatically.
- * ```html
- *
- * ```
*
* @memberof IgxCarouselComponent
*/
@@ -748,9 +607,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Returns the slide corresponding to the provided `index` or null.
- * ```typescript
- * let slide1 = this.carousel.get(1);
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -760,9 +616,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Adds a new slide to the carousel.
- * ```typescript
- * this.carousel.add(newSlide);
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -775,9 +628,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Removes a slide from the carousel.
- * ```typescript
- * this.carousel.remove(slide);
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -792,19 +642,12 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Switches to the passed-in slide with a given `direction`.
- * ```typescript
- * const slide = this.carousel.get(2);
- * this.carousel.select(slide, CarouselAnimationDirection.NEXT);
- * ```
*
* @memberOf IgxCarouselComponent
*/
public select(slide: IgxSlideComponent, direction?: CarouselAnimationDirection): void;
/**
* Switches to slide by index with a given `direction`.
- * ```typescript
- * this.carousel.select(2, CarouselAnimationDirection.NEXT);
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -822,9 +665,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Transitions to the next slide in the carousel.
- * ```typescript
- * this.carousel.next();
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -840,9 +680,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Transitions to the previous slide in the carousel.
- * ```typescript
- * this.carousel.prev();
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -859,10 +696,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Resumes playing of the carousel if in paused state.
* No operation otherwise.
- * ```typescript
- * this.carousel.play();
- * }
- * ```
*
* @memberOf IgxCarouselComponent
*/
@@ -878,10 +711,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
/**
* Stops slide transitions if the `pause` option is set to `true`.
* No operation otherwise.
- * ```typescript
- * this.carousel.stop();
- * }
- * ```
*
* @memberOf IgxCarouselComponent
*/
diff --git a/projects/igniteui-angular/carousel/src/carousel/slide.component.ts b/projects/igniteui-angular/carousel/src/carousel/slide.component.ts
index 308f5d52d16..2c9dcc76925 100644
--- a/projects/igniteui-angular/carousel/src/carousel/slide.component.ts
+++ b/projects/igniteui-angular/carousel/src/carousel/slide.component.ts
@@ -6,12 +6,6 @@ import { CarouselAnimationDirection, IgxSlideComponentBase } from './carousel-ba
* A slide component that usually holds an image and/or a caption text.
* IgxSlideComponent is usually a child component of an IgxCarouselComponent.
*
- * ```
- *
- *
- *
- * ```
- *
* @export
*/
@Component({
@@ -24,11 +18,6 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli
/**
* Gets/sets the `index` of the slide inside the carousel.
- * ```html
- *
- *
- *
- * ```
*
* @memberOf IgxSlideComponent
*/
@@ -36,11 +25,6 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli
/**
* Gets/sets the target `direction` for the slide.
- * ```html
- *
- *
- *
- * ```
*
* @memberOf IgxSlideComponent
*/
@@ -51,9 +35,6 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli
/**
* Returns the `tabIndex` of the slide component.
- * ```typescript
- * let tabIndex = this.carousel.tabIndex;
- * ```
*
* @memberof IgxSlideComponent
* @deprecated in version 19.2.0.
@@ -84,9 +65,6 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli
/**
* Returns the class of the slide component.
- * ```typescript
- * let class = this.slide.cssClass;
- * ```
*
* @memberof IgxSlideComponent
*/
@@ -95,18 +73,8 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli
/**
* Gets/sets the `active` state of the slide.
- * ```html
- *
- *
- *
- * ```
*
* Two-way data binding.
- * ```html
- *
- *
- *
- * ```
*
* @memberof IgxSlideComponent
*/
@@ -134,9 +102,6 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli
/**
* Returns a reference to the carousel element in the DOM.
- * ```typescript
- * let nativeElement = this.slide.nativeElement;
- * ```
*
* @memberof IgxSlideComponent
*/
diff --git a/projects/igniteui-angular/chat/src/chat.component.ts b/projects/igniteui-angular/chat/src/chat.component.ts
index 97aa851aeff..c7729d62c50 100644
--- a/projects/igniteui-angular/chat/src/chat.component.ts
+++ b/projects/igniteui-angular/chat/src/chat.component.ts
@@ -58,14 +58,6 @@ type ChatTemplatesContextMap = {
/**
* Template references for customizing chat component rendering.
* Each property corresponds to a specific part of the chat UI that can be customized.
- *
- * @example
- * ```typescript
- * templates = {
- * messageContent: this.customMessageTemplate,
- * attachment: this.customAttachmentTemplate
- * }
- * ```
*/
export type IgxChatTemplates = {
[K in keyof Omit]?: TemplateRef;
@@ -85,17 +77,6 @@ export type IgxChatOptions = Omit;
*
* Uses OnPush change detection strategy for optimal performance. All inputs are signals,
* so changes are automatically tracked and propagated to the underlying web component.
- *
- * @example
- * ```typescript
- *
- * ```
*/
@Component({
selector: 'igx-chat',
@@ -274,13 +255,6 @@ export interface ChatInputContext {
/**
* Directive providing type information for chat message template contexts.
* Use this directive on ng-template elements that render chat messages.
- *
- * @example
- * ```html
- *
- *
{{ message.text }}
- *
- * ```
*/
@Directive({ selector: '[igxChatMessageContext]', standalone: true })
export class IgxChatMessageContextDirective {
@@ -293,13 +267,6 @@ export class IgxChatMessageContextDirective {
/**
* Directive providing type information for chat attachment template contexts.
* Use this directive on ng-template elements that render message attachments.
- *
- * @example
- * ```html
- *
- *
- *
- * ```
*/
@Directive({ selector: '[igxChatAttachmentContext]', standalone: true })
export class IgxChatAttachmentContextDirective {
@@ -312,13 +279,6 @@ export class IgxChatAttachmentContextDirective {
/**
* Directive providing type information for chat input template contexts.
* Use this directive on ng-template elements that render the chat input.
- *
- * @example
- * ```html
- *
- *
- *
- * ```
*/
@Directive({ selector: '[igxChatInputContext]', standalone: true })
export class IgxChatInputContextDirective {
diff --git a/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts b/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts
index f79b9362451..828b99c9fb4 100644
--- a/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts
+++ b/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts
@@ -12,24 +12,9 @@ import { EditorProvider, EDITOR_PROVIDER } from 'igniteui-angular/core';
/**
* Allows users to make a binary choice for a certain condition.
*
- * @igxModule IgxCheckboxModule
- *
- * @igxTheme igx-checkbox-theme
- *
- * @igxKeywords checkbox, label
- *
- * @igxGroup Data entry and display
- *
* @remarks
* The Ignite UI Checkbox is a selection control that allows users to make a binary choice for a certain condition.It behaves similarly
* to the native browser checkbox.
- *
- * @example
- * ```html
- *
- * simple checkbox
- *
- * ```
*/
@Component({
selector: 'igx-checkbox',
@@ -49,22 +34,12 @@ export class IgxCheckboxComponent
implements AfterViewInit, ControlValueAccessor, EditorProvider {
/**
* Returns the class of the checkbox component.
- *
- * @example
- * ```typescript
- * let class = this.checkbox.cssClass;
- * ```
*/
@HostBinding('class.igx-checkbox')
public override cssClass = 'igx-checkbox';
/**
* Returns if the component is of type `material`.
- *
- * @example
- * ```typescript
- * let checkbox = this.checkbox.material;
- * ```
*/
@HostBinding('class.igx-checkbox--material')
protected get material() {
@@ -73,11 +48,6 @@ export class IgxCheckboxComponent
/**
* Returns if the component is of type `indigo`.
- *
- * @example
- * ```typescript
- * let checkbox = this.checkbox.indigo;
- * ```
*/
@HostBinding('class.igx-checkbox--indigo')
protected get indigo() {
@@ -86,11 +56,6 @@ export class IgxCheckboxComponent
/**
* Returns if the component is of type `bootstrap`.
- *
- * @example
- * ```typescript
- * let checkbox = this.checkbox.bootstrap;
- * ```
*/
@HostBinding('class.igx-checkbox--bootstrap')
protected get bootstrap() {
@@ -99,11 +64,6 @@ export class IgxCheckboxComponent
/**
* Returns if the component is of type `fluent`.
- *
- * @example
- * ```typescript
- * let checkbox = this.checkbox.fluent;
- * ```
*/
@HostBinding('class.igx-checkbox--fluent')
protected get fluent() {
@@ -113,14 +73,6 @@ export class IgxCheckboxComponent
/**
* Sets/gets whether the checkbox component is on focus.
* Default value is `false`.
- *
- * @example
- * ```typescript
- * this.checkbox.focused = true;
- * ```
- * ```typescript
- * let isFocused = this.checkbox.focused;
- * ```
*/
@HostBinding('class.igx-checkbox--focused')
public override focused = false;
@@ -128,14 +80,6 @@ export class IgxCheckboxComponent
/**
* Sets/gets the checkbox indeterminate visual state.
* Default value is `false`;
- *
- * @example
- * ```html
- *
- * ```
- * ```typescript
- * let isIndeterminate = this.checkbox.indeterminate;
- * ```
*/
@HostBinding('class.igx-checkbox--indeterminate')
@Input({ transform: booleanAttribute })
@@ -144,14 +88,6 @@ export class IgxCheckboxComponent
/**
* Sets/gets whether the checkbox is checked.
* Default value is `false`.
- *
- * @example
- * ```html
- *
- * ```
- * ```typescript
- * let isChecked = this.checkbox.checked;
- * ```
*/
@HostBinding('class.igx-checkbox--checked')
@Input({ transform: booleanAttribute })
@@ -165,14 +101,6 @@ export class IgxCheckboxComponent
/**
* Sets/gets whether the checkbox is disabled.
* Default value is `false`.
- *
- * @example
- * ```html
- *
- * ```
- * ```typescript
- * let isDisabled = this.checkbox.disabled;
- * ```
*/
@HostBinding('class.igx-checkbox--disabled')
@Input({ transform: booleanAttribute })
@@ -181,14 +109,6 @@ export class IgxCheckboxComponent
/**
* Sets/gets whether the checkbox is invalid.
* Default value is `false`.
- *
- * @example
- * ```html
- *
- * ```
- * ```typescript
- * let isInvalid = this.checkbox.invalid;
- * ```
*/
@HostBinding('class.igx-checkbox--invalid')
@Input({ transform: booleanAttribute })
@@ -197,14 +117,6 @@ export class IgxCheckboxComponent
/**
* Sets/gets whether the checkbox is readonly.
* Default value is `false`.
- *
- * @example
- * ```html
- *
- * ```
- * ```typescript
- * let readonly = this.checkbox.readonly;
- * ```
*/
@Input({ transform: booleanAttribute })
public override readonly = false;
@@ -212,14 +124,6 @@ export class IgxCheckboxComponent
/**
* Sets/gets whether the checkbox should disable all css transitions.
* Default value is `false`.
- *
- * @example
- * ```html
- *
- * ```
- * ```typescript
- * let disableTransitions = this.checkbox.disableTransitions;
- * ```
*/
@HostBinding('class.igx-checkbox--plain')
@Input({ transform: booleanAttribute })
diff --git a/projects/igniteui-angular/chips/src/chips/chip.component.ts b/projects/igniteui-angular/chips/src/chips/chip.component.ts
index 237decb0311..15d3e1b9179 100644
--- a/projects/igniteui-angular/chips/src/chips/chip.component.ts
+++ b/projects/igniteui-angular/chips/src/chips/chip.component.ts
@@ -61,25 +61,10 @@ let CHIP_ID = 0;
/**
* Chip is compact visual component that displays information in an obround.
*
- * @igxModule IgxChipsModule
- *
- * @igxTheme igx-chip-theme
- *
- * @igxKeywords chip
- *
- * @igxGroup display
- *
* @remarks
* The Ignite UI Chip can be templated, deleted, and selected.
* Multiple chips can be reordered and visually connected to each other.
* Chips reside in a container called chips area which is responsible for managing the interactions between the chips.
- *
- * @example
- * ```html
- *
- *
- *
- * ```
*/
@Component({
selector: 'igx-chip',
@@ -99,21 +84,11 @@ export class IgxChipComponent implements OnInit, OnDestroy {
* @remarks
* Allowed values are `primary`, `info`, `success`, `warning`, `danger`.
* Providing no/nullish value leaves the chip in its default state.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public variant?: IgxChipTypeVariant | null;
/**
* Sets the value of `id` attribute. If not provided it will be automatically generated.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('attr.id')
@Input()
@@ -121,22 +96,12 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Returns the `role` attribute of the chip.
- *
- * @example
- * ```typescript
- * let chipRole = this.chip.role;
- * ```
*/
@HostBinding('attr.role')
public role = 'option';
/**
* Sets the value of `tabindex` attribute. If not provided it will use the element's tabindex if set.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('attr.tabIndex')
@Input()
@@ -153,11 +118,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Stores data related to the chip.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public data: any;
@@ -165,11 +125,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Defines if the `IgxChipComponent` can be dragged in order to change it's position.
* By default it is set to false.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public draggable = false;
@@ -177,11 +132,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Enables/disables the draggable element animation when the element is released.
* By default it's set to true.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public animateOnRelease = true;
@@ -189,11 +139,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Enables/disables the hiding of the base element that has been dragged.
* By default it's set to true.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public hideBaseOnDrag = true;
@@ -201,23 +146,12 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Defines if the `IgxChipComponent` should render remove button and throw remove events.
* By default it is set to false.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public removable = false;
/**
* Overrides the default icon that the chip applies to the remove button.
- *
- * @example
- * ```html
- *
- * delete
- * ```
*/
@Input()
public removeIcon: TemplateRef;
@@ -225,23 +159,12 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Defines if the `IgxChipComponent` can be selected on click or through navigation,
* By default it is set to false.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public selectable = false;
/**
* Overrides the default icon that the chip applies when it is selected.
- *
- * @example
- * ```html
- *
- * done_outline
- * ```
*/
@Input()
public selectIcon: TemplateRef;
@@ -257,11 +180,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
* Disables the `IgxChipComponent`. When disabled it restricts user interactions
* like focusing on click or tab, selection on click or Space, dragging.
* By default it is set to false.
- *
- * @example
- * ```html
- *
- * ```
*/
@HostBinding('class.igx-chip--disabled')
@Input({ transform: booleanAttribute })
@@ -269,16 +187,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Sets the `IgxChipComponent` selected state.
- *
- * @example
- * ```html
- *
- * ```
- *
- * Two-way data binding:
- * ```html
- *
- * ```
*/
@HostBinding('attr.aria-selected')
@Input({ transform: booleanAttribute })
@@ -289,14 +197,11 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Returns if the `IgxChipComponent` is selected.
*
- * @example
- * ```typescript
* @ViewChild('myChip')
* public chip: IgxChipComponent;
* selectedChip(){
* let selectedChip = this.chip.selected;
* }
- * ```
*/
public get selected() {
return this._selected;
@@ -312,11 +217,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Sets the `IgxChipComponent` background color.
* The `color` property supports string, rgb, hex.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public set color(newColor) {
@@ -326,14 +226,11 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Returns the background color of the `IgxChipComponent`.
*
- * @example
- * ```typescript
* @ViewChild('myChip')
* public chip: IgxChipComponent;
* ngAfterViewInit(){
* let chipColor = this.chip.color;
* }
- * ```
*/
public get color() {
return this.chipArea.nativeElement.style.backgroundColor;
@@ -358,11 +255,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Emits an event when the `IgxChipComponent` moving starts.
* Returns the moving `IgxChipComponent`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public moveStart = new EventEmitter();
@@ -370,11 +262,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Emits an event when the `IgxChipComponent` moving ends.
* Returns the moved `IgxChipComponent`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public moveEnd = new EventEmitter();
@@ -382,11 +269,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Emits an event when the `IgxChipComponent` is removed.
* Returns the removed `IgxChipComponent`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public remove = new EventEmitter();
@@ -394,11 +276,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Emits an event when the `IgxChipComponent` is clicked.
* Returns the clicked `IgxChipComponent`, whether the event should be canceled.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public chipClick = new EventEmitter();
@@ -407,22 +284,12 @@ export class IgxChipComponent implements OnInit, OnDestroy {
* Emits event when the `IgxChipComponent` is selected/deselected.
* Returns the selected chip reference, whether the event should be canceled, what is the next selection state and
* when the event is triggered by interaction `originalEvent` is provided, otherwise `originalEvent` is `null`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public selectedChanging = new EventEmitter();
/**
* Emits event when the `IgxChipComponent` is selected/deselected and any related animations and transitions also end.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public selectedChanged = new EventEmitter();
@@ -431,11 +298,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
* Emits an event when the `IgxChipComponent` keyboard navigation is being used.
* Returns the focused/selected `IgxChipComponent`, whether the event should be canceled,
* if the `alt`, `shift` or `control` key is pressed and the pressed key name.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public keyDown = new EventEmitter();
@@ -444,11 +306,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
* Emits an event when the `IgxChipComponent` has entered the `IgxChipsAreaComponent`.
* Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as
* the original drop event arguments.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public dragEnter = new EventEmitter();
@@ -457,11 +314,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
* Emits an event when the `IgxChipComponent` has left the `IgxChipsAreaComponent`.
* Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as
* the original drop event arguments.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public dragLeave = new EventEmitter();
@@ -470,11 +322,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
* Emits an event when the `IgxChipComponent` is over the `IgxChipsAreaComponent`.
* Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as
* the original drop event arguments.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public dragOver = new EventEmitter();
@@ -483,11 +330,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
* Emits an event when the `IgxChipComponent` has been dropped in the `IgxChipsAreaComponent`.
* Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as
* the original drop event arguments.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public dragDrop = new EventEmitter();
@@ -522,16 +364,6 @@ export class IgxChipComponent implements OnInit, OnDestroy {
/**
* Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior.
- *
- * @example
- * ```html
- *
- * ```
- * ```typescript
- * onMoveStart(event: IBaseChipEventArgs){
- * let dragDirective = event.owner.dragDirective;
- * }
- * ```
*/
@ViewChild('chipArea', { read: IgxDragDirective, static: true })
public dragDirective: IgxDragDirective;
diff --git a/projects/igniteui-angular/chips/src/chips/chips-area.component.ts b/projects/igniteui-angular/chips/src/chips/chips-area.component.ts
index 1146c073d6c..c5430b1fcdc 100644
--- a/projects/igniteui-angular/chips/src/chips/chips-area.component.ts
+++ b/projects/igniteui-angular/chips/src/chips/chips-area.component.ts
@@ -27,23 +27,6 @@ export interface IChipsAreaSelectEventArgs extends IBaseChipsAreaEventArgs {
/**
* The chip area allows you to perform more complex scenarios with chips that require interaction,
* like dragging, selection, navigation, etc.
- *
- * @igxModule IgxChipsModule
- *
- * @igxTheme igx-chip-theme
- *
- * @igxKeywords chip area, chip
- *
- * @igxGroup display
- *
- * @example
- * ```html
- *
- *
- * {{chip.text}}
- *
- *
- * ```
*/
@Component({
selector: 'igx-chips-area',
@@ -58,34 +41,18 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
/**
* Returns the `role` attribute of the chips area.
- *
- * @example
- * ```typescript
- * let chipsAreaRole = this.chipsArea.role;
- * ```
*/
@HostBinding('attr.role')
public role = 'listbox';
/**
* Returns the `aria-label` attribute of the chips area.
- *
- * @example
- * ```typescript
- * let ariaLabel = this.chipsArea.ariaLabel;
- * ```
- *
*/
@HostBinding('attr.aria-label')
public ariaLabel = 'chip area';
/**
* Sets the width of the `IgxChipsAreaComponent`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public width: number;
@@ -98,11 +65,6 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
/**
* Sets the height of the `IgxChipsAreaComponent`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public height: number;
@@ -116,11 +78,6 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
/**
* Emits an event when `IgxChipComponent`s in the `IgxChipsAreaComponent` should be reordered.
* Returns an array of `IgxChipComponent`s.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public reorder = new EventEmitter();
@@ -129,46 +86,24 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
* Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is selected/deselected.
* Fired after the chips area is initialized if there are initially selected chips as well.
* Returns an array of selected `IgxChipComponent`s and the `IgxChipAreaComponent`.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public selectionChange = new EventEmitter();
/**
* Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public moveStart = new EventEmitter();
/**
* Emits an event after an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved.
- *
- * @example
- * ```html
- *
- * ```
*/
@Output()
public moveEnd = new EventEmitter();
/**
* Holds the `IgxChipComponent` in the `IgxChipsAreaComponent`.
- *
- * @example
- * ```typescript
- * ngAfterViewInit(){
- * let chips = this.chipsArea.chipsList;
- * }
- * ```
*/
@ContentChildren(IgxChipComponent, { descendants: true })
public chipsList: QueryList;
diff --git a/projects/igniteui-angular/combo/src/combo/combo-dropdown.component.ts b/projects/igniteui-angular/combo/src/combo/combo-dropdown.component.ts
index 403090f2438..4e6fcee5fc3 100644
--- a/projects/igniteui-angular/combo/src/combo/combo-dropdown.component.ts
+++ b/projects/igniteui-angular/combo/src/combo/combo-dropdown.component.ts
@@ -56,10 +56,6 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
/**
* Get all non-header items
- *
- * ```typescript
- * let myDropDownItems = this.dropdown.items;
- * ```
*/
public override get items(): IgxComboItemComponent[] {
const items: IgxComboItemComponent[] = [];
diff --git a/projects/igniteui-angular/combo/src/combo/combo.common.ts b/projects/igniteui-angular/combo/src/combo/combo.common.ts
index a9a6bade24a..81618c0d1b7 100644
--- a/projects/igniteui-angular/combo/src/combo/combo.common.ts
+++ b/projects/igniteui-angular/combo/src/combo/combo.common.ts
@@ -121,16 +121,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Defines whether the caseSensitive icon should be shown in the search input
- *
- * ```typescript
- * // get
- * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
- * ```
- *
- * ```html
- *
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public showSearchCaseIcon = false;
@@ -149,34 +139,14 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Set custom overlay settings that control how the combo's list of items is displayed.
* Set:
- * ```html
- *
- * ```
*
- * ```typescript
- * const customSettings = { positionStrategy: { settings: { target: myTarget } } };
- * combo.overlaySettings = customSettings;
- * ```
* Get any custom overlay settings used by the combo:
- * ```typescript
- * const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;
- * ```
*/
@Input()
public overlaySettings: OverlaySettings = null;
/**
* Gets/gets combo id.
- *
- * ```typescript
- * // get
- * let id = this.combo.id;
- * ```
- *
- * ```html
- *
- *
- * ```
*/
@HostBinding('attr.id')
@Input()
@@ -198,16 +168,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Sets the style width of the element
- *
- * ```typescript
- * // get
- * let myComboWidth = this.combo.width;
- * ```
- *
- * ```html
- *
- *
- * ```
*/
@HostBinding('style.width')
@Input()
@@ -215,32 +175,12 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Controls whether custom values can be added to the collection
- *
- * ```typescript
- * // get
- * let comboAllowsCustomValues = this.combo.allowCustomValues;
- * ```
- *
- * ```html
- *
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public allowCustomValues = false;
/**
* Configures the drop down list height
- *
- * ```typescript
- * // get
- * let myComboItemsMaxHeight = this.combo.itemsMaxHeight;
- * ```
- *
- * ```html
- *
- *
- * ```
*/
@Input()
public get itemsMaxHeight(): number {
@@ -263,16 +203,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Configures the drop down list item height
- *
- * ```typescript
- * // get
- * let myComboItemHeight = this.combo.itemHeight;
- * ```
- *
- * ```html
- *
- *
- * ```
*/
@Input()
public get itemHeight(): number {
@@ -285,43 +215,18 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Configures the drop down list width
- *
- * ```typescript
- * // get
- * let myComboItemsWidth = this.combo.itemsWidth;
- * ```
- *
- * ```html
- *
- *
- * ```
*/
@Input()
public itemsWidth: string;
/**
* Defines the placeholder value for the combo value field
- *
- * ```typescript
- * // get
- * let myComboPlaceholder = this.combo.placeholder;
- * ```
- *
- * ```html
- *
- *
- * ```
*/
@Input()
public placeholder: string;
/**
* Combo data source.
- *
- * ```html
- *
- *
- * ```
*/
@Input()
public get data(): any[] | null {
@@ -339,16 +244,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Determines which column in the data source is used to determine the value.
- *
- * ```typescript
- * // get
- * let myComboValueKey = this.combo.valueKey;
- * ```
- *
- * ```html
- *
- *
- * ```
*/
@Input()
public valueKey: string = null;
@@ -360,20 +255,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Determines which column in the data source is used to determine the display value.
- *
- * ```typescript
- * // get
- * let myComboDisplayKey = this.combo.displayKey;
- *
- * // set
- * this.combo.displayKey = 'val';
- *
- * ```
- *
- * ```html
- *
- *
- * ```
*/
public get displayKey() {
return this._displayKey ? this._displayKey : this.valueKey;
@@ -381,11 +262,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[].
- *
- * ```html
- *
- *
- * ```
*/
@Input()
public set groupKey(val: string) {
@@ -394,11 +270,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[].
- *
- * ```typescript
- * // get
- * let currentGroupKey = this.combo.groupKey;
- * ```
*/
public get groupKey(): string {
return this._groupKey;
@@ -406,14 +277,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Sets groups sorting order.
- *
- * @example
- * ```html
- *
- * ```
- * ```typescript
- * public groupSortingDirection = SortingDirection.Asc;
- * ```
*/
@Input()
public get groupSortingDirection(): SortingDirection {
@@ -425,20 +288,12 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Gets/Sets the custom filtering function of the combo.
- *
- * @example
- * ```html
- *
- * ```
*/
@Input()
public filterFunction: (collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions) => any[];
/**
* Sets aria-labelledby attribute value.
- * ```html
- *
- * ```
*/
@Input()
public ariaLabelledBy: string;
@@ -449,9 +304,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Disables the combo. The default is `false`.
- * ```html
- *
- * ```
*/
@Input({ transform: booleanAttribute })
public disabled = false;
@@ -459,9 +311,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Sets the visual combo type.
* The allowed values are `line`, `box`, `border` and `search`. The default is `box`.
- * ```html
- *
- * ```
*/
@Input()
public get type(): IgxInputGroupType {
@@ -488,249 +337,90 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
/**
* Emitted before the dropdown is opened
- *
- * ```html
- *
- * ```
*/
@Output()
public opening = new EventEmitter();
/**
* Emitted after the dropdown is opened
- *
- * ```html
- *
- * ```
*/
@Output()
public opened = new EventEmitter();
/**
* Emitted before the dropdown is closed
- *
- * ```html
- *
- * ```
*/
@Output()
public closing = new EventEmitter();
/**
* Emitted after the dropdown is closed
- *
- * ```html
- *
- * ```
*/
@Output()
public closed = new EventEmitter();
/**
* Emitted when an item is being added to the data collection
- *
- * ```html
- *
- * ```
*/
@Output()
public addition = new EventEmitter();
/**
* Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)
- *
- * ```html
- *
- * ```
*/
@Output()
public searchInputUpdate = new EventEmitter();
/**
* Emitted when new chunk of data is loaded from the virtualization
- *
- * ```html
- *
- * ```
*/
@Output()
public dataPreLoad = new EventEmitter();
/**
* The custom template, if any, that should be used when rendering ITEMS in the combo list
- *
- * ```typescript
- * // Set in typescript
- * const myCustomTemplate: TemplateRef = myComponent.customTemplate;
- * myComponent.combo.itemTemplate = myCustomTemplate;
- * ```
- * ```html
- *
- *
- * ...
- *
- *