diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db index b094e6240..53ef147c0 100644 Binary files a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db and b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/angular.json b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/angular.json index dc68d8c9e..a937c494f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/angular.json +++ b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/angular.json @@ -3,8 +3,8 @@ "groupKey": "AI-Assisted Development", "section": "AI-Assisted Development", "groupLabel": "", - "summary": "Configure Agent Skills and MCP servers to scaffold projects, generate components, palettes, themes, answer API questions, and validate complex tasks", - "hash": "57230cd42f0205711cd7da3001172115", + "summary": "Configure agent skills and MCP servers for coding assistants to scaffold apps, answer API questions, generate themes, and orchestrate consensus-based workflows", + "hash": "796e453c7cd747753e31eb9727f318da", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -12,8 +12,8 @@ "groupKey": "Charts", "section": "Charts", "groupLabel": "", - "summary": "Configure area, bar, bubble, column, line, pie, scatter, stock, treemap, polar, radial, spline, step, and sparkline charts with axes, series, and styling.", - "hash": "d332aff3648797a31d64891a5fd48a70", + "summary": "Create and configure category, financial, data, polar, scatter, shape, pie, sparkline, and hierarchical charts with series, axes, legends, tooltips, zooming, and styling", + "hash": "975da8af99b8827df5bab220583ba197", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -21,8 +21,8 @@ "groupKey": "Charts > Chart Features", "section": "Charts", "groupLabel": "Chart Features", - "summary": "Configure chart axes, annotations, animations, tooltips, legends, selections, highlights, overlays, trendlines, navigation, synchronization, filtering, and performance optimization.", - "hash": "a8ac95d1ed416f80b0c3ba1bbea94d09", + "summary": "Configure chart axes, annotations, aggregation, filtering, legends, selection, highlighting, navigation, tooltips, overlays, trendlines, and performance.", + "hash": "f8121d78bf282ce318ba24512eb31ae3", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -30,8 +30,8 @@ "groupKey": "Dashboards", "section": "Dashboards", "groupLabel": "", - "summary": "Covers Dashboard Tile installation, module setup, data binding, automatic visualization selection, and toolbar customization for dashboard tiles.", - "hash": "de7ac08dd493db9a5ba92241292d60a6", + "summary": "Configure Dashboard Tile visualization and toolbar, with automatic visualization selection from data sources plus chart, gauge, and map integrations.", + "hash": "1e8fbef0744f3841964639a3bed51d8e", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -39,8 +39,8 @@ "groupKey": "Data Entry & Display", "section": "Data Entry & Display", "groupLabel": "", - "summary": "Configure selection, autocompletion, buttons, inputs, validation, keyboard navigation, styling, progress indicators, virtualization, and pagination", - "hash": "3e00a42a88975006e913d65f6eee524c", + "summary": "Configure selection controls, inputs, buttons, toggles, ratings, badges, chips, progress, pagination, virtualization, masking, highlighting, and theming", + "hash": "5793c5450ec55244d80b5df1528e541b", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -48,8 +48,8 @@ "groupKey": "Data Entry & Display > Drop Down", "section": "Data Entry & Display", "groupLabel": "Drop Down", - "summary": "Covers drop-down selection, grouping, menus, multi-level navigation, keyboard input, theming, virtualization, remote loading, and hierarchical multi-selection", - "hash": "036ac177645b9882565d7d1ce45277dd", + "summary": "Covers single-item selection, grouped and hierarchical data, menus, keyboard navigation, custom themes, virtualization, chunk loading, and multi-select chips.", + "hash": "3a36aed8050479861e843ddcfa6b6945", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -57,8 +57,8 @@ "groupKey": "Data Entry & Display > Icon", "section": "Data Entry & Display", "groupLabel": "Icon", - "summary": "Covers font and SVG icon families, Material Symbols and Material Icons Extended, registration, references, retrieval, sizing, colors, themes, and service APIs.", - "hash": "8c7c4bed37e44b066e2a71b9d655b5ce", + "summary": "Covers font and SVG families, colors and sizes, inactive states, Material Symbols, theme styling, family registration, aliases, service methods, and template rendering", + "hash": "c568d462ce18a1bb650331f07e8b522a", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -66,8 +66,8 @@ "groupKey": "Data Entry & Display > Query Builder", "section": "Data Entry & Display", "groupLabel": "Query Builder", - "summary": "Build visual filtering queries with entities, fields, conditions, groups, AND/OR logic, expression trees, subqueries, SQL, serialization, and grid binding.", - "hash": "4917f20cbcf9ff53060a7b9251628e0c", + "summary": "Create expression trees with entities, fields, conditions, grouping, and custom templates; define, serialize, filter data, build subqueries, and generate SQL.", + "hash": "f2dcf481a325d0bcbbf18ab754d2d7ff", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -75,8 +75,8 @@ "groupKey": "Frameworks > Excel Library", "section": "Frameworks", "groupLabel": "Excel Library", - "summary": "Create, load, save, and manipulate workbooks, worksheets, cells, tables, formulas, charts, and sparklines, with styling, filtering, protection, and XLSX export.", - "hash": "b2220c7e5785de1bdb2f951960eec885", + "summary": "Create, load, and save workbooks; manage worksheets, cells, tables, charts, and sparklines with formulas, formatting, protection, filtering, and file utilities.", + "hash": "d789da0e8c10a480b199e96f03851c27", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -84,8 +84,8 @@ "groupKey": "Gauges", "section": "Gauges", "groupLabel": "", - "summary": "Covers bullet graphs and linear/radial gauges with scales, ranges, needles, tick marks, labels, backings, orientation, highlighting, and animation.", - "hash": "3ace95749d2af12cc352b71081e0f9e0", + "summary": "Use bullet graphs and linear or radial gauges with scales, needles, ranges, labels, tick marks, backing, targets, titles, optical scaling, and animation", + "hash": "de174a5edb99f40780600706fd0240e0", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -93,8 +93,8 @@ "groupKey": "General", "section": "General", "groupLabel": "", - "summary": "Covers installation, licensing, localization, updates, SSR, code splitting, data binding, grid and chart configuration, data analysis, theming, and release changes.", - "hash": "b6d720cf98832e7134f83c2f89fa813f", + "summary": "Covers installation, licensing, localization, updates, SSR, code splitting, data binding, grid and chart configuration, and data analysis workflows.", + "hash": "28ba05e2716757a9f412dabb661b0c40", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -102,8 +102,8 @@ "groupKey": "General > Angular Schematics & Ignite UI CLI", "section": "General", "groupLabel": "Angular Schematics & Ignite UI CLI", - "summary": "Scaffold projects, select templates and themes, generate component views, run applications, and configure CLI, Schematics, MCP, AI assistants, and authentication", - "hash": "6123db64120e15d29048c87115b98c97", + "summary": "Scaffold projects and component views, choose templates and themes, run applications, configure AI assistants and MCP integrations, and implement authentication.", + "hash": "120cbcf191b68dc333fa94f3cea6d3f8", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -111,8 +111,8 @@ "groupKey": "General > How to", "section": "General", "groupLabel": "How to", - "summary": "Build SignalR live-data streams, validate reactive forms, connect CRUD grids, customize Sass themes, use standalone components, and scaffold apps with MCP workflows.", - "hash": "bed468734bb6438a07d015812edc907d", + "summary": "Build live-data dashboards, validate reactive forms, connect CRUD services, customize themes, use standalone components, and scaffold apps through MCP.", + "hash": "f1cbe10c92d0d446cf12e2516a3e5790", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -120,8 +120,8 @@ "groupKey": "General > WPF to Angular guide", "section": "General", "groupLabel": "WPF to Angular guide", - "summary": "Create Angular apps and components, use one-way and two-way binding, events, pipes, structural directives, and recreate WPF layouts with Flexbox and Grid", - "hash": "ee09a9543e67cfa37fc9a27b43ead878", + "summary": "Covers application creation, components, one- and two-way data binding, events, pipes, structural directives, and Flexbox/Grid layouts for migration.", + "hash": "e5ec35449bbe353d15727abedd3008fb", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -129,8 +129,8 @@ "groupKey": "Grids & Lists", "section": "Grids & Lists", "groupLabel": "", - "summary": "Covers grids, trees, and lists with virtualization, editing, filtering, sorting, grouping, selection, hierarchical navigation, templating, and export.", - "hash": "645d51febe4d19982d7e519783830668", + "summary": "Covers data grids, trees, and lists with data operations, editing, selection, filtering, templating, navigation, lazy loading, accessibility, styling, and export.", + "hash": "9e881f4db3910f905043a871825684b4", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -138,8 +138,8 @@ "groupKey": "Grids & Lists > Combo", "section": "Grids & Lists", "groupLabel": "Combo", - "summary": "Editable and simple combo boxes support data and value binding, filtering, custom values, grouping, remote data, virtualization, templates, forms, and navigation.", - "hash": "a14f70a64b331f4402a598dd757d6dd2", + "summary": "Configure ComboBox data binding for local and remote data, filtering, grouping, custom values, templates, forms, selection, overlays, and keyboard navigation.", + "hash": "99fcbd08b624695358044273571f998b", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -147,8 +147,8 @@ "groupKey": "Grids & Lists > Data Grid", "section": "Grids & Lists", "groupLabel": "Data Grid", - "summary": "Configure Data Grid columns, editing, filtering, sorting, grouping, selection, virtualization, remote data, exporting, navigation, layouts, and state persistence.", - "hash": "20d34a03c6db66e3266a3e387e4089be", + "summary": "Build data grids with local, remote, and live data, virtualization, editing, validation, filtering, sorting, grouping, selection, and export", + "hash": "8874a12176a124e2ab0c770fa1896b85", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -156,8 +156,8 @@ "groupKey": "Grids & Lists > Grid Lite", "section": "Grids & Lists", "groupLabel": "Grid Lite", - "summary": "Configure Grid Lite columns, data binding, cell and header templates, virtualization, keyboard navigation, filtering, sorting, and custom themes with palettes and typography", - "hash": "9a9539097948cf43b5688eb88f831117", + "summary": "Configure grids with data binding, column sizing, visibility, cell and header templates, filtering, sorting, virtualization, and theming.", + "hash": "53a678d177f5fa202128d3cfc8e4b1be", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -165,8 +165,8 @@ "groupKey": "Grids & Lists > Hierarchical Grid", "section": "Grids & Lists", "groupLabel": "Hierarchical Grid", - "summary": "Configure hierarchical and load-on-demand data, editing, validation, filtering, sorting, paging, selection, virtualization, layout, styling, state, and export", - "hash": "3d673516b02c56cb178becc117290813", + "summary": "Configure hierarchical grids for nested and load-on-demand data with CRUD, filtering, sorting, selection, virtualization, exports, and state persistence", + "hash": "04883c554e4cf024aef7afd658839578", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -174,8 +174,8 @@ "groupKey": "Grids & Lists > Pivot Grid", "section": "Grids & Lists", "groupLabel": "Pivot Grid", - "summary": "Configure Pivot Grid dimensions, values, aggregations, filters, sorting, layouts, selection, resizing, remote data, Excel/PDF export, and state persistence.", - "hash": "5800f4992cd35af659bb41d5a6a7c1b4", + "summary": "Covers Pivot Grid setup, dimensions, values, aggregations, filtering, sorting, selection, summaries, Excel/PDF export, remote data, and state persistence.", + "hash": "2a06f697b7e123063084739d6d4e557b", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -183,8 +183,8 @@ "groupKey": "Grids & Lists > Spreadsheet", "section": "Grids & Lists", "groupLabel": "Spreadsheet", - "summary": "Covers workbook editing, loading and saving, activation, charts, clipboard, conditional formatting, data validation, hyperlinks, commands, and configuration.", - "hash": "c44e054bf7398d19f7b90ca0c5b6f057", + "summary": "Covers Excel workbook loading and saving, editing, formatting, navigation, charts, clipboard actions, conditional formatting, data validation, hyperlinks, and commands.", + "hash": "240be6d2d1937a564b5dd502d0e246ac", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -192,8 +192,8 @@ "groupKey": "Grids & Lists > Tree Grid", "section": "Grids & Lists", "groupLabel": "Tree Grid", - "summary": "Configure hierarchical Tree Grids with editing, selection, filtering, sorting, grouping, paging, virtualization, load-on-demand, styling, state, and export.", - "hash": "5c110307191a990878909bc86612b644", + "summary": "Configure hierarchical data, remote operations, virtualization, editing, filtering, sorting, selection, grouping, pinning, exporting, and state persistence.", + "hash": "9dbae68c9662496615910ad132a312a6", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -201,8 +201,8 @@ "groupKey": "Interactions", "section": "Interactions", "groupLabel": "", - "summary": "Build interactive interfaces with chat, dialogs, sliders, ripples, toggles, tooltips, drag-and-drop, zoom controls, and contextual action strips.", - "hash": "f9fedbf1290228fbf2f439ab61a23088", + "summary": "Covers messaging, dialogs, sliders, ripples, toggles, tooltips, drag and drop, chart zooming, and action strips with positioning, styling, and customization", + "hash": "66a0109c9fcf5211475e965a10db757a", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -210,8 +210,8 @@ "groupKey": "Interactions > Overlay", "section": "Interactions", "groupLabel": "Overlay", - "summary": "Covers rendering overlay content, attaching and detaching, positioning strategies and offsets, scroll strategies, modal behavior, and global or scoped styling.", - "hash": "fa41bbdbbea7af01f1e8ac04b6835401", + "summary": "Covers attaching, positioning, showing, hiding, and detaching components or elements, overlay settings, scroll strategies, toggle integration, outlets, and scoped styling.", + "hash": "cf90be24a0e8a75f531eab1f1c80fc7c", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -219,8 +219,8 @@ "groupKey": "Interactivity", "section": "Interactivity", "groupLabel": "", - "summary": "Covers right-to-left (RTL) direction, application-level and component-level directionality, plus Section 508, WCAG, WAI-ARIA, and accessibility caveats.", - "hash": "d9294cd8bf90ea8bd32a52368e3e8dda", + "summary": "Covers right-to-left directionality configuration and calendar toggling, plus Section 508 and WCAG accessibility compliance, matrices, and theme notes.", + "hash": "546d5a581e53b19ca71828ddd96ab77f", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -228,8 +228,8 @@ "groupKey": "Layouts", "section": "Layouts", "groupLabel": "", - "summary": "Create responsive and fluid layouts with direction, ordering, spacing, alignment, and wrapping, alongside tabs, cards, accordions, splitters, steppers, and tiles", - "hash": "6db4a6fa0f56567ff0d8fe645d727422", + "summary": "Create layouts with flex direction, spacing, alignment, wrapping, carousels, tabs, cards, accordions, steppers, split panes, docked panes, avatars, and draggable tiles", + "hash": "32a71b303d55be6733005241ea8dc972", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -237,8 +237,8 @@ "groupKey": "Maps", "section": "Maps", "groupLabel": "", - "summary": "Cover navigation, coordinate conversion, data binding, styling, tooltips, and geographic scatter, bubble, symbol, density, contour, polygon, and polyline series", - "hash": "ccd384121c7d2fbfef5a7773536b4356", + "summary": "Display geospatial data on imagery maps with geographic series, data binding, triangulation, scaling, navigation, tooltips, heat color scales, shapefile shapes.", + "hash": "20e2cbf1dcf5a86d3df2d0664bcb9cc9", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -246,8 +246,8 @@ "groupKey": "Maps > Geographic Map Features", "section": "Maps", "groupLabel": "Geographic Map Features", - "summary": "Display and navigate geographic maps with shapefiles, CSV, JSON, and custom models; overlay symbols, routes, shapes, imagery, heat maps, styling, and geographic utilities.", - "hash": "7059374523d1e3ada45f564c3e86afe8", + "summary": "Covers geographic maps with imagery, geographic series, CSV/JSON/model/Shape File binding, overlays, heat imagery, navigation, shape styling, and geospatial utilities", + "hash": "d99d959c1245b0772535da6940b2fb32", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -255,8 +255,8 @@ "groupKey": "Menus", "section": "Menus", "groupLabel": "", - "summary": "Covers toolbar chart integration, tool actions, icons, orientation and color editing; navigation drawer routing, modes and variants; and navbar headers with menu, icon and back actions.", - "hash": "a4a2f9d648dadbdb7e686b859b1f0b66", + "summary": "Covers toolbars with chart linking and actions; responsive navigation with pinned/mini modes, routing, and hierarchical menus; headers with back navigation", + "hash": "91c8c6af511fd8387487e98ba7994cb1", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -264,8 +264,8 @@ "groupKey": "Notifications", "section": "Notifications", "groupLabel": "", - "summary": "Covers persistent banners, brief snackbars, and auto-hiding toasts, with actions, positioning, customization, animations, events, state handling, and theming", - "hash": "8f184a91511105107c37f7f74c8e63fd", + "summary": "Display banners, snackbars, and toasts with custom content, actions, animations, events, timing, positioning, interactions, and styling.", + "hash": "baa8a94c1325914eea4278a2fa6f6808", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -273,8 +273,8 @@ "groupKey": "Scheduling", "section": "Scheduling", "groupLabel": "", - "summary": "Covers date-time editing, calendar selection, date, date-range, month, and time pickers, with formatting, validation, localization, and keyboard navigation.", - "hash": "925f2859fb7fe10e0ceac4c97d30681a", + "summary": "Covers date and time editing, single, multi, and range selection, month and year picking, formatting, validation, localization, forms, navigation, and styling.", + "hash": "6c4becff8680231103061f71657a8c81", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -282,8 +282,8 @@ "groupKey": "Services", "section": "Services", "groupLabel": "", - "summary": "Export raw and grid data to CSV, TSV, TAB, Excel, or PDF with format options, row and column filtering, export events, fonts, and Unicode support.", - "hash": "2ffe7381fe47c0e852f49c9c44730d98", + "summary": "Export arrays and grid data to CSV, TSV, TAB, Excel, or PDF with delimiters, filtering, excluded rows or columns, page options, and Unicode fonts.", + "hash": "016ff0121692e10f1fb8420756ca31b5", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -291,8 +291,8 @@ "groupKey": "Services > Transaction Service", "section": "Services", "groupLabel": "Transaction Service", - "summary": "Covers data changes, ADD/UPDATE/DELETE staging, pending transactions, commits, clearing, undo/redo, transaction pipes, and flat or hierarchical services.", - "hash": "32d92c85e585486aba4df8ee6581bc26", + "summary": "Accumulate, commit, clear, undo, and redo flat or hierarchical data changes with transaction services, factories, logs, batch editing, and custom implementations.", + "hash": "1c5788e7a8fe47a4537577e09b618c6b", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -300,8 +300,8 @@ "groupKey": "Styling & Themes", "section": "Styling & Themes", "groupLabel": "", - "summary": "Customize themes with CSS variables or Sass, including palettes, elevations, typography, roundness, spacing, display density, scoping, and component-specific styling.", - "hash": "20310cc68675a654dd89f4fcb537209a", + "summary": "Customize themes with CSS variables or Sass, including palettes, elevations, typography, roundness, display density, and application- or component-level spacing.", + "hash": "b39a2e4779ebeea26f84d8ca40a46283", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -309,8 +309,8 @@ "groupKey": "Styling & Themes > Sass", "section": "Styling & Themes", "groupLabel": "Sass", - "summary": "Configure Sass themes with palettes, schemas, typography, elevations, roundness, animations, scoped component themes, presets, utilities, printing, and integrations", - "hash": "e5e713f955c15874ab22771e2dbc08d2", + "summary": "Configure Sass palettes, schemas, typography, elevations, animations, roundness, scoped themes, presets, printing, and Material or Bootstrap integrations", + "hash": "1aefc24674a81e2d89039a2757f6da7e", "model": "gpt-5.6-luna", "promptVersion": 1 } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/blazor.json b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/blazor.json index 23ca03371..0558c6077 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/blazor.json +++ b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/blazor.json @@ -39,8 +39,8 @@ "groupKey": "Data Entry & Display", "section": "Data Entry & Display", "groupLabel": "", - "summary": "Handles inputs, masked and date-time entry, selection, buttons, dropdowns, badges, chips, icons, ratings, switches, progress indicators, validation, styling", - "hash": "50c3746d1085383d17cd2579e20fabd9", + "summary": "Covers buttons, selection controls, inputs, masked date and time entry, dropdowns, progress indicators, badges, icons, chips, ratings, color editing, and styling.", + "hash": "f72097377f04e06007a2af48986489ca", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -57,8 +57,8 @@ "groupKey": "Frameworks > Excel Library", "section": "Frameworks", "groupLabel": "Excel Library", - "summary": "Create, load, edit, format, protect, and export Excel workbooks with cells, tables, worksheets, charts, and sparklines, including formulas and filtering.", - "hash": "88e000a5d3eca053caa6d49488df3a83", + "summary": "Create, load, edit, and export workbooks with cells, tables, worksheets, charts, sparklines, formulas, formatting, filtering, sorting, and protection.", + "hash": "ab346db52f8f576373552f2dc8eb933b", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -111,8 +111,8 @@ "groupKey": "Grids & Lists > Grid", "section": "Grids & Lists", "groupLabel": "Grid", - "summary": "Configure Grid data binding, columns, filtering, sorting, editing, selection, grouping, paging, exporting, clipboard, virtualization, styling, and state saving.", - "hash": "e421ad1e356d5e713a1ca7b482fb3c1a", + "summary": "Configure grids with data binding, columns, filtering, sorting, editing, grouping, selection, paging, virtualization, exporting, theming, and row actions.", + "hash": "a15870be3f0464018ffcdc2fc2ebbc04", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -120,8 +120,8 @@ "groupKey": "Grids & Lists > Grid Lite", "section": "Grids & Lists", "groupLabel": "Grid Lite", - "summary": "Configure data binding, column configuration, filtering, sorting, virtualization, keyboard navigation, theming with CSS custom properties, and data-source updates.", - "hash": "7f6453974d0904788bee78d18ac7c233", + "summary": "Covers Grid Lite setup, List binding, column configuration, virtualization, keyboard navigation, filtering, sorting, theming, and CSS customization.", + "hash": "c9d9736231fd5612ce75d8cf1d1c91ee", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -147,8 +147,8 @@ "groupKey": "Grids & Lists > Tree Grid", "section": "Grids & Lists", "groupLabel": "Tree Grid", - "summary": "Covers hierarchical data binding, expandable rows, editing, filtering, sorting, selection, exporting, virtualization, state persistence, sizing, and live data.", - "hash": "fe7486681ad402e571e2b83a0cf7a50a", + "summary": "Configure hierarchical data, editing, filtering, sorting, selection, summaries, exporting, virtualization, state persistence, column and row APIs, and styling", + "hash": "279c8c630ed9accc6f1baf8e956fcfeb", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -174,8 +174,8 @@ "groupKey": "Layouts", "section": "Layouts", "groupLabel": "", - "summary": "Build expandable panels, cards, carousels, tabs, steppers, avatars, dividers, and tile layouts with navigation, customization, styling, and accessibility", - "hash": "af39442cd5ca84aac1ec12a914eabb28", + "summary": "Build expandable panels, cards, carousels, tabs, steppers, avatars, dividers, and resizable tiles with navigation, customization, reordering, and keyboard support", + "hash": "392b7c99a19822ba83ec1a98f9e0d863", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -192,8 +192,8 @@ "groupKey": "Maps", "section": "Maps", "groupLabel": "", - "summary": "Maps include scatter area, contour, density, bubble, and symbol series; polygons and polylines, shapefiles, data binding, scales, and coordinate conversion", - "hash": "d2abb1ff3906a258eb52b202dde98499", + "summary": "Covers map navigation, coordinate conversion, data binding, and configuration for scatter area, contour, density, bubble, symbol, polygon, and polyline series", + "hash": "a941417a6bf4c1c4a4154da9b82e85f1", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -201,8 +201,8 @@ "groupKey": "Maps > Geographic Map Features", "section": "Maps", "groupLabel": "Geographic Map Features", - "summary": "Display geographic data on imagery maps, bind CSV, JSON, models, and Shapefiles, overlay geographic series and imagery, navigate, and use map utilities", - "hash": "0ef2ef33b93278d0693b96117cc09d0a", + "summary": "Display geographic data on imagery maps, bind CSV, JSON, models, and shapefiles, overlay sources and series, configure imagery, navigation, and resources", + "hash": "3c1687542ef1a1d64b77cc1f5235fb01", "model": "gpt-5.6-luna", "promptVersion": 1 }, diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/react.json b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/react.json index 6feb2f05b..9597c92aa 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/react.json +++ b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/react.json @@ -39,8 +39,8 @@ "groupKey": "Data Entry & Display", "section": "Data Entry & Display", "groupLabel": "", - "summary": "Covers buttons, chips, badges, icons, inputs, masked date-time fields, selects, dropdowns, checkboxes, radios, switches, ratings, color editing, and progress", - "hash": "57160be47ed167f3b23823f8e1d6441b", + "summary": "Covers badges, buttons, chips, icons, color editing, text and masked date/time inputs, selection controls, dropdowns, ratings, and progress indicators.", + "hash": "d0a9ff3fd8e9ce36d914d62705f84e3d", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -48,8 +48,8 @@ "groupKey": "Data Entry & Display > Combo Box", "section": "Data Entry & Display", "groupLabel": "Combo Box", - "summary": "Cover virtualized lists, data binding, filtering, grouping, single selection, validation, keyboard navigation, styling, and content templates", - "hash": "3a66d8ed59161103b64cd134d504916a", + "summary": "Configure data binding, filtering, grouping, selection, validation, keyboard navigation, disabled states, and custom item, header, footer, and icon content.", + "hash": "c6ef493262b64b5bda304d628fcc0199", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -57,8 +57,8 @@ "groupKey": "Frameworks > Excel Library", "section": "Frameworks", "groupLabel": "Excel Library", - "summary": "Create, load, save, and manipulate Excel workbooks, worksheets, cells, tables, charts, and sparklines with formulas, formatting, filtering, protection, and export.", - "hash": "8a5396b87f508648b94fa2094959fb72", + "summary": "Create, load, save, and manipulate Excel workbooks, worksheets, cells, tables, charts, sparklines, formulas, formatting, filtering, sorting, protection, and supported file formats.", + "hash": "5cd4d2a03c124690db7e1e2245ad6745", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -120,8 +120,8 @@ "groupKey": "Grids & Lists > Grid Lite", "section": "Grids & Lists", "groupLabel": "Grid Lite", - "summary": "Configure data binding, declarative or generated columns, cell and header templates, filtering, sorting, runtime data replacement, and custom light/dark themes", - "hash": "6e1948fcce0b22c227b20d3dc936095d", + "summary": "Covers installation, data binding, data generation, column configuration, cell and header templates, filtering, sorting, remote operations, and theming.", + "hash": "6534e67e987d22d8455cd245f22d2ab2", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -183,8 +183,8 @@ "groupKey": "Layouts", "section": "Layouts", "groupLabel": "", - "summary": "Build expandable panels, cards, carousels, tabs, steppers, split panes, dividers, avatars, and tile layouts with navigation, customization, and styling.", - "hash": "4015e445f009167366f29656e88565e4", + "summary": "Build expandable panels, cards, carousels, tabs, steppers, split panes, dividers, avatars, and tile managers with navigation, sizing, and styling.", + "hash": "8fa4516222cb5d788c6c6c78a86201bb", "model": "gpt-5.6-luna", "promptVersion": 1 }, diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/webcomponents.json b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/webcomponents.json index 02c4ab338..b648c6b36 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/webcomponents.json +++ b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/webcomponents.json @@ -39,8 +39,8 @@ "groupKey": "Data Entry & Display", "section": "Data Entry & Display", "groupLabel": "", - "summary": "Covers badges, buttons, chips, dropdowns, selects, checkboxes, radios, switches, ratings, progress indicators, and text, date, file, mask, and color inputs.", - "hash": "8d12074a43b06a03d43006c5d4340aaa", + "summary": "Covers badges, buttons, inputs, selection controls, dropdowns, color and date-time editing, file uploads, progress indicators, icons, ratings, chips, Text Area, and styling.", + "hash": "1214040bfbaed664be72ad3bc0c193a9", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -57,8 +57,8 @@ "groupKey": "Frameworks > Excel Library", "section": "Frameworks", "groupLabel": "Excel Library", - "summary": "Create, load, save, and configure Excel workbooks and worksheets, manipulate cells and tables, add charts and sparklines, and load or save XLSX files.", - "hash": "a2b6726c0e871b112e9f230ae779f9fe", + "summary": "Load and save Excel workbooks, configure worksheets, manipulate cells and tables, and support charts, sparklines, filtering, sorting, and protection.", + "hash": "079e3ba5be9fe3706f21bd12822556e7", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -111,8 +111,8 @@ "groupKey": "Grids & Lists > Grid", "section": "Grids & Lists", "groupLabel": "Grid", - "summary": "Configure data grids with editing, filtering, sorting, grouping, selection, navigation, column and row management, clipboard, export, virtualization, sizing, and theming.", - "hash": "0b208accce47ce3798464bace8ba3865", + "summary": "Configure grid data, columns, editing, filtering, sorting, grouping, selection, paging, virtualization, clipboard, export, state persistence, sizing, and theming", + "hash": "7312dd667ad44cbaca4da99e548ffdec", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -120,8 +120,8 @@ "groupKey": "Grids & Lists > Grid Lite", "section": "Grids & Lists", "groupLabel": "Grid Lite", - "summary": "Covers installation, data binding, column configuration, cell and header templates, filtering, sorting, theming, performance, customization, and licensing", - "hash": "8b9160b57eba0b0e533a97b2f447dd9b", + "summary": "Configure data binding, columns, cells, headers, filtering, sorting, themes, and runtime updates with custom templates, events, remote operations, and styling", + "hash": "1f753e3b5de7686de2bcc685f21738a4", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -138,8 +138,8 @@ "groupKey": "Grids & Lists > Pivot Grid", "section": "Grids & Lists", "groupLabel": "Pivot Grid", - "summary": "Configure pivot grids with dimensions, values, aggregations, hierarchies, pivot calculation keys, state persistence, and remote grouping, filtering, and sorting", - "hash": "9bd8b0a755af4c1f9889341775358198", + "summary": "Configure pivot grids for multidimensional analysis with rows, columns, filters, values, hierarchies, custom aggregations, state persistence, and remote operations.", + "hash": "97caed2647be0dec83f36265b98b4d63", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -183,8 +183,8 @@ "groupKey": "Layouts", "section": "Layouts", "groupLabel": "", - "summary": "Build expandable panels, cards, carousels, tabs, steppers, split panes, and tile layouts with avatars, dividers, resizing, navigation, and styling.", - "hash": "d34b49973e85b78d69216646bc166351", + "summary": "Build layouts with expandable panels, cards, tabs, steppers, carousels, split panes, dividers, avatars, and resizable, reorderable tiles.", + "hash": "90d056d698e4fc65bb4ba6b35bb794c3", "model": "gpt-5.6-luna", "promptVersion": 1 }, diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db index b094e6240..53ef147c0 100644 Binary files a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db and b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md index e46733089..4042e3b11 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md @@ -21,7 +21,7 @@ The following is a basic Angular Accordion example of a FAQ section. It operates In it, you can see how to define an `igx-accrodion` and its [expansion panels](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). The sample also demonstrates the two types of expansion behavior. The switch button sets the [singleBranchExpand](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=singleBranchExpand) property to toggle between single and multiple branches to be expanded at a time. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; @@ -31,7 +31,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-accordion-sample-1', styleUrls: ['./accordion-sample-1.component.scss'], templateUrl: './accordion-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] }) export class AccordionSample1Component { @@ -326,7 +325,7 @@ With the Angular [Accordion component](mcp:get_api_reference?platform=angular&co The sample below demonstrates how elaborate filtering options can be implemented using the built-in templating functionality of the [IgxExpansionPanel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; @@ -342,7 +341,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-accordion-sample-3', styleUrls: ['./accordion-sample-3.component.scss'], templateUrl: './accordion-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent, IgxCheckboxComponent, FormsModule, IgxSliderComponent, IgxRadioComponent, IgxIconComponent, IgxTimePickerComponent, IgxLabelDirective] }) export class AccordionSample3Component { @@ -517,7 +515,7 @@ In the following Angular accordion example, we are going to create a complex FAQ You can see the result below. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; @@ -527,7 +525,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-accordion-sample-2', styleUrls: ['./accordion-sample-2.component.scss'], templateUrl: './accordion-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] }) export class AccordionSample2Component { @@ -770,7 +767,7 @@ The last step is to include the component's theme. ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; import { FormsModule } from '@angular/forms'; @@ -779,7 +776,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-accordion-style', styleUrls: ['./accordion-style.component.scss'], templateUrl: './accordion-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] }) export class AccordionStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md index 70db81e47..51224e302 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md @@ -15,7 +15,7 @@ The Ignite UI for Angular Action Strip component provides an overlay area contai ## Angular Action Strip Example ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -25,7 +25,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-action-strip-paragraph', styleUrls: ['./action-strip-paragraph.component.scss'], templateUrl: './action-strip-paragraph.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxActionStripComponent, IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] }) export class ActionStripParagraphComponent { @@ -103,7 +102,7 @@ $custom-strip: action-strip-theme( ); .my-action-strip { - @include action-strip($custom-strip); + @include tokens($custom-strip); display: flex; align-items: flex-start; justify-content: center; @@ -239,7 +238,7 @@ For scenarios where more than three action items will be shown, it is best to us ``` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxActionStripComponent, IgxActionStripMenuItemDirective } from 'igniteui-angular/action-strip'; import { IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -248,7 +247,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-action-strip-paragraph-menu', styleUrls: ['./action-strip-paragraph-menu.component.scss'], templateUrl: './action-strip-paragraph-menu.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxRippleDirective, IgxIconComponent] }) export class ActionStripParagraphMenuComponent { @@ -396,7 +394,7 @@ This can be utilized via grid action components and we are providing two default > When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxGridPinningActionsComponent, RowType } from 'igniteui-angular/grids/core'; import { Transaction } from 'igniteui-angular/core'; @@ -411,7 +409,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-row-action-strip', styleUrls: [`grid-action-strip-sample.scss`], templateUrl: 'grid-action-strip-sample.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class GridActionStripSampleComponent { @@ -510,7 +507,7 @@ The last step is to include the newly created component theme in our application ``` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -519,7 +516,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-action-strip-paragraph-styling', styleUrls: ['./action-strip-paragraph-styling.component.scss'], templateUrl: './action-strip-paragraph-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxActionStripComponent, IgxButtonDirective, IgxIconComponent] }) export class ActionStripStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/angular-reactive-form-validation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/angular-reactive-form-validation.md index 9b5f982b8..cb003fbea 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/angular-reactive-form-validation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/angular-reactive-form-validation.md @@ -119,7 +119,7 @@ For the purposes of our example of Angular reactive form validation, the fie So, if you enter values for movie title, full name, phone, and email, they will be highlighted in green. But if you forget to select `favorite genre`, this field will be highlighted in red, indicating incomplete value inputs. Once the values are all set right, the field will be highlighted in green, indicating correct value inputs. The `book button` will be activated and the form can be successfully submitted afterwards. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { FormArray, FormBuilder, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { DateRange, IgxPickerToggleComponent } from 'igniteui-angular/core'; import { IRangeSliderValue, IgxSliderComponent } from 'igniteui-angular/slider'; @@ -159,7 +159,6 @@ export interface User{ selector: 'app-reactive-form', styleUrls: ['./reactive-forms.component.scss'], templateUrl: './reactive-forms.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, ReactiveFormsModule, IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxHintDirective, IgxPrefixDirective, IgxComboComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxTimePickerComponent, IgcFormControlDirective, IgxCheckboxComponent, IgxRadioGroupDirective, IgxRadioComponent, IgxSwitchComponent, IgxDateRangePickerComponent, IgxSliderComponent, IgxCalendarComponent, IgxCardComponent, IgxMonthPickerComponent, IgxButtonDirective, IgxRippleDirective] }) export class ReactiveFormsSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md index 600616aa1..420a27d57 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md @@ -20,7 +20,7 @@ The [`igxAutocomplete`](mcp:get_api_reference?platform=angular&component=IgxAuto The Angular Autocomplete example below generates a dropdown suggestion list as users start typing the name of a town in the input textbox. ```typescript -import { Component, Pipe, PipeTransform, forwardRef, ChangeDetectionStrategy } from '@angular/core'; +import { Component, Pipe, PipeTransform, forwardRef } from '@angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down'; import { FormsModule } from '@angular/forms'; @@ -30,7 +30,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-autocomplete', styleUrls: ['./autocomplete.component.scss'], templateUrl: './autocomplete.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent, forwardRef(() => AutocompletePipeStartsWith)] }) export class AutocompleteBasicComponent { @@ -271,7 +270,7 @@ If everything went right, you should see this in your browser: ```typescript -import { Component, Pipe, PipeTransform, ChangeDetectionStrategy } from '@angular/core'; +import { Component, Pipe, PipeTransform } from '@angular/core'; import { ConnectedPositioningStrategy, VerticalAlignment } from 'igniteui-angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down'; @@ -282,7 +281,6 @@ import { AutocompletePipeStartsWith } from '../autocomplete/autocomplete.compone selector: 'app-movie-availability', styleUrls: ['./movie.component.scss'], templateUrl: './movie.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, AutocompletePipeStartsWith] }) export class MovieComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md index 0e9c40170..39a48e926 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md @@ -13,60 +13,10 @@ _tocName: Avatar ## Angular Avatar Example -```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; - -@Component({ - selector: 'app-avatar-sample-3', - styleUrls: ['./avatar-sample-3.component.scss'], - templateUrl: './avatar-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxAvatarComponent] -}) -export class AvatarSample3Component { - - constructor() { } - -} -``` -```html -
-
- -
-
- -
-
- -
-
-``` -```scss -.avatars-wrapper { - display: flex; - flex-flow: row wrap; -} - -.avatar-sample { - display: flex; - flex: 1 0 30%; - width: 88px; - height: 88px; - justify-content: center; - align-items: center; - margin: 15px 0; -} - -.avatar-sample.initials .igx-avatar{ - --ig-avatar-background: #e41c77; -} - -.avatar-sample.icon .igx-avatar{ - --ig-avatar-background: #9e9e9e; -} -``` + +
@@ -270,50 +220,176 @@ If all went well, you should see something like the following in the browser: ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { + IgxListActionDirective, + IgxListComponent, + IgxListItemComponent, + IgxListLineSubTitleDirective, + IgxListLineTitleDirective, + IgxListThumbnailDirective +} from 'igniteui-angular/list'; @Component({ selector: 'app-avatar-styling', styleUrls: ['./avatar-styling.component.scss'], templateUrl: './avatar-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxAvatarComponent] + imports: [ + IgxAvatarComponent, + IgxBadgeComponent, + IgxIconComponent, + IgxListActionDirective, + IgxListComponent, + IgxListItemComponent, + IgxListLineSubTitleDirective, + IgxListLineTitleDirective, + IgxListThumbnailDirective + ] }) - export class AvatarStylingSampleComponent { - + private iconService = inject(IgxIconService); + + constructor() { + this.iconService.addSvgIconFromText( + 'calendar', + '', + 'material' + ); + this.iconService.addSvgIconFromText( + 'check', + '', + 'material' + ); + this.iconService.addSvgIconFromText( + 'x', + '', + 'material' + ); + this.iconService.addSvgIconFromText( + 'horizontalRule', + '', + 'material' + ); + this.iconService.addSvgIconFromText( + 'group', + '', + 'material' + ); + } } ``` ```html -
-
- -
-
- -
-
+ + Chats + + +
+ + + + + +
+

Nick Evans

+ Hi Samira, thanks for the ... + 9:44 AM + + + +
+ + + + +
+

James Ford

+ I'll send the text and im ... + 8:30 AM + + + +
+ + + + + +
+

Kate Porter

+ That's great! + Yesterday + + + Meetings + + + + + +

Weekly Meeting

+ https://www.infra.com + Monday + + + + + + +

Design Discussion

+ https://www.infra.com + 11:30 AM + + ``` ```scss -@use "layout.scss"; -@use "igniteui-angular/theming" as *; +@use "igniteui-theming/sass/typography" as *; -$initials-avatar-theme: avatar-theme( - $background: #72da67, - $border-radius: 16px -); +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} -$icon-avatar-theme: avatar-theme( - $background: #217346, -); +igx-list { + --ig-list-border-width: #{rem(1px)}; + --ig-list-border-color: var(--ig-gray-300); + --ig-list-header-text-color: var(--ig-gray-900); + + max-width: rem(328px); +} + +igx-avatar { + --ig-avatar-background: var(--ig-gray-300); + --ig-avatar-color: var(--ig-gray-300-contrast); +} + +.avatar-with-badge { + position: relative; +} + +igx-badge { + --ig-size: var(--ig-size-small); +} -.initials{ - @include tokens($initials-avatar-theme); +.avatar-status { + position: absolute; + inset-inline-end: rem(-4px); + inset-block-end: rem(-4px); } -.icon{ - @include tokens($icon-avatar-theme); +.avatar-muted-badge { + --ig-badge-background-color: var(--ig-gray-300); + --ig-badge-icon-color: var(--ig-gray-300-contrast); } ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md index 338017f97..c955110ef 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md @@ -12,38 +12,10 @@ _tocName: Badge ## Angular Badge Example -```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxBadgeComponent } from 'igniteui-angular/badge'; - -@Component({ - selector: 'app-badge-sample-2', - styleUrls: ['./badge-sample-2.component.scss'], - templateUrl: './badge-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxAvatarComponent, IgxBadgeComponent] -}) -export class BadgeSample2Component { } -``` -```html -
- - -
-``` -```scss -.wrapper { - position: relative; - margin: 15px 0 0 15px; -} - -igx-badge { - position: absolute; - bottom: 0; - left: 28px; -} -``` + +
@@ -223,9 +195,7 @@ Then, just specify the icon name and family as follows: ``` ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; -import { heartMonitor } from '@igniteui/material-icons-extended'; -import { IgxIconService } from 'igniteui-angular/icon'; +import { Component } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; @@ -233,81 +203,84 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; selector: 'app-badge-icon', styleUrls: ['./badge-icon.component.scss'], templateUrl: './badge-icon.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAvatarComponent, IgxBadgeComponent] }) -export class BadgeIconComponent implements OnInit { - protected _iconService = inject(IgxIconService); - - - public ngOnInit() { - this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons'); - } +export class BadgeIconComponent { + public badges = [ + { icon: 'check', type: 'success', label: 'check' }, + { icon: 'favorite_border', type: 'error', label: 'favorite' }, + { icon: 'notifications', type: 'info', label: 'notification' }, + { icon: 'star_border', type: 'warning', label: 'star' }, + { icon: 'settings', type: 'info', label: 'settings' } + ]; } ``` ```html -
- - -
+@for (item of badges; track item.label) { + + {{ item.label }} +} + + + +on avatar ``` ```scss -.wrapper { - position: relative; - margin: 15px 0 0 15px; +@use "igniteui-theming/sass/typography" as *; + +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(40px); + row-gap: rem(10px); + min-height: 8.5rem; + padding: rem(32px); } -igx-badge { - position: absolute; - bottom: 0; - left: 28px; +igx-avatar { + grid-row: 1; + anchor-name: --avatar; } -``` -### Dot Badge +igx-badge { + --ig-size: var(--ig-size-medium); -The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its `dot` property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.). + grid-row: 1; +} -```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxBadgeComponent } from 'igniteui-angular/badge'; +span { + @include type-style("body-2") { + margin: 0; + } -@Component({ - selector: 'app-badge-dot-sample', - styleUrls: ['./badge-dot-sample.component.scss'], - templateUrl: './badge-dot-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxAvatarComponent, IgxBadgeComponent] -}) -export class BadgeDotSampleComponent { } -``` -```html -
- - -
-``` -```scss -.wrapper { - display: flex; - position: relative; - margin: 15px 0 0 15px; + grid-row: 2; + text-align: center; + color: var(--ig-gray-700); +} - igx-avatar { - anchor-name: --avatar; - } +igx-badge:last-of-type { + --ig-size: var(--ig-size-small); - igx-badge { position: absolute; position-anchor: --avatar; - bottom: anchor(--avatar top); - left: anchor(right); - transform: translate(-75%, 75%); - } + inset-block-start: anchor(14.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } ``` +### Dot Badge + +The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its `dot` property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.). + + + + ### Badge in List Let's extend the previous sample and create a list with contacts, similar to those in chat clients. In addition to the contact name, we want to display an avatar and the current state of the contact (online, offline or away). To achieve this, we're using the [`igx-badge`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent) and [`igx-avatar`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent) components. For a container, [`igx-list`](mcp:get_api_reference?platform=angular&component=IgxListComponent) is used. @@ -431,70 +404,10 @@ Position the badge in its parent container: If the sample is configured properly, a list of members should be displayed and every member has an avatar and a badge, showing its current state. -```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { Member } from '../model/member.model'; -import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxBadgeComponent } from 'igniteui-angular/badge'; - - -@Component({ - selector: 'app-badge-sample-3', - styleUrls: ['./badge-sample-3.component.scss'], - templateUrl: './badge-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] -}) -export class BadgeSample3Component { - public members: Member[] = [ - new Member('Terrance Orta', 'online'), - new Member('Donna Price', 'online'), - new Member('Lisa Landers', 'away'), - new Member('Dorothy H. Spencer', 'offline') - ]; -} -``` -```html - - - Team Members (4) - - @for (member of members; track member) { - -
-
- - -
-
- {{ member.name }} -
-
- - } - -``` -```scss -.wrapper { - display: flex; - flex-direction: row; -} - -.contact-name { - font-weight: 600; -} - -.contact-container { - margin-left: 20px; -} - -.badge-style { - position: absolute; - bottom: 2.5px; - left: 40px; -} -``` + + ## Styling @@ -552,63 +465,11 @@ To include the new theme we use the `tokens` mixin: ### Demo -```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { Member } from '../model/member.model'; -import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxBadgeComponent } from 'igniteui-angular/badge'; - - -@Component({ - selector: 'app-badge-styling-sample', - styleUrls: ['./badge-styling-sample.component.scss'], - templateUrl: './badge-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] -}) -export class BadgeStylingSampleComponent { - public members: Member[] = [ - new Member('Terrance Orta', 'online'), - new Member('Donna Price', 'online'), - new Member('Lisa Landers', 'away'), - new Member('Dorothy H. Spencer', 'offline') - ]; -} -``` -```html - - - Team Members (4) - - @for (member of members; track member) { - -
-
- - -
-
- {{ member.name }} -
-
- - } - -``` -```scss -@use "layout.scss"; -@use "igniteui-angular/theming" as *; - -$custom-badge-theme: badge-theme( - $background-color: #57a5cd, - $border-radius: 4px -); - -:host { - @include tokens($custom-badge-theme); -} -``` + + ### Styling with Tailwind diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md index 697f6bb02..4152e99b3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md @@ -13,7 +13,7 @@ _tocName: Banner ## Angular Banner Example ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxBannerComponent } from 'igniteui-angular/banner'; import { IgxNavbarComponent } from 'igniteui-angular/navbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -23,7 +23,6 @@ import { IgxCardComponent } from 'igniteui-angular/card'; selector: 'app-banner-sample-1', styleUrls: ['../banner-samples.scss'], templateUrl: 'banner-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxCardComponent] }) @@ -199,7 +198,7 @@ The `IgxBannerModule` exposes a directive for templating the banner buttons - [` ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; import { IgxNavbarComponent } from 'igniteui-angular/navbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -210,7 +209,6 @@ import { IgxCardComponent } from 'igniteui-angular/card'; selector: 'app-banner-sample-2', styleUrls: ['../banner-samples.scss'], templateUrl: 'banner-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent] }) @@ -285,7 +283,7 @@ export class MyBannerComponent { ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; import { IgxNavbarComponent } from 'igniteui-angular/navbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -297,7 +295,6 @@ import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'; selector: 'app-banner-sample-3', styleUrls: ['../banner-samples.scss'], templateUrl: 'banner-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent] }) @@ -407,7 +404,7 @@ Finally, we will add a `toast`, displaying a message about the WiFi state. The r ```typescript -import { Component, OnDestroy, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; import { IgxToastComponent } from 'igniteui-angular/toast'; import { VerticalAlignment } from 'igniteui-angular/core'; @@ -421,7 +418,6 @@ import { Subject } from 'rxjs'; selector: 'app-banner-advanced-sample', styleUrls: ['../banner-samples.scss'], templateUrl: 'banner-advanced-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent, IgxToastComponent] }) @@ -531,7 +527,7 @@ The last step is to pass the custom banner theme: ``` ```typescript -import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; import { IgxToastComponent } from 'igniteui-angular/toast'; import { VerticalAlignment } from 'igniteui-angular/core'; @@ -547,7 +543,6 @@ import { Subject } from 'rxjs'; styleUrls: ['banner-styling.component.scss', '../banner-samples.scss'], templateUrl: 'banner-styling.component.html', encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent, IgxToastComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button-group.md index 4aa67799f..c5693afa7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button-group.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button-group.md @@ -12,48 +12,10 @@ _tocName: Button Group ## Angular Button Group Example -```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; -import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-button-group-sample-1', - styleUrls: ['./button-group-sample-1.component.scss'], - templateUrl: './button-group-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent] -}) - -export class ButtonGroupSample1Component { - public rippleColor = 'grey'; -} -``` -```html -
- - - - - - -
-``` -```scss -igx-buttongroup{ - display: inline-block; - max-width: 400px; -} -``` + +
@@ -175,39 +137,10 @@ public alignment = ButtonGroupAlignment.vertical; ``` -```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; -import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; - -@Component({ - selector: 'app-button-group-sample-2', - styleUrls: ['./button-group-sample-2.component.scss'], - templateUrl: './button-group-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective] -}) -export class ButtonGroupSample2Component { - public alignment = ButtonGroupAlignment.vertical; - public rippleColor = 'grey'; -} -``` -```html -
- - - - - - -
-``` -```scss -igx-buttongroup{ - display: inline-block; - width: 200px; -} -``` + +
@@ -221,59 +154,10 @@ In order to configure the `igx-buttongroup` selection, you could use its [select The sample below demonstrates the exposed `igx-buttongroup` selection modes: -```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxRadioComponent } from 'igniteui-angular/radio'; -import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; -import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; -import { IgxIconComponent } from 'igniteui-angular/icon'; -import { FormsModule } from '@angular/forms'; - -@Component({ - selector: 'app-button-group-sample', - styleUrls: ['./button-group-sample.component.scss'], - templateUrl: './button-group-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxRadioComponent, FormsModule, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent] -}) -export class ButtonGroupSampleComponent { - public rippleColor = 'grey'; - public selectionMode: 'single' | 'singleRequired' | 'multi' = 'single'; -} -``` -```html -
-
Selection Mode
-
- Single - Single-Required - Multi -
- - - - - -
-``` -```scss -.sample-column, -.radio-buttons { - display: flex; - gap: 16px; -} - -.sample-column { - flex-direction: column; - align-items: flex-start; -} -``` + + ### Size @@ -291,57 +175,10 @@ igx-buttongroup { ``` -```typescript -import { Component, HostBinding, OnInit, ChangeDetectionStrategy } from '@angular/core'; -import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; - -type Button = { - label: string, - selected: boolean, - togglable: boolean -} - -@Component({ - selector: 'app-button-group-sample-5', - styleUrls: ['./button-group-sample-5.component.scss'], - templateUrl: './button-group-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxButtonGroupComponent] -}) -export class ButtonGroupSample5Component implements OnInit { - public rippleColor = 'grey'; - public size = 'large'; - public sizes: Button[]; - - public ngOnInit() { - this.sizes = [ - { label: 'small', selected: this.size === 'small', togglable: true }, - { label: 'medium', selected: this.size === 'medium', togglable: true }, - { label: 'large', selected: this.size === 'large', togglable: true } - ]; - } - - public selectSize(event: any) { - this.size = this.sizes[event.index].label; - } - - - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } -} -``` -```html -
- -
-``` -```scss -igx-buttongroup{ - display: inline-block; -} -``` + + ### Custom toggle buttons @@ -410,83 +247,10 @@ public ngOnInit() { ``` -```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; -import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; - -interface IButton { - ripple?: string; - label?: string; - disabled?: boolean; - togglable?: boolean; - selected?: boolean; - color?: string; - icon?: string; -} - -class ToggleButton { - private ripple: string; - private label: string; - private disabled: boolean; - private togglable: boolean; - private selected: boolean; - private color: string; - private icon: string; - - constructor(obj?: IButton) { - this.ripple = obj.ripple || 'gray'; - this.label = obj.label; - this.selected = obj.selected || false; - this.togglable = obj.togglable || true; - this.disabled = obj.disabled || false; - this.color = obj.color; - this.icon = obj.icon; - } -} - -@Component({ - selector: 'app-button-group-sample-3', - styleUrls: ['./button-group-sample-3.component.scss'], - templateUrl: './button-group-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxButtonGroupComponent] -}) -export class ButtonGroupSample3Component implements OnInit { - public bordersButtons: ToggleButton[]; - - public ngOnInit() { - this.bordersButtons = [ - new ToggleButton({ - icon: 'border_top', - selected: true - }), - new ToggleButton({ - icon: 'border_right', - selected: false - }), - new ToggleButton({ - icon: 'border_bottom', - selected: false - }), - new ToggleButton({ - icon: 'border_left', - selected: false - }) - ]; - } -} -``` -```html -
- -
-``` -```scss -igx-buttongroup { - display: inline-block; - width: 300px; -} -``` + + ## Styling @@ -672,44 +436,11 @@ The last step is to include the component's theme. ### Demo -```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; -import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; - -@Component({ - selector: 'app-button-group-style', - styleUrls: ['./button-group-style.component.scss'], - templateUrl: './button-group-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective] -}) -export class ButtonGroupStyleComponent { - public alignment = ButtonGroupAlignment.vertical; -} -``` -```html -
- - - - - - -
-``` -```scss -@use "layout.scss" as *; -@use "igniteui-angular/theming" as *; - -$custom-button-group: button-group-theme( - $item-background: #57a5cd, -); - -:host { - @include tokens($custom-button-group); -} -``` + + ### Styling with Tailwind diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md index cf03cc77e..49225801a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md @@ -19,14 +19,13 @@ We have created the Angular Button example below to show you how different butto
```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-buttons-sample-1', styleUrls: ['./buttons-sample-1.component.scss'], templateUrl: './buttons-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective] }) export class ButtonsSample1Component { } @@ -283,7 +282,7 @@ protected get sizeStyle() { If all went well, you should see something like the following in the browser: ```typescript -import { Component, HostBinding, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit } from '@angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -292,7 +291,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-buttons-display-density', styleUrls: ['./buttons-display-density.component.scss'], templateUrl: './buttons-display-density.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class ButtonsDisplayDensityComponent implements OnInit { @@ -1581,7 +1579,7 @@ For [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angula In the sample below, you can see how using the button component with customized CSS variables allows you to create a design that visually resembles the button used in the [`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) design system. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; @@ -1590,7 +1588,6 @@ import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; styleUrls: ['./buttons-style.component.scss'], templateUrl: './buttons-style.component.html', imports: [IgxButtonDirective], - changeDetection: ChangeDetectionStrategy.Eager, providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('bootstrap')}] }) export class ButtonsStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md index e1abbca07..076d779e6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md @@ -22,14 +22,13 @@ We created the following Angular Calendar example using the Ignite UI for Angula
```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; @Component({ selector: 'app-calendar', styleUrls: ['./calendar-sample-5.component.scss'], templateUrl: './calendar-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarSample5Component { } @@ -142,14 +141,13 @@ We can easily change the default mode using the [`selection`](mcp:get_api_refere ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; @Component({ selector: 'app-calendar', styleUrls: ['./calendar-sample-1.component.scss'], templateUrl: './calendar-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarSample1Component { } @@ -188,14 +186,13 @@ Following the same approach, we can switch to range selection mode: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; @Component({ selector: 'app-calendar', styleUrls: ['./calendar-sample-8.component.scss'], templateUrl: './calendar-sample-8.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarSample8Component { } @@ -268,7 +265,7 @@ If everything went well, we should now have a calendar with customized dates dis ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxPrefixDirective } from 'igniteui-angular/input-group'; @@ -283,7 +280,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-calendar', styleUrls: ['./calendar-sample-2.component.scss'], templateUrl: './calendar-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, IgxSelectItemComponent, IgxCalendarComponent] }) export class CalendarSample2Component implements OnInit{ @@ -377,7 +373,7 @@ These configurations should have the following result: ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { DateRangeType } from 'igniteui-angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { DatePipe } from '@angular/common'; @@ -386,7 +382,6 @@ import { DatePipe } from '@angular/common'; selector: 'app-calendar', styleUrls: ['./calendar-sample-6.component.scss'], templateUrl: './calendar-sample-6.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent, DatePipe] }) export class CalendarSample6Component implements OnInit{ @@ -490,7 +485,7 @@ The following demo illustrates a calendar with a vacation request option: ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { DateRangeType } from 'igniteui-angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; @@ -500,7 +495,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-calendar', styleUrls: ['./calendar-sample-7.component.scss'], templateUrl: './calendar-sample-7.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent, IgxDialogComponent, IgxButtonDirective] }) export class CalendarSample7Component { @@ -574,14 +568,13 @@ The following demo illustrates a calendar with enabled week numbers: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; @Component({ selector: 'app-calendar', styleUrls: ['./calendar-sample-1.component.scss'], templateUrl: './calendar-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarSample1Component { } @@ -649,7 +642,7 @@ public activeViewChanged(event: CalendarView) { Use the demo below to play around (change selection, navigate through months and years) and see the events logged real time: ```typescript -import { Component, ViewChild, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, DOCUMENT, inject } from '@angular/core'; import { IViewDateChangeEventArgs, IgxCalendarComponent, IgxCalendarView } from 'igniteui-angular/calendar'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; @@ -657,7 +650,6 @@ import { IgxDialogComponent } from 'igniteui-angular/dialog'; selector: 'app-calendar', styleUrls: ['./calendar-sample-3.component.scss'], templateUrl: './calendar-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarSample3Component { @@ -765,7 +757,7 @@ There are separate views provided by the `IgxCalendarModule` that can be used in ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; import { IgxDaysViewComponent } from 'igniteui-angular/calendar'; @@ -773,7 +765,6 @@ import { IgxDaysViewComponent } from 'igniteui-angular/calendar'; selector: 'app-calendar-views', styleUrls: ['./calendar-days-view.component.scss'], templateUrl: './calendar-days-view.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxDaysViewComponent] }) export class CalendarDaysViewComponent { } @@ -805,7 +796,7 @@ export class CalendarDaysViewComponent { } ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; import { IgxMonthsViewComponent } from 'igniteui-angular/calendar'; @@ -813,7 +804,6 @@ import { IgxMonthsViewComponent } from 'igniteui-angular/calendar'; selector: 'app-calendar-views', styleUrls: ['./calendar-months-view.component.scss'], templateUrl: './calendar-months-view.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxMonthsViewComponent] }) export class CalendarMonthsViewComponent { } @@ -845,7 +835,7 @@ export class CalendarMonthsViewComponent { } ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; import { IgxYearsViewComponent } from 'igniteui-angular/calendar'; @@ -853,7 +843,6 @@ import { IgxYearsViewComponent } from 'igniteui-angular/calendar'; selector: 'app-calendar-views', styleUrls: ['./calendar-years-view.component.scss'], templateUrl: './calendar-years-view.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxYearsViewComponent] }) export class CalendarYearsViewComponent { } @@ -947,7 +936,7 @@ Multi-view calendar supports all three types of selection. Use the [`monthsViewN ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -957,7 +946,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-calendar', styleUrls: ['./multiview.component.scss'], templateUrl: './multiview.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent, IgxDialogComponent, IgxButtonDirective] }) export class CalendarMultiViewComponent { @@ -1104,7 +1092,7 @@ export class CalendarSample9Component { ``` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -1117,7 +1105,6 @@ type Orientation = (typeof orientations)[number]; selector: 'app-calendar', styleUrls: ['./calendar-sample-9.component.scss'], templateUrl: './calendar-sample-9.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent, IgxButtonGroupComponent, IgxButtonDirective] }) @@ -1556,195 +1543,38 @@ The last step is to pass the custom calendar theme: ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; @Component({ selector: 'app-calendar', styleUrls: ['./calendar-styling-sample.component.scss'], templateUrl: './calendar-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarStylingSampleComponent { } ``` ```html
-
``` ```scss -@use "layout.scss"; -@use "igniteui-angular/theming" as *; +@use 'igniteui-angular/theming' as *; -// CSS variables approach +$custom-calendar-theme: calendar-theme( + $header-background: #ecaa53, + $content-background: #011627, +); :host { - ::ng-deep { - .igx-days-view__date--weekend:not(.igx-days-view__date--inactive) { - --date-hover-background: var(--background-hover); - --date-selected-foreground: var(--primary); - --date-selected-background: #FFF; - --date-selected-border-color: var(--primary); - --date-selected-focus-foreground: var(--primary); - --date-selected-focus-background: var(--background-hover); - --date-selected-focus-border-color: var(--primary); - --date-selected-hover-foreground: var(--primary); - --date-selected-hover-background: var(--background-hover); - --date-selected-hover-border-color: var(--primary); - --date-selected-current-hover-background: var(--background-hover); - --date-selected-current-focus-background: var(--background-hover); - --date-selected-current-background: #FFF; - --date-selected-current-border-color: var(--primary); - --date-selected-current-hover-border-color: var(--primary); - --date-current-hover-background: var(--background-hover); - } - } -} + display: grid; + place-items: center; + height: 100%; -igx-calendar { - --date-focus-background: transparent; - --week-number-background: transparent; - --weekend-color: #131E29; - --weekday-color: #556B82; - --week-number-foreground: #556B82; - --inactive-color: #556B82; - --date-current-border-color: var(--current-border); - --date-current-hover-border-color: var(--current-border); - --date-current-focus-border-color: var(--current-border); - --date-current-hover-background: var(--background-weekend); - --date-selected-current-border-color: var(--current-border); - --date-selected-current-background: #FFF; - --date-selected-current-foreground: var(--primary); - --date-selected-current-focus-border-color: var(--current-border); - --date-selected-current-focus-background: var(--background-weekend); - --date-selected-current-focus-foreground: var(--primary); - --date-selected-current-hover-border-color: var(--current-border); - --date-selected-current-hover-background: var(--background-weekend); - --date-selected-current-hover-foreground: var(--primary); - --date-selected-foreground: var(--primary); - --date-selected-background: #FFF; - --date-selected-border-color: var(--primary); - --date-selected-hover-foreground: var(--primary); - --date-selected-hover-background: var(--background-weekend); - --date-selected-hover-border-color: var(--primary); - --date-selected-focus-foreground: var(--primary); - --date-selected-focus-background: var(--background-weekend); - --date-selected-focus-border-color: var(--primary); - --picker-foreground: var(--primary); - --picker-hover-foreground: var(--primary); - --picker-focus-foreground: var(--primary); - --ym-hover-background: var(--background); - --ym-selected-background: #EDF5FF; - --ym-selected-hover-background: #D9EAFF; - --ym-selected-hover-foreground: var(--primary); - --ym-selected-outline-color: var(--primary); - --ym-selected-hover-outline-color: var(--primary); - --ym-selected-focus-outline-color: var(--primary); - --ym-selected-focus-background: #D9EAFF; - --ym-current-foreground: var(--primary); - --ym-current-background: transparent; - --ym-current-outline-color: transparent; - --ym-current-hover-foreground: var(--primary); - --ym-current-hover-background: var(--background); - --ym-current-outline-hover-color: var(--primary); - --ym-selected-current-foreground: var(--primary); - --ym-selected-current-background: #EDF5FF; - --ym-selected-current-outline-color: var(--primary); - --ym-selected-current-hover-foreground: var(--primary); - --ym-selected-current-hover-background: #D9EAFF; - --ym-selected-current-outline-hover-color: var(--primary); - --ym-selected-current-outline-focus-color: var(--primary); + @include tokens($custom-calendar-theme); } - -// Sass theme approach - -// $custom-calendar-theme-weekend: calendar-theme( -// $date-hover-background: var(--background-hover), -// $date-selected-foreground: var(--primary), -// $date-selected-background: #FFF, -// $date-selected-border-color: var(--primary), -// $date-selected-focus-foreground: var(--primary), -// $date-selected-focus-background: var(--background-hover), -// $date-selected-focus-border-color: var(--primary), -// $date-selected-hover-foreground: var(--primary), -// $date-selected-hover-background: var(--background-hover), -// $date-selected-hover-border-color: var(--primary), -// $date-selected-current-hover-background: var(--background-hover), -// $date-selected-current-focus-background: var(--background-hover), -// $date-selected-current-background: #FFF, -// $date-selected-current-border-color: var(--primary), -// $date-selected-current-hover-border-color: var(--primary), -// $date-current-hover-background: var(--background-hover) -// ); - -// $custom-calendar-theme: calendar-theme( -// $date-focus-background: transparent, -// $picker-foreground: var(--primary), -// $picker-hover-foreground: var(--primary), -// $picker-focus-foreground: var(--primary), -// $weekday-color: #556B82, -// $weekend-color: #131E29, -// $inactive-color: #556B82, -// $week-number-foreground: #556B82, -// $week-number-background: transparent, -// $ym-selected-current-hover-foreground: var(--primary), -// $ym-selected-current-hover-background: #D9EAFF, -// $ym-hover-background: var(--background), -// $ym-current-foreground: var(--primary), -// $ym-current-background: transparent, -// $ym-current-hover-foreground: var(--primary), -// $ym-current-hover-background: var(--background), -// $ym-selected-current-foreground: var(--primary), -// $ym-selected-current-background: #EDF5FF, -// $ym-selected-background: #EDF5FF, -// $ym-selected-hover-foreground: var(--primary), -// $ym-selected-hover-background: #D9EAFF, -// $ym-current-outline-color: transparent, -// $ym-current-outline-hover-color: var(--primary), -// $ym-selected-outline-color: var(--primary), -// $ym-selected-hover-outline-color: var(--primary), -// $ym-selected-focus-outline-color: var(--primary), -// $ym-selected-current-outline-color: var(--primary), -// $ym-selected-current-outline-hover-color: var(--primary), -// $ym-selected-current-outline-focus-color: var(--primary), -// $date-selected-current-foreground: var(--primary), -// $date-selected-current-background: #FFF, -// $date-selected-current-hover-foreground: var(--primary), -// $date-selected-current-hover-background: var(--background-weekend), -// $date-selected-current-focus-foreground: var(--primary), -// $date-selected-current-focus-background: var(--background-weekend), -// $date-selected-foreground: var(--primary), -// $date-selected-background: #FFF, -// $date-selected-border-color: var(--primary), -// $date-selected-hover-foreground: var(--primary), -// $date-selected-hover-background: var(--background-weekend), -// $date-selected-hover-border-color: var(--primary), -// $date-selected-focus-foreground: var(--primary), -// $date-selected-focus-background: var(--background-weekend), -// $date-selected-focus-border-color: var(--primary), -// $date-current-border-color: var(--current-border), -// $date-current-hover-border-color: var(--current-border), -// $date-current-focus-border-color: var(--current-border), -// $date-selected-current-border-color: var(--current-border), -// $date-selected-current-hover-border-color: var(--current-border), -// $date-selected-current-focus-border-color: var(--current-border), -// $date-current-hover-background: var(--background-weekend), -// $border-radius: rem(8px) -// ); - -// :host { -// ::ng-deep { -// .igx-days-view__date--weekend:not(.igx-days-view__date--inactive) { -// @include tokens($custom-calendar-theme-weekend); -// } -// } -// } - -// igx-calendar { -// @include tokens($custom-calendar-theme); -// } ``` ### Styling with Tailwind diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md index 8e12ce1be..5f76327b2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md @@ -19,7 +19,7 @@ This lightweight Angular Card component is used for creating all sorts of cards, Below you can see a basic sample of a well-crafted Ignite UI for Angular Card with main card sections like image, title, subtitle, primary card content, container for a button. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { Card } from './card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; import { IgxButtonDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -31,7 +31,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-card', styleUrls: ['./card.component.scss'], templateUrl: './card.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardComponent { @@ -330,10 +329,10 @@ If everything went well, our card should look like this: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxDividerDirective, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -342,8 +341,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-card-sample-2', styleUrls: ['./card-sample-2.component.scss'], templateUrl: './card-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardSample2Component { public card = new Card({ @@ -429,7 +427,7 @@ Below is an example showing how you can create a semi-horizontal card, where we ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; import { IgxButtonDirective, IgxFlexDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -441,7 +439,6 @@ import { IgxPrefixDirective } from 'igniteui-angular/input-group'; selector: 'app-card-sample-3', styleUrls: ['./card-sample-3.component.scss'], templateUrl: './card-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxAvatarComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective] }) export class CardSample3Component { @@ -596,7 +593,7 @@ In the sample below, you can see how using the card component with customized CS ```typescript -import { Component, inject, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject, OnInit } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; import { IgxDividerModule, IgxIconButtonDirective } from 'igniteui-angular/directives'; @@ -608,10 +605,9 @@ import { IgxChipComponent } from 'igniteui-angular/chips'; selector: 'app-card-styling-sample', templateUrl: './card-styling-sample.component.html', styleUrls: ['./card-styling-sample.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, - IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, - IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, + imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, + IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxIconComponent, IgxAvatarComponent, IgxDividerModule, IgxChipComponent] }) export class CardStylingSampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md index 6ce9e9f3a..323ff8213 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md @@ -19,7 +19,7 @@ The Angular Carousel component allows you to use animations, slide transitions, The Angular Carousel demo you see below shows slides containing only images. We’ve enabled navigation buttons allowing users to easily move from one slide to another – going back and forth. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; @@ -27,7 +27,6 @@ import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carous selector: 'app-carousel', styleUrls: ['./carousel.component.scss'], templateUrl: './carousel.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCarouselComponent, IgxSlideComponent] }) @@ -329,7 +328,7 @@ This carousel is going to contain slides with forms and images: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -340,7 +339,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-carousel', styleUrls: ['./carousel-with-components-sample.component.scss'], templateUrl: './carousel-with-components-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCarouselComponent, IgxSlideComponent, FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective, IgxInputDirective, IgxButtonDirective] }) @@ -466,7 +464,7 @@ The demo below demonstrates the different types of animations, which the carouse ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; @@ -480,7 +478,6 @@ import { TitleCasePipe } from '@angular/common'; selector: 'app-carousel', styleUrls: ['./carousel-animations-sample.component.scss'], templateUrl: './carousel-animations-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, IgxSwitchComponent, FormsModule, IgxSelectItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, TitleCasePipe] }) export class CarouselAnimationsSampleComponent { @@ -713,7 +710,7 @@ syncing the components by hooking up on carousel's [`slideChanged`](mcp:get_api_ These configurations will have the following result: ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { ISlideEventArgs, IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; import { IListItemClickEventArgs, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective } from 'igniteui-angular/list'; import { NgStyle, NgClass, CurrencyPipe } from '@angular/common'; @@ -722,7 +719,6 @@ import { NgStyle, NgClass, CurrencyPipe } from '@angular/common'; selector: 'app-carousel', styleUrls: ['./carousel-no-navigation-sample.component.scss'], templateUrl: './carousel-no-navigation-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCarouselComponent, IgxSlideComponent, NgStyle, NgClass, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, CurrencyPipe] }) export class CarouselNoNavigationSampleComponent implements OnInit { @@ -1219,14 +1215,13 @@ The last step is to include the component's theme. The sample below demonstrates a simple styling applied through the [Ignite UI for Angular Theming](themes/index.md). ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; @Component({ selector: 'app-carousel', styleUrls: ['./carousel-styling-sample.component.scss'], templateUrl: './carousel-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCarouselComponent, IgxSlideComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chat.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chat.md index 4022f73a1..2f5100e25 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chat.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chat.md @@ -14,14 +14,13 @@ The Chat component provides a complete solution for building conversational inte Unlike a static message list, the Chat component is interactive and designed for **real-time communication**. It manages input, rendering, and user interaction while giving you full control over how messages and attachments are displayed. It also exposes an extensive rendering API that lets you override any part of its layout or visuals. ```typescript -import { Component, signal, ChangeDetectionStrategy } from '@angular/core'; +import { Component, signal } from '@angular/core'; import { IgxChatComponent, IgxChatOptions } from 'igniteui-angular/chat'; @Component({ selector: 'app-chat-overview-sample', styleUrls: ['./overview-sample.component.scss'], templateUrl: './overview-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxChatComponent] }) export class ChatOverviewSampleComponent { @@ -384,7 +383,7 @@ You can listen for these events and sync them with your backend: ```typescript import { AsyncPipe } from '@angular/common'; -import { Component, effect, signal, viewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, effect, signal, viewChild } from '@angular/core'; import { IgxChatComponent, IgxChatMessageContextDirective, type IgxChatOptions } from 'igniteui-angular/chat'; import { MarkdownPipe } from 'igniteui-angular/chat-extras'; @@ -392,7 +391,6 @@ import { MarkdownPipe } from 'igniteui-angular/chat-extras'; selector: 'app-chat-features-sample', styleUrls: ['./features-sample.component.scss'], templateUrl: './features-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxChatComponent, IgxChatMessageContextDirective, AsyncPipe, MarkdownPipe] }) export class ChatFeaturesSampleComponent { @@ -677,7 +675,7 @@ Finally, **include** the custom theme in your application: ``` ```typescript -import { Component, signal, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy } from '@angular/core'; +import { Component, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxChatComponent, IgxChatOptions } from 'igniteui-angular/chat'; @@ -686,7 +684,6 @@ import { IgxChatComponent, IgxChatOptions } from 'igniteui-angular/chat'; styleUrls: ['./styling-sample.component.scss'], templateUrl: './styling-sample.component.html', imports: [IgxAvatarComponent, IgxChatComponent], - changeDetection: ChangeDetectionStrategy.Eager, schemas: [CUSTOM_ELEMENTS_SCHEMA] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/checkbox.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/checkbox.md index de43a383b..a11c5bb63 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/checkbox.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/checkbox.md @@ -17,14 +17,13 @@ The Ignite UI for Angular Checkbox component is a selection control that allows See the checkbox in action in the following Angular Checkbox example below. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; @Component({ selector: 'app-checkbox-sample-1', styleUrls: ['./checkbox-sample-1.component.scss'], templateUrl: './checkbox-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCheckboxComponent] }) export class CheckboxSample1Component { } @@ -149,7 +148,7 @@ igx-checkbox { The final result would be something like that: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; @@ -157,7 +156,6 @@ import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; selector: 'app-checkbox-sample-2', styleUrls: ['./checkbox-sample-2.component.scss'], templateUrl: './checkbox-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCheckboxComponent] }) export class CheckboxSample2Component { @@ -278,7 +276,7 @@ public toggleAll() { After all that is done, our application should look like this: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; import { FormsModule } from '@angular/forms'; @@ -287,7 +285,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-checkbox-sample-3', styleUrls: ['./checkbox-sample-3.component.scss'], templateUrl: './checkbox-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCheckboxComponent, FormsModule] }) export class CheckboxSample3Component { @@ -482,7 +479,7 @@ Finally, **include** the custom theme in your application: In the sample below, you can see how using the checkbox component with customized CSS variables allows you to create a design that visually resembles the checkbox used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) design system. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; @@ -491,53 +488,54 @@ import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; styleUrls: ['./checkbox-styling.component.scss'], templateUrl: './checkbox-styling.component.html', providers: [{ provide: THEME_TOKEN, useFactory: () => new ThemeToken('fluent') }], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCheckboxComponent] }) export class CheckboxStylingComponent { } ``` ```html - + Styled checkbox ``` ```scss -@use "layout.scss"; +@use "sass:map"; @use "igniteui-angular/theming" as *; -// CSS variables approach +:host { + --ig-font-family: Arial, Helvetica, sans-serif; + --ig-subtitle-1-font-size: #{rem(14px)}; -igx-checkbox { - --tick-color: #0064d9; - --tick-color-hover: #e3f0ff; - --tick-width: 2; - --fill-color: transparent; - --fill-color-hover: #e3f0ff; - --label-color: #131e29; - --focus-outline-color: #0032a5; - --border-radius: #{rem(4px)}; + display: block; + padding: rem(18px) 0 0 rem(18px); } -igx-checkbox:hover { - --empty-fill-color: #e3f0ff; +// CSS variables approach +.igx-checkbox { + --tick-color: black; + --tick-color-hover: black; + --tick-width: 4; + --fill-color: orange; + --fill-color-hover: oklch(from var(--fill-color) calc(l * 0.9) c h); + --label-color: black; + --empty-color: orange; + --border-width: #{rem(3px)}; + --border-radius: #{rem(3px)}; } // Sass theme approach - // $custom-checkbox-theme: checkbox-theme( -// $tick-color: #0064d9, -// $tick-width: 2, -// $tick-color-hover: #e3f0ff, -// $fill-color: transparent, -// $fill-color-hover: #e3f0ff, -// $label-color: #131e29, -// $focus-outline-color: #0032a5, -// $empty-color: #131e29, -// $border-radius: rem(4px), +// $tick-color: black, +// $tick-color-hover: black, +// $tick-width: 4, +// $fill-color: orange, +// $fill-color-hover: oklch(from var(--fill-color) calc(l * 0.9) c h), +// $label-color: black, +// $empty-color: orange, +// $border-radius: rem(3px), // ); - -// :host { +// +// :host ::ng-deep { // @include tokens($custom-checkbox-theme); // } ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chip.md index 45b9655e6..053d3e52a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chip.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chip.md @@ -13,7 +13,7 @@ _tocName: Chip ## Angular Chip Example ```typescript -import { ChangeDetectorRef, Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { IBaseChipEventArgs, IgxChipComponent } from 'igniteui-angular/chips'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxPrefixDirective } from 'igniteui-angular/input-group'; @@ -23,7 +23,6 @@ import { IgxPrefixDirective } from 'igniteui-angular/input-group'; selector: 'app-chip-simple', styleUrls: ['./chip-simple.component.scss'], templateUrl: './chip-simple.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] }) @@ -81,7 +80,7 @@ igx-chip { } .sample-container { - padding-top: 30px; + padding: 1rem 0 0 1rem; } ``` @@ -262,7 +261,7 @@ public chipRemoved(event: IBaseChipEventArgs) { If everything went well, you should see this in your browser: ```typescript -import { ChangeDetectorRef, Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { IBaseChipEventArgs, IgxChipComponent } from 'igniteui-angular/chips'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxPrefixDirective } from 'igniteui-angular/input-group'; @@ -272,7 +271,6 @@ import { IgxPrefixDirective } from 'igniteui-angular/input-group'; selector: 'app-chip-simple', styleUrls: ['./chip-simple.component.scss'], templateUrl: './chip-simple.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] }) @@ -330,7 +328,7 @@ igx-chip { } .sample-container { - padding-top: 30px; + padding: 1rem 0 0 1rem; } ``` @@ -459,7 +457,7 @@ If everything went well, you should see this in your browser: ```typescript -import { ChangeDetectorRef, Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { IBaseChipEventArgs, IgxChipComponent } from 'igniteui-angular/chips'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxPrefixDirective } from 'igniteui-angular/input-group'; @@ -469,7 +467,6 @@ import { IgxPrefixDirective } from 'igniteui-angular/input-group'; selector: 'app-chip-simple', styleUrls: ['./chip-simple.component.scss'], templateUrl: './chip-simple.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] }) @@ -527,7 +524,7 @@ igx-chip { } .sample-container { - padding-top: 30px; + padding: 1rem 0 0 1rem; } ``` @@ -684,7 +681,7 @@ If everything's set up correctly, you should see this in your browser: ### Demo ```typescript -import { ChangeDetectorRef, Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxPrefixDirective } from 'igniteui-angular/input-group'; @@ -695,7 +692,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-chip-area-sample', styleUrls: ['./chip-area-sample.component.scss'], templateUrl: './chip-area-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxChipsAreaComponent, IgxChipComponent, IgxAvatarComponent, IgxPrefixDirective, IgxIconComponent] }) @@ -779,7 +775,7 @@ igx-chip { } .sample-container { - padding-top: 30px; + padding: 1rem 0 0 1rem; } ``` @@ -935,7 +931,7 @@ Finally, **include** the custom theme in your application: In the sample below, you can see how using the chip component with customized CSS variables allows you to create a design that visually resembles the chip used in the [`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) design system. ```typescript -import { ChangeDetectorRef, Component, inject, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core'; import { facebook, linkedin } from '@igniteui/material-icons-extended'; import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; @@ -946,7 +942,6 @@ import { NgClass } from '@angular/common'; selector: 'app-chip', styleUrls: ['./chip-styling.component.scss'], templateUrl: './chip-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, NgClass] }) @@ -998,49 +993,56 @@ export class ChipStylingSampleComponent implements OnInit { @use "layout.scss"; @use "igniteui-angular/theming" as *; -// CSS variables approach +igx-chips-area { + --ig-size: var(--ig-size-medium); + + gap: rem(8px); +} + +igx-icon { + --ig-icon-size: #{rem(13px)}; +} +// CSS variables approach igx-chip { --text-color: #fff; --hover-text-color: #fff; --focus-text-color: #fff; --border-radius: #{rem(5px)}; -} -.xcom { - --background: #000; - --hover-background: #000; - --focus-background: #323232; -} + &.xcom { + --background: #000; + --hover-background: #000; + --focus-background: #323232; + } -.youtube { - --background: #cd201f; - --hover-background: #cd201f; - --focus-background: #9f1717; -} + &.youtube { + --background: #cd201f; + --hover-background: #cd201f; + --focus-background: #9f1717; + } -.facebook { - --background: #3b5999; - --hover-background: #3b5999; - --focus-background: #2c4378; -} + &.facebook { + --background: #3b5999; + --hover-background: #3b5999; + --focus-background: #2c4378; + } -.linkedin { - --background: #55acee; - --hover-background: #55acee; - --focus-background: #4682af; + &.linkedin { + --background: #55acee; + --hover-background: #55acee; + --focus-background: #4682af; + } } -// Sass theme approach - +//Sass theme approach // $custom-chip-theme: chip-theme( -// $background: #cd201f, // $text-color: #fff, -// $hover-background: #cd201f, -// $focus-background: #9f1717, +// $hover-background: #fff, +// $focus-background: #fff, // $border-radius: rem(5px) // ); - +// // :host { // @include tokens($custom-chip-theme); // } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/circular-progress.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/circular-progress.md index 9fcd1a4e0..b567cf259 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/circular-progress.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/circular-progress.md @@ -13,14 +13,13 @@ _tocName: Circular Progress ## Angular Circular Progress Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; @Component({ selector: 'app-circular-progressbar', styleUrls: ['./circular-progressbar.component.scss'], templateUrl: './circular-progressbar.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCircularProgressBarComponent] }) export class CircularProgressbarComponent { } @@ -124,14 +123,13 @@ If you want to track a process that is not determined precisely, you can set the The final result should be: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; @Component({ selector: 'app-circular-indeterminate-progressbar', styleUrls: ['./circular-indeterminate-progressbar.component.scss'], templateUrl: './circular-indeterminate-progressbar.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCircularProgressBarComponent] }) export class CircularIndeterminateProgressbarComponent { } @@ -269,7 +267,7 @@ To provide a gradient that has more than 2 color stops, we have to use the direc After reproducing the steps above, you should get this as a result: ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgxCircularProgressBarComponent, IgxProgressBarGradientDirective } from 'igniteui-angular/progressbar'; import { IgxIconButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -278,7 +276,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-circular-dynamic-sample', styleUrls: ['./circular-dynamic-sample.component.scss'], templateUrl: './circular-dynamic-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCircularProgressBarComponent, IgxProgressBarGradientDirective, IgxIconButtonDirective, IgxIconComponent] }) export class CircularDynamicSampleComponent implements OnInit { @@ -382,14 +379,13 @@ The last step is to **include** the component theme in our application.
```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; @Component({ selector: 'app-circular-styling-sample', styleUrls: ['./circular-styling-sample.component.scss'], templateUrl: './circular-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCircularProgressBarComponent] }) export class CircularStylingSampleComponent { } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-features.md index 6d5257e25..5cae5354d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-features.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-features.md @@ -18,7 +18,7 @@ The following demo demonstrates some of the combobox features that are enabled/d ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxComboComponent } from 'igniteui-angular/combo'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { localData } from './local-data'; @@ -28,7 +28,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-combo', styleUrls: ['./combo-features.component.scss'], templateUrl: './combo-features.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxComboComponent, IgxSwitchComponent, FormsModule] }) export class ComboFeaturesComponent implements OnInit{ @@ -187,7 +186,7 @@ If everything is set up correctly, the combobox's list will display centered, us ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { GlobalPositionStrategy, OverlaySettings } from 'igniteui-angular/core'; import { IgxComboComponent } from 'igniteui-angular/combo'; import { scaleInCenter, scaleOutCenter } from 'igniteui-angular/animations'; @@ -196,7 +195,6 @@ import { scaleInCenter, scaleOutCenter } from 'igniteui-angular/animations'; selector: 'app-combo-overlay', templateUrl: 'combo-overlay.component.html', styleUrls: ['combo-overlay.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxComboComponent] }) export class ComboOverlayComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-remote.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-remote.md index d9a9c7e92..93d3b1353 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-remote.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-remote.md @@ -18,7 +18,7 @@ The sample below demonstrates remote binding using the [dataPreLoad](mcp:get_api ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { IComboSearchInputEventArgs, IComboSelectionChangingEventArgs, IgxComboComponent } from 'igniteui-angular/combo'; import { IForOfState } from 'igniteui-angular/directives'; import { IgxToastComponent } from 'igniteui-angular/toast'; @@ -31,7 +31,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-combo-remote', styleUrls: ['./combo-remote.component.scss'], templateUrl: './combo-remote.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxComboComponent, IgxToastComponent, AsyncPipe] }) export class ComboRemoteComponent implements OnInit, AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-templates.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-templates.md index 54e08f884..dc625f5f7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-templates.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-templates.md @@ -16,7 +16,7 @@ The Ignite UI for Angular ComboBox Component allows defining custom templates fo ```typescript -import { ChangeDetectorRef, Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit, inject } from '@angular/core'; import { localData } from './local-data'; import { IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective } from 'igniteui-angular/combo'; import { IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; @@ -27,7 +27,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-combo-template', styleUrls: ['./combo-template.component.scss'], templateUrl: './combo-template.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxComboComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxComboItemDirective, IgxComboHeaderItemDirective, IgxComboHeaderDirective, IgxComboFooterDirective, IgxComboAddItemDirective, IgxButtonDirective, IgxComboToggleIconDirective, IgxComboClearIconDirective, IgxComboEmptyDirective] }) export class ComboTemplateComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo.md index 2a115567c..f72e491ae 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo.md @@ -16,7 +16,7 @@ The Angular ComboBox component represents a drop-down list that provides editabl In this Angular ComboBox example, you can see how users can filter items and perform selection with the provided data. In addition, the ComboBox exposes keyboard navigation and custom styling capabilities. ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { localData } from './local-data'; import { IgxComboComponent } from 'igniteui-angular/combo'; @@ -24,7 +24,6 @@ import { IgxComboComponent } from 'igniteui-angular/combo'; selector: 'app-combo-main', styleUrls: ['./combo-main.component.scss'], templateUrl: './combo-main.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxComboComponent] }) @@ -169,7 +168,7 @@ export class MyCombo { ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxComboComponent } from 'igniteui-angular/combo'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { CITIES, ICity } from './cities'; @@ -179,7 +178,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-combo-valuekey', templateUrl: 'combo-valuekey.component.html', styleUrls: ['combo-valuekey.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxComboComponent, FormsModule, IgxButtonDirective] }) export class ComboValueKeyComponent { @@ -246,7 +244,7 @@ export class MyCombo { ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxComboComponent } from 'igniteui-angular/combo'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective } from 'igniteui-angular/card'; @@ -258,7 +256,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-combo-binding', templateUrl: 'combo-binding.component.html', styleUrls: ['combo-binding.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxComboComponent, FormsModule, IgxButtonDirective, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective] }) export class ComboBindingComponent { @@ -608,7 +605,7 @@ The last step is to include the component's theme. ### Demo ```typescript -import { Component, ElementRef, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core'; import { IComboSelectionChangingEventArgs, IgxComboComponent } from 'igniteui-angular/combo'; import { IgxToastComponent } from 'igniteui-angular/toast'; import { VerticalAlignment } from 'igniteui-angular/core'; @@ -618,7 +615,6 @@ import { getHeroWeaponsData, IHeroWeapon } from '../../../data/heroData'; selector: 'app-combo', styleUrls: ['./combo-styling.component.scss'], templateUrl: './combo-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxComboComponent, IgxToastComponent] }) export class ComboStylingComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-picker.md index c76a3bbbc..cb9169b21 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-picker.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-picker.md @@ -18,7 +18,7 @@ Below you can see a sample that demonstrates how the Angular Date Picker works w ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; import { FormsModule } from '@angular/forms'; @@ -27,7 +27,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-datepicker-sample-1', styleUrls: ['./datepicker-sample-1.component.scss'], templateUrl: './datepicker-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDatePickerComponent, FormsModule, IgxLabelDirective] }) export class DatepickerSample1Component { @@ -250,7 +249,7 @@ The [`IgxDatePickerComponent`](mcp:get_api_reference?platform=angular&component= ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -258,7 +257,6 @@ import { IgxLabelDirective } from 'igniteui-angular/input-group'; selector: 'app-datepicker-sample-2', styleUrls: ['./datepicker-sample-2.component.scss'], templateUrl: './datepicker-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDatePickerComponent, IgxLabelDirective] }) export class DatepickerSample2Component { @@ -293,7 +291,7 @@ Alternatively, if the [`inputFormat`](mcp:get_api_reference?platform=angular&com More information about these can be found in the [`IgxDateTimeEditor`](date-time-editor.md#examples) examples section. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; import { FormsModule } from '@angular/forms'; @@ -301,7 +299,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-datepicker-sample-3', styleUrls: ['./datepicker-sample-3.component.scss'], templateUrl: './datepicker-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDatePickerComponent, FormsModule] }) export class DatepickerSample3Component { @@ -358,7 +355,7 @@ In some cases when the IgxDatePicker and the [`IgxTimePicker`](time-picker.md) a To achieve that in template driven forms, use the `ngModel` to bind both components to the same Date object. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; @@ -368,7 +365,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-datetimepicker-template-driven-form', styleUrls: ['./template-driven-form.component.scss'], templateUrl: './template-driven-form.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDatePickerComponent, FormsModule, IgxLabelDirective, IgxTimePickerComponent] }) export class DateTimePickerTDFSampleComponent { @@ -421,7 +417,7 @@ export class DateTimePickerTDFSampleComponent { In reactive forms, we can handle the [`valueChange`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=valueChange) event of each component and update the value of the other. ```typescript -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -431,7 +427,6 @@ import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; selector: 'app-datetimepicker-reactive-form', styleUrls: ['./reactive-form.component.scss'], templateUrl: './reactive-form.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, ReactiveFormsModule, IgxDatePickerComponent, IgxLabelDirective, IgxTimePickerComponent] }) export class DateTimePickerRFSampleComponent { @@ -563,7 +558,7 @@ The last step is to pass the custom Date Picker theme: ``` ```typescript -import { Component, ElementRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, inject } from '@angular/core'; import { IgxOverlayService } from 'igniteui-angular/core'; import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -572,10 +567,10 @@ import { IgxLabelDirective } from 'igniteui-angular/input-group'; selector: 'app-datepicker-sample-1', styleUrls: ['./datepicker-styling-sample.component.scss'], templateUrl: './datepicker-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDatePickerComponent, IgxLabelDirective] }) -export class DatepickerStylingSampleComponent { element = inject(ElementRef); +export class DatepickerStylingSampleComponent { + element = inject(ElementRef); private overlayService = inject(IgxOverlayService); } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-range-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-range-picker.md index 1027c84bc..7294e34df 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-range-picker.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-range-picker.md @@ -15,7 +15,7 @@ The Angular Date Range Picker is a lightweight component that includes a text in Below is a sample demonstrating the [`IgxDateRangePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent) component in action, where a calendar pop-up allows users to select start and end dates. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DateRange } from 'igniteui-angular/core'; import { IgxDateRangePickerComponent } from 'igniteui-angular/date-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -25,7 +25,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-basic-rangedatepicker', styleUrls: ['./daterangepicker-basic.scss'], templateUrl: './daterangepicker-basic.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDateRangePickerComponent, FormsModule, IgxLabelDirective] }) export class BasicDateRangePickerComponent { @@ -173,7 +172,7 @@ The Angular Date Range Picker component also allows configuring two separate inp - To enable date editing, decorate both inputs with the [`igxDateTimeEditor`](date-time-editor.md) directive. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DateRange, IgxPickerClearComponent, IgxPickerToggleComponent } from 'igniteui-angular/core'; import { IgxDateRangeEndComponent, IgxDateRangePickerComponent, IgxDateRangeStartComponent } from 'igniteui-angular/date-picker'; import { IgxInputDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; @@ -185,7 +184,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-rangedatepicker-start-end', styleUrls: ['./daterangepicker-start-end.scss'], templateUrl: './daterangepicker-start-end.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent] @@ -204,7 +202,7 @@ By default, the [`IgxDateRangePickerComponent`](mcp:get_api_reference?platform=a ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DateRange } from 'igniteui-angular/core'; import { IgxDateRangePickerComponent } from 'igniteui-angular/date-picker'; @@ -212,7 +210,6 @@ import { IgxDateRangePickerComponent } from 'igniteui-angular/date-picker'; selector: 'app-mode-rangedatepicker', styleUrls: ['./daterangepicker-mode.scss'], templateUrl: './daterangepicker-mode.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDateRangePickerComponent] }) export class DateRangePickerModeComponent { @@ -388,7 +385,7 @@ public customRanges: CustomDateRange[] = [ In addition, custom content or actions can be templated using the [`igxPickerActions`](mcp:get_api_reference?platform=angular&component=IgxPickerActionsDirective) directive. The following demo shows the predefined and custom ranges along with the templated actions: ```typescript -import { Component, ElementRef, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core'; import { CustomDateRange, DateRange, IgxPickerActionsDirective, OverlaySettings } from 'igniteui-angular/core'; import { IgxDateRangePickerComponent } from 'igniteui-angular/date-picker'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -399,7 +396,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-rangdatepicker-range-buttons', styleUrls: ['./daterangepicker-range-buttons.scss'], templateUrl: './daterangepicker-range-buttons.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDateRangePickerComponent, FormsModule, IgxPickerActionsDirective, IgxButtonDirective] }) export class DateRangePickerRangeButtonsComponent { @@ -514,7 +510,7 @@ When using two separate inputs, it is possible to set the model and required pro ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DateRange, IgxPickerClearComponent, IgxPickerToggleComponent } from 'igniteui-angular/core'; import { IgxDateRangeEndComponent, IgxDateRangePickerComponent, IgxDateRangeStartComponent } from 'igniteui-angular/date-picker'; import { IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; @@ -526,7 +522,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-daterangepicker-validation', styleUrls: ['./daterangepicker-validation.scss'], templateUrl: './daterangepicker-validation.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDateRangePickerComponent, FormsModule, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent] @@ -749,7 +744,7 @@ Regarding style scoping, you should refer to both styling sections [Overlay Scop ```typescript -import { Component, ElementRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, inject } from '@angular/core'; import { DateRange, IgxPickerClearComponent, IgxPickerToggleComponent } from 'igniteui-angular/core'; import { IgxDateRangeEndComponent, IgxDateRangePickerComponent, IgxDateRangeStartComponent } from 'igniteui-angular/date-picker'; import { IgxInputDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; @@ -761,7 +756,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-styled-rangedatepicker', styleUrls: ['./daterangepicker-styling.scss'], templateUrl: './daterangepicker-styling.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent] }) @@ -779,7 +773,7 @@ The demo below defines a form for flight tickets that uses the [`IgxDateRangePic ```typescript -import { Component, Pipe, PipeTransform, ChangeDetectionStrategy } from '@angular/core'; +import { Component, Pipe, PipeTransform } from '@angular/core'; import { DateRange } from 'igniteui-angular/core'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxHintDirective, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; @@ -793,7 +787,6 @@ import { PipeWithoutTownFrom as PipeWithoutTownFrom_1 } from '../../datepicker/d selector: 'app-flight-booking', styleUrls: ['./daterangepicker-flight-booking.scss'], templateUrl: './daterangepicker-flight-booking.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDateRangePickerComponent, IgxLabelDirective, IgxHintDirective, PipeWithoutTownFrom_1] }) export class FlightBookingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-time-editor.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-time-editor.md index 5c1665fc3..e15da2106 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-time-editor.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-time-editor.md @@ -13,7 +13,7 @@ _tocName: Date Time Editor ## Angular Date Time Editor Directive Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxDateTimeEditorDirective, IgxTextSelectionDirective } from 'igniteui-angular/directives'; @@ -21,7 +21,6 @@ import { IgxDateTimeEditorDirective, IgxTextSelectionDirective } from 'igniteui- selector: 'app-datetime-basic', styleUrls: ['./datetime-basic.component.scss'], templateUrl: './datetime-basic.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxDateTimeEditorDirective, IgxTextSelectionDirective] }) export class DateTimeBasicComponent { @@ -221,7 +220,7 @@ Also, both methods accept an optional `delta` parameter of type `number` which c You may compare both in the following sample: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DatePart } from 'igniteui-angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives'; @@ -232,7 +231,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-datetime-advanced', styleUrls: ['./datetime-advanced.scss'], templateUrl: './datetime-advanced.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxSuffixDirective, IgxIconComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dialog.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dialog.md index e3fa5b70a..1151b194b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dialog.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dialog.md @@ -13,7 +13,7 @@ _tocName: Dialog Window ## Angular Dialog Window Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; @@ -21,7 +21,6 @@ import { IgxDialogComponent } from 'igniteui-angular/dialog'; selector: 'app-dialog-sample-1', styleUrls: ['./dialog-sample-1.component.scss'], templateUrl: './dialog-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent] }) export class DialogSample1Component { } @@ -149,7 +148,7 @@ To create a standard dialog, in the template of our file manager component, we a ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; @@ -157,7 +156,6 @@ import { IgxDialogComponent } from 'igniteui-angular/dialog'; selector: 'app-dialog-sample-2', styleUrls: ['./dialog-sample-2.component.scss'], templateUrl: './dialog-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent] }) export class DialogSample2Component { @@ -235,7 +233,7 @@ We add two input groups consisting of a label and and input decorated with the [ ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -246,7 +244,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-dialog-sample-3', styleUrls: ['./dialog-sample-3.component.scss'], templateUrl: './dialog-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxIconComponent, FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxDialogActionsDirective] }) export class DialogSample3Component { @@ -497,7 +494,7 @@ The last step is to **include** the component theme in our application. ```typescript import { useAnimation } from '@angular/animations'; -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { CloseScrollStrategy, GlobalPositionStrategy, IgxOverlayOutletDirective, PositionSettings } from 'igniteui-angular/core'; import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -508,7 +505,6 @@ import { slideInBottom, slideOutTop } from 'igniteui-angular/animations'; selector: 'app-dialog-styling-sample', styleUrls: ['./dialog-styling-sample.component.scss'], templateUrl: './dialog-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxOverlayOutletDirective, IgxButtonDirective, IgxRippleDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxIconComponent, IgxDialogActionsDirective] }) export class DialogStylingSampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/display-density.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/display-density.md index 7a4418399..8ecda93b7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/display-density.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/display-density.md @@ -18,7 +18,7 @@ Using the `--ig-size` custom CSS property, you can configure the size on an appl ## Angular Size Example ```typescript -import { Component, HostBinding, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit } from '@angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -28,7 +28,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-display-density', styleUrls: ['./display-density.component.scss'], templateUrl: './display-density.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective] }) @@ -100,17 +99,10 @@ export class DisplayDensityComponent implements OnInit { ``` ```scss :host { - display: block; - padding: 8px; -} - -.density-chooser { - margin-bottom: 16px; -} - -igx-buttongroup, igx-input-group { - display: block; - width: 500px; + display: grid; + gap: 16px; + padding: 16px; + max-width: 500px; } ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/divider.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/divider.md index a627b44ab..60b2523bb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/divider.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/divider.md @@ -16,15 +16,14 @@ By default the divider is a solid horizontal line. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { Component } from '@angular/core'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-default', styleUrls: ['./divider-default.component.scss'], templateUrl: './divider-default.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerDefaultComponent { @@ -114,15 +113,14 @@ By adding the `vertical` attribute and setting its value to `true`, you can chan ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { Component } from '@angular/core'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-vertical', styleUrls: ['./divider-vertical.component.scss'], templateUrl: './divider-vertical.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerVerticalComponent { @@ -176,15 +174,14 @@ To change the default look simply use the `type` attribute of the divider and se ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { Component } from '@angular/core'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-dashed', styleUrls: ['./divider-dashed.component.scss'], templateUrl: './divider-dashed.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerDashedComponent { @@ -237,15 +234,14 @@ To inset the divider, set the `middle` attribute of the divider to `true` and pr ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { Component } from '@angular/core'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-inset', styleUrls: ['./divider-inset.component.scss'], templateUrl: './divider-inset.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerInsetComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dock-manager.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dock-manager.md index f0e5e9a11..e2211c26d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dock-manager.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dock-manager.md @@ -15,7 +15,7 @@ The Ignite UI Dock Manager component provides means to manage the layout of your ```typescript -import { Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy } from '@angular/core'; +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPaneOrientation } from 'igniteui-dockmanager'; @@ -24,7 +24,6 @@ import { IgcDockManagerLayout, selector: 'app-dock-manager', styleUrls: ['./dock-manager.component.scss'], templateUrl: './dock-manager.component.html', - changeDetection: ChangeDetectionStrategy.Eager, schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class DockManagerComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drag-drop.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drag-drop.md index 40d37ff4e..b06b27d70 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drag-drop.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drag-drop.md @@ -16,7 +16,7 @@ Drag and drop icon to reposition it. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxDragDirective, IgxDropDirective } from 'igniteui-angular/directives'; @@ -24,7 +24,6 @@ import { IgxDragDirective, IgxDropDirective } from 'igniteui-angular/directives' selector: 'app-icons-sample', styleUrls: ['./icons-sample.component.scss'], templateUrl: './icons-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDragDirective, IgxDropDirective] }) @@ -299,7 +298,7 @@ You can specify an element that is a child of the `igxDrag` by which to drag, si Drag the dialog using the handle in the following demo. ```typescript -import { Component, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { GlobalPositionStrategy, NoOpScrollStrategy, OverlaySettings } from 'igniteui-angular/core'; import { IgxButtonDirective, IgxDragDirective, IgxDragHandleDirective, IgxDragLocation, IgxToggleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -308,7 +307,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-drag-dialog-sample', templateUrl: './drag-dialog-sample.component.html', styleUrls: ['./drag-dialog-sample.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleDirective, IgxDragDirective, IgxIconComponent, IgxDragHandleDirective] }) export class DragDialogSampleComponent { @@ -353,54 +351,59 @@ export class DragDialogSampleComponent { ```html -
- drag_indicator - Draggable Dialog +
+ Draggable Dialog + drag_indicator +
Grab the handle icon to drag. -
+ ``` ```scss @use '../../../../variables' as *; -@include dialog( - dialog-theme( - $schema: $schema - ) +$theme: dialog-theme( + $schema: $schema ); -@include dialog-typography(); - :host { display: block; margin: 16px; - @include b(dialog) { - @extend %igx-dialog-window; + .dialog { + @include tokens($theme, $mode: 'scoped'); display: flex; flex-direction: column; - max-width: rem(280px); + width: rem(280px); + min-width: rem(280px); + border: rem(1px) solid var-get($theme, 'border-color'); + border-radius: var-get($theme, 'border-radius'); + background: var-get($theme, 'background'); + box-shadow: var-get($theme, 'elevation'); + overflow: hidden; - @include e(icon) { - position: absolute; - right: rem(24px); - top: rem(24px); - cursor: move; + header { + display: flex; + align-items: center; + justify-content: space-between; + padding: rem(16px) rem(24px); } - @include e(title) { - @extend %igx-dialog-title; + &__title { + display: inline-block; + color: var-get($theme, 'title-color'); } - @include e(content) { - @extend %igx-dialog-content; + &__icon { + cursor: move; } + + &__content { + color: var-get($theme, 'message-color'); + padding: rem(14px) rem(24px); + } } } ``` @@ -441,7 +444,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-list-reorder-sample', templateUrl: './list-reorder-sample.component.html', styleUrls: ['./list-reorder-sample.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxListItemComponent, IgxDropDirective, IgxDragDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxDragHandleDirective, IgxListActionDirective] }) export class ListReorderSampleComponent { @@ -688,7 +690,7 @@ Drag e-mails on the right into the folders on the left. ```typescript -import { ChangeDetectorRef, Component, Input, Renderer2, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, Input, Renderer2, inject } from '@angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; import { IgxDragDirective, IgxDropDirective } from 'igniteui-angular/directives'; @@ -700,7 +702,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-email-sample', templateUrl: './email-sample.component.html', styleUrls: ['./email-sample.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent, IgxListComponent, IgxListItemComponent, IgxDropDirective, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxDragDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, FormsModule] }) @@ -932,7 +933,7 @@ Drag items around the kanban board. ```typescript /* eslint-disable no-shadow */ /* eslint-disable @typescript-eslint/naming-convention */ -import { ChangeDetectorRef, Component, ElementRef, OnInit, Renderer2, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, OnInit, Renderer2, ViewChild, inject } from '@angular/core'; import { IDropBaseEventArgs, IDropDroppedEventArgs, IgxDragDirective, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxChipComponent } from 'igniteui-angular/chips'; import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective } from 'igniteui-angular/card'; @@ -953,7 +954,6 @@ interface IListItem { selector: 'app-kanban-sample', templateUrl: './kanban-sample.component.html', styleUrls: ['./kanban-sample.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxChipComponent, IgxCardComponent, IgxDragDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective] }) export class KanbanSampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-hierarchical-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-hierarchical-selection.md index bdba3fe93..4a8156c00 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-hierarchical-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-hierarchical-selection.md @@ -29,7 +29,7 @@ Additionally, a way to prevent the drop-down from closing on chip deletion would ### Demo ```typescript -import { AfterViewInit, Component, DoCheck, OnInit, ViewChild, ElementRef, PLATFORM_ID, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, DoCheck, OnInit, ViewChild, ElementRef, PLATFORM_ID, inject } from '@angular/core'; import { IBaseChipEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; import { IgxDropDownComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; import { ITreeNodeSelectionEvent, IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular/tree'; @@ -45,7 +45,6 @@ import { isPlatformBrowser } from '@angular/common'; selector: 'app-dropdown-tree-hierarchical-selection', styleUrls: ['./dropdown-tree-hierarchical-selection.component.scss'], templateUrl: './dropdown-tree-hierarchical-selection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, IgxChipComponent, IgxDropDownComponent, IgxTreeComponent, IgxTreeNodeComponent] }) export class DropdownTreeHierarchicalSelectionComponent implements OnInit, DoCheck, AfterViewInit { @@ -146,7 +145,7 @@ igx-chip { ``` ```typescript -import { AfterViewInit, Component, ElementRef, OnInit, PLATFORM_ID, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, OnInit, PLATFORM_ID, ViewChild, inject } from '@angular/core'; import { IBaseChipEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; import { IgxDropDownComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; import { ConnectedPositioningStrategy, OverlaySettings } from 'igniteui-angular/core'; @@ -163,7 +162,6 @@ import { isPlatformBrowser } from '@angular/common'; selector: 'app-dropdown-tree-grid-hierarchical-selection', styleUrls: ['./dropdown-tree-grid-hierarchical-selection.component.scss'], templateUrl: './dropdown-tree-grid-hierarchical-selection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, IgxChipComponent, IgxDropDownComponent, IgxTreeGridComponent, IgxColumnComponent] }) export class DropdownTreeGridHierarchicalSelectionComponent implements OnInit, AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-virtual.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-virtual.md index d493ce99a..e9f396549 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-virtual.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-virtual.md @@ -13,7 +13,7 @@ The Ignite UI for Angular Drop Down component can fully integrate with the [`Igx ## Angular Virtual Drop Down Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxForOfDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; @@ -30,7 +30,6 @@ interface DataItem { selector: 'app-drop-down-virtual', templateUrl: './drop-down-virtual.component.html', styleUrls: ['./drop-down-virtual.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxForOfDirective, IgxDropDownItemComponent] }) export class DropDownVirtualComponent { @@ -340,7 +339,7 @@ The result of the above configuration is a drop-down that dynamically loads the ```typescript -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, AfterViewInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, AfterViewInit, inject } from '@angular/core'; // tslint:disable-next-line:max-line-length import { IForOfState, IgxButtonDirective, IgxForOfDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; @@ -357,7 +356,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-drop-down-remote', templateUrl: './drop-down-remote.component.html', styleUrls: ['./drop-down-remote.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxForOfDirective, IgxDropDownItemComponent, IgxToastComponent, AsyncPipe] }) export class DropDownRemoteComponent implements OnInit, OnDestroy, AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down.md index 6aebf935e..cda017de3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down.md @@ -15,7 +15,7 @@ _tocName: Drop Down This Angular drop down example demonstrates the basic functionalities of a drop down list. Click on it to expand the preset options, select an item, and then close the drop down. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; @@ -24,7 +24,6 @@ import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigati selector: 'app-dropdown-sample-1', styleUrls: ['./dropdown-sample-1.component.scss'], templateUrl: './dropdown-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent] }) export class DropDownSample1Component { @@ -181,7 +180,7 @@ export class MyDropDownComponent { ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; @@ -191,7 +190,6 @@ import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigati selector: 'app-dropdown-sample-2', styleUrls: ['./dropdown-sample-2.component.scss'], templateUrl: './dropdown-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent] }) export class DropDownSample2Component { @@ -265,8 +263,8 @@ export class MyDropDownComponent { If the sample is configured properly, a list of countries should be displayed as a group under European Union header, France as a non-interactive item, and Bulgaria as a selected item: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxButtonDirective, IgxDividerDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { Component } from '@angular/core'; +import { IgxButtonDirective, IgxDividerComponent, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; @@ -277,8 +275,7 @@ import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-g selector: 'app-dropdown-sample-3', styleUrls: ['./dropdown-sample-3.component.scss'], templateUrl: './dropdown-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerDirective] + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerComponent] }) export class DropDownSample3Component { @@ -397,7 +394,7 @@ The group also has the additional functionality of disabling items inside of its You can see the results in the sample below: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -409,7 +406,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-dropdown-sample-5', styleUrls: ['./dropdown-sample-5.component.scss'], templateUrl: './dropdown-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxSwitchComponent, FormsModule, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent] }) export class DropDownSample5Component { @@ -563,7 +559,7 @@ export class MyMenuComponent { ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { ConnectedPositioningStrategy, HorizontalAlignment, IgxOverlayOutletDirective, NoOpScrollStrategy, VerticalAlignment } from 'igniteui-angular/core'; import { ISelectionEventArgs, IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; import { IgxNavbarComponent } from 'igniteui-angular/navbar'; @@ -576,7 +572,6 @@ import { IgxLabelDirective } from 'igniteui-angular/input-group'; selector: 'app-dropdown-menu', styleUrls: ['./dropdown-menu.component.scss'], templateUrl: './dropdown-menu.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxIconButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxLabelDirective, IgxOverlayOutletDirective] }) export class DropdownMenuComponent { @@ -706,7 +701,7 @@ public ngAfterViewInit(): void { The result from the above configurations could be seen in the below sample. ```typescript -import { AfterViewInit, Component, QueryList, ViewChild, ViewChildren, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, QueryList, ViewChild, ViewChildren, inject } from '@angular/core'; import { IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down'; import { ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core'; import { IgxNavbarComponent, IgxNavbarTitleDirective } from 'igniteui-angular/navbar'; @@ -730,7 +725,6 @@ import { MultiLevelDirective } from './multi-level.directive'; templateUrl: './dropdown-multi-level-menu.component.html', styleUrls: ['./dropdown-multi-level-menu.component.scss'], providers: [MultiLevelService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxNavbarTitleDirective, IgxButtonDirective, IgxToggleActionDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, MultiLevelDirective, IgxSuffixDirective] }) export class DropdownMultiLevelMenuComponent implements AfterViewInit { @@ -1011,7 +1005,7 @@ export class InputDropDownComponent { ``` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { ConnectedPositioningStrategy } from 'igniteui-angular/core'; import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; import { IgxInputDirective, IgxInputGroupComponent, IgxSuffixDirective } from 'igniteui-angular/input-group'; @@ -1023,7 +1017,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-dropdown-sample-4', styleUrls: ['./dropdown-sample-4.component.scss'], templateUrl: './dropdown-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxToggleActionDirective, IgxInputDirective, IgxDropDownItemNavigationDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent] }) export class DropDownSample4Component { @@ -1048,6 +1041,10 @@ export class DropDownSample4Component { } ``` ```html +

+ Selected:  + {{ dropDown.selectedItem?.value ?? 'N/A' }} +

@@ -1055,7 +1052,6 @@ export class DropDownSample4Component { arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }} - Selected: {{ dropDown.selectedItem?.value }} @for (item of items; track item) { @@ -1066,24 +1062,12 @@ export class DropDownSample4Component { ``` ```scss :host { - margin: 8px; -} - -.input { - padding-left: 0.2rem; -} - -.input-group { - width: 220px; -} - -.igx-input-group { - display: inline-block; + display: block; + padding: 0.5rem; } -span { - display: inline; - padding-left: 24px; +igx-input-group { + max-width: 300px; } ``` @@ -1263,7 +1247,7 @@ The last step is to pass the custom drop-down theme: ### Demo ```typescript -import { Component, ElementRef, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core'; import { ISelectionEventArgs, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { getHeroClassData, IHeroClass } from '../../../data/heroData'; @@ -1273,7 +1257,6 @@ import { getHeroClassData, IHeroClass } from '../../../data/heroData'; selector: 'app-dropdown-styling', styleUrls: ['./dropdown-styling.component.scss'], templateUrl: './dropdown-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent] }) export class DropDownStylingComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/expansion-panel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/expansion-panel.md index a1b52af28..c1c8184ea 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/expansion-panel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/expansion-panel.md @@ -19,14 +19,13 @@ Ignite UI Expansion Panel [igx-expansion-panel](mcp:get_api_reference?platform We've created this simple Angular Expansion Panel Example using Ignite UI Angular. See how the sample works. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; @Component({ // tslint:disable-next-line:component-selector selector: 'app-expansion-sample-1', styleUrls: ['./expansion-sample-1.component.scss'], templateUrl: './expansion-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] }) export class ExpansionPanelSample1Component { @@ -183,7 +182,7 @@ export class ExpansionPanelComponent { Below we have the results: ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; import { IgxToastComponent } from 'igniteui-angular/toast'; @@ -192,7 +191,6 @@ import { IgxToastComponent } from 'igniteui-angular/toast'; selector: 'app-expansion-sample-2', styleUrls: ['./expansion-sample-2.component.scss'], templateUrl: './expansion-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxToastComponent] }) export class ExpansionPanelSample2Component { @@ -290,7 +288,7 @@ For the sake of simplicity let's add some basic markup to the body of our expans Lets see the result from all the above changes: ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -300,7 +298,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-expansion-sample-3', styleUrls: ['./expansion-sample-3.component.scss'], templateUrl: './expansion-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelIconDirective, IgxExpansionPanelBodyComponent, IgxButtonDirective] }) @@ -508,7 +505,7 @@ To find out more on how you can use Ignite UI theming engine [`click here`](them ### Demo ```typescript -import {Component, ChangeDetectionStrategy} from '@angular/core'; +import {Component} from '@angular/core'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -517,7 +514,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-expansion-styling', styleUrls: ['./expansion-styling.component.scss'], templateUrl: './expansion-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxButtonDirective] }) @@ -671,7 +667,7 @@ You can see the results below: ```typescript import { useAnimation } from '@angular/animations'; -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'; @@ -681,7 +677,6 @@ import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'; selector: 'app-expansion-sample-5', styleUrls: ['./expansion-sample-5.component.scss'], templateUrl: './expansion-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] }) export class ExpansionPanelSample5Component { @@ -720,7 +715,7 @@ export class ExpansionPanelSample5Component {
- Angular + Angular Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-csv.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-csv.md index 97dc355d3..9253490d9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-csv.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-csv.md @@ -21,7 +21,7 @@ The exporting functionality is encapsulated in the [`IgxCsvExporterService`](mcp ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { CsvFileTypes, IgxCsvExporterOptions, IgxCsvExporterService } from 'igniteui-angular/grids/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -30,7 +30,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-csv-export', styleUrls: ['./csv-export.component.scss'], templateUrl: './csv-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective] }) export class CsvExportComponent { @@ -163,7 +162,7 @@ public exportButtonHandler() { ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, inject } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxCsvExporterService } from 'igniteui-angular/grids/core'; @@ -173,7 +172,6 @@ import { IgxPreventDocumentScrollDirective } from '../../../directives/prevent-s selector: 'app-csv-export-sample-1', styleUrls: ['./csv-export-sample-1.component.scss'], templateUrl: './csv-export-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent] }) export class CsvExportSample1Component { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-excel.md index cab6caf68..85f668f15 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-excel.md @@ -20,7 +20,7 @@ The Ignite UI for Angular Excel Exporter service can export data in Microsoft® ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { IgxExcelExporterOptions, IgxExcelExporterService } from 'igniteui-angular/grids/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -29,7 +29,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-excel-export', styleUrls: ['./excel-export.component.scss'], templateUrl: './excel-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective] }) export class ExcelExportComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-pdf.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-pdf.md index cf46a0181..3c3cd13a5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-pdf.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-pdf.md @@ -19,7 +19,7 @@ The Ignite UI for Angular PDF Exporter service provides powerful functionality t ```typescript -import { Component, inject, signal, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject, signal } from '@angular/core'; import { IgxPdfExporterOptions, IgxPdfExporterService } from 'igniteui-angular/grids/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -27,7 +27,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-pdf-export', styleUrls: ['./pdf-export.component.scss'], templateUrl: './pdf-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective] }) export class PdfExportComponent { @@ -241,7 +240,6 @@ import notoSansFontData from './fonts/noto-sans.json'; selector: 'app-export-pdf-custom-font', templateUrl: './export-pdf-custom-font.component.html', styleUrls: ['./export-pdf-custom-font.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, imports: [IgxGridComponent, IgxColumnComponent] }) export class ExportPdfCustomFontComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/for-of.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/for-of.md index 3e33c182d..cec02b181 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/for-of.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/for-of.md @@ -14,7 +14,7 @@ _tocName: Virtual For Directive ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgxFilterOptions, IgxFilterPipe, IgxForOfDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -28,7 +28,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-igx-for-list', styleUrls: ['./igxFor.component.scss'], templateUrl: './igxFor.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxForOfDirective, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListActionDirective, IgxFilterPipe] }) export class IgxForComponent implements OnInit { @@ -270,7 +269,7 @@ _**Note:**_ It is strongly advised that the parent container of the [`igxForOf`] ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgxFilterOptions, IgxFilterPipe, IgxForOfDirective } from 'igniteui-angular/directives'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -284,7 +283,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-igx-for-horizontal', styleUrls: ['./igxFor-horizontal.component.scss'], templateUrl: './igxFor-horizontal.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxForOfDirective, IgxAvatarComponent, IgxFilterPipe] }) export class IgxForHorizontalComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-localization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-localization.md index e5ce9e4c1..a42454ce8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-localization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-localization.md @@ -19,7 +19,7 @@ Currently, Ignite UI for Angular ships with resource strings for the following l ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { DATA } from '../../../data/nwindData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { GridResourceStringsEN, IGridResourceStrings, registerI18n, setCurrentI18n } from 'igniteui-angular/core'; @@ -38,7 +38,6 @@ import { selector: 'app-localization-all-resources', styleUrls: ['./localization-all-resources.component.scss'], templateUrl: 'localization-all-resources.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxColumnComponent] }) export class LocalizationAllResourcesComponent implements OnInit { @@ -433,7 +432,7 @@ With only a few lines of code, users can easily change the localization strings ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { registerLocaleData } from '@angular/common'; import localeBG from '@angular/common/locales/bg'; import localeCS from '@angular/common/locales/cs'; @@ -471,7 +470,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-localization-all-resources-old', styleUrls: ['./localization-all-resources.component.scss'], templateUrl: 'localization-all-resources.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxColumnComponent] }) export class LocalizationAllResourcesOldComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-advanced-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-advanced-filtering.md index c4ccfa86f..df9a8d530 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-advanced-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-advanced-filtering.md @@ -10,7 +10,7 @@ _premium: true The Advanced filtering provides a dialog which allows the creation of groups with filtering conditions across all columns for any [Angular table](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) like the Grid. ## Angular Grid Advanced Filtering Example ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { DATA } from '../../data/nwindData'; @@ -21,7 +21,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-advanced-filtering-sample', styleUrls: ['./grid-advanced-filtering-sample.component.scss'], templateUrl: 'grid-advanced-filtering-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class GridAdvancedFilteringSampleComponent implements OnInit { @@ -118,7 +117,7 @@ In case you don't want to show the Grid toolbar, you could use the [`openAdvance As you see the demo above the Advanced filtering dialog is hosted in an overlay on top of the Grid. When the setup in the dialog is ready, the apply or close actions would hide that dialog. There is a way to make that dialog stay always visible - be used as a standalone component. In the demo below, the advanced filtering dialog is declared separately of the Grid. ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxAdvancedFilteringDialogComponent, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { DATA } from '../../data/nwindData'; @@ -128,7 +127,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-grid-external-advanced-filtering', templateUrl: './grid-external-advanced-filtering.component.html', styleUrls: ['./grid-external-advanced-filtering.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAdvancedFilteringDialogComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class GridExternalAdvancedFilteringComponent { @@ -244,7 +242,7 @@ $custom-query-builder: query-builder-theme( ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { DATA } from '../../data/nwindData'; @@ -255,7 +253,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-adf-style-sample', styleUrls: ['./grid-advanced-filtering-style.component.scss'], templateUrl: 'grid-advanced-filtering-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class GridAdvancedFilteringStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-batch-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-batch-editing.md index 246d0c0f0..3795de090 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-batch-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-batch-editing.md @@ -15,7 +15,7 @@ Below is a detailed example of how is Batch Editing enabled for the Grid compone The following sample demonstrates a scenario, where the grid has [`batchEditing`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=batchEditing) enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed. ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { Transaction } from 'igniteui-angular/core'; @@ -30,7 +30,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-row-edit', styleUrls: [`grid-batch-editing-sample.component.scss`], templateUrl: 'grid-batch-editing-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxButtonDirective, IgxDialogComponent] }) export class GridBatchEditingSampleComponent implements OnInit { @@ -267,7 +266,7 @@ export class GridBatchEditingSampleComponent { [Check out the full demo configuration](remote-data-operations.md#remote-paging-with-batch-editing) ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { Transaction } from 'igniteui-angular/core'; @@ -285,7 +284,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-remote-paging-batch-editing', styleUrls: ['./batch-editing-remote-paging.component.scss'], templateUrl: './batch-editing-remote-paging.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxDialogComponent, AsyncPipe] }) export class RemotePagingBatchEditingComponent implements OnInit, AfterViewInit, OnDestroy { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cascading-combos.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cascading-combos.md index ce3942359..7fb7aa858 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cascading-combos.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cascading-combos.md @@ -11,7 +11,7 @@ The Grid's Editing functionality provides with the opportunity to use [Cascading ## Angular Grid with Cascading Combos Sample Overview The sample below demonstrates how `Grid` works with nested `Cascading Combos`. ```typescript -import { Component, OnInit, QueryList, ViewChildren, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, inject, OnInit, QueryList, ViewChildren } from '@angular/core'; import { ISimpleComboSelectionChangingEventArgs, IgxSimpleComboComponent } from 'igniteui-angular/simple-combo'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -26,10 +26,11 @@ import { FormsModule } from '@angular/forms'; selector: 'grid-cascading-combos', templateUrl: './grid-cascading-combos.component.html', styleUrls: ['./grid-cascading-combos.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSimpleComboComponent, FormsModule, IgxLinearProgressBarComponent] }) export class GridCascadingCombosComponent implements OnInit { + private cdr = inject(ChangeDetectorRef); + @ViewChildren(IgxSimpleComboComponent) public combos: QueryList; @@ -69,6 +70,7 @@ export class GridCascadingCombosComponent implements OnInit { .map((c) => ({ name: c.region, country: c.country })) .filter((v, i, a) => a.findIndex((r) => r.name === v.name) === i); cell.row.data.loadingRegion = false; + this.cdr.markForCheck(); }, this.loadingTime); this.selectedRegionName = null; this.selectedCityId = null; @@ -93,6 +95,7 @@ export class GridCascadingCombosComponent implements OnInit { (c) => c.region === this.selectedRegionName ); cell.row.data.loadingCity = false; + this.cdr.markForCheck(); }, this.loadingTime); this.selectedCityId = null; this.loadingTime = 0; @@ -134,34 +137,32 @@ export class GridCascadingCombosComponent implements OnInit { -
+ @if (cell.row.data.loadingRegion) { } -
-
+ @if (cell.row.data.loadingCity) { } -
@@ -212,6 +213,12 @@ export class GridCascadingCombosComponent implements OnInit { overflow-x: none; } } + + igx-linear-bar { + position: absolute; + inset-inline: 0; + inset-block-end: 0; + } } } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-editing.md index df6b02b11..6a705c1b8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-editing.md @@ -10,11 +10,11 @@ _premium: true Ignite UI for Angular Grid component provides a great data manipulation capabilities and powerful API for Angular CRUD operations. By default the Grid is using **in cell** editing and different editors will be shown based on the column data type, thanks to the **default cell editing template**. In addition, you can define your own custom templates for update-data actions and to override the default behavior for committing and discarding any changes. ## Angular Grid cell editing and edit templates Example ```typescript -import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxSummaryResult, VerticalAlignment } from 'igniteui-angular/core'; -import { IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryResult, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxToastComponent } from 'igniteui-angular/toast'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IgxButtonDirective, IgxFocusDirective, IgxIconButtonDirective } from 'igniteui-angular/directives'; @@ -54,7 +54,6 @@ class NumberSummary { selector: 'app-grid-editing-sample', styleUrls: ['./grid-editing-sample.component.scss'], templateUrl: './grid-editing-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxButtonDirective, IgxIconComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellEditorTemplateDirective, FormsModule, IgxComboComponent, IgxFocusDirective, IgxIconButtonDirective, IgxToastComponent, IgxDialogComponent, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxDatePickerComponent, IgxCheckboxComponent, DatePipe] }) export class GridEditingSampleComponent implements OnInit, AfterViewInit { @@ -303,7 +302,7 @@ If you want to provide a custom template which will be applied when a cell is in This code is used in the sample below which implements an [`IgxSelectComponent`](../select.md) in the cells of the `Race`, `Class` and `Alignment` columns. ```typescript import { Character } from './characters'; -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellEditorTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; @@ -316,7 +315,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-grid-select-sample', styleUrls: ['./grid-select-sample.component.scss'], templateUrl: './grid-select-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent] }) export class GridSelectComponent implements OnInit { @@ -469,7 +467,7 @@ return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEdit Please check the full sample for further reference: ### Angular Grid Excel Style Editing Sample ```typescript -import { ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { Transaction } from 'igniteui-angular/core'; @@ -481,7 +479,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-excel-style-editing-sample', styleUrls: [`grid-editing-excel-style.component.scss`], templateUrl: 'grid-editing-excel-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridExcelStyleEditingComponent implements OnInit { @@ -720,7 +717,7 @@ export class MyGridEventsComponent { If the value entered in a cell under the **Ordered** column is larger than the available amount (the value under **Units in Stock**), the editing will be cancelled and a toast with an error message will be displayed. The result of the above validation being applied to our `igx-grid` can be seen in the below demo: ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { NgModel } from '@angular/forms'; import { IGridEditEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -733,7 +730,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-editing-event', templateUrl: 'grid-editing-events.component.html', styleUrls: ['grid-editing-events.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxToastComponent] }) export class GridEditingEventsComponent implements OnInit { @@ -835,7 +831,7 @@ The easiest way to apply our theme is with a `sass` `@include` statement in the ### Demo In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [`input-group`](../input-group.md#styling), [`datepicker`](../date-picker.md#styling) & [`checkbox`](../checkbox.md#styling) ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -848,7 +844,6 @@ import { DatePipe } from '@angular/common'; selector: 'app-grid-editing-style-sample', styleUrls: ['./grid-editing-style-sample.component.scss'], templateUrl: './grid-editing-style-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellEditorTemplateDirective, FormsModule, DatePipe] }) export class GridEditingStyleSampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-merging.md index c22cce415..7334b0e1a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-merging.md @@ -10,7 +10,7 @@ _premium: true The Ignite UI for Angular Grid provides a Cell Merging feature that combines two or more adjacent cells with the same value into a single, larger cell. Merging is applied vertically within a column and helps improve readability by reducing duplicate values. The feature can be configured to merge cells either by default matching data values or by applying a custom condition. ## Angular Cell Merging Example ```typescript -import { Component, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { GridCellMergeMode, GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; @@ -25,7 +25,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-grid-groupby-sample', styleUrls: ['./grid-cell-merge-sample.component.scss'], templateUrl: './grid-cell-merge-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxGridComponent, IgxPreventDocumentScrollDirective, @@ -223,7 +222,7 @@ protected customStrategy = new MyCustomStrategy(); ``` ### Demo ```typescript -import { Component, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { GridCellMergeMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { DefaultMergeStrategy } from 'igniteui-angular/core'; @@ -234,7 +233,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-cell-merge-custom-sample', styleUrls: ['./grid-cell-merge-custom-sample.component.scss'], templateUrl: './grid-cell-merge-custom-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxGridComponent, IgxPreventDocumentScrollDirective, diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-selection.md index 867d17a19..e48bcfcba 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-selection.md @@ -13,7 +13,7 @@ But let's dive deeper in each of these options. The sample below demonstrates the three types of Grid's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
```typescript -import { Component, ElementRef, OnInit, Renderer2, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnInit, Renderer2, ViewChild, inject } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; @@ -28,7 +28,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-cell-selection', styleUrls: ['./grid-cellSelection.component.scss'], templateUrl: 'grid-cellSelection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxButtonDirective, IgxIconComponent, IgxSnackbarComponent] }) export class GridCellSelectionComponent implements OnInit { @@ -239,7 +238,7 @@ How to select cells: - Continuous multiple cell selection is available, by clicking with the mouse and dragging. #### Demo ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxToastComponent } from 'igniteui-angular/toast'; @@ -252,7 +251,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-multi-cell-selection-sample', styleUrls: ['./grid-multi-cell-selection.component.scss'], templateUrl: './grid-multi-cell-selection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxToastComponent] }) export class GridMultiCellSelectionComponent { @@ -506,7 +504,7 @@ Afterwards, all we need to do is include the mixin in our component's style (cou With the custom theme applied, the selected grid cells are highlighted with our selected colors: ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { DATA } from '../../data/nwindData'; @@ -516,7 +514,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-multi-cell-selection-style-sample', styleUrls: ['./grid-multi-cell-selection-style.component.scss'], templateUrl: './grid-multi-cell-selection-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective] }) export class GridMultiCellSelectionStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-clipboard-interactions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-clipboard-interactions.md index 100971637..0ccf4c9fc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-clipboard-interactions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-clipboard-interactions.md @@ -10,7 +10,7 @@ _premium: true Copy to clipboard operations are now available in the Grid. This functionality provides a fast, easy and customizable way to copy data of the Angular Data Grid through the current multi cell data select. System Clipboard behavior gives the user ability to copy data from the Grid into Excel or other external programs. ## Angular Grid Clipboard Interactions Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DATA } from '../../data/nwindData'; import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -25,7 +25,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-clipboard-operations-sample', styleUrls: ['grid-clipboard-operations-sample.component.scss'], templateUrl: './grid-clipboard-operations-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSwitchComponent, IgxButtonDirective] }) export class GridClipboardSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-collapsible-column-groups.md index 60922af7c..5b290012e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-collapsible-column-groups.md @@ -10,7 +10,7 @@ _premium: true Multi-column headers allow you to have multiple levels of nested columns and column groups. They also provide the ability to mark each column group as **collapsible**. **Collapsible multi-column headers** make it possible to collapse/expand, i.e. to show and hide the nested headers under the current one, which will give you a shortened/summarized information for example. ## Angular Grid Collapsible Column Groups Overview Example ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -23,7 +23,6 @@ import { DatePipe } from '@angular/common'; selector: 'app-grid-collapsible-column-groups', styleUrls: ['./grid-collapsible-column-groups.component.scss'], templateUrl: './grid-collapsible-column-groups.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnGroupComponent, IgxCollapsibleIndicatorTemplateDirective, IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxColumnComponent, IgxCellTemplateDirective, DatePipe] }) export class GridCollapsibleColumnGroupsComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-hiding.md index 7eb2a88c7..13a8ca158 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-hiding.md @@ -10,7 +10,7 @@ _premium: true The Ignite UI for Angular Grid provides an [`IgxColumnActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent) with an [`IgxColumnHidingDirective`](mcp:get_api_reference?platform=angular&component=IgxColumnHidingDirective) which allows users to perform column hiding directly through the user interface or by using the Angular component. The Material UI Grid has a built-in column hiding UI, which can be used through the Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page. ## Angular Grid Column Hiding Example ```typescript -import { AfterViewInit, Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnInit } from '@angular/core'; import { DATA } from '../../data/customers'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -20,7 +20,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-column-hiding-toolbar-sample', styleUrls: ['./grid-column-hiding-toolbar-sample.component.scss'], templateUrl: './grid-column-hiding-toolbar-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent] }) export class GridColumnHidingToolbarSampleComponent implements OnInit { @@ -289,7 +288,7 @@ We can easily prevent the user from being able to hide columns through the colum If all went well, this is how our column hiding UI component should look like: @@if (igxName === 'IgxGrid') { ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { DATA } from '../../data/customers'; import { IgxColumnActionsComponent, IgxColumnComponent, IgxColumnHidingDirective } from 'igniteui-angular/grids/core'; import { IgxRadioComponent } from 'igniteui-angular/radio'; @@ -300,7 +299,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-column-hiding-sample', styleUrls: ['./grid-column-hiding-sample.component.scss'], templateUrl: './grid-column-hiding-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxColumnActionsComponent, IgxColumnHidingDirective, IgxRadioComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridColumnHidingSampleComponent implements OnInit { @@ -384,7 +382,7 @@ export class GridColumnHidingSampleComponent implements OnInit { } @@if (igxName === 'IgxTreeGrid') { ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; import { IgxColumnActionsComponent, IgxColumnComponent, IgxColumnHidingDirective } from 'igniteui-angular/grids/core'; import { IgxRadioComponent } from 'igniteui-angular/radio'; @@ -395,7 +393,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-column-hiding-sample', styleUrls: ['./tree-grid-column-hiding-sample.component.scss'], templateUrl: './tree-grid-column-hiding-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxColumnActionsComponent, IgxColumnHidingDirective, IgxRadioComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridColumnHidingSampleComponent implements OnInit { @@ -529,7 +526,7 @@ The last step is to **include** the component mixins, each with its respective t ``` ### Demo ```typescript -import { AfterViewInit, Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnInit } from '@angular/core'; import { DATA } from '../../data/customers'; import { IgxColumnActionsComponent, IgxColumnComponent, IgxColumnHidingDirective } from 'igniteui-angular/grids/core'; import { IgxRadioComponent } from 'igniteui-angular/radio'; @@ -540,7 +537,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-column-hiding-toolbar-style', styleUrls: ['./grid-column-hiding-toolbar-style.component.scss'], templateUrl: './grid-column-hiding-toolbar-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxColumnActionsComponent, IgxColumnHidingDirective, IgxRadioComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridColumnHidingToolbarStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-moving.md index 11f52bca9..9603052d2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-moving.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-moving.md @@ -21,7 +21,7 @@ The Grid component in Ignite UI for Angular provides the **Column Moving** featu ``` ## Angular Grid Column Moving Overview Example ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { ColumnType } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -36,7 +36,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-moving-sample', styleUrls: ['./grid-moving-sample.component.scss'], templateUrl: './grid-moving-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxBadgeComponent] }) @@ -239,7 +238,7 @@ The last step is to **include** the component mixins with its respective theme: ``` ### Demo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { ColumnType } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -254,7 +253,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-moving-styled-sample', styleUrls: ['./grid-moving-styled-sample.component.scss'], templateUrl: './grid-moving-styled-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxBadgeComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-pinning.md index 5302cf6f2..415773d92 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-pinning.md @@ -10,7 +10,7 @@ _premium: true A column or multiple columns can be pinned to the left or right side of the Angular UI Grid. **Column Pinning** in Ignite UI for Angular allows the end users to lock column in a particular column order, this will allow them to see it while horizontally scrolling the Grid. The Material UI Grid has a built-in column pinning UI, which can be used through the Grid's toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning API. ## Angular Grid Column Pinning Example ```typescript -import { Component, ViewChild, ViewEncapsulation, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, ViewEncapsulation, OnInit, inject } from '@angular/core'; import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { DATA } from '../../data/customers'; @@ -24,7 +24,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-sample', styleUrls: ['grid-toolbar-pinning.component.scss'], templateUrl: 'grid-toolbar-pinning.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] }) @@ -127,7 +126,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; ``` ### Demo ```typescript -import { Component, ViewChild, ViewEncapsulation, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core'; import { ColumnPinningPosition } from 'igniteui-angular/core'; import { IPinningConfig, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -144,7 +143,6 @@ import { DatePipe } from '@angular/common'; selector: 'app-grid-sample', styleUrls: ['grid-right-pinning.component.scss'], templateUrl: 'grid-right-pinning.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxAvatarComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] }) @@ -291,7 +289,7 @@ img.country-flag { ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. ```typescript -import { Component, ViewChild, ViewEncapsulation, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, ViewEncapsulation, OnInit, inject } from '@angular/core'; import { NgClass } from '@angular/common'; import { IPinningConfig, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -306,7 +304,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-sample', styleUrls: ['grid-toolbar-pinning-both-sides.component.scss'], templateUrl: 'grid-toolbar-pinning-both-sides.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [ NgClass, IgxGridComponent, @@ -444,7 +441,7 @@ public toggleColumn(col: ColumnType) { ``` ### Demo ```typescript -import { Component, ViewChild, ViewEncapsulation, OnInit, AfterViewInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, ViewEncapsulation, OnInit, AfterViewInit, inject } from '@angular/core'; import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; @@ -461,7 +458,6 @@ const FILTERING_ICONS_FONT_SET = 'filtering-icons'; selector: 'app-grid-sample', styleUrls: ['grid-pinning.component.scss'], templateUrl: 'grid-pinning.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent] }) @@ -597,7 +593,7 @@ The easiest way to apply your theme is with a `sass` `@include` statement in the ``` ### Demo ```typescript -import { Component, ViewChild, OnInit, inject, ChangeDetectionStrategy } from "@angular/core"; +import { Component, ViewChild, OnInit, inject } from "@angular/core"; import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; @@ -608,7 +604,6 @@ import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scro selector: "app-grid-sample", styleUrls: ["grid-pinning-styling.component.scss"], templateUrl: "grid-pinning-styling.component.html", - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxGridComponent, IgxPreventDocumentScrollDirective, diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-resizing.md index 8891e7854..fb9422e19 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-resizing.md @@ -10,7 +10,7 @@ _premium: true With deferred grid column resizing, the user will see a temporary resize indicator while the Angular drag resizing operation is in effect. The new grid column width is applied once the drag operation has ended. ## Angular Grid Column Resizing Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { DATA } from '../../data/customers'; @@ -20,7 +20,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-resizing-sample', styleUrls: ['./grid-resizing-sample.component.scss'], templateUrl: 'grid-resizing-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) @@ -131,7 +130,7 @@ Each column can be set to auto-size on initialization by setting `width` to 'aut When the column is first initialized in the view it resolves its width to the size of the longest visible cell or header. Note that cells that are outside of the visible rows are not included. This approach is more performance optimized than auto-sizing post initialization and is recommended especially in cases where you need to auto-size a large number of columns. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DATA } from '../../data/customers'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -141,7 +140,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'grid-column-autosizing-sample', styleUrls: ['./grid-column-autosizing.component.scss'], templateUrl: 'grid-column-autosizing.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) @@ -199,7 +197,7 @@ The last step is to **include** the component mixins with its respective theme: ``` ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { athletesData } from '../../data/athletesData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -209,7 +207,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-resize-line-styling-sample', styleUrls: ['./grid-resize-line-styling-sample.scss'], templateUrl: './grid-resize-line-styling-sample.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-selection.md index 40dadde47..4c062f288 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-selection.md @@ -13,7 +13,7 @@ The Column selection feature provides an easy way to select an entire column wit The sample below demonstrates the three types of Grid's **column selection** behavior. Use the _column selection_ dropdown below to enable each of the available selection modes. *_Contact Title_, _City_ and _Address_ columns are with disabled column selection. ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; @@ -25,7 +25,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-grid-column-selection', templateUrl: './column-selection-sample.component.html', styleUrls: ['./column-selection-sample.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent] }) export class GridColumnSelectionComponent implements OnInit, AfterViewInit { @@ -88,7 +87,7 @@ The default selection mode is `none`. If set to `single` or `multiple` all of th > [`Multi-column Headers`](multi-column-headers.md) don't reflect on the [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable) input. The [`IgxColumnGroupComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) is [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable), if at least one of its children has the selection behavior enabled. In addition, the component is marked as [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=selected) if all of its `selectable` descendants are [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selected). *Under _Country Information_ Column Group only column _City_ and _Postal code_ are selectable. ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { DATA } from '../../data/customers'; @@ -97,7 +96,6 @@ import { DATA } from '../../data/customers'; selector: 'app-gird-column-group-selection', templateUrl: './column-group-selection-sample.component.html', styleUrls: ['./column-group-selection-sample.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxColumnGroupComponent, IgxColumnComponent] }) export class GridColumnGroupSelectionComponent implements OnInit, AfterViewInit { @@ -195,7 +193,7 @@ The last step is to include the custom `igx-grid` theme. ``` ### Demo ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { DATA } from '../../data/customers'; @@ -204,7 +202,6 @@ import { DATA } from '../../data/customers'; selector: 'app-gird-column-selection-styles', templateUrl: './column-selection-styles.component.html', styleUrls: ['./column-selection-styles.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxColumnComponent] }) export class GridColumnSelectionStylesComponent implements OnInit, AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-types.md index d8728215e..bffb7ed1b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-types.md @@ -11,7 +11,7 @@ Ignite UI for Angular Grid provides a default handling of _number_, _string_, _d ## Angular Column Types Example ```typescript /*eslint-disable*/ -import { Component, OnInit, ChangeDetectionStrategy } from "@angular/core"; +import { Component, OnInit } from "@angular/core"; import { registerLocaleData, NgClass } from "@angular/common"; import localeBG from '@angular/common/locales/bg'; import localeDE from '@angular/common/locales/de'; @@ -22,7 +22,8 @@ import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxPrefixD import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxColumnComponent, IgxTimeSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxTimeSummaryOperand } from 'igniteui-angular/core'; import { FormsModule } from "@angular/forms"; import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; @@ -30,7 +31,6 @@ import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scro selector: "grid-column-data-types-sample", styleUrls: ["./grid-column-data-types-sample.component.scss"], templateUrl: "grid-column-data-types-sample.component.html", - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, IgxSelectItemComponent, IgxHintDirective, IgxSuffixDirective, IgxIconComponent, IgxInputGroupComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxInputDirective, NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridColumnDataTypesSampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-conditional-cell-styling.md index e7fe153aa..33eafad0c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-conditional-cell-styling.md @@ -42,7 +42,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. > Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; import { DATA } from '../../data/nwindData'; @@ -52,7 +52,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-row-classes-sample', styleUrls: ['./grid-rowClasses.component.scss'], templateUrl: 'grid-rowClasses.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridRowClassesComponent implements OnInit { @@ -151,7 +150,7 @@ public rowStyles = { ``` ### Demo ```typescript -import { Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, inject } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; @@ -165,7 +164,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-grid-row-styles-sample', styleUrls: ['./grid-rowStyles.component.scss'], templateUrl: 'grid-rowStyles.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, AsyncPipe] }) @@ -175,10 +173,8 @@ export class GridRowStylesComponent { @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; public data: Observable; - public rowStyles = { - background: (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '#FF000088' : '#00000000', - border: (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '2px solid' : '1px solid', - 'border-color': (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '#FF000099' : '#E9E9E9' + public rowClasses = { + 'negative-row': (row: RowType) => +row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0 }; constructor() { @@ -198,7 +194,7 @@ export class GridRowStylesComponent { ```html
+ [autoGenerate]="false" [allowFiltering]="true" [rowClasses]="rowClasses"> @@ -208,20 +204,14 @@ export class GridRowStylesComponent { Change - -
@if (val > 0) { - + } @if (val < 0) { - + } - {{ formatNumber(val) - }} -
+ {{ formatNumber(val) }} @@ -231,18 +221,13 @@ export class GridRowStylesComponent { -
@if (val > 0) { - + } @if (val < 0) { - + } - {{ formatNumber(val) - }}% -
+ {{ formatNumber(val) }}% @@ -259,35 +244,23 @@ export class GridRowStylesComponent {
``` ```scss -.cellAlignSyle { - text-align: right; - float:right; -} -.cellAlignSyle > span { - float:right; -} -.up { - color: green; -} -.down { - color: red; -} -.headerAlignSyle { - text-align: right !important; -} +:host { + igx-badge { + margin-inline-end: auto; + } -.grid__wrapper { - margin: 0 auto; - padding: 16px; -} + ::ng-deep .negative-row { + $bg-color: rgb(253 243 243); -.currency-badge-container { - width: 80px; - float: right; -} + --body-column-border-color-odd: $bg-color; + --body-column-border-color-even: $bg-color; + + background: $bg-color; + --row-border-color: #FF000099; + --row-border-style: dashed; -.badge-left { - float: left; + border-block-start: 1px var(--row-border-style) var(--row-border-color); + } } ```
@@ -351,7 +324,7 @@ public beatsPerMinuteClasses = { > Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { athletesData } from '../../data/athletesData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -362,7 +335,6 @@ import { DecimalPipe, PercentPipe } from '@angular/common'; selector: 'app-grid-conditional-cell-style', styleUrls: ['./grid-conditional-cell-style.component.scss'], templateUrl: './grid-conditional-cell-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, PercentPipe] }) export class GridConditionalCellStyleComponent implements OnInit { @@ -617,7 +589,7 @@ Define a `popin` animation ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -629,7 +601,6 @@ import { JsonPipe } from '@angular/common'; selector: 'app-grid-conditional-cell-style-2', styleUrls: ['./grid-conditional-cell-style-2.component.scss'], templateUrl: './grid-conditional-cell-style-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxGridComponent, IgxColumnComponent, JsonPipe] }) export class GridConditionalCellStyle2Component implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-display-density.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-display-density.md index f3a6d4c39..b9561d5a3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-display-density.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-display-density.md @@ -10,11 +10,11 @@ _premium: true **IgxGrid** design is based on [Material Design Guidelines](https://material.io/design). We currently provide an option to choose between predefined set of size options that will bring a small, medium, or large view respectively. By selecting the right size for your Material UI table / Material UI grid you can significantly improve the user experience when interacting with large amounts of content. ## Angular Grid Size Example ```typescript -import { Component, HostBinding, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { INVOICE_DATA } from '../../data/invoiceData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; import { DatePipe } from '@angular/common'; @@ -39,7 +39,6 @@ class CustomNumberSummary { selector: 'app-grid-displaydensity-sample', styleUrls: ['./grid-displaydensity-sample.component.scss'], templateUrl: './grid-displaydensity-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnGroupComponent, IgxColumnComponent, IgxCellTemplateDirective, DatePipe] }) export class GridDisplayDensitySampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-editing.md index a18d04e7a..581965923 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-editing.md @@ -71,7 +71,7 @@ The grid exposes a wide array of events that provide greater control over the ed - `RowEdit` - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting **Done** does not commit or close the row. **Cancel** button closes the editing process and the transaction without committing the changes. The following sample demonstrates the editing execution sequence in action: ```typescript -import { Component, ElementRef, Renderer2, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, Renderer2, ViewChild, inject } from '@angular/core'; import { contains } from '@igniteui/material-icons-extended'; import { DATA } from '../../data/nwindData'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -85,7 +85,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-editing-lifecycle', templateUrl: 'grid-editing-lifecycle.component.html', styleUrls: ['grid-editing-lifecycle.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxButtonDirective, IgxIconComponent] }) export class GridEditingLifecycleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-excel-style-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-excel-style-filtering.md index 048e98597..7d12eb879 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-excel-style-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-excel-style-filtering.md @@ -10,7 +10,7 @@ _premium: true The grid Excel filtering provides an Excel like filtering UI for any Angular table like the Grid. ## Angular Grid Excel Style Filtering Example ```typescript -import { Component, HostBinding, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; @@ -22,7 +22,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-grid-sample', styleUrls: ['./grid-excel-style-filtering-sample-1.component.scss'], templateUrl: 'grid-excel-style-filtering-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) @@ -182,7 +181,7 @@ Sorting, pinning and hiding features can be removed from the filter menu using t In the sample below **Product Name** and **Discontinued** columns have all four features enabled, **Quantity Per Unit** have all three disabled, **Unit Price** has only sorting and **Order Date** has only pinning and hiding and all are [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable).
```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; import { DATA } from '../../data/nwindData'; @@ -193,7 +192,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-grid-sample', styleUrls: ['./grid-excel-style-filtering-sample-2.component.scss'], templateUrl: 'grid-excel-style-filtering-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) @@ -316,7 +314,7 @@ You could also re-template the Excel style filtering icon in the column header u ```
```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleSearchComponent, IgxExcelStyleSortingComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -328,7 +326,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-grid-sample', styleUrls: ['./grid-excel-style-filtering-sample-3.component.scss'], templateUrl: 'grid-excel-style-filtering-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) @@ -449,7 +446,7 @@ The list items inside the Excel Style Filtering dialog represent the unique valu ## Formatted Values Filtering Strategy By default, the Grid component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { In order to do that you can use the [`FormattedValuesFilteringStrategy`](mcp:get_api_reference?platform=angular&component=FormattedValuesFilteringStrategy). } The following sample demonstrates how to format the numeric values of a column as strings and filter the Grid based on the string values: ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { FormattedValuesFilteringStrategy } from 'igniteui-angular/core'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -461,7 +458,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-sample', styleUrls: ['./grid-formatted-filtering-strategy.component.scss'], templateUrl: 'grid-formatted-filtering-strategy.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class GridFormattedFilteringStrategyComponent implements OnInit { @@ -526,7 +522,6 @@ import { CurrencyPipe } from '@angular/common'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ - changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-grid-external-excel-style-filtering', templateUrl: './grid-external-excel-style-filtering.component.html', styleUrls: ['./grid-external-excel-style-filtering.component.scss'], @@ -630,7 +625,7 @@ The Grid's [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) However, elements that go outside of the grid (e.g. Excel Style filter) will conflict with outside elements with the same `z-index` (e.g. having two grids one under another) resulting in false rendering. The solution for this issue is to set the [`outlet`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=outlet) property to an external outlet directive which allows the overlay elements to always appear on top. ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { DATA } from '../../data/nwindData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -642,7 +637,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-grid-external-outlet', styleUrls: ['./grid-external-outlet-sample.component.scss'], templateUrl: 'grid-external-outlet-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxOverlayOutletDirective, CurrencyPipe] }) @@ -819,7 +813,7 @@ The last step is to **include** each component’s custom theme. We will also se ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { DATA } from '../../data/nwindData'; @@ -830,7 +824,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-grid-esf-style-sample', styleUrls: ['./grid-excel-style-filtering-style.component.scss'], templateUrl: 'grid-excel-style-filtering-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class ExcelStyleFilteringStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-export-excel.md index f31175f1d..26cce3d02 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-export-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-export-excel.md @@ -22,7 +22,7 @@ The sections below walk through setup, usage patterns, and tips for tailoring ea ## Angular Excel Exporter Example This live example demonstrates the standard Excel and PDF export workflow for the Grid—bound data, two export buttons (Excel and PDF), and the resulting `.xlsx` and `.pdf` files with preserved filtering and sorting state. Share it with stakeholders who want to preview the experience before wiring it into their application. ```typescript -import { Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, inject } from '@angular/core'; import { GridColumnDataType, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxExcelExporterService } from 'igniteui-angular/grids/core'; @@ -33,7 +33,6 @@ import { INVOICE_DATA } from '../data/invoiceData'; selector: 'app-excel-export-sample-1', styleUrls: ['./excel-export-sample-1.component.scss'], templateUrl: './excel-export-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent] }) export class ExcelExportSample1Component implements OnInit { @@ -160,7 +159,7 @@ Grouping is a popular way to summarize customer segments, product categories, or If you need flat data in the exported file, clear the grouping prior to calling `export` or handle the `rowExporting` event to reshape the output. Example: ```typescript -import { Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, inject } from '@angular/core'; import { GridColumnDataType, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxExcelExporterService } from 'igniteui-angular/grids/core'; @@ -171,7 +170,6 @@ import { INVOICE_DATA } from '../data/invoiceData'; selector: 'app-excel-export-sample-1', styleUrls: ['./excel-export-sample-1.component.scss'], templateUrl: './excel-export-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent] }) export class ExcelExportSample1Component implements OnInit { @@ -256,7 +254,7 @@ Dashboards often rely on [multi-column headers](multi-column-headers.md) to add } @@if (igxName === 'IgxGrid') { ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -268,7 +266,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-multi-column-headers-export', styleUrls: ['multi-column-headers-export.component.scss'], templateUrl: 'multi-column-headers-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] }) export class GridMultiColumnHeadersExportComponent { @@ -329,7 +326,7 @@ export class GridMultiColumnHeadersExportComponent { } @@if (igxName === 'IgxTreeGrid') { ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -341,7 +338,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-tree-grid-multi-column-headers-export-sample', styleUrls: ['./tree-grid-multi-column-headers-export.component.scss'], templateUrl: './tree-grid-multi-column-headers-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] }) export class TreeGridMultiColumnHeadersExportComponent { @@ -400,7 +396,7 @@ export class TreeGridMultiColumnHeadersExportComponent { } @@if (igxName === 'IgxHierarchicalGrid') { ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -412,7 +408,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-hierarchical-grid-multi-column-export', styleUrls: ['./hierarchical-grid-multi-column-export.component.scss'], templateUrl: 'hierarchical-grid-multi-column-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnGroupComponent, IgxColumnComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-filtering.md index ff362609b..1d9a4690f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-filtering.md @@ -10,7 +10,7 @@ IgniteUI for [Angular Grid component](https://www.infragistics.com/products/igni ## Angular Grid Filtering Example The sample below demonstrates Grid's **Quick filtering** user experience. API [filter()](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filter) method is used to apply _contains_ condition on the _ProductName column_ through external _igxInputGroup component_. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxStringFilteringOperand } from 'igniteui-angular/core'; import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; @@ -23,7 +23,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-grid-sample', styleUrls: ['./grid-filtering-sample.component.scss'], templateUrl: 'grid-filtering-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxInputDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) @@ -318,7 +317,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { ``` ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IFilteringOperation, IgxBooleanFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -330,7 +329,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-grid-custom-filtering', styleUrls: ['./grid-custom-filtering.component.scss'], templateUrl: './grid-custom-filtering.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class GridCustomFilteringComponent implements OnInit { @@ -440,7 +438,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { ## Re-templating filter cell You can add a template marked with `igxFilterCellTemplate` in order to retemplate the filter cell. In the sample below, an input is added for the string columns and IgxDatePicker for the date column. When the user types or selects a value, a filter with contains operator for string columns and equals operator for date columns, is applied using grid's public API. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { ColumnType, GridColumnDataType, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxPickerClearComponent, IgxPickerToggleComponent, IgxStringFilteringOperand } from 'igniteui-angular/core'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxFilterCellTemplateDirective } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -455,7 +453,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-grid-sample', styleUrls: ['./grid-filtering-template-sample.component.scss'], templateUrl: 'grid-filtering-template-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, CurrencyPipe] }) @@ -708,7 +705,7 @@ The last step is to **include** the component mixins, each with its respective t ``` ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { DATA } from '../../data/nwindData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -719,7 +716,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-grid-filtering-style', styleUrls: ['./grid-filtering-style.component.scss'], templateUrl: './grid-filtering-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class GridFilteringStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-grid.md index 43e5feae7..2ac6adb4f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-grid.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-grid.md @@ -63,10 +63,10 @@ Boston Marathon 2021 – In this angular grid example, you can see how users can ```typescript -import { Component, HostListener, OnDestroy, OnInit, ViewChild, ElementRef, AfterViewInit, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostListener, OnDestroy, OnInit, ViewChild, ElementRef, AfterViewInit, DOCUMENT, inject, ChangeDetectorRef } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { CellType, IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; -import { AbsolutePosition, IgxOverlayService, IgxStringFilteringOperand, IgxSummaryResult, OverlayClosingEventArgs, OverlaySettings } from 'igniteui-angular/core'; +import { CellType, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { AbsolutePosition, IgxNumberSummaryOperand, IgxOverlayService, IgxStringFilteringOperand, IgxSummaryResult, OverlayClosingEventArgs, OverlaySettings } from 'igniteui-angular/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -83,12 +83,12 @@ import { IgxSparklineCoreModule } from 'igniteui-angular-charts'; selector: 'app-grid', styleUrls: ['./grid.component.scss'], templateUrl: './grid.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxBadgeComponent, IgxSparklineCoreModule, IgxCircularProgressBarComponent, NgClass, DecimalPipe] }) export class GridComponent implements OnInit, OnDestroy, AfterViewInit { overlayService = inject(IgxOverlayService); private document = inject(DOCUMENT); + private cdr = inject(ChangeDetectorRef); @ViewChild('grid1', { read: IgxGridComponent, static: true }) @@ -125,7 +125,7 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit { set live(val: boolean) { this._live = val; if (this._live) { - this._timer = setInterval(() => this.ticker(), 1500); + this.startTicker(); } else { clearInterval(this._timer); } @@ -150,9 +150,10 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit { this.localData = АthletesData.slice(0, 30).sort((a, b) => b.TrackProgress - a.TrackProgress); this.localData.forEach(rec => this.getSpeed(rec)); this.windowWidth = this.document.defaultView.innerWidth; - this._timer = setInterval(() => this.ticker(), 1500); + this.startTicker(); this.overlayService.closing.subscribe((event: OverlayClosingEventArgs) => { this.showOverlay = false; + this.cdr.markForCheck(); }); } @@ -295,6 +296,13 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit { this.manageRace(); } + private startTicker(): void { + this._timer = setInterval(() => { + this.ticker(); + this.cdr.markForCheck(); + }, 1500); + } + private getRandomNumber(min: number, max: number): number { return Math.round(min + Math.random() * (max - min)); } @@ -1329,7 +1337,7 @@ configuration. Same goes for grouping and editing operations with or without tra ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { GridColumnDataType } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxGridFooterComponent } from 'igniteui-angular/grids/core'; @@ -1341,7 +1349,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-nested-data-bind2', styleUrls: ['./grid-nested-data-bind2.scss'], templateUrl: './grid-nested-data-bind2.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridFooterComponent] }) export class GridNestedDataBindAminoacidComponent implements OnInit { @@ -1480,7 +1487,7 @@ And the result from this configuration is: ```typescript -import { ChangeDetectorRef, Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit, inject } from '@angular/core'; import {EMPLOYEE_DATA} from '../../data/nested-employee-data'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -1494,7 +1501,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-grid-nested-data-bind', styleUrls: ['./grid-nested-data-bind.scss'], templateUrl: './grid-nested-data-bind.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, DatePipe] }) @@ -1589,7 +1595,7 @@ And the result is: ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { DATA } from '../../data/customers'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -1601,7 +1607,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-grid-composite-data', styleUrls: ['./grid-composite-data.component.scss'], templateUrl: './grid-composite-data.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellEditorTemplateDirective, IgxInputGroupComponent, FormsModule, IgxInputDirective] }) export class GridCompositeDataComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-groupby.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-groupby.md index 38aeb929e..8af725f69 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-groupby.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-groupby.md @@ -17,7 +17,7 @@ This example presents the grouping capabilities of a large amount of data. Dragg ```typescript -import { Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { DefaultSortingStrategy, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; import { GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent, IgxGroupByRowTemplateDirective } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -32,7 +32,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-groupby-sample', styleUrls: ['./grid-groupby-sample.component.scss'], templateUrl: './grid-groupby-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent] }) export class GridGroupBySampleComponent { @@ -315,7 +314,7 @@ Groups that span multiple pages are split between them. The group row is visible ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxGroupByRowTemplateDirective } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -329,7 +328,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-group-by-paging-sample', templateUrl: './grid-group-by-paging-sample.component.html', styleUrls: ['./grid-group-by-paging-sample.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent] }) export class GridGroupByPagingSampleComponent { @@ -463,7 +461,7 @@ The sample below demonstrates custom grouping by `Date`, where the date values a ```typescript /* eslint-disable max-len */ -import { Component, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGroupByRowTemplateDirective } from 'igniteui-angular/grids/core'; @@ -480,7 +478,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-groupby-custom-sample', styleUrls: ['./grid-groupby-custom-sample.component.scss'], templateUrl: './grid-groupby-custom-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent, CurrencyPipe, DatePipe] }) export class GridGroupByCustomSampleComponent { @@ -946,7 +943,7 @@ In our example, we need to use `::ng-deep` for our chip theme: ```typescript -import { Component, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { DefaultSortingStrategy, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -959,7 +956,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-groupby-sample', styleUrls: ['./grid-groupby-styling.component.scss'], templateUrl: './grid-groupby-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class GridGroupByStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-keyboard-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-keyboard-navigation.md index f1dce13ec..1b0b37144 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-keyboard-navigation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-keyboard-navigation.md @@ -80,7 +80,7 @@ Practice all of the above mentioned actions in the demo sample below. Focus any /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable no-shadow */ import { animate, state, style, transition, trigger } from '@angular/animations'; -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { CellType, IActiveNodeChangeEventArgs, IgxColumnComponent, IgxColumnGroupComponent, IgxGridDetailTemplateDirective, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; @@ -246,7 +246,6 @@ const summaryCombinations: Item[] = [ ]) ]) ], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridDetailTemplateDirective, IgxColumnGroupComponent, IgxColumnComponent, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class GridKeyboardnavGuide implements OnInit, OnDestroy { @@ -582,7 +581,7 @@ $custom-checkbox-theme: checkbox-theme( ); .list-sample ::ng-deep { - @include checkbox($custom-checkbox-theme); + @include tokens($custom-checkbox-theme); } .sample { @@ -644,7 +643,7 @@ $custom-checkbox-theme: checkbox-theme( /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable no-shadow */ import { animate, state, style, transition, trigger } from '@angular/animations'; -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { CellType, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; @@ -808,7 +807,6 @@ const summaryCombinations: Item[] = [ ]) ]) ], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class HGridKeyboardnavGuide implements OnInit, OnDestroy { @@ -1252,7 +1250,7 @@ $custom-checkbox-theme: checkbox-theme( /* eslint-disable @angular-eslint/component-class-suffix */ /* eslint-disable @typescript-eslint/naming-convention */ import { animate, state, style, transition, trigger } from '@angular/animations'; -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CellType, IActiveNodeChangeEventArgs, IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; @@ -1427,7 +1425,6 @@ const summaryCombinations: Item[] = [ ]) ]) ], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class TGridKeyboardnavGuide implements OnInit, OnDestroy { @@ -1735,7 +1732,7 @@ $custom-checkbox-theme: checkbox-theme( ); .list-sample ::ng-deep { - @include checkbox($custom-checkbox-theme); + @include tokens($custom-checkbox-theme); } .sample { @@ -1838,7 +1835,7 @@ Use the demo below to try out the custom scenarios that we just implemented: - Select a cell and press Enter key a couple of times. Every key press will move the focus to a cell in the next row, under the same column. ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { CellType, GridSelectionMode, IGridKeydownEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -1849,7 +1846,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-custom-kb-navigation-sample', styleUrls: ['./grid-custom-kb-navigation-sample.component.scss'], templateUrl: 'grid-custom-kb-navigation-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-binding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-binding.md index 50e8571cb..dc8e494cc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-binding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-binding.md @@ -58,7 +58,7 @@ In the sample below, the grid has column auto-generation enabled. When you click the column collection is reset, and a new data source is bound to the grid. ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { GridLiteDataService, ProductInfo, UserSimple } from '../grid-lite-data.service'; import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite'; @@ -68,7 +68,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-grid-lite-data-binding-dynamic', templateUrl: './grid-lite-data-binding-dynamic.component.html', styleUrls: ['./grid-lite-data-binding-dynamic.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [ CommonModule, IgxGridLiteComponent, diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-cell-template.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-cell-template.md index 0719e314d..e74c0ce93 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-cell-template.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-cell-template.md @@ -143,7 +143,7 @@ export interface IgxGridLiteCellTemplateContext { ``` ```typescript -import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service'; @@ -156,7 +156,6 @@ defineComponents(IgcRatingComponent); templateUrl: './grid-lite-column-config-simple.component.html', styleUrls: ['./grid-lite-column-config-simple.component.scss'], imports: [CommonModule, IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective], - changeDetection: ChangeDetectionStrategy.Eager, schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class GridLiteColumnConfigSimpleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-column-configuration.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-column-configuration.md index 646f5df38..3327c1018 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-column-configuration.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-column-configuration.md @@ -95,7 +95,7 @@ If a column is set to be resizable, you can drag the right size of the column he In the sample below you can try out the different column properties and how they reflect in the rendered grid. ```typescript -import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; @@ -125,7 +125,6 @@ defineComponents(IgcRatingComponent); IgxSwitchComponent ], schemas: [CUSTOM_ELEMENTS_SCHEMA], - changeDetection: ChangeDetectionStrategy.Eager, standalone: true }) export class GridLiteColumnConfigDynamicComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-filtering.md index c30ecc50e..4d70a7d65 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-filtering.md @@ -37,7 +37,7 @@ column.filteringCaseSensitive = true; ``` ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents'; import { GridLiteDataService, User } from '../grid-lite-data.service'; @@ -50,7 +50,6 @@ defineComponents(IgcCheckboxComponent); selector: 'app-grid-lite-filtering-simple', templateUrl: './grid-lite-filtering-simple.component.html', styleUrls: ['./grid-lite-filtering-simple.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [ CommonModule, IgxGridLiteComponent, @@ -208,7 +207,7 @@ onFiltered(event: IgxFilteredEvent) { ... } ``` ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents'; import { GridLiteDataService, User } from '../grid-lite-data.service'; @@ -225,7 +224,6 @@ defineComponents(IgcCheckboxComponent); selector: 'app-grid-lite-filtering-events', templateUrl: './grid-lite-filtering-events.component.html', styleUrls: ['./grid-lite-filtering-events.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [ CommonModule, IgxGridLiteComponent, @@ -377,7 +375,7 @@ The custom callback can be async as the grid will wait for it until it resolves. The following example mocks remote filter operation, reflecting the REST endpoint generated based on the filter state of the component. ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { defineComponents, IgcCheckboxComponent, IgcCircularProgressComponent } from 'igniteui-webcomponents'; import { GridLiteDataService, User } from '../grid-lite-data.service'; @@ -391,7 +389,6 @@ defineComponents(IgcCheckboxComponent, IgcCircularProgressComponent); selector: 'app-grid-lite-filtering-pipeline', templateUrl: './grid-lite-filtering-pipeline.component.html', styleUrls: ['./grid-lite-filtering-pipeline.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [ CommonModule, IgxGridLiteComponent, diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-header-template.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-header-template.md index 84a91ae59..44a04f8ec 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-header-template.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-header-template.md @@ -57,7 +57,7 @@ import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTempla ``` ```typescript -import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service'; @@ -76,7 +76,6 @@ defineComponents(IgcRatingComponent); IgxGridLiteCellTemplateDirective, IgxGridLiteHeaderTemplateDirective ], - changeDetection: ChangeDetectionStrategy.Eager, schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class GridLiteColumnConfigHeadersComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-overview.md index e451e407b..8e7cf28e1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-overview.md @@ -23,7 +23,7 @@ Angular Add Floating Pane
-
+ [columnSelection]="'multiple'" [cellSelection]="'none'"> @@ -455,7 +455,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
@@ -493,7 +493,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
@@ -531,7 +531,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
@@ -571,12 +571,36 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi -
``` ```scss @use 'igniteui-dockmanager/dist/collection/styles/igc.themes'; @use '../../variables' as *; +// Set the grid's background/foreground/accent tokens; the grid's derived-themes +// layer cascades them to the paginator, scrollbars, chips, drop-downs, select, +// excel filter, etc. Scoped mode emits the short `--background`/`--foreground`/ +// `--accent-color` aliases the derived layer reads first. +$finjs-grid-accent-color: var(--ig-primary-500); +$finjs-grid-background: var(--ig-surface-500); +$finjs-grid-foreground: var(--ig-surface-500-contrast); + +$finjs-dark-grid-theme: grid-theme( + $schema: $dark-material-schema, + $background: $finjs-grid-background, + $foreground: $finjs-grid-foreground, + $accent-color: $finjs-grid-accent-color, +); + +$finjs-light-grid-theme: grid-theme( + $schema: $light-material-schema, + $background: $finjs-grid-background, + $foreground: $finjs-grid-foreground, + $accent-color: $finjs-grid-accent-color, +); + +@include tokens($finjs-dark-grid-theme, $mode: 'scoped', $scope: '.dark-theme igx-grid'); +@include tokens($finjs-light-grid-theme, $mode: 'scoped', $scope: '.light-theme igx-grid'); + .actionItem { margin-block-end: rem(20px); } @@ -620,7 +644,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi .negative.strongNegative { .igx-grid__td-text { - color: color(null, 'success', 500, .8) !important; + color: color(null, 'error', 500, .8) !important; } } @@ -759,10 +783,6 @@ igx-grid { } } } - -igx-select { - --ig-size: var(--ig-size-small); -} ``` ### Start the hub connection The signal-r.service handles the connectivity and updates of the exposed manageable parameters _frequency_, _volume_ and _live-update state toggle_ (Start/Stop). diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-master-detail.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-master-detail.md index 90112530c..a4a0ec0b4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-master-detail.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-master-detail.md @@ -18,12 +18,12 @@ This mode is useful when you need to display master-detail style data in a hiera ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxColumnComponent, IgxGridDetailTemplateDirective } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; import { employeesData } from '../../data/employeesData'; import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive'; @@ -32,8 +32,7 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/dir selector: 'app-grid-master-detail', styleUrls: ['./grid-master-detail.component.scss'], templateUrl: 'grid-master-detail.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule] }) export class GridMasterDetailSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-column-headers.md index e5aa935c1..96c0d7b62 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-column-headers.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-column-headers.md @@ -10,7 +10,7 @@ _premium: true [`IgxGrid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) supports `multi-column headers` which allows you to group columns by placing them under a common multi headers. Each multi-column headers group could be a representation of combinations between other groups or columns within the Material UI grid. ## Angular Grid Multi-column Headers Overview Example ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -21,7 +21,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-multi-column-headers', styleUrls: ['multi-column-headers.scss'], templateUrl: 'multi-column-headers.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxButtonDirective] }) export class GridMultiColumnHeadersComponent { @@ -115,7 +114,7 @@ If you want to re-use a single template for several column groups, you could set ``` The following sample demonstrates how to implement collapsible column groups using header templates. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -126,7 +125,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-multi-column-header-template', styleUrls: ['multi-column-header-template.scss'], templateUrl: 'multi-column-header-template.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent] }) export class GridMultiColumnHeaderTemplateComponent { @@ -186,7 +184,7 @@ The last step is to **include** the component mixins: ``` ### Demo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { DATA } from '../../data/customers'; @@ -196,7 +194,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-multi-column-headers-styling', styleUrls: ['./multi-column-headers-styling.component.scss'], templateUrl: './multi-column-headers-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent] }) export class GridMultiColumnHeadersStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-row-layout.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-row-layout.md index 01d605673..37717aea6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-row-layout.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-row-layout.md @@ -10,7 +10,7 @@ _premium: true Multi-row Layout extends the rendering capabilities of the `igxGridComponent`. The feature allows splitting a single data record into multiple visible rows. ## Angular Multi-row Layout Example ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxColumnLayoutComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; @@ -22,7 +22,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-multi-row-layout-sample', styleUrls: ['./grid-multi-row-layout.component.scss'], templateUrl: './grid-multi-row-layout.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnLayoutComponent, IgxColumnComponent] }) export class GridMultiRowLayoutComponent { @@ -151,7 +150,7 @@ The grid allows customizing the default navigation behavior when a certain key i The demo below adds additional navigation down/up via the Enter and Shift + Enter keys, similar to the behavior observed in Excel. ### Demo ```typescript -import { Component, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxColumnLayoutComponent } from 'igniteui-angular/grids/core'; import { DATA } from '../../data/company-data'; @@ -162,7 +161,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-mrl-custom-navigation-sample', styleUrls: ['./grid-mrl-custom-navigation.component.scss'], templateUrl: './grid-mrl-custom-navigation.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnLayoutComponent, IgxColumnComponent] }) export class GridMRLCustomNavigationComponent { @@ -271,7 +269,7 @@ In order for the custom theme do affect only specific component, you can move al This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component. ### Demo ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxColumnLayoutComponent } from 'igniteui-angular/grids/core'; @@ -282,7 +280,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-multi-row-layout-styling-sample', styleUrls: ['./grid-multi-row-layout-styling.component.scss'], templateUrl: './grid-multi-row-layout-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnLayoutComponent, IgxColumnComponent] }) export class GridMultiRowLayoutStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paging.md index 647d8dab6..c1312f518 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paging.md @@ -11,7 +11,7 @@ Pagination is used to split a large set of data into a sequence of pages that ha ## Angular Pagination Example The following example represents Grid pagination and exposes the options usage of `items per page` and how paging can be enabled. The user can also quickly navigate through the Grid pages via "Go to last page" and "Go to first page" buttons. ```typescript -import { Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -25,7 +25,6 @@ import { DecimalPipe } from '@angular/common'; selector: 'app-grid-sample', styleUrls: ['./grid-paging-sample.component.scss'], templateUrl: 'grid-paging-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxLinearProgressBarComponent, DecimalPipe] }) @@ -87,7 +86,7 @@ $progressBar-sample-theme: progress-linear-theme( ); .grid__wrapper { - @include progress-linear($progressBar-sample-theme); + @include tokens($progressBar-sample-theme); --ig-size: var(--ig-size-medium); margin: 0 16px; @@ -149,7 +148,7 @@ The `igx-paginator` component is used along with the `igx-grid` component in the ``` ### Paginator Component Demo ```typescript -import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef, PLATFORM_ID, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef, PLATFORM_ID, inject } from '@angular/core'; import { athletesData } from '../../data/athletesData'; import { IPaginatorResourceStrings } from 'igniteui-angular/core'; import { IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; @@ -164,7 +163,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-grid-pager-sample', styleUrls: ['./grid-pager-sample.component.scss'], templateUrl: './grid-pager-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent, FormsModule, DecimalPipe] }) export class GridPagerSampleComponent implements OnInit, AfterViewInit { @@ -325,7 +323,7 @@ The last step is to **include** the component mixins, each with its respective t ``` ### Pagination Style Example ```typescript -import { Component, ViewChild, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, OnInit } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -339,7 +337,6 @@ import { DecimalPipe } from '@angular/common'; selector: 'app-custom-grid-paging-style-sample', styleUrls: ['custom-grid-paging-style.component.scss'], templateUrl: 'custom-grid-paging-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconButtonDirective, IgxIconComponent, DecimalPipe] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paste-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paste-excel.md index ce328a9d4..e1647d628 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paste-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paste-excel.md @@ -26,7 +26,7 @@ The new data after the paste is decorated in Italic. ```typescript -import { Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, inject } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; @@ -43,7 +43,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-paste-sample', styleUrls: ['./grid-paste-sample.component.scss'], templateUrl: './grid-paste-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxGridComponent, PasteHandler, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridPasteSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-remote-data-operations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-remote-data-operations.md index 4e0c632e6..9f18b0d56 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-remote-data-operations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-remote-data-operations.md @@ -10,7 +10,7 @@ _premium: true The Ignite UI for Angular Grid supports remote data operations such as remote virtualization, remote sorting, remote filtering and others. This allows the developer to perform these tasks on a server, retrieve the data that is produced and display it in the Grid. ## Angular Grid Remote Data Operations Overview Example ```typescript -import { ChangeDetectorRef, Component, OnInit, ViewChild, AfterViewInit, OnDestroy, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit, ViewChild, AfterViewInit, OnDestroy, inject } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { NoopFilteringStrategy, NoopSortingStrategy } from 'igniteui-angular/core'; import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -28,7 +28,6 @@ const DEBOUNCE_TIME = 300; selector: 'app-grid-remote-filtering-sample', styleUrls: ['./remote-filtering-sample.component.scss'], templateUrl: './remote-filtering-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, AsyncPipe] }) export class RemoteFilteringSampleComponent implements OnInit, AfterViewInit, OnDestroy { @@ -256,13 +255,13 @@ When requesting data, you need to utilize the [`IForOfState`](mcp:get_api_refere >The first [`chunkSize`](mcp:get_api_reference?platform=angular&component=IForOfState&member=chunkSize) will always be 0 and should be determined by you based on the specific application scenario. ### Remote Virtualization Demo ```typescript -import { ChangeDetectorRef, Component, TemplateRef, ViewChild, OnInit, AfterViewInit, OnDestroy, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, TemplateRef, ViewChild, OnInit, AfterViewInit, OnDestroy, inject } from '@angular/core'; import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; import { debounceTime } from 'rxjs/operators'; import { RemoteServiceVirt } from '../../services/remoteVirtualization.service'; -import { AsyncPipe } from '@angular/common'; +import { AsyncPipe, NgTemplateOutlet } from '@angular/common'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ @@ -270,8 +269,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-remote-virtualization-sample', styleUrls: ['grid-sample-4.component.scss'], templateUrl: 'grid-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxCellTemplateDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxBadgeComponent, AsyncPipe] + imports: [IgxCellTemplateDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxBadgeComponent, AsyncPipe, NgTemplateOutlet] }) export class GridRemoteVirtualizationSampleComponent implements OnInit, AfterViewInit, OnDestroy{ @@ -557,7 +555,7 @@ public handlePreLoad() { ``` ### Infinite Scroll Demo ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, ViewChild, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, ViewChild, OnInit, inject } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; @@ -570,7 +568,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-remote-virtualization-sample', styleUrls: ['grid-sample-5.component.scss'], templateUrl: 'grid-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent] }) @@ -826,7 +823,7 @@ public columnValuesStrategy = (column: ColumnType, ``` ### Unique Column Values Strategy Demo ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { ColumnType, IFilteringExpressionsTree } from 'igniteui-angular/core'; import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -838,7 +835,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro styleUrls: ['./grid-excel-style-filtering-load-on-demand.component.scss'], templateUrl: './grid-excel-style-filtering-load-on-demand.component.html', providers: [RemoteValuesService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] }) export class GridExcelStyleFilteringLoadOnDemandComponent implements OnInit { @@ -1006,7 +1002,7 @@ public paginate(page: number) { } ``` ```typescript -import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation, inject } from '@angular/core'; import { GridPagingMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -1021,7 +1017,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-remote-paging-default-template', styleUrls: ['./remote-paging-default-template.component.scss'], templateUrl: './remote-paging-default-template.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, AsyncPipe] }) export class RemotePagingDefaultTemplateComponent implements OnInit, AfterViewInit, OnDestroy { @@ -1163,7 +1158,7 @@ The last step will be to declare the paginator content based on your requirement ``` After all the changes above, the following result will be achieved. ```typescript -import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation, inject } from '@angular/core'; import { GridPagingMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; @@ -1177,7 +1172,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-remote-paging-grid-sample', styleUrls: ['./remote-paging-sample.component.scss'], templateUrl: './remote-paging-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, AsyncPipe] }) export class RemotePagingGridSampleComponent implements OnInit, AfterViewInit, OnDestroy { @@ -1272,7 +1266,7 @@ export class RemotePagingGridSampleComponent implements OnInit, AfterViewInit, O ### Remote Paging with custom paginator In some cases you may want to define your own paging behavior and this is when we can take advantage of the Paging template and add our custom logic along with it. We are going to extend the Remote Paging example in order to demonstrate this: ```typescript -import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation, inject } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; @@ -1288,7 +1282,6 @@ import { RouterLink } from '@angular/router'; selector: 'app-custom-remote-paging-grid-sample', styleUrls: ['./custom-remote-paging-sample.component.scss'], templateUrl: './custom-remote-paging-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxButtonDirective, RouterLink, AsyncPipe] }) export class CustomRemotePagingGridSampleComponent implements OnInit, AfterViewInit, OnDestroy { @@ -1599,7 +1592,7 @@ As you can see in the **paginate** method, custom pagination logic is performed, #### Remote Paging with Batch Editing Demo ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { Transaction } from 'igniteui-angular/core'; @@ -1617,7 +1610,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-remote-paging-batch-editing', styleUrls: ['./batch-editing-remote-paging.component.scss'], templateUrl: './batch-editing-remote-paging.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxDialogComponent, AsyncPipe] }) export class RemotePagingBatchEditingComponent implements OnInit, AfterViewInit, OnDestroy { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-actions.md index f9eae2445..3603ab088 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-actions.md @@ -54,7 +54,7 @@ These components expose templates giving flexibility for customization. For inst ``` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxGridPinningActionsComponent, RowType } from 'igniteui-angular/grids/core'; import { Transaction } from 'igniteui-angular/core'; @@ -69,7 +69,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-row-action-strip', styleUrls: [`grid-action-strip-sample.scss`], templateUrl: 'grid-action-strip-sample.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class GridActionStripSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-adding.md index c7f4674ad..cae6f1f1d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-adding.md @@ -11,7 +11,7 @@ The Grid provides a convenient way to perform data manipulations through inline ## Angular Grid Row Adding Example The following sample demonstrates how to enable native row adding in the Grid. Changing a cell value and then clicking or navigating to another cell on the same row doesn't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DATA } from '../../data/nwindData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellEditorTemplateDirective, IgxColumnComponent, IgxGridEditingActionsComponent } from 'igniteui-angular/grids/core'; @@ -24,7 +24,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-grid-add-row', styleUrls: [`grid-add-row-sample.component.scss`], templateUrl: 'grid-add-row-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxFocusDirective, IgxActionStripComponent, IgxGridEditingActionsComponent] }) export class GridAddRowSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-drag.md index 7e9a980e9..ce14edcad 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-drag.md @@ -11,7 +11,7 @@ In Ignite UI for Angular Grid, **RowDrag** is initialized on the root `igx-grid` ## Angular Grid Row Drag Example ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -28,7 +28,6 @@ enum DragIcon { selector: 'app-grid-row-drag-base-sample', styleUrls: ['./grid-row-drag-base.component.scss'], templateUrl: 'grid-row-drag-base.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxDropDirective] }) @@ -265,7 +264,7 @@ The drag ghost can be templated using the `IgxRowDragGhost` directive, applied t The result of the configuration can be seem below in a `igx-grid` with row dragging and multiple selection enabled. The demo shows the count of the currently dragged rows: #### Example Demo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxRowDragGhostDirective } from 'igniteui-angular/grids/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -276,7 +275,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-multiple-row-drag', styleUrls: ['./grid-multiple-row-drag.component.scss'], templateUrl: './grid-multiple-row-drag.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowDragGhostDirective, IgxIconComponent, IgxDropDirective] }) export class GridMultipleRowDragComponent { @@ -452,7 +450,7 @@ The result of the configuration can be seem below: #### Example Demo ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxDragIndicatorIconDirective } from 'igniteui-angular/grids/core'; @@ -470,7 +468,6 @@ enum DragIcon { selector: 'app-grid-row-drag-to-grid-sample', styleUrls: ['./grid-row-drag-to-grid.component.scss'], templateUrl: 'grid-row-drag-to-grid.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxDragIndicatorIconDirective, IgxIconComponent, IgxDropDirective] }) @@ -575,7 +572,7 @@ The following demo demonstrates how to use row drag event information to change Try to drag moons from the grid and drop them to their corresponding planets. Row drag ghost background is dynamically changed, depending on the hovered planet. If you succeed then the row in the grid will be selected and dragging will be disabled for it. Clicking planets will give you useful information. ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, ViewChildren, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChildren } from '@angular/core'; import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxDropDirective } from 'igniteui-angular/directives'; @@ -594,7 +591,6 @@ enum HoverClassList { selector: 'app-grid-row-drag-sample', styleUrls: ['./grid-row-drag.component.scss'], templateUrl: 'grid-row-drag.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, PlanetComponent, IgxDropDirective] }) @@ -795,7 +791,7 @@ export class GridRowReorderComponent { With these few easy steps, you've configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo. Holding onto the drag icon will allow you to move a row anywhere in the grid: ```typescript -import { Component, QueryList, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, QueryList, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxRowDirective, RowType } from 'igniteui-angular/grids/core'; import { IgxDropDirective } from 'igniteui-angular/directives'; @@ -806,7 +802,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-row-reorder-sample', styleUrls: ['grid-row-reorder.scss'], templateUrl: 'grid-row-reorder.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridRowReorderComponent { @@ -1041,7 +1036,7 @@ class MyGridScrollComponent { ``` Following is the example of both scenarios described above - showing a drop indicator and scrolling the viewport when border's edge is reached. ```typescript -import { Component, ViewChild, AfterViewInit, OnDestroy, Renderer2, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, AfterViewInit, OnDestroy, Renderer2, inject } from '@angular/core'; import { IDragMoveEventArgs, IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IRowDragStartEventArgs, IgxColumnComponent, IgxRowDirective } from 'igniteui-angular/grids/core'; @@ -1055,7 +1050,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-drop-indicator', styleUrls: ['grid-drop-indicator.scss'], templateUrl: 'grid-drop-indicator.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridDropIndicatorComponent implements AfterViewInit, OnDestroy { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-editing.md index 951903335..3aa6e753b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-editing.md @@ -11,7 +11,7 @@ The Grid provides a convenient way to perform data manipulations through inline ## Angular Grid Row Editing Example The following sample demonstrates how to enable row editing in the Grid. Changing a cell value and then clicking or navigating to another cell on the same row won't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DATA } from '../../data/nwindData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellEditorTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -24,7 +24,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-grid-row-edit', styleUrls: [`grid-row-editing-sample.component.scss`], templateUrl: 'grid-row-editing-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxFocusDirective] }) export class GridRowEditSampleComponent { @@ -231,7 +230,7 @@ We scope our `@include` statement in `.custom-buttons` so that it is only applie ### Demo After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.md#styling). The result of all the combined styles can be seen below: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DATA } from '../../data/nwindData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellEditorTemplateDirective, IgxColumnComponent, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective } from 'igniteui-angular/grids/core'; @@ -245,7 +244,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-grid-row-edit-style', styleUrls: [`grid-row-editing-style.component.scss`], templateUrl: 'grid-row-editing-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxFocusDirective, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxIconButtonDirective, IgxRowEditTabStopDirective, IgxIconComponent] }) export class GridRowEditStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-pinning.md index 3fa29f4f7..df6c5610a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-pinning.md @@ -10,7 +10,7 @@ _premium: true One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. **Row Pinning** in Ignite UI for Angular allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the Grid vertically. The Material UI Grid has a built-in row pinning UI, which is enabled by initializing an `igxActionStrip` component in the context of Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API. ## Angular Grid Row Pinning Example ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IPinningConfig, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -22,7 +22,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-row-pinning', templateUrl: 'grid-row-pinning.component.html', styleUrls: ['./grid-row-pinning.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent] }) @@ -159,7 +158,7 @@ public togglePinning(row: IgxGridRow, event) { ``` #### Demo ```typescript -import { AfterViewInit, Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, ViewChild, inject } from '@angular/core'; import { ColumnPinningPosition } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; @@ -175,7 +174,6 @@ const FILTERING_ICONS_FONT_SET = 'filtering-icons'; selector: 'app-grid-row-pinning-extra-column', templateUrl: 'grid-row-pinning-extra-column.component.html', styleUrls: ['./grid-row-pinning-extra-column.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent] }) @@ -303,7 +301,7 @@ public onDropAllowed(args) { This would allow reordering the rows and moving them between the pinned and unpinned row collections. #### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IPinningConfig, IRowDragStartEventArgs, IgxColumnComponent, IgxGridPinningActionsComponent, IgxRowDirective, RowPinningPosition, RowType } from 'igniteui-angular/grids/core'; @@ -315,7 +313,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-row-pinning-drag-sample', styleUrls: ['./grid-row-pinning-drag.component.scss'], templateUrl: 'grid-row-pinning-drag.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent] }) @@ -485,7 +482,7 @@ The last step is to pass the custom grid theme: ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IPinningConfig, IgxColumnComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; @@ -496,7 +493,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-row-pinning-styling', templateUrl: 'grid-row-pinning-styling.component.html', styleUrls: ['./grid-row-pinning-styling.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-selection.md index 329d87bb7..0083709db 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-selection.md @@ -21,7 +21,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) { } ``` ```typescript -import { Component, ElementRef, OnInit, Renderer2, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnInit, Renderer2, ViewChild, inject } from '@angular/core'; import { GridSelectionMode, IRowSelectionEventArgs, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -44,7 +44,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'grid-sample', styleUrls: ['./grid-selection.component.scss'], templateUrl: 'grid-selection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, IgxButtonDirective, IgxIconComponent, IgxSnackbarComponent, AsyncPipe] }) @@ -527,7 +526,7 @@ The `selectedCount` and `totalCount` properties can be used to determine if the ### Row Numbering Demo This demo shows the usage of custom header and row selectors. The latter uses `rowContext.index` to display row numbers and an `igx-checkbox` bound to `rowContext.selected`. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DATA } from '../../data/customers'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -539,7 +538,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-selection-template-numbers', styleUrls: ['./grid-sample-selection-template-numbers.component.scss'], templateUrl: 'grid-sample-selection-template-numbers.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxHeadSelectorDirective, IgxRowSelectorDirective, IgxCheckboxComponent] }) @@ -616,7 +614,7 @@ export class GridSelectionTemplateNumbersComponent { ### Excel Style Row Selectors Demo This demo uses custom templates to resemble Excel-like header and row selectors. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DATA } from '../../data/customers'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -628,7 +626,6 @@ import { NgClass } from '@angular/common'; selector: 'app-grid-selection-template-excel', styleUrls: ['./grid-sample-selection-template-excel.component.scss'], templateUrl: 'grid-sample-selection-template-excel.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxHeadSelectorDirective, NgClass, IgxRowSelectorDirective] }) @@ -718,7 +715,7 @@ $default-arrow-all-color: color($color: 'secondary', $variant: 100); ### Conditional Selection Demo This demo prevents some rows from being selected using the `rowSelectionChanging` event and a custom template with disabled checkbox for non-selectable rows. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IRowSelectionEventArgs, IgxColumnComponent, IgxRowSelectorDirective } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -730,7 +727,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-conditional-row-selectors', styleUrls: ['./grid-conditional-row-selectors-sample.component.scss'], templateUrl: 'grid-conditional-row-selectors-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowSelectorDirective, IgxCheckboxComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-search.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-search.md index 7d3f880d1..9708fcecd 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-search.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-search.md @@ -11,7 +11,7 @@ Angular Grid search enables the process of finding values in the collection of d ## Angular Search Example The following example represents Grid with search input box that allows searching in all columns and rows, as well as specific filtering options for each column. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -27,7 +27,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-search-sample', styleUrls: ['./grid-search-sample.component.scss'], templateUrl: './grid-search-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxChipsAreaComponent, IgxChipComponent, IgxIconButtonDirective, IgxRippleDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridSearchSampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection-based-aggregates.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection-based-aggregates.md index 3462d0332..43660d574 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection-based-aggregates.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection-based-aggregates.md @@ -49,10 +49,10 @@ Change the selection to see summaries of the currently selected range. ```typescript import { formatDate } from '@angular/common'; -import { AfterViewInit, Component, ViewChild, OnInit, ChangeDetectorRef, inject, ChangeDetectionStrategy } from '@angular/core'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxDateSummaryOperand, IgxGridFooterComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { AfterViewInit, Component, ViewChild, OnInit, ChangeDetectorRef, inject } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridFooterComponent } from 'igniteui-angular/grids/core'; +import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxSummaryResult } from 'igniteui-angular/core'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -86,7 +86,6 @@ class MySummary { selector: 'app-grid-sample', styleUrls: ['./grid-custom-summaries-selection.component.scss'], templateUrl: 'grid-custom-summaries-selection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxGridFooterComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection.md index 83c80fa45..cdf30bfbc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection.md @@ -11,7 +11,7 @@ With Ignite UI for Angular Grid you can easily select data by using variety of e The sample below demonstrates the three types of Grid's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
```typescript -import { Component, ElementRef, OnInit, Renderer2, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnInit, Renderer2, ViewChild, inject } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; @@ -26,7 +26,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-cell-selection', styleUrls: ['./grid-cellSelection.component.scss'], templateUrl: 'grid-cellSelection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxButtonDirective, IgxIconComponent, IgxSnackbarComponent] }) export class GridCellSelectionComponent implements OnInit { @@ -330,7 +329,7 @@ The template we are going to use to combine the grid with the context menu: Select multiple cells and press the `right mouse` button. The context menu will appear and after selecting `Copy cells data` the selected data will appear in the right empty box. The result is: ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -343,7 +342,6 @@ import { ContextmenuComponent } from './contextmenu/contextmenu.component'; selector: 'app-grid-contextmenu-sample', styleUrls: ['./grid-contextmenu-sample.component.scss'], templateUrl: './grid-contextmenu-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, ContextmenuComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-sorting.md index 844e81cdc..ffd3b4cc6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-sorting.md @@ -13,7 +13,7 @@ In Ignite UI for Angular Grid, data sorting is enabled on a per-column level, me ## Angular Grid Sorting Overview Example ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, AfterViewInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, ISortingOptions, SortingDirection } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; @@ -29,7 +29,6 @@ import { UpperCasePipe } from '@angular/common'; selector: 'app-grid-sample', styleUrls: ['./grid-sorting-sample.component.scss'], templateUrl: 'grid-sorting-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxButtonDirective, IgxGridToolbarActionsComponent, IgxSimpleComboComponent, FormsModule, IgxComboClearIconDirective, IgxComboItemDirective, IgxColumnComponent, IgxCellTemplateDirective, UpperCasePipe] }) @@ -51,7 +50,7 @@ export class SortingSampleComponent implements OnInit, AfterViewInit { public ngOnInit(): void { this.data = DATA; } - + public ngAfterViewInit(): void { this.grid1.sortingExpressions = [ { @@ -141,7 +140,7 @@ Having a certain amount of sorted columns could be really confusing if there is The **IgxGrid** provides a solution for this problem by indicating the index of each sorted column. @@if(igxName === "IgxGrid"){ ```typescript -import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { DefaultSortingStrategy } from 'igniteui-angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -153,7 +152,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-sorting-indicators', templateUrl: './grid-sorting-indicators.component.html', styleUrls: ['./grid-sorting-indicators.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridSortingIndicatorsComponent implements OnInit, AfterViewInit { @@ -315,7 +313,7 @@ The last step is to **include** the component mixins: ### Demo ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; @@ -335,7 +333,6 @@ enum TYPE { selector: 'app-grid-sorting-styling', styleUrls: ['./grid-sorting-styling.component.scss'], templateUrl: 'grid-sorting-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent, IgxCellTemplateDirective] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-state-persistence.md index e8f7854a0..8051f8147 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-state-persistence.md @@ -129,10 +129,10 @@ public onColumnInit(column: IgxColumnComponent) { ## Demo ```typescript /* eslint-disable max-len */ -import { Component, OnInit, ViewChild, ViewChildren, QueryList, AfterViewInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, ViewChildren, QueryList, AfterViewInit, inject } from '@angular/core'; import { NavigationStart, Router, RouterLink } from '@angular/router'; -import { FilteringExpressionsTree, FilteringLogic, IgxSummaryResult } from 'igniteui-angular/core'; -import { GridFeatures, IGridState, IGridStateOptions, IgxColumnComponent, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { FilteringExpressionsTree, FilteringLogic, IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; +import { GridFeatures, IGridState, IGridStateOptions, IgxColumnComponent, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -161,7 +161,6 @@ class MySummary { selector: 'app-grid', styleUrls: ['./grid-state.component.scss'], templateUrl: './grid-state.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridStateDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] }) @@ -264,7 +263,7 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit { public resetGridState() { const grid: IgxGridComponent = this.grid; - const pagingState = {index: 0, recordsPerPage: 15, metadata: { countPages: 3, countRecords: this.localData.length}}; + const pagingState = { index: 0, recordsPerPage: 15, metadata: { countPages: 3, countRecords: this.localData.length, error: 0 } }; grid.pagingState = pagingState; grid.filteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); grid.advancedFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); @@ -457,7 +456,7 @@ public restoreState() { } ``` ```typescript -import { Component, TemplateRef, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, TemplateRef, ViewChild, inject } from '@angular/core'; import { IGridStateOptions, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridStateDirective } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -476,7 +475,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-grid-state-persistance-sample', styleUrls: ['./grid-state-persistance-sample.component.scss'], templateUrl: 'grid-state-persistance-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridStateDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxBadgeComponent, AsyncPipe] }) @@ -501,7 +499,7 @@ export class GridStatePersistenceSampleComponent { @ViewChild('startY', { static: true }) public startYTemplate: TemplateRef; @ViewChild('changeOnYear', { static: true }) public changeOnYearTemplate: TemplateRef; @ViewChild('changePercentage', { static: true }) public changePercentageTemplate: TemplateRef; - + public data: Observable; public customStrategy = NoopSortingStrategy.instance(); public options: IGridStateOptions = { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-summaries.md index 05231321f..0119010cb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-summaries.md @@ -10,10 +10,10 @@ _premium: true The Angular UI grid in Ignite UI for Angular has a **summaries** feature that functions on a per-column level as group footer. Angular grid summaries is powerful feature which enables the user to see column information in a separate container with a predefined set of default summary items, depending on the type of data within the column or by implementing a custom angular template in the Grid. ## Angular Grid Summaries Overview Example ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { ColumnType, IgxSummaryResult } from 'igniteui-angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { ColumnType, IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { DATA } from '../../data/nwindData'; @@ -37,7 +37,6 @@ class MySummary { selector: 'app-grid-sample-3', styleUrls: ['./grid-sample-3.component.scss'], templateUrl: './grid-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] }) export class GridSample3Component { @@ -328,10 +327,10 @@ class MySummary extends IgxNumberSummaryOperand { } ``` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -367,7 +366,6 @@ class DiscontinuedSummary { selector: 'app-grid-all-data-summary', styleUrls: ['./grid-allData-summary.component.scss'], templateUrl: './grid-allData-summary.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] }) export class GridAllDataSummaryComponent { @@ -423,9 +421,9 @@ When a default summary is defined, the height of the summary area is calculated > [!NOTE] > Column summary template could be defined through API by setting the column [summaryTemplate](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=summaryTemplate) property to the required TemplateRef. ```typescript -import { Component, HostBinding, OnInit, ChangeDetectionStrategy } from '@angular/core'; -import { IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { Component, HostBinding, OnInit } from '@angular/core'; +import { IgxColumnComponent, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; @@ -464,7 +462,6 @@ class DiscontinuedSummary { selector: 'app-grid-summary-template', styleUrls: ['./grid-summary-template.component.scss'], templateUrl: './grid-summary-template.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSummaryTemplateDirective] }) export class GridSummaryTemplateComponent implements OnInit { @@ -646,8 +643,8 @@ import { ChangeDetectionStrategy } from "@angular/core"; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; -import { ConnectedPositioningStrategy, HorizontalAlignment, IgxSummaryResult, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { ConnectedPositioningStrategy, HorizontalAlignment, IgxNumberSummaryOperand, IgxSummaryResult, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core'; import { IgxButtonDirective, IgxToggleDirective } from 'igniteui-angular/directives'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; import { DATA } from "../../data/nwindData"; @@ -785,7 +782,6 @@ class DiscontinuedSummary { selector: "app-grid-summary-sample", styleUrls: ["./grid-disable-summaries.component.scss"], templateUrl: "grid-disable-summaries.component.html", - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxGridComponent, IgxPreventDocumentScrollDirective, @@ -1087,10 +1083,10 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp ``` ```typescript import { DatePipe } from '@angular/common'; -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxDateSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxDateSummaryOperand, IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxSummaryResult } from 'igniteui-angular/core'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -1098,7 +1094,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-summary-formatter', styleUrls: ['./grid-summary-formatter.component.scss'], templateUrl: './grid-summary-formatter.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) @@ -1168,9 +1163,9 @@ The [`showSummaryOnCollapse`](mcp:get_api_reference?platform=angular&component=I > The [`summaryPosition`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=summaryPosition) property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the Grid. ### Demo ```typescript -import { Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; -import { DefaultSortingStrategy, GridSummaryCalculationMode, ISortingExpression, IgxSummaryResult, SortingDirection } from 'igniteui-angular/core'; -import { GridSelectionMode, GridSummaryPosition, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { DefaultSortingStrategy, GridSummaryCalculationMode, ISortingExpression, IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult, SortingDirection } from 'igniteui-angular/core'; +import { GridSelectionMode, GridSummaryPosition, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -1208,7 +1203,6 @@ class SumSummary { selector: 'app-grid-groupby-summary-sample', styleUrls: ['./grid-groupby-summary-sample.component.scss'], templateUrl: './grid-groupby-summary-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridGroupBySummarySampleComponent { @@ -1340,17 +1334,10 @@ igx-buttongroup{ There is an [`exportSummaries`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterOptions&member=exportSummaries) option in `IgxExcelExporterOptions` that specifies whether the exported data should include the grid's summaries. Default `exportSummaries` value is **false**. The [`IgxExcelExporterService`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) will export the default summaries for all column types as their equivalent excel functions so they will continue working properly when the sheet is modified. Try it for yourself in the example below: ```typescript -import { Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; -import { ColumnType, IgxSummaryResult } from 'igniteui-angular/core'; +import { Component, ViewChild, inject } from '@angular/core'; +import { ColumnType, IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxExcelExporterOptions, IgxExcelExporterService } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { - IgxCellHeaderTemplateDirective, - IgxCellTemplateDirective, - IgxColumnComponent, - IgxNumberSummaryOperand, - IgxExcelExporterOptions, - IgxExcelExporterService -} from 'igniteui-angular/grids/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { DATA } from '../../data/nwindData'; @@ -1374,7 +1361,6 @@ class MySummary { selector: 'app-grid-summary-export', styleUrls: ['./grid-summary-export.component.scss'], templateUrl: './grid-summary-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] }) export class GridSummaryExportComponent { @@ -1624,9 +1610,9 @@ The last step is to **include** the component custom theme: ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; -import { DefaultSortingStrategy, GridSummaryCalculationMode, ISortingExpression, IgxSummaryResult, SortingDirection } from 'igniteui-angular/core'; -import { GridSelectionMode, GridSummaryPosition, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { DefaultSortingStrategy, GridSummaryCalculationMode, ISortingExpression, IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult, SortingDirection } from 'igniteui-angular/core'; +import { GridSelectionMode, GridSummaryPosition, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { INVOICE_DATA } from '../../data/invoiceData'; @@ -1654,7 +1640,6 @@ class CustomSummary { selector: 'app-grid-groupby-summary-sample', styleUrls: ['./grid-groupby-summary-styling-sample.component.scss'], templateUrl: './grid-groupby-summary-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] }) export class GridGroupBySummaryStylingSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-toolbar.md index e41b1bae8..e060bd87c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-toolbar.md @@ -15,7 +15,7 @@ The Grid in Ignite UI for Angular provides an [`IgxGridToolbarComponent`](mcp:ge or just any other custom content. The toolbar and the predefined UI components support Angular events and expose API for developers. ## Angular Toolbar Grid Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { athletesData } from '../../data/athletesData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -26,7 +26,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-toolbar-sample-1', styleUrls: ['./grid-toolbar-sample-1.component.scss'], templateUrl: './grid-toolbar-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class GridToolbarSample1Component { @@ -154,7 +153,7 @@ These features can be enabled independently from each other by following a patte the Ignite UI for Angular suite. Listed below are the main features of the toolbar with example code for each of them. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { AbsoluteScrollStrategy, AutoPositionStrategy, GlobalPositionStrategy } from 'igniteui-angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -171,7 +170,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-toolbar-sample-2', styleUrls: ['./grid-toolbar-sample-2.component.scss'], templateUrl: './grid-toolbar-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class GridToolbarSample2Component { @@ -491,7 +489,7 @@ configureExport(args: IGridToolbarExportEventArgs) { ``` The following sample demonstrates how to customize the exported files: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { CsvFileTypes, IColumnExportingEventArgs, @@ -515,7 +513,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-toolbar-sample-3', styleUrls: ['./grid-toolbar-sample-3.component.scss'], templateUrl: './grid-toolbar-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class GridToolbarSample3Component { @@ -638,7 +635,7 @@ Moreover, users can set the toolbar [showProgress](mcp:get_api_reference?platfor or just as another way to signify an action taking place in the grid. The sample below has significant amount of data. While the data is being exported, the progress bar is shown. Additionally, it has another button that simulates a long running operation in the grid: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject, ChangeDetectorRef } from '@angular/core'; import { DATA } from '../../data/nwindData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent } from 'igniteui-angular/grids/core'; @@ -650,10 +647,10 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-grid-export-visualization', templateUrl: './grid-export-visualization.component.html', styleUrls: ['./grid-export-visualization.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class GridExportVisualizationComponent { + private cdr = inject(ChangeDetectorRef); public localData = []; constructor() { for (let i = 0; i < 1000; i++) { @@ -673,7 +670,10 @@ export class GridExportVisualizationComponent { longRunning(toolbar: any) { toolbar.showProgress = true; - setTimeout(() => toolbar.showProgress = false, 5000); + setTimeout(() => { + toolbar.showProgress = false; + this.cdr.markForCheck(); + }, 5000); } } ``` @@ -752,7 +752,7 @@ Here is a sample snippet: ``` The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { athletesData } from '../../data/athletesData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -765,7 +765,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-toolbar-sample-4', styleUrls: ['./grid-toolbar-sample-4.component.scss'], templateUrl: './grid-toolbar-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class GridToolbarSample4Component { @@ -932,7 +931,7 @@ The last step is to **include** the newly created themes. ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { athletesData } from '../../data/athletesData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -943,7 +942,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-toolbar-style', styleUrls: ['./grid-toolbar-style.component.scss'], templateUrl: './grid-toolbar-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class GridToolbarStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-validation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-validation.md index cc7ffe353..578efb8b3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-validation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-validation.md @@ -24,7 +24,7 @@ To validate that a column input would be set and the value is going to be format ``` The following sample demonstrates how to use the prebuilt `required`, `email` and `min` validator directives in a Grid. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { employeesData } from '../../data/employeesData'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -37,7 +37,6 @@ import { DatePipe } from '@angular/common'; selector: 'app-grid-validator-service', styleUrls: ['./grid-validator-service.component.scss'], templateUrl: './grid-validator-service.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, IgxColumnMinValidatorDirective, DatePipe] }) export class GridValidatorServiceComponent { @@ -189,8 +188,8 @@ public cellEdit(evt) { ### Example The below example demonstrates the above-mentioned customization options. ```typescript -import { Component, Directive, Input, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { AbstractControl, FormGroup, NG_VALIDATORS, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { Component, Directive, forwardRef, Input, ViewChild } from '@angular/core'; +import { AbstractControl, NG_VALIDATORS, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IGridFormGroupCreatedEventArgs, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; @@ -207,7 +206,7 @@ export function phoneFormatValidator(phoneReg: RegExp): ValidatorFn { @Directive({ selector: '[phoneFormat]', - providers: [{ provide: NG_VALIDATORS, useExisting: PhoneFormatDirective, multi: true }] + providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => PhoneFormatDirective), multi: true }] }) export class PhoneFormatDirective extends Validators { @Input('phoneFormat') @@ -223,7 +222,6 @@ export class PhoneFormatDirective extends Validators { selector: 'app-grid-validator-service-extended', styleUrls: ['./grid-validator-service-extended.component.scss'], templateUrl: './grid-validator-service-extended.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, PhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxColumnMinValidatorDirective, IgxButtonDirective, DatePipe] }) export class GridValidatorServiceExtendedComponent { @@ -478,7 +476,7 @@ public stateMessage(cell: CellType) { ### Cross-field example The below sample demonstrates the cross-field validation in action. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn, FormsModule } from '@angular/forms'; import { CellType, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -492,7 +490,6 @@ import { NgTemplateOutlet, DatePipe } from '@angular/common'; selector: 'app-grid-validator-service-cross-field', styleUrls: ['./grid-validator-service-cross-field.component.scss'], templateUrl: './grid-validator-service-cross-field.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxColumnMinValidatorDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxButtonDirective, DatePipe] }) export class GridValidatorServiceCrossFieldComponent { @@ -786,7 +783,7 @@ public cellStyles = { ``` ### Demo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { DATA } from '../../data/nwindData'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, RowType } from 'igniteui-angular/grids/core'; @@ -797,7 +794,6 @@ import { NgTemplateOutlet } from '@angular/common'; selector: 'app-grid-validation-style', styleUrls: [`grid-validation-style.component.scss`], templateUrl: 'grid-validation-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet] }) export class GridValidationStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-virtualization.md index 3f38a6591..6ef4a3259 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-virtualization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-virtualization.md @@ -10,7 +10,7 @@ _premium: true In Ignite UI for Angular, the [IgxGrid](mcp:get_api_reference?platform=angular&component=IgxGridComponent) control now utilizes the [`igxForOf`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) directive and virtualizes its content both vertically and horizontally. ## Angular Grid Virtualization and Performance Example ```typescript -import { Component, Injectable, ViewChild, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, Injectable, ViewChild, OnInit, inject } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -25,7 +25,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-grid-sample', styleUrls: ['./grid-sample-2.component.scss'], templateUrl: 'grid-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, AsyncPipe] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-advanced-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-advanced-filtering.md index e2a9a7692..6529f26e8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-advanced-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-advanced-filtering.md @@ -11,7 +11,7 @@ _premium: true The Advanced filtering provides a dialog which allows the creation of groups with filtering conditions across all columns for any [Angular table](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) like the Hierarchical Grid. ## Angular Hierarchical Grid Advanced Filtering Example ```typescript -import { Component, AfterViewInit, ViewChild, ChangeDetectorRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, AfterViewInit, ViewChild, ChangeDetectorRef, inject } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; @@ -22,7 +22,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-advanced-filtering', styleUrls: ['./hierarchical-grid-advanced-filtering.component.scss'], templateUrl: 'hierarchical-grid-advanced-filtering.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] }) @@ -37,7 +36,7 @@ export class HGridAdvancedFilteringSampleComponent implements AfterViewInit{ constructor() { this.localData = SINGERS; } - + public ngAfterViewInit() { const albumsTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Albums', ['Artist']); albumsTree.filteringOperands.push({ @@ -195,7 +194,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-external-advanced-filtering', templateUrl: './hierarchical-grid-external-advanced-filtering.component.html', styleUrls: ['./hierarchical-grid-external-advanced-filtering.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAdvancedFilteringDialogComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent] }) export class HGridExternalAdvancedFilteringComponent { @@ -333,7 +331,7 @@ $custom-query-builder: query-builder-theme( ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; @@ -343,7 +341,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-advanced-filtering-style', styleUrls: ['./hierarchical-grid-advanced-filtering-style.component.scss'], templateUrl: 'hierarchical-grid-advanced-filtering-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-batch-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-batch-editing.md index 850a2b553..f9b845285 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-batch-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-batch-editing.md @@ -16,7 +16,7 @@ Below is a detailed example of how is Batch Editing enabled for the Hierarchical The following sample demonstrates a scenario, where the hierarchicalGrid has [`batchEditing`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=batchEditing) enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed. ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { Transaction } from 'igniteui-angular/core'; @@ -34,7 +34,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-hierarchical-grid-batch-editing', styleUrls: ['./hierarchical-grid-batch-editing.component.scss'], templateUrl: 'hierarchical-grid-batch-editing.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxDialogComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxCheckboxComponent, IgxGridComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-editing.md index ee5d7c5d3..402345b93 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-editing.md @@ -12,11 +12,11 @@ Ignite UI for Angular Hierarchical Grid component provides a great data manipula ## Angular Hierarchical Grid cell editing and edit templates Example ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -53,7 +53,6 @@ class MySummary { selector: 'app-hierarchical-grid-editing', styleUrls: ['./hierarchical-grid-editing.component.scss'], templateUrl: 'hierarchical-grid-editing.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconButtonDirective, IgxIconComponent, IgxRowIslandComponent, IgxDialogComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxCheckboxComponent] }) @@ -263,7 +262,7 @@ If you want to provide a custom template which will be applied when a cell is in This code is used in the sample below which implements an [`IgxSelectComponent`](../select.md) in the cells of the `Race`, `Class` and `Alignment` columns. ```typescript import { Character } from './characters'; -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellEditorTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; @@ -276,7 +275,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-grid-select-sample', styleUrls: ['./grid-select-sample.component.scss'], templateUrl: './grid-select-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent] }) export class GridSelectComponent implements OnInit { @@ -442,7 +440,7 @@ export class MyHGridEventsComponent { Here, we are validating two columns. If the user tries to change an artist's **Debut** year or an album's **Launch Date**, the grid will not allow any dates that are greater than today. The result of the above validation being applied to our `igx-hierarchical-grid` can be seen in the below demo: ```typescript -import { Component, OnDestroy, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IGridEditEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxToastComponent } from 'igniteui-angular/toast'; @@ -457,7 +455,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-editing-events', styleUrls: ['./hierarchical-grid-editing-events.component.scss'], templateUrl: 'hierarchical-grid-editing-events.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxToastComponent] }) @@ -573,7 +570,7 @@ The easiest way to apply our theme is with a `sass` `@include` statement in the ### Demo In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [`input-group`](../input-group.md#styling), [`datepicker`](../date-picker.md#styling) & [`checkbox`](../checkbox.md#styling) ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { SINGERS } from '../../data/singersData'; @@ -584,7 +581,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-editing-style', styleUrls: ['./hierarchical-grid-editing-style.component.scss'], templateUrl: 'hierarchical-grid-editing-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-merging.md index c7a89ccf0..0577e347b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-merging.md @@ -10,7 +10,7 @@ _premium: true The Ignite UI for Angular Hierarchical Grid provides a Cell Merging feature that combines two or more adjacent cells with the same value into a single, larger cell. Merging is applied vertically within a column and helps improve readability by reducing duplicate values. The feature can be configured to merge cells either by default matching data values or by applying a custom condition. ## Angular Cell Merging Example ```typescript -import { ChangeDetectorRef, Component, ContentChild, inject, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, ContentChild, inject, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { GridCellMergeMode, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { SortingDirection } from 'igniteui-angular/core'; @@ -24,7 +24,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-hierarchical-grid-cell-merge', styleUrls: ['./hierarchical-grid-cell-merge.component.scss'], templateUrl: 'hierarchical-grid-cell-merge.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, @@ -193,7 +192,7 @@ protected customStrategy = new MyCustomStrategy(); ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { HIERARCHICAL_DATA_EXTENDED } from '../../data/hierarchical-data-extended'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { GridCellMergeMode, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; @@ -207,7 +206,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-hierarchical-grid-cell-merge-custom', styleUrls: ['./hierarchical-grid-cell-merge-custom.component.scss'], templateUrl: 'hierarchical-grid-cell-merge-custom.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-selection.md index 1fa87edfe..5366c8e20 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-selection.md @@ -14,7 +14,7 @@ The selection feature enables rich data select capabilities in the Material UI b The sample below demonstrates the three types of Hierarchical Grid's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -28,7 +28,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-cell-selection', styleUrls: ['./hierarchical-grid-cellSelection.component.scss'], templateUrl: 'hierarchical-grid-cellSelection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxSnackbarComponent, IgxIconComponent] }) export class HierarchicalGridCellSelectionComponent implements OnInit { @@ -245,7 +244,7 @@ Afterwards, all we need to do is include the mixin in our component's style (cou With the custom theme applied, the selected grid cells are highlighted with our selected colors: ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { CUSTOMERS } from '../../data/hierarchical-data'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -255,7 +254,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-multi-cell-style', styleUrls: ['./hierarchical-grid-multi-cell-style.component.scss'], templateUrl: 'hierarchical-grid-multi-cell-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-collapsible-column-groups.md index 78e15e14a..61f4db9f4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-collapsible-column-groups.md @@ -11,7 +11,7 @@ _premium: true Multi-column headers allow you to have multiple levels of nested columns and column groups. They also provide the ability to mark each column group as **collapsible**. **Collapsible multi-column headers** make it possible to collapse/expand, i.e. to show and hide the nested headers under the current one, which will give you a shortened/summarized information for example. ## Angular Grid Collapsible Column Groups Overview Example ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -23,7 +23,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-collapsible-column-groups', styleUrls: ['./hierarchical-grid-collapsible-column-groups.component.scss'], templateUrl: 'hierarchical-grid-collapsible-column-groups.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnGroupComponent, IgxCollapsibleIndicatorTemplateDirective, IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxColumnComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-hiding.md index a2b28a2ce..bc91bc50d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-hiding.md @@ -11,7 +11,7 @@ _premium: true The Ignite UI for Angular Hierarchical Grid provides an [`IgxColumnActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent) with an [`IgxColumnHidingDirective`](mcp:get_api_reference?platform=angular&component=IgxColumnHidingDirective) which allows users to perform column hiding directly through the user interface or by using the Angular component. The Material UI Grid has a built-in column hiding UI, which can be used through the Hierarchical Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page. ## Angular Hierarchical Grid Column Hiding Example ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -21,7 +21,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-hiding', styleUrls: ['./hierarchical-grid-hiding.component.scss'], templateUrl: 'hierarchical-grid-hiding.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] }) @@ -287,7 +286,7 @@ The last step is to **include** the component mixins, each with its respective t ``` ### Demo ```typescript -import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; import { SINGERS } from '../../data/singersData'; @@ -297,7 +296,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-column-hiding-toolbar-style', styleUrls: ['./hierarchical-grid-column-hiding-toolbar-style.component.scss'], templateUrl: './hierarchical-grid-column-hiding-toolbar-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] }) export class HierarchicalGridColumnHidingToolbarStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-moving.md index 228852488..391381348 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-moving.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-moving.md @@ -22,7 +22,7 @@ The Hierarchical Grid component in Ignite UI for Angular provides the **Column M ``` ## Angular Hierarchical Grid Column Moving Overview Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -34,7 +34,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-moving', styleUrls: ['./hierarchical-grid-moving.component.scss'], templateUrl: 'hierarchical-grid-moving.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxRowIslandComponent] }) @@ -285,7 +284,7 @@ The last step is to **include** the component mixins with its respective theme: ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -297,7 +296,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-moving-styled', styleUrls: ['./hierarchical-grid-moving-styled.component.scss'], templateUrl: 'hierarchical-grid-moving-styled.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-pinning.md index b533af2c4..c9d988bc2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-pinning.md @@ -11,7 +11,7 @@ _premium: true A column or multiple columns can be pinned to the left or right side of the Angular UI Grid. **Column Pinning** in Ignite UI for Angular allows the end users to lock column in a particular column order, this will allow them to see it while horizontally scrolling the Hierarchical Grid. The Material UI Grid has a built-in column pinning UI, which can be used through the Hierarchical Grid's toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning API. ## Angular Hierarchical Grid Column Pinning Example ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { CUSTOMERS } from '../../data/hierarchical-data'; import { ActivatedRoute } from '@angular/router'; import { NgClass } from '@angular/common'; @@ -23,7 +23,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-toolbar-pinning', styleUrls: ['./hierarchical-grid-toolbar-pinning.component.scss'], templateUrl: 'hierarchical-grid-toolbar-pinning.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxRowIslandComponent] }) export class HGridToolbarPinningComponent implements OnInit { @@ -141,7 +140,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { ColumnPinningPosition } from 'igniteui-angular/core'; import { IPinningConfig, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; @@ -159,7 +158,6 @@ import { DatePipe } from '@angular/common'; selector: 'hierarchical-grid-sample', styleUrls: ['hierarchical-grid-right-pinning.component.scss'], templateUrl: 'hierarchical-grid-right-pinning.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxAvatarComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxRowIslandComponent, DatePipe] }) @@ -319,7 +317,7 @@ img.country-flag { ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. ```typescript -import { Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from "@angular/core"; +import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core"; import { ColumnPinningPosition, ColumnType } from 'igniteui-angular/core'; import { IPinningConfig, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; @@ -336,7 +334,6 @@ import { DatePipe } from "@angular/common"; selector: "hierarchical-grid-sample-both-side-pinning", styleUrls: ["hierarchical-grid-both-sides-pinning.component.scss"], templateUrl: "hierarchical-grid-both-sides-pinning.component.html", - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxHierarchicalGridComponent, IgxGridToolbarComponent, @@ -595,7 +592,7 @@ public toggleColumn(col: ColumnType) { ``` ### Demo ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, inject } from '@angular/core'; import { ColumnType } from 'igniteui-angular/core'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -609,7 +606,6 @@ const FILTERING_ICONS_FONT_SET = 'filtering-icons'; selector: 'app-hierarchical-grid-pinning', styleUrls: ['./hierarchical-grid-pinning.component.scss'], templateUrl: 'hierarchical-grid-pinning.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-resizing.md index d7e650928..bb91704b2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-resizing.md @@ -11,7 +11,7 @@ _premium: true With deferred grid column resizing, the user will see a temporary resize indicator while the Angular drag resizing operation is in effect. The new grid column width is applied once the drag operation has ended. ## Angular Hierarchical Grid Column Resizing Example ```typescript -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { RemoteValuesService } from '../../services/remoteValues.service'; @@ -23,7 +23,6 @@ import { IgxSparklineCoreModule } from 'igniteui-angular-charts'; styleUrls: ['./hierarchical-grid-resizing.component.scss'], templateUrl: 'hierarchical-grid-resizing.component.html', providers: [RemoteValuesService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSparklineCoreModule, IgxRowIslandComponent] }) @@ -210,7 +209,7 @@ Each column can be set to auto-size on initialization by setting `width` to 'aut When the column is first initialized in the view it resolves its width to the size of the longest visible cell or header. Note that cells that are outside of the visible rows are not included. This approach is more performance optimized than auto-sizing post initialization and is recommended especially in cases where you need to auto-size a large number of columns. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { CUSTOMERS } from '../../data/hierarchical-data'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -219,7 +218,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'hierarchical-grid-column-autosizing', styleUrls: ['./hgrid-column-autosizing.component.scss'], templateUrl: './hgrid-column-autosizing.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] }) @@ -305,7 +303,7 @@ The last step is to **include** the component mixins with its respective theme: ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -315,7 +313,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-resize-line-styling', styleUrls: ['./hierarchical-grid-resize-line-styling.component.scss'], templateUrl: './hierarchical-grid-resize-line-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HGridResizeLineStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-selection.md index a31aefb9d..293bf0a9c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-selection.md @@ -14,7 +14,7 @@ The Column selection feature provides an easy way to select an entire column wit The sample below demonstrates the three types of Hierarchical Grid's **column selection** behavior. Use the _column selection_ dropdown below to enable each of the available selection modes. *_Photo_ and _Debut_ are with disabled column selection. ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; @@ -27,7 +27,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-hierarchical-grid-column-selection', templateUrl: './hierarchical-grid-column-selection.component.html', styleUrls: ['./hierarchical-grid-column-selection.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HierarchicalGridColumnSelectionComponent implements OnInit, AfterViewInit { @@ -123,7 +122,7 @@ The default selection mode is `none`. If set to `single` or `multiple` all of th > [`Multi-column Headers`](multi-column-headers.md) don't reflect on the [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable) input. The [`IgxColumnGroupComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) is [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable), if at least one of its children has the selection behavior enabled. In addition, the component is marked as [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=selected) if all of its `selectable` descendants are [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selected). *Under _Location_ Column Group only column _City_ is selectable. ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { CUSTOMERS } from '../../data/hierarchical-data'; @@ -133,7 +132,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-column-group-selection', templateUrl: './hierarchical-grid-column-group-selection.component.html', styleUrls: ['./hierarchical-grid-column-group-selection.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent] }) export class HierarchicalGridColumnGroupSelectionComponent implements OnInit, AfterViewInit { @@ -263,7 +261,7 @@ The last step is to include the custom `igx-grid` theme. ``` ### Demo ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { SINGERS } from '../../data/singersData'; @@ -273,7 +271,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-column-selection-styles', templateUrl: './hierarchical-grid-column-selection-styles.component.html', styleUrls: ['./hierarchical-grid-column-selection-styles.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HGridColumnSelectionStylesComponent implements OnInit, AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-conditional-cell-styling.md index 8b930d70b..fd1149d7e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-conditional-cell-styling.md @@ -43,7 +43,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. ### Demo ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; import { IgxIconButtonDirective } from 'igniteui-angular/directives'; @@ -54,7 +54,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hgrid-row-classes', styleUrls: ['./hgrid-rowClasses.component.scss'], templateUrl: 'hgrid-rowClasses.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconButtonDirective, IgxIconComponent, IgxRowIslandComponent] }) @@ -187,7 +186,7 @@ public childRowStyles = { ### Demo ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; import { IgxIconButtonDirective } from 'igniteui-angular/directives'; @@ -198,7 +197,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hgrid-row-row-styles', styleUrls: ['./hgrid-rowStyles.component.scss'], templateUrl: 'hgrid-rowStyles.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconButtonDirective, IgxIconComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-display-density.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-display-density.md index 60777e695..b28fd8120 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-display-density.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-display-density.md @@ -11,7 +11,7 @@ _premium: true **IgxHierarchicalGrid** design is based on [Material Design Guidelines](https://material.io/design). We currently provide an option to choose between predefined set of size options that will bring a small, medium, or large view respectively. By selecting the right size for your Material UI table / Material UI grid you can significantly improve the user experience when interacting with large amounts of content. ## Angular Hierarchical Grid Size Example ```typescript -import { Component, HostBinding, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -22,7 +22,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-density', styleUrls: ['./hierarchical-grid-density.component.scss'], templateUrl: 'hierarchical-grid-density.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-editing.md index d1193cffe..f4d8d2a72 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-editing.md @@ -72,7 +72,7 @@ The grid exposes a wide array of events that provide greater control over the ed - `RowEdit` - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting **Done** does not commit or close the row. **Cancel** button closes the editing process and the transaction without committing the changes. The following sample demonstrates the editing execution sequence in action: ```typescript -import { Component, ElementRef, Renderer2, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, Renderer2, ViewChild, inject } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; @@ -85,7 +85,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hgrid-editing-lifecycle', templateUrl: 'hgrid-editing-lifecycle.component.html', styleUrls: ['hgrid-editing-lifecycle.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxButtonDirective, IgxIconComponent] }) export class HGridEditingLifecycleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-excel-style-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-excel-style-filtering.md index d84c748c0..98ae57bee 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-excel-style-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-excel-style-filtering.md @@ -11,7 +11,7 @@ _premium: true The grid Excel filtering provides an Excel like filtering UI for any Angular table like the Hierarchical Grid. ## Angular Hierarchical Grid Excel Style Filtering Example ```typescript -import { Component, HostBinding, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; @@ -22,7 +22,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-excel-style-filtering-sample-1', styleUrls: ['./hierarchical-grid-excel-style-filtering-sample-1.component.scss'], templateUrl: 'hierarchical-grid-excel-style-filtering-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) @@ -197,7 +196,7 @@ Sorting, pinning and hiding features can be removed from the filter menu using t In the sample below 'Artist' column have all three features enabled, 'Debut' have all three disabled, 'Grammy Nominations' has only pinning and hiding.
```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; @@ -207,7 +206,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-excel-style-filtering-sample-2', styleUrls: ['./hierarchical-grid-excel-style-filtering-sample-2.component.scss'], templateUrl: 'hierarchical-grid-excel-style-filtering-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) @@ -336,7 +334,7 @@ You could also re-template the Excel style filtering icon in the column header u ```
```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleSearchComponent, IgxExcelStyleSortingComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; @@ -347,7 +345,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-excel-style-filtering-sample-3', styleUrls: ['./hierarchical-grid-excel-style-filtering-sample-3.component.scss'], templateUrl: 'hierarchical-grid-excel-style-filtering-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) @@ -472,7 +469,7 @@ The list items inside the Excel Style Filtering dialog represent the unique valu ## Formatted Values Filtering Strategy By default, the Hierarchical Grid component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { In order to do that you can use the [`FormattedValuesFilteringStrategy`](mcp:get_api_reference?platform=angular&component=FormattedValuesFilteringStrategy). } The following sample demonstrates how to format the numeric values of a column as strings and filter the Hierarchical Grid based on the string values: ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { FormattedValuesFilteringStrategy } from 'igniteui-angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -483,7 +480,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-formatted-filtering-strategy', styleUrls: ['./hierarchical-grid-formatted-filtering-strategy.component.scss'], templateUrl: 'hierarchical-grid-formatted-filtering-strategy.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] }) @@ -555,7 +551,6 @@ import { SINGERS } from '../../data/singersData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ - changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-hierarchical-grid-external-excel-style-filtering', templateUrl: './hierarchical-grid-external-excel-style-filtering.component.html', styleUrls: ['./hierarchical-grid-external-excel-style-filtering.component.scss'], @@ -682,7 +677,7 @@ The Hierarchical Grid's [`z-index`](https://developer.mozilla.org/en-US/docs/Web However, elements that go outside of the grid (e.g. Excel Style filter) will conflict with outside elements with the same `z-index` (e.g. having two grids one under another) resulting in false rendering. The solution for this issue is to set the [`outlet`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=outlet) property to an external outlet directive which allows the overlay elements to always appear on top. ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; @@ -693,7 +688,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-external-outlet', styleUrls: ['./hierarchical-grid-external-outlet-sample.component.scss'], templateUrl: 'hierarchical-grid-external-outlet-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxOverlayOutletDirective] }) @@ -904,7 +898,7 @@ The last step is to **include** each component’s custom theme. We will also se ``` ### Demo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { SINGERS } from '../../data/singersData'; @@ -914,7 +908,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-excel-style-filtering-style', styleUrls: ['./hierarchical-grid-excel-style-filtering-style.component.scss'], templateUrl: 'hierarchical-grid-excel-style-filtering-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HGridExcelStyleFilteringStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-export-excel.md index 6db31939b..728b87a10 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-export-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-export-excel.md @@ -23,7 +23,7 @@ The sections below walk through setup, usage patterns, and tips for tailoring ea ## Angular Excel Exporter Example This live example demonstrates the standard Excel and PDF export workflow for the Hierarchical Grid—bound data, two export buttons (Excel and PDF), and the resulting `.xlsx` and `.pdf` files with preserved filtering and sorting state. Share it with stakeholders who want to preview the experience before wiring it into their application. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { Singer, SINGERS } from '../../data/artistData'; @@ -32,7 +32,6 @@ import { Singer, SINGERS } from '../../data/artistData'; selector: 'app-hierarchical-grid-excel-export-sample', styleUrls: ['hierarchical-grid-excel-export.sample.scss'], templateUrl: 'hierarchical-grid-excel-export.sample.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxRowIslandComponent] }) export class HGridExcelExportSampleComponent { @@ -109,7 +108,7 @@ Grouping is a popular way to summarize customer segments, product categories, or If you need flat data in the exported file, clear the grouping prior to calling `export` or handle the `rowExporting` event to reshape the output. Example: ```typescript -import { Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, inject } from '@angular/core'; import { GridColumnDataType, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxExcelExporterService } from 'igniteui-angular/grids/core'; @@ -120,7 +119,6 @@ import { INVOICE_DATA } from '../data/invoiceData'; selector: 'app-excel-export-sample-1', styleUrls: ['./excel-export-sample-1.component.scss'], templateUrl: './excel-export-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent] }) export class ExcelExportSample1Component implements OnInit { @@ -205,7 +203,7 @@ Dashboards often rely on [multi-column headers](multi-column-headers.md) to add } @@if (igxName === 'IgxGrid') { ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -217,7 +215,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-multi-column-headers-export', styleUrls: ['multi-column-headers-export.component.scss'], templateUrl: 'multi-column-headers-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] }) export class GridMultiColumnHeadersExportComponent { @@ -278,7 +275,7 @@ export class GridMultiColumnHeadersExportComponent { } @@if (igxName === 'IgxTreeGrid') { ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -290,7 +287,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-tree-grid-multi-column-headers-export-sample', styleUrls: ['./tree-grid-multi-column-headers-export.component.scss'], templateUrl: './tree-grid-multi-column-headers-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] }) export class TreeGridMultiColumnHeadersExportComponent { @@ -349,7 +345,7 @@ export class TreeGridMultiColumnHeadersExportComponent { } @@if (igxName === 'IgxHierarchicalGrid') { ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -361,7 +357,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-hierarchical-grid-multi-column-export', styleUrls: ['./hierarchical-grid-multi-column-export.component.scss'], templateUrl: 'hierarchical-grid-multi-column-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnGroupComponent, IgxColumnComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-filtering.md index ce64338b7..f452bb4e9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-filtering.md @@ -11,7 +11,7 @@ IgniteUI for [Angular Hierarchical Grid component](https://www.infragistics.com/ ## Angular Hierarchical Grid Filtering Example The sample below demonstrates Hierarchical Grid's **Quick filtering** user experience. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -21,7 +21,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-filtering', styleUrls: ['./hierarchical-grid-filtering.component.scss'], templateUrl: 'hierarchical-grid-filtering.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) @@ -292,7 +291,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IFilteringOperation, IgxBooleanFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -304,7 +303,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-custom-filtering', styleUrls: ['./hierarchical-grid-custom-filtering.component.scss'], templateUrl: 'hierarchical-grid-custom-filtering.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) @@ -424,7 +422,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { ## Re-templating filter cell You can add a template marked with `igxFilterCellTemplate` in order to retemplate the filter cell. In the sample below, an input is added for the string columns and IgxDatePicker for the date column. When the user types or selects a value, a filter with contains operator for string columns and equals operator for date columns, is applied using grid's public API. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { ColumnType, GridColumnDataType, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxPickerClearComponent, IgxPickerToggleComponent, IgxStringFilteringOperand, OverlaySettings } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxFilterCellTemplateDirective } from 'igniteui-angular/grids/core'; @@ -439,7 +437,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-filtering-template', styleUrls: ['./hierarchical-grid-filtering-template.component.scss'], templateUrl: 'hierarchical-grid-filtering-template.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent] }) @@ -694,7 +691,7 @@ The last step is to **include** the component mixins, each with its respective t ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -704,7 +701,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-filtering-style', styleUrls: ['./hierarchical-grid-filtering-style.component.scss'], templateUrl: './hierarchical-grid-filtering-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HierarchicalGridFilteringStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-hierarchical-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-hierarchical-grid.md index d8ed1d9ac..3a2ee0d1e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-hierarchical-grid.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-hierarchical-grid.md @@ -15,7 +15,7 @@ The Ignite UI for Angular Hierarchical Data Grid is used to display and manipula In this angular grid example you can see how users can visualize hierarchical sets of data and use cell templating to add other visual components like [Sparkline](../charts/types/sparkline-chart.md). ```typescript -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { RemoteValuesService } from '../../services/remoteValues.service'; @@ -27,7 +27,6 @@ import { IgxSparklineCoreModule } from 'igniteui-angular-charts'; styleUrls: ['./hierarchical-grid-resizing.component.scss'], templateUrl: 'hierarchical-grid-resizing.component.html', providers: [RemoteValuesService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSparklineCoreModule, IgxRowIslandComponent] }) @@ -492,7 +491,7 @@ This way, due to Angular's [`ViewEncapsulation`](https://angular.io/api/core/Com ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { SINGERS } from '../../data/singersData'; @@ -502,7 +501,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-styling', styleUrls: ['./hierarchical-grid-styling.component.scss'], templateUrl: 'hierarchical-grid-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-keyboard-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-keyboard-navigation.md index 895b15148..90b7eee8e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-keyboard-navigation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-keyboard-navigation.md @@ -81,7 +81,7 @@ Practice all of the above mentioned actions in the demo sample below. Focus any /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable no-shadow */ import { animate, state, style, transition, trigger } from '@angular/animations'; -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { CellType, IActiveNodeChangeEventArgs, IgxColumnComponent, IgxColumnGroupComponent, IgxGridDetailTemplateDirective, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; @@ -247,7 +247,6 @@ const summaryCombinations: Item[] = [ ]) ]) ], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridDetailTemplateDirective, IgxColumnGroupComponent, IgxColumnComponent, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class GridKeyboardnavGuide implements OnInit, OnDestroy { @@ -583,7 +582,7 @@ $custom-checkbox-theme: checkbox-theme( ); .list-sample ::ng-deep { - @include checkbox($custom-checkbox-theme); + @include tokens($custom-checkbox-theme); } .sample { @@ -645,7 +644,7 @@ $custom-checkbox-theme: checkbox-theme( /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable no-shadow */ import { animate, state, style, transition, trigger } from '@angular/animations'; -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { CellType, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; @@ -809,7 +808,6 @@ const summaryCombinations: Item[] = [ ]) ]) ], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class HGridKeyboardnavGuide implements OnInit, OnDestroy { @@ -1253,7 +1251,7 @@ $custom-checkbox-theme: checkbox-theme( /* eslint-disable @angular-eslint/component-class-suffix */ /* eslint-disable @typescript-eslint/naming-convention */ import { animate, state, style, transition, trigger } from '@angular/animations'; -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CellType, IActiveNodeChangeEventArgs, IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; @@ -1428,7 +1426,6 @@ const summaryCombinations: Item[] = [ ]) ]) ], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class TGridKeyboardnavGuide implements OnInit, OnDestroy { @@ -1736,7 +1733,7 @@ $custom-checkbox-theme: checkbox-theme( ); .list-sample ::ng-deep { - @include checkbox($custom-checkbox-theme); + @include tokens($custom-checkbox-theme); } .sample { @@ -1853,7 +1850,7 @@ Use the demo below to try out the custom scenarios that we just implemented: - Select a cell and press Enter key a couple of times. Every key press will move the focus to a cell in the next row, under the same column. ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { CellType, IGridKeydownEventArgs, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; import { SINGERS } from '../../data/singersData'; @@ -1863,7 +1860,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-custom-kb-navigation-sample', styleUrls: ['./hierarchical-grid-custom-kb-navigation-sample.component.scss'], templateUrl: 'hierarchical-grid-custom-kb-navigation-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-load-on-demand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-load-on-demand.md index b42f00949..de1faa3a9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-load-on-demand.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-load-on-demand.md @@ -16,7 +16,7 @@ This topic demonstrates how to configure Load on Demand by requesting data from ## Angular Hierarchical Grid Load On Demand Example ```typescript -import { AfterViewInit, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnInit, ViewChild, inject } from '@angular/core'; import { IGX_HIERARCHICAL_GRID_DIRECTIVES, IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { EntityType, FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; @@ -29,7 +29,6 @@ const API_ENDPOINT = 'https://data-northwind.indigo.design'; selector: 'app-hierarchical-grid-lod', styleUrls: ['./hierarchical-grid-lod.component.scss'], templateUrl: './hierarchical-grid-lod.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] }) export class HierarchicalGridLoDSampleComponent implements OnInit, AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-multi-column-headers.md index be5404469..fa9560c54 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-multi-column-headers.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-multi-column-headers.md @@ -11,7 +11,7 @@ _premium: true [`IgxHierarchicalGrid`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) supports `multi-column headers` which allows you to group columns by placing them under a common multi headers. Each multi-column headers group could be a representation of combinations between other groups or columns within the Material UI grid. ## Angular Hierarchical Grid Multi-column Headers Overview Example ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -22,7 +22,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-multi-column', styleUrls: ['./hierarchical-grid-multi-column.component.scss'], templateUrl: 'hierarchical-grid-multi-column.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent, IgxButtonDirective] }) @@ -208,7 +207,7 @@ If you want to re-use a single template for several column groups, you could set ``` The following sample demonstrates how to implement collapsible column groups using header templates. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -219,7 +218,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-multi-column-template', styleUrls: ['./hierarchical-grid-multi-column-template.component.scss'], templateUrl: 'hierarchical-grid-multi-column-template.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent] }) @@ -371,7 +369,7 @@ The last step is to **include** the component mixins: ``` ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { CUSTOMERS } from '../../data/hierarchical-data'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; @@ -381,7 +379,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-multi-column-styling', styleUrls: ['./hierarchical-grid-multi-column-styling.component.scss'], templateUrl: 'hierarchical-grid-multi-column-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-paging.md index 6b3cf6cf3..32396245d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-paging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-paging.md @@ -12,7 +12,7 @@ Pagination is used to split a large set of data into a sequence of pages that ha ## Angular Pagination Example The following example represents Hierarchical Grid pagination and exposes the options usage of `items per page` and how paging can be enabled. The user can also quickly navigate through the Hierarchical Grid pages via "Go to last page" and "Go to first page" buttons. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -23,7 +23,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-paging', styleUrls: ['./hierarchical-grid-paging.component.scss'], templateUrl: 'hierarchical-grid-paging.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxPaginatorDirective, IgxPaginatorComponent] }) @@ -151,7 +150,7 @@ Due to certain limitations in how the child grids of an IgxHierarchicalGrid are ``` ### Paginator Component Demo ```typescript -import { Component, OnInit, ViewChild, AfterViewInit, PLATFORM_ID, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, AfterViewInit, PLATFORM_ID, inject } from '@angular/core'; import { IPaginatorResourceStrings } from 'igniteui-angular/core'; import { IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective } from 'igniteui-angular/paginator'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; @@ -167,7 +166,6 @@ import { isPlatformBrowser } from '@angular/common'; selector: 'app-hierarchical-grid-pager-sample', styleUrls: ['./hierarchical-grid-pager-sample.component.scss'], templateUrl: './hierarchical-grid-pager-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxPaginatorDirective, IgxSwitchComponent, FormsModule] }) export class HierarchicalGridPagerSampleComponent implements OnInit, AfterViewInit { @@ -343,7 +341,7 @@ The last step is to **include** the component mixins, each with its respective t ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxPaginatorComponent, IgxPaginatorDirective } from 'igniteui-angular/paginator'; @@ -354,7 +352,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-paging', styleUrls: ['./hierarchical-grid-paging-style.component.scss'], templateUrl: 'hierarchical-grid-paging-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxPaginatorDirective] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-remote-data-operations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-remote-data-operations.md index 35acf1e82..2f74e11a2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-remote-data-operations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-remote-data-operations.md @@ -58,7 +58,7 @@ this.remoteValuesService.getColumnData( ``` ### Unique Column Values Strategy Demo ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { ColumnType, IFilteringExpressionsTree } from 'igniteui-angular/core'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; @@ -70,7 +70,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro templateUrl: './hierarchical-grid-excel-style-filtering-load-on-demand.component.html', styleUrls: ['./hierarchical-grid-excel-style-filtering-load-on-demand.component.scss'], providers: [RemoteValuesService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HierarchicalGridExcelStyleFilteringLoadOnDemandComponent implements OnInit { @@ -267,7 +266,7 @@ public paginate(page: number) { } ``` ```typescript -import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { GridPagingMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxPaginatorComponent, IgxPaginatorDirective } from 'igniteui-angular/paginator'; @@ -279,7 +278,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-remote-paging-default-template', styleUrls: ['./hierarchical-grid-remote-paging-default-template.component.scss'], templateUrl: 'hierarchical-grid-remote-paging-default-template.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowIslandComponent, IgxPaginatorDirective] }) @@ -476,7 +474,7 @@ The last step will be to declare the paginator content based on your requirement ``` After all the changes above, the following result will be achieved. ```typescript -import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, inject } from '@angular/core'; import { GridPagingMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective } from 'igniteui-angular/paginator'; @@ -490,7 +488,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-hierarchical-grid-remote-paging', styleUrls: ['./hierarchical-grid-remote-paging.component.scss'], templateUrl: 'hierarchical-grid-remote-paging.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxPaginatorDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, AsyncPipe] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-actions.md index 922dbc445..c5041e090 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-actions.md @@ -54,7 +54,7 @@ These components expose templates giving flexibility for customization. For inst ``` ```typescript -import { Component, ViewChild, ChangeDetectorRef, AfterViewInit, ViewChildren, QueryList, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, ChangeDetectorRef, AfterViewInit, ViewChildren, QueryList, inject } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridPinningActionsComponent, RowType } from 'igniteui-angular/grids/core'; import { Transaction } from 'igniteui-angular/core'; @@ -69,7 +69,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-row-action-strip', styleUrls: [`hierarchical-grid-action-strip-sample.scss`], templateUrl: 'hierarchical-grid-action-strip-sample.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class HGridActionStripSampleComponent implements AfterViewInit{ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-adding.md index ca5147ef3..236e341f6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-adding.md @@ -12,7 +12,7 @@ The Hierarchical Grid provides a convenient way to perform data manipulations th ## Angular Hierarchical Grid Row Adding Example The following sample demonstrates how to enable native row adding in the Hierarchical Grid. Changing a cell value and then clicking or navigating to another cell on the same row doesn't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxColumnComponent, IgxGridEditingActionsComponent } from 'igniteui-angular/grids/core'; @@ -23,7 +23,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-add-row', styleUrls: ['./hierarchical-grid-add-row.component.scss'], templateUrl: './hierarchical-grid-add-row.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-drag.md index c112e6c76..5c534173b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-drag.md @@ -12,7 +12,7 @@ In Ignite UI for Angular Hierarchical Grid, **RowDrag** is initialized on the ro ## Angular Hierarchical Grid Row Drag Example ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; @@ -30,7 +30,6 @@ enum DragIcon { selector: 'app-hierarchical-row-drag-base', styleUrls: ['./hierarchical-row-drag-base.component.scss'], templateUrl: 'hierarchical-row-drag-base.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxIconComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] }) @@ -246,7 +245,7 @@ The drag ghost can be templated on every grid level, making it possible to have ``` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxRowDragGhostDirective, RowType } from 'igniteui-angular/grids/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; @@ -258,7 +257,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-multi-row-drag', styleUrls: ['./hierarchical-grid-multi-row-drag.component.scss'], templateUrl: 'hierarchical-grid-multi-row-drag.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxRowDragGhostDirective, IgxIconComponent] }) @@ -443,7 +441,7 @@ The result can be seen in the demo below: #### Example Demo ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxColumnComponent, IgxDragIndicatorIconDirective, RowType } from 'igniteui-angular/grids/core'; @@ -461,7 +459,6 @@ enum DragIcon { selector: 'app-hierarchical-grid-row-drag', styleUrls: ['./hierarchical-grid-row-drag.component.scss'], templateUrl: 'hierarchical-grid-row-drag.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxIconComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxDragIndicatorIconDirective] }) @@ -629,7 +626,7 @@ export class HGridRowReorderComponent { With these few easy steps, you've configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo. Notice that we also have row selection enabled and we preserve the selection when dropping the dragged row. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { GridSelectionMode, IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; @@ -641,7 +638,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-row-reorder', styleUrls: ['./hierarchical-grid-row-reorder.component.scss'], templateUrl: 'hierarchical-grid-row-reorder.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] }) export class HGridRowReorderComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-editing.md index d457be619..6f1225649 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-editing.md @@ -12,7 +12,7 @@ The Hierarchical Grid provides a convenient way to perform data manipulations th ## Angular Hierarchical Grid Row Editing Example The following sample demonstrates how to enable row editing in the Hierarchical Grid. Changing a cell value and then clicking or navigating to another cell on the same row won't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -22,7 +22,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-row-editing', styleUrls: ['./hierarchical-grid-row-editing.component.scss'], templateUrl: 'hierarchical-grid-row-editing.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HGridRowEditingSampleComponent { @@ -283,7 +282,7 @@ We scope our `@include` statement in `.custom-buttons` so that it is only applie ### Demo After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.md#styling). The result of all the combined styles can be seen below: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective } from 'igniteui-angular/grids/core'; @@ -295,7 +294,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-row-edit-style', styleUrls: ['./hierarchical-grid-row-edit-style.component.scss'], templateUrl: 'hierarchical-grid-row-edit-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxIconButtonDirective, IgxRowEditTabStopDirective, IgxIconComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-pinning.md index 334f67c4c..630917785 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-pinning.md @@ -11,7 +11,7 @@ _premium: true One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. **Row Pinning** in Ignite UI for Angular allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the Hierarchical Grid vertically. The Material UI Grid has a built-in row pinning UI, which is enabled by initializing an `igxActionStrip` component in the context of Hierarchical Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API. ## Angular Hierarchical Grid Row Pinning Example ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { ColumnPinningPosition } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IPinningConfig, IgxCellTemplateDirective, IgxColumnComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; @@ -24,7 +24,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-row-pinning', styleUrls: ['./hierarchical-grid-row-pinning.component.scss'], templateUrl: 'hierarchical-grid-row-pinning.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxRowIslandComponent] }) @@ -177,7 +176,7 @@ public togglePinning(row: IgxGridRow, event) { ``` #### Demo ```typescript -import { Component, AfterViewInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, AfterViewInit, inject } from '@angular/core'; import { ColumnPinningPosition } from 'igniteui-angular/core'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; import { IPinningConfig, IgxCellTemplateDirective, IgxColumnComponent, RowPinningPosition, RowType } from 'igniteui-angular/grids/core'; @@ -193,7 +192,6 @@ const FILTERING_ICONS_FONT_SET = 'filtering-icons'; selector: 'app-hierarchical-grid-row-pinning-extra-column', styleUrls: ['./hierarchical-grid-row-pinning-extra-column.component.scss'], templateUrl: 'hierarchical-grid-row-pinning-extra-column.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxRowIslandComponent] }) @@ -368,7 +366,7 @@ The last step is to pass the custom grid theme: ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { ColumnPinningPosition } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IPinningConfig, IgxCellTemplateDirective, IgxColumnComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; @@ -380,7 +378,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-row-pinning-styling', styleUrls: ['./hierarchical-grid-row-pinning-styling.component.scss'], templateUrl: 'hierarchical-grid-row-pinning-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-selection.md index 6f3f4d838..61492ab17 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-selection.md @@ -12,7 +12,7 @@ With row selection in Ignite UI for Angular, there is row selector column that p ## Angular Row Selection Example The sample below demonstrates the three types of Hierarchical Grid's **row selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box. Use the switch button to _hide_ or _show_ the row selector checkbox. ```typescript -import { Component, OnDestroy, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { GridSelectionMode, IRowSelectionEventArgs, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -28,7 +28,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-selection', styleUrls: ['./hierarchical-grid-selection.component.scss'], templateUrl: 'hierarchical-grid-selection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxSnackbarComponent, IgxIconComponent] }) @@ -396,7 +395,7 @@ Each hierarchy level in an `igx-hierarchical-grid` can have its own row and head ### Row Numbering Demo This demo shows the usage of custom header and row selectors. The latter uses `rowContext.index` to display row numbers and an `igx-checkbox` bound to `rowContext.selected`. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -408,7 +407,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-selection-template-numbers', styleUrls: ['./hierarchical-grid-selection-template-numbers.component.scss'], templateUrl: 'hierarchical-grid-selection-template-numbers.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowIslandComponent, IgxHeadSelectorDirective, IgxRowSelectorDirective, IgxCheckboxComponent] }) @@ -504,7 +502,7 @@ export class HGridSelectionTemplateNumbersSampleComponent { ### Conditional Selection Demo This demo prevents some rows from being selected using the `rowSelectionChanging` event and a custom template with disabled checkbox for non-selectable rows. ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IRowSelectionEventArgs, IgxColumnComponent, IgxRowSelectorDirective } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -516,7 +514,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-conditional-row-selectors', styleUrls: ['./hierarchical-grid-conditional-row-selectors.component.scss'], templateUrl: 'hierarchical-grid-conditional-row-selectors.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowIslandComponent, IgxRowSelectorDirective, IgxCheckboxComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-selection.md index 4a2220f13..82f831be0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-selection.md @@ -12,7 +12,7 @@ With Ignite UI for Angular Hierarchical Grid you can easily select data by using The sample below demonstrates the three types of Hierarchical Grid's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -26,7 +26,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-cell-selection', styleUrls: ['./hierarchical-grid-cellSelection.component.scss'], templateUrl: 'hierarchical-grid-cellSelection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxSnackbarComponent, IgxIconComponent] }) export class HierarchicalGridCellSelectionComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-sorting.md index d26c5a45a..befa88b8f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-sorting.md @@ -14,7 +14,7 @@ In Ignite UI for Angular Hierarchical Grid, data sorting is enabled on a per-col ## Angular Hierarchical Grid Sorting Overview Example Additionally there is a custom context menu added for sorting using **igx-hierarchical-grid**'s [`contextMenu`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=contextMenu) Output. ```typescript -import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -27,7 +27,6 @@ import { HGridContextmenuComponent } from './hgrid-contextmenu/hgrid-contextmenu selector: 'app-hierarchical-grid-sorting', styleUrls: ['./hierarchical-grid-sorting.component.scss'], templateUrl: 'hierarchical-grid-sorting.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, HGridContextmenuComponent] }) @@ -137,7 +136,7 @@ Having a certain amount of sorted columns could be really confusing if there is The **IgxHierarchicalGrid** provides a solution for this problem by indicating the index of each sorted column. @@if(igxName === "IgxGrid"){ ```typescript -import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { DefaultSortingStrategy } from 'igniteui-angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -149,7 +148,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-sorting-indicators', templateUrl: './grid-sorting-indicators.component.html', styleUrls: ['./grid-sorting-indicators.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridSortingIndicatorsComponent implements OnInit, AfterViewInit { @@ -307,7 +305,7 @@ The last step is to **include** the component mixins: ``` ### Demo ```typescript -import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -318,7 +316,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-sorting-styling', styleUrls: ['./hierarchical-grid-sorting-styling.component.scss'], templateUrl: 'hierarchical-grid-sorting-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-state-persistence.md index 8c063dad8..3c059be96 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-state-persistence.md @@ -139,11 +139,11 @@ this.state.setState(state, ['filtering', 'rowIslands']); ``` ## Demo ```typescript -import { Component, OnInit, ViewChild, ViewChildren, QueryList, AfterViewInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, ViewChildren, QueryList, AfterViewInit, inject } from '@angular/core'; import { NavigationStart, Router, RouterLink } from '@angular/router'; -import { GridFeatures, IGridState, IGridStateOptions, IgxCellTemplateDirective, IgxColumnComponent, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { GridFeatures, IGridState, IGridStateOptions, IgxCellTemplateDirective, IgxColumnComponent, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; -import { IgxSummaryResult } from 'igniteui-angular/core'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -171,7 +171,6 @@ class MySummary { selector: 'app-hgrid', styleUrls: ['./hGrid-state.component.scss'], templateUrl: './hGrid-state.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, IgxHierarchicalGridComponent, IgxGridStateDirective, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-summaries.md index 5c651e033..3c62bbdb1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-summaries.md @@ -11,10 +11,10 @@ _premium: true The Angular UI grid in Ignite UI for Angular has a **summaries** feature that functions on a per-column level as group footer. Angular grid summaries is powerful feature which enables the user to see column information in a separate container with a predefined set of default summary items, depending on the type of data within the column or by implementing a custom angular template in the Hierarchical Grid. ## Angular Hierarchical Grid Summaries Overview Example ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -59,7 +59,6 @@ class MyChildSummary { selector: 'app-hierarchical-grid-summary', styleUrls: ['./hierarchical-grid-summary.component.scss'], templateUrl: 'hierarchical-grid-summary.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) @@ -272,10 +271,10 @@ class MySummary extends IgxNumberSummaryOperand { } ``` ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -321,7 +320,6 @@ class GrammySummary { selector: 'app-hierarchical-grid-all-data-summary', styleUrls: ['./hierarchical-grid-allData-summary.component.scss'], templateUrl: 'hierarchical-grid-allData-summary.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) @@ -389,9 +387,9 @@ When a default summary is defined, the height of the summary area is calculated > [!NOTE] > Column summary template could be defined through API by setting the column [summaryTemplate](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=summaryTemplate) property to the required TemplateRef. ```typescript -import { Component, HostBinding, OnInit, ChangeDetectionStrategy } from '@angular/core'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { Component, HostBinding, OnInit } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; @@ -442,7 +440,6 @@ class GrammySummary { selector: 'app-hierarchical-grid-all-data-summary', styleUrls: ['./hgrid-summary-template.component.scss'], templateUrl: 'hgrid-summary-template.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSummaryTemplateDirective, IgxRowIslandComponent] }) @@ -650,8 +647,8 @@ import { ChangeDetectionStrategy } from "@angular/core"; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; -import { ConnectedPositioningStrategy, HorizontalAlignment, IgxSummaryResult, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { ConnectedPositioningStrategy, HorizontalAlignment, IgxNumberSummaryOperand, IgxSummaryResult, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core'; import { IgxButtonDirective, IgxToggleDirective } from 'igniteui-angular/directives'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; import { SINGERS } from "../../data/singersData"; @@ -711,7 +708,6 @@ class GrammySummary { selector: "app-hierarchical-grid-summary-sample", styleUrls: ["./hierarchical-grid-disable-summaries.component.scss"], templateUrl: "hierarchical-grid-disable-summaries.component.html", - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxHierarchicalGridComponent, IgxRowIslandComponent, @@ -1060,10 +1056,10 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp ``` ```typescript import { DatePipe } from '@angular/common'; -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { IgxColumnComponent, IgxDateSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { Component, ViewChild } from '@angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxDateSummaryOperand, IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; -import { IgxSummaryResult } from 'igniteui-angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -1071,7 +1067,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-summary-formatter', styleUrls: ['./hierarchical-grid-summary-formatter.component.scss'], templateUrl: 'hierarchical-grid-summary-formatter.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] }) @@ -1142,11 +1137,11 @@ export class HGridSummaryFormatterComponent { There is an [`exportSummaries`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterOptions&member=exportSummaries) option in `IgxExcelExporterOptions` that specifies whether the exported data should include the grid's summaries. Default `exportSummaries` value is **false**. The [`IgxExcelExporterService`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) will export the default summaries for all column types as their equivalent excel functions so they will continue working properly when the sheet is modified. Try it for yourself in the example below: ```typescript -import { Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, inject } from '@angular/core'; import { SINGERS } from '../../data/singersData'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxExcelExporterOptions, IgxExcelExporterService } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand, IgxExcelExporterOptions, IgxExcelExporterService } from 'igniteui-angular/grids/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -1190,7 +1185,6 @@ class MyChildSummary { selector: 'app-hierarchical-grid-summary-export', styleUrls: ['./hgrid-summary-export.component.scss'], templateUrl: 'hgrid-summary-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) @@ -1400,9 +1394,9 @@ The last step is to **include** the component custom theme: ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { Component } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { SINGERS } from '../../data/singersData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -1448,7 +1442,6 @@ class MyChildSummary { selector: 'app-hierarchical-grid-summary-styling', styleUrls: ['./hierarchical-grid-summary-styling.component.scss'], templateUrl: 'hierarchical-grid-summary-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-toolbar.md index a05249164..bf2929cb2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-toolbar.md @@ -16,7 +16,7 @@ The Hierarchical Grid in Ignite UI for Angular provides an [`IgxGridToolbarCompo or just any other custom content. The toolbar and the predefined UI components support Angular events and expose API for developers. ## Angular Toolbar Grid Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -26,7 +26,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-toolbar-title', styleUrls: ['./hierarchical-grid-toolbar-title.component.scss'], templateUrl: 'hierarchical-grid-toolbar-title.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] }) @@ -169,7 +168,7 @@ These features can be enabled independently from each other by following a patte the Ignite UI for Angular suite. Listed below are the main features of the toolbar with example code for each of them. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -183,7 +182,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-toolbar-options', styleUrls: ['./hierarchical-grid-toolbar-options.component.scss'], templateUrl: 'hierarchical-grid-toolbar-options.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) @@ -463,7 +461,7 @@ Here is a sample snippet: ``` The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -475,7 +473,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-toolbar-custom', styleUrls: ['./hierarchical-grid-toolbar-custom.component.scss'], templateUrl: 'hierarchical-grid-toolbar-custom.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] }) @@ -629,7 +626,7 @@ The last step is to **include** the newly created themes. ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { SINGERS } from '../../data/singersData'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -639,7 +636,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-toolbar-style', styleUrls: ['./hierarchical-grid-toolbar-style.component.scss'], templateUrl: './hierarchical-grid-toolbar-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HierarchicalGridToolbarStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-validation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-validation.md index 85ccec169..ce76125a2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-validation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-validation.md @@ -24,7 +24,7 @@ To validate that a column input would be set and the value is going to be format ``` The following sample demonstrates how to use the prebuilt `required`, `email` and `min` validator directives in a Hierarchical Grid. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxColumnComponent, IgxColumnMaxValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; @@ -35,7 +35,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-hierarchical-grid-validator-service', styleUrls: ['./hierarchical-grid-validator-service.component.scss'], templateUrl: './hierarchical-grid-validator-service.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxHierarchicalGridComponent, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxRowIslandComponent, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective] }) export class HierarchicalGridValidatorServiceComponent implements OnInit { @@ -184,7 +183,7 @@ public cellEdit(evt) { ### Example The below example demonstrates the above-mentioned customization options. ```typescript -import { Component, Directive, Input, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, Directive, forwardRef, Input, ViewChild } from '@angular/core'; import { AbstractControl, NG_VALIDATORS, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IGridFormGroupCreatedEventArgs, IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; @@ -201,7 +200,7 @@ export function phoneFormatValidator(phoneReg: RegExp): ValidatorFn { @Directive({ selector: '[phoneFormat]', - providers: [{ provide: NG_VALIDATORS, useExisting: HGridPhoneFormatDirective, multi: true }] + providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => HGridPhoneFormatDirective), multi: true }] }) export class HGridPhoneFormatDirective extends Validators { @Input('phoneFormat') @@ -221,7 +220,6 @@ export function unique(value, index, self) { selector: 'app-hierarchical-grid-validator-service-extended', styleUrls: ['./hierarchical-grid-validator-service-extended.component.scss'], templateUrl: './hierarchical-grid-validator-service-extended.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxColumnRequiredValidatorDirective, HGridPhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxButtonDirective] }) export class HierarchicalGridValidatorServiceExtendedComponent { @@ -501,7 +499,7 @@ Errors and the detailed messages can be determined based on the row and cell's v ### Cross-field example The below sample demonstrates cross-field validation in a Hierarchical Grid for both the root and child data. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { AbstractControl, ValidationErrors, ValidatorFn, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { CellType, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; @@ -516,7 +514,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'hierarchical-grid-cross-field-validation', styleUrls: ['./hierarchical-grid-cross-field-validation.component.scss'], templateUrl: 'hierarchical-grid-cross-field-validation.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxColumnRequiredValidatorDirective, IgxCellEditorTemplateDirective, IgxSelectComponent, ReactiveFormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxButtonDirective] }) @@ -800,7 +797,7 @@ public cellStyles = { ``` ### Demo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, RowType } from 'igniteui-angular/grids/core'; @@ -813,7 +810,6 @@ import { NgTemplateOutlet } from '@angular/common'; selector: 'app-hierarchical-grid-validation-style', styleUrls: ['./hierarchical-grid-validation-style.component.scss'], templateUrl: 'hierarchical-grid-validation-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxRowIslandComponent] }) export class HGridValidationStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-virtualization.md index 8527ed100..b2c453233 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-virtualization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-virtualization.md @@ -11,7 +11,7 @@ _premium: true In Ignite UI for Angular, the [IgxHierarchicalGrid](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) control now utilizes the [`igxForOf`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) directive and virtualizes its content both vertically and horizontally. ## Angular Hierarchical Grid Virtualization and Performance Example ```typescript -import { AfterViewInit, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnInit, ViewChild, inject } from '@angular/core'; import { IGX_HIERARCHICAL_GRID_DIRECTIVES, IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { EntityType, FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; @@ -24,7 +24,6 @@ const API_ENDPOINT = 'https://data-northwind.indigo.design'; selector: 'app-hierarchical-grid-lod', styleUrls: ['./hierarchical-grid-lod.component.scss'], templateUrl: './hierarchical-grid-lod.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] }) export class HierarchicalGridLoDSampleComponent implements OnInit, AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-perform-crud.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-perform-crud.md index a75cc832e..362b3efb1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-perform-crud.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-perform-crud.md @@ -151,7 +151,7 @@ this._crudService.delete(event.data).subscribe({ See the demo that was built following the guidance. Play around with it and try the examples for customization to fit your scenario in the best possible way. ```typescript -import { ChangeDetectorRef, Component, OnInit, ViewChild, OnDestroy, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit, ViewChild, OnDestroy, inject } from '@angular/core'; import { GridPagingMode, IGridEditDoneEventArgs, IRowDataEventArgs, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridRow } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; @@ -168,7 +168,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-crud-sample', styleUrls: ['./crud-sample.component.scss'], templateUrl: './crud-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, IgxSnackbarComponent] }) export class CRUDSampleComponent implements OnInit, OnDestroy { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-signal-r-service-live-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-signal-r-service-live-data.md index d5ec35f4f..08e4d7f23 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-signal-r-service-live-data.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-signal-r-service-live-data.md @@ -46,8 +46,8 @@ The purpose of this demo is to showcase a financial screen board with a Real-tim ```typescript /* eslint-disable max-len */ -import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Renderer2, OnDestroy, OnInit, DoCheck, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, CUSTOM_ELEMENTS_SCHEMA, inject, ChangeDetectionStrategy } from '@angular/core'; -import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, GridColumnDataType, IgxOverlayOutletDirective, OverlaySettings, SortingDirection } from 'igniteui-angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Renderer2, OnDestroy, OnInit, DoCheck, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core'; +import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, GridColumnDataType, OverlaySettings, SortingDirection } from 'igniteui-angular/core'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; @@ -70,8 +70,7 @@ import { AsyncPipe, CurrencyPipe } from '@angular/common'; selector: 'app-finjs-dock-manager', templateUrl: './grid-finjs-dock-manager.component.html', styleUrls: ['./grid-finjs-dock-manager.component.scss'], - imports: [IgxSwitchComponent, FormsModule, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxButtonDirective, IgxOverlayOutletDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, GridHostDirective, AsyncPipe, CurrencyPipe], - changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxSwitchComponent, FormsModule, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxButtonDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, GridHostDirective, AsyncPipe, CurrencyPipe], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterViewInit, DoCheck { @@ -89,7 +88,6 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi public priceTemplate: TemplateRef; @ViewChild(IgxSelectComponent) public select: IgxSelectComponent; @ViewChild('freq', { read: IgxSelectComponent }) public selectFrequency: IgxSelectComponent; - @ViewChild(IgxOverlayOutletDirective) outlet: IgxOverlayOutletDirective; public isDarkTheme = true; @@ -221,6 +219,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi this.data.pipe(takeUntil(this.destroy$)).subscribe((data) => { if (data.length !== 0) { this.isLoading = false; + this.cdr.markForCheck(); }; }); } @@ -251,9 +250,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi this.paneService.initialPanePosition = { x, y }; this.grid2.selectColumns(['price', 'change', 'changeP']); this.customOverlaySettings.target = this.select.inputGroup.element.nativeElement; - this.customOverlaySettings.outlet = this.outlet; this.freqOverlaySettings.target = this.selectFrequency.inputGroup.element.nativeElement; - this.freqOverlaySettings.outlet = this.outlet; this.grid1.groupingExpressions = [{ dir: SortingDirection.Desc, fieldName: 'category', @@ -272,6 +269,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi ignoreCase: false, strategy: DefaultSortingStrategy.instance() }]; + this.cdr.markForCheck(); }, 500); } @@ -350,7 +348,10 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi const componentRef = viewContainerRef.createComponent(IgxGridComponent); const grid = (componentRef.instance as IgxGridComponent); grid.autoGenerate = true; - this.dataService.data.pipe(takeUntil(destructor)).subscribe(d => grid.data = d); + this.dataService.data.pipe(takeUntil(destructor)).subscribe(d => { + grid.data = d; + componentRef.changeDetectorRef.markForCheck(); + }); grid.columnInit.pipe(takeUntil(destructor)).subscribe((col: IgxColumnComponent) => { if (col.field === 'price') { col.cellClasses = this.trends; @@ -409,12 +410,11 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
Add Floating Pane
-
+ [columnSelection]="'multiple'" [cellSelection]="'none'"> @@ -451,7 +451,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
@@ -489,7 +489,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
@@ -527,7 +527,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
@@ -567,12 +567,36 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi -
``` ```scss @use 'igniteui-dockmanager/dist/collection/styles/igc.themes'; @use '../../variables' as *; +// Set the grid's background/foreground/accent tokens; the grid's derived-themes +// layer cascades them to the paginator, scrollbars, chips, drop-downs, select, +// excel filter, etc. Scoped mode emits the short `--background`/`--foreground`/ +// `--accent-color` aliases the derived layer reads first. +$finjs-grid-accent-color: var(--ig-primary-500); +$finjs-grid-background: var(--ig-surface-500); +$finjs-grid-foreground: var(--ig-surface-500-contrast); + +$finjs-dark-grid-theme: grid-theme( + $schema: $dark-material-schema, + $background: $finjs-grid-background, + $foreground: $finjs-grid-foreground, + $accent-color: $finjs-grid-accent-color, +); + +$finjs-light-grid-theme: grid-theme( + $schema: $light-material-schema, + $background: $finjs-grid-background, + $foreground: $finjs-grid-foreground, + $accent-color: $finjs-grid-accent-color, +); + +@include tokens($finjs-dark-grid-theme, $mode: 'scoped', $scope: '.dark-theme igx-grid'); +@include tokens($finjs-light-grid-theme, $mode: 'scoped', $scope: '.light-theme igx-grid'); + .actionItem { margin-block-end: rem(20px); } @@ -616,7 +640,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi .negative.strongNegative { .igx-grid__td-text { - color: color(null, 'success', 500, .8) !important; + color: color(null, 'error', 500, .8) !important; } } @@ -755,10 +779,6 @@ igx-grid { } } } - -igx-select { - --ig-size: var(--ig-size-small); -} ``` ## SignalR Server Configuration diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-button.md index 4b8f8546c..6dc8a47d0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-button.md @@ -13,7 +13,7 @@ The Ignite UI for Angular Icon Button directive is intended to turn any icon int ## Angular Icon Button Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -21,7 +21,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-icon-button-overview', styleUrls: ['./icon-button-overview.component.scss'], templateUrl: './icon-button-overview.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class IconButtonOverviewComponent { } @@ -188,7 +187,7 @@ public ngOnInit() { Users can choose one of the three predefined `igxIconButton` sizes by using the `--ig-size` custom CSS property. By default, the size of the component is set medium. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -196,7 +195,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-icon-button-size', styleUrls: ['./icon-button-size.component.scss'], templateUrl: './icon-button-size.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class IconButtonSizeComponent { } @@ -533,7 +531,7 @@ $custom-contained: contained-icon-button-theme( This will generate a fully themed `contained icon button`, including appropriate foreground and background colors for its various states like hover, focus, and active. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -541,7 +539,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-icon-button-styling', styleUrls: ['./icon-button-styling.component.scss'], templateUrl: './icon-button-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class IconButtonStylingComponent { } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-service.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-service.md index c966c39d5..447ef3564 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-service.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-service.md @@ -32,7 +32,7 @@ export class AppComponent implements OnInit { ``` ```typescript -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective } from 'igniteui-angular/card'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; @@ -43,7 +43,6 @@ import { IgxSuffixDirective } from 'igniteui-angular/input-group'; selector: 'app-icon-service-sample', styleUrls: ['./icon-service-sample.component.scss'], templateUrl: './icon-service-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxCardHeaderComponent, IgxAvatarComponent, IgxIconComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, IgxButtonDirective, IgxSuffixDirective] }) export class IconServiceSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon.md index cdc10984a..97a176935 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon.md @@ -13,14 +13,13 @@ _tocName: Icon ## Angular Icon Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; @Component({ selector: 'app-icon-sample-1', styleUrls: ['./icon-sample-1.component.scss'], templateUrl: './icon-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent] }) export class IconSample1Component { } @@ -193,14 +192,13 @@ public ngOnInit() { ``` ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; @Component({ selector: 'app-svg-icon-sample', styleUrls: ['./svg-icon-sample.component.scss'], templateUrl: './svg-icon-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent] }) export class SvgIconSampleComponent implements OnInit { @@ -292,14 +290,13 @@ Now, we are ready to add the desired icon into our markup and customize it using ``` ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; @Component({ selector: 'app-material-symbols', templateUrl: './material-symbols.component.html', styleUrls: ['./material-symbols.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent] }) export class MaterialSymbolsComponent implements OnInit { @@ -415,14 +412,13 @@ The last step is to pass the custom icon theme in our application: ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; @Component({ selector: 'app-icon-styling-sample', styleUrls: ['./icon-styling-sample.component.scss'], templateUrl: './icon-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent] }) export class IconStylingSampleComponent { } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/input-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/input-group.md index 78d7f04f5..d4309badf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/input-group.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/input-group.md @@ -13,7 +13,7 @@ The `IgxInputGroupComponent` allows the user to enhance input elements like inpu ## Angular Input Group Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { BaseInputGroupSampleComponent } from '../base-input.component'; import { FormsModule } from '@angular/forms'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -22,7 +22,6 @@ import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'ig selector: 'app-input-group-sample-1', styleUrls: ['./input-group-sample-1.component.scss'], templateUrl: './input-group-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective] }) export class InputGroupSample1Component extends BaseInputGroupSampleComponent { } @@ -133,7 +132,7 @@ The `igx-prefix` or `igxPrefix` and `igx-suffix` or `igxSuffix` directives can c ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { BaseInputGroupSampleComponent } from '../base-input.component'; import { FormsModule } from '@angular/forms'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; @@ -143,7 +142,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-input-group-sample-3', styleUrls: ['./input-group-sample-3.component.scss'], templateUrl: './input-group-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxIconComponent, IgxSuffixDirective] }) export class InputGroupSample3Component extends BaseInputGroupSampleComponent { } @@ -186,7 +184,7 @@ The [`igx-hint`](mcp:get_api_reference?platform=angular&component=IgxHintDirecti This is how the phone field with hint looks: ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { BaseInputGroupSampleComponent } from '../base-input.component'; import { FormsModule } from '@angular/forms'; import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; @@ -196,7 +194,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-input-group-sample-4', styleUrls: ['./input-group-sample-4.component.scss'], templateUrl: './input-group-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective] }) export class InputGroupSample4Component extends BaseInputGroupSampleComponent { } @@ -253,7 +250,7 @@ Ignite UI for Angular also provides styling for the input of `type="file"` and i ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { BaseInputGroupSampleComponent } from '../base-input.component'; import { IGX_INPUT_GROUP_TYPE, IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -265,7 +262,6 @@ import { FormsModule } from '@angular/forms'; styleUrls: ['./input-group-sample-5.component.scss'], templateUrl: './input-group-sample-5.component.html', providers: [{ provide: IGX_INPUT_GROUP_TYPE, useValue: 'box' }], - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxPrefixDirective] }) export class InputGroupSample5Component extends BaseInputGroupSampleComponent { } @@ -360,7 +356,7 @@ The input group component supports several themes - `material`, `fluent`, `boots The Ignite UI for Angular Input Group component can be used inside strictly typed reactive forms which are the default ones as of Angular 14. To find out more about the typed forms, you can check [Angular official documentation](https://angular.io/guide/typed-forms). ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms"; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; @@ -383,7 +379,6 @@ export interface registrationFormGroup selector: 'app-typed-form', templateUrl: './typed-form.component.html', styleUrls: ['./typed-form.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxSuffixDirective, IgxIconComponent, IgxButtonDirective, IgxRippleDirective] }) export class TypedFormComponent { @@ -546,7 +541,7 @@ The following example demonstrates how to inspect the form's state by exporting The result from the above configurations could be seen in the below sample. Start typing into the Email and Password fields and you will notice that the [`igx-hint`](mcp:get_api_reference?platform=angular&component=IgxHintDirective) is shown if the entered values are invalid. The sample also demonstrates how to toggle the password's visibility by using the [`igx-icon`](mcp:get_api_reference?platform=angular&component=IgxIconComponent) and the [`igx-suffix`](#prefix--suffix) directive. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { NgForm, FormsModule } from '@angular/forms'; import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -564,7 +559,6 @@ interface User selector: 'app-template-driven-form-validation', templateUrl: './template-driven-form-validation.component.html', styleUrls: ['./template-driven-form-validation.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] }) export class TemplateDrivenFormValidationComponent { @@ -720,7 +714,7 @@ public get password() { The result from the above configurations could be seen in the below sample. Similar to the template-driven form sample, it also demonstrates how to toggle the password's visibility by using the [`igx-icon`](mcp:get_api_reference?platform=angular&component=IgxIconComponent) and the [`igx-suffix`](#prefix--suffix) directive. ```typescript -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -738,7 +732,6 @@ interface User selector: 'app-reactive-form-validation', templateUrl: './reactive-form-validation.component.html', styleUrls: ['./reactive-form-validation.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] }) export class ReactiveFormValidationComponent { @@ -941,7 +934,7 @@ constructor(fb: FormBuilder) { The below sample demonstrates how the built-in validators could be used in combination with the custom `emailValidator` and cross-field `passwordValidator` from the previous examples. ```typescript -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -967,7 +960,6 @@ interface ValidatorErrors selector: 'app-reactive-form-custom-validation', templateUrl: './reactive-form-custom-validation.component.html', styleUrls: ['./reactive-form-custom-validation.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] }) export class ReactiveFormCustomValidationComponent { @@ -1494,17 +1486,14 @@ The last step is to include the newly created theme: In the sample below, you can see how using the input group with customized CSS variables allows you to create a design that visually resembles the one used in the [`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) design system. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; -import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; @Component({ selector: 'app-input-group-style', templateUrl: 'input-group-styling.component.html', styleUrls: ['input-group-styling.component.scss'], - imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective], - changeDetection: ChangeDetectionStrategy.Eager, - providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('indigo')}] + imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective] }) export class InputGroupStyleComponent { } ``` @@ -1518,42 +1507,40 @@ export class InputGroupStyleComponent { } ``` ```scss -@use "layout.scss"; @use "igniteui-angular/theming" as *; -// CSS variables approach - -// igx-input-group { -// --border-color: #0f62fe; -// --size: #{rem(40px)}; -// --idle-bottom-line-color: #8d8d8d; -// --hover-bottom-line-color: #8d8d8d; -// --hover-placeholder-color: var(--ig-gray-600); -// --idle-secondary-color: var(--ig-gray-600); -// --focused-secondary-color: var(--ig-gray-700); -// --focused-bottom-line-color: #8d8d8d; -// --box-background-hover: var(--ig-gray-100); -// --helper-text-color: var(--ig-gray-600); -// } - -// Sass theme approach - -$custom-input-group: input-group-theme( - $border-color: #0f62fe, - $idle-bottom-line-color: #8d8d8d, - $hover-bottom-line-color: #8d8d8d, - $hover-placeholder-color: var(--ig-gray-600), - $idle-secondary-color: var(--ig-gray-600), - $focused-secondary-color: var(--ig-gray-700), - $size: rem(40px), - $box-border-radius: 0, - $box-background-hover: var(--ig-gray-100), - $placeholder-color: var(--ig-gray-600), - $helper-text-color: var(--ig-gray-600) -); - :host { - @include tokens($custom-input-group); + display: grid; + max-width: rem(300px); + margin-top: rem(24px); + + ::ng-deep { + $custom-input-group: input-group-theme( + $schema: $light-indigo-schema, + $size: rem(40px), + ); + + @include typography( + $font-family: '"IBM Plex Sans", sans-serif', + $type-scale: $indigo-type-scale + ); + + @include theme( + $palette: $light-indigo-palette, + $schema: $light-indigo-schema + ); + + .igx-input-group { + @include tokens($custom-input-group); + + --ig-caption-font-weight: 400; + --ig-subtitle-1-font-weight: 400; + + &__bundle-main { + background: var(--box-background-hover); + } + } + } } ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/interactivity-right-to-left-support.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/interactivity-right-to-left-support.md index c9e708a86..7750dd834 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/interactivity-right-to-left-support.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/interactivity-right-to-left-support.md @@ -27,7 +27,7 @@ Currently the following components have only partial RTL support: This section shows the accessibility (ARIA) support of the framework as well as how easily manageable the `directionality` of the components is. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -35,7 +35,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-calendar', styleUrls: ['./calendar-rtl-sample.component.scss'], templateUrl: './calendar-rtl-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxCalendarComponent] }) export class CalendarRtlSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/label-input.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/label-input.md index 941db2acb..985940975 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/label-input.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/label-input.md @@ -13,7 +13,7 @@ The Ignite UI for Angular Input and Label directives are used to decorate and st ## Angular Label & Input Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { BaseInputGroupSampleComponent } from '../base-input.component'; import { FormsModule } from '@angular/forms'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -22,7 +22,6 @@ import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'ig selector: 'app-input-group-sample-1', styleUrls: ['./input-group-sample-1.component.scss'], templateUrl: './input-group-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective] }) export class InputGroupSample1Component extends BaseInputGroupSampleComponent { } @@ -130,7 +129,7 @@ We can validate an `input` using the [`required`](mcp:get_api_reference?platform ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { BaseInputGroupSampleComponent } from '../base-input.component'; import { FormsModule } from '@angular/forms'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -139,7 +138,6 @@ import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'ig selector: 'app-input-group-sample-2', styleUrls: ['./input-group-sample-2.component.scss'], templateUrl: './input-group-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective] }) export class InputGroupSample2Component extends BaseInputGroupSampleComponent { } @@ -214,7 +212,7 @@ If you want the text in an input element, marked with `igxInput`, to be selected > To use the [`igxTextSelection`](mcp:get_api_reference?platform=angular&component=IgxTextSelectionDirective) directive, you have to import the [`IgxTextSelectionModule`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtextselectionmodule.html). ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxFocusDirective, IgxTextSelectionDirective } from 'igniteui-angular/directives'; @@ -223,7 +221,6 @@ import { IgxFocusDirective, IgxTextSelectionDirective } from 'igniteui-angular/d selector: 'app-input-text-selection', templateUrl: './input-text-selection.component.html', styleUrls: ['./input-text-selection.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, IgxLabelDirective, IgxFocusDirective] }) export class InputTextSelectionComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/layout.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/layout.md index 823c96cdf..3bbca57af 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/layout.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/layout.md @@ -17,7 +17,7 @@ _tocName: Layout Manager ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { IgxFlexDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; @Component({ @@ -25,7 +25,6 @@ import { IgxFlexDirective, IgxLayoutDirective } from 'igniteui-angular/directive selector: 'app-layout-sample', styleUrls: ['./layout-sample.component.scss'], templateUrl: './layout-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxLayoutDirective, IgxFlexDirective] }) @@ -98,7 +97,7 @@ Use the [**igxLayout**](mcp:get_api_reference?platform=angular&component=IgxLayo Use [`igxLayoutDir`](mcp:get_api_reference?platform=angular&component=IgxLayoutDirective&member=dir)`="row"`. ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective, IgxFlexDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -108,7 +107,6 @@ import { IgxButtonDirective, IgxFlexDirective, IgxLayoutDirective, IgxRippleDire selector: 'app-layout-direction-row', styleUrls: ['./layout-direction-row.component.scss'], templateUrl: './layout-direction-row.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective] }) @@ -175,7 +173,7 @@ igx-buttongroup { Use [`igxLayoutDir`](mcp:get_api_reference?platform=angular&component=IgxLayoutDirective&member=dir)`="column"`. ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective, IgxFlexDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -185,7 +183,6 @@ import { IgxButtonDirective, IgxFlexDirective, IgxLayoutDirective, IgxRippleDire selector: 'app-layout-direction-column', styleUrls: ['./layout-direction-column.component.scss'], templateUrl: './layout-direction-column.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective] }) @@ -258,7 +255,7 @@ Customize the order of the element by using `igxFlexOrder`. ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { ButtonGroupAlignment } from 'igniteui-angular/button-group'; import { IgxFlexDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; @@ -267,7 +264,6 @@ import { IgxFlexDirective, IgxLayoutDirective } from 'igniteui-angular/directive selector: 'app-layout-custom-order', styleUrls: ['./layout-custom-order.component.scss'], templateUrl: './layout-custom-order.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxLayoutDirective, IgxFlexDirective] }) @@ -314,7 +310,7 @@ igx-buttongroup { Use [`igxLayoutJustify`](mcp:get_api_reference?platform=angular&component=IgxLayoutDirective&member=justify)`="space-between | space-around"`. ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -324,7 +320,6 @@ import { IgxButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igni selector: 'app-layout-content-space', styleUrls: ['./layout-content-space.component.scss'], templateUrl: './layout-content-space.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective] }) @@ -391,7 +386,7 @@ igx-buttongroup { Use [`igxLayoutJustify`](mcp:get_api_reference?platform=angular&component=IgxLayoutDirective&member=justify)`="flex-start | center | flex-end"` to specify the elements position along the main axis according to your preferences. ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -401,7 +396,6 @@ import { IgxButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igni selector: 'app-layout-justify-content', styleUrls: ['./layout-justify-content.component.scss'], templateUrl: './layout-justify-content.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective] }) @@ -479,7 +473,7 @@ igx-buttongroup { Use [`igxLayoutItemAlign`](mcp:get_api_reference?platform=angular&component=IgxLayoutDirective&member=itemalign)`="flex-start | center | flex-end"` to specify the elements position along the cross axis according to your preferences. ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective, IgxFlexDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -489,7 +483,6 @@ import { IgxButtonDirective, IgxFlexDirective, IgxLayoutDirective, IgxRippleDire selector: 'app-layout-align-items', styleUrls: ['./layout-align-items.component.scss'], templateUrl: './layout-align-items.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective] }) @@ -571,7 +564,7 @@ igx-buttongroup { Use [`igxLayoutWrap`](mcp:get_api_reference?platform=angular&component=IgxLayoutDirective&member=wrap)`="wrap"`. ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { IgxFlexDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; @Component({ @@ -579,7 +572,6 @@ import { IgxFlexDirective, IgxLayoutDirective } from 'igniteui-angular/directive selector: 'app-layout-wrap', styleUrls: ['./layout-wrap.component.scss'], templateUrl: './layout-wrap.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxLayoutDirective, IgxFlexDirective] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/linear-progress.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/linear-progress.md index 52e5ddae9..223663cb7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/linear-progress.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/linear-progress.md @@ -13,14 +13,13 @@ _tocName: Linear Progress ## Angular Linear Progress Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar'; @Component({ selector: 'app-linear-progressbar', styleUrls: ['./linear-progressbar.component.scss'], templateUrl: './linear-progressbar.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxLinearProgressBarComponent] }) export class LinearProgressbarComponent { } @@ -119,14 +118,13 @@ Let's see how we can create different types of progress bars that can be both st So if we set up everything correctly, you should see the following in your browser: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar'; @Component({ selector: 'app-linear-progressbar-sample-1', styleUrls: ['./linear-progressbar-sample-1.component.scss'], templateUrl: './linear-progressbar-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxLinearProgressBarComponent] }) export class LinearProgressbarSample1Component {} @@ -218,14 +216,13 @@ public positionEnd: IgxTextAlign = IgxTextAlign.END; Let's take a look at how this turned out: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxLinearProgressBarComponent, IgxTextAlign } from 'igniteui-angular/progressbar'; @Component({ selector: 'app-linear-progressbar-sample-2', styleUrls: ['./linear-progressbar-sample-2.component.scss'], templateUrl: './linear-progressbar-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxLinearProgressBarComponent] }) export class LinearProgressbarSample2Component { @@ -334,7 +331,7 @@ public decrementProgress() { After completing the steps above, our progress bar should look like this: ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar'; import { IgxIconButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -343,7 +340,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-linear-dynamic-sample', styleUrls: ['./linear-dynamic-sample.component.scss'], templateUrl: './linear-dynamic-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxLinearProgressBarComponent, IgxIconButtonDirective, IgxIconComponent] }) export class LinearDynamicSampleComponent implements OnInit{ @@ -427,14 +423,13 @@ The last step is to **include** the component theme in our application. ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar'; @Component({ selector: 'app-linear-progressbar-styling', styleUrls: ['./linear-progressbar-styling-sample.component.scss'], templateUrl: './linear-progressbar-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxLinearProgressBarComponent] }) export class LinearProgressbarStylingComponent { } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/list.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/list.md index ad27f46f1..edc8ec3e0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/list.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/list.md @@ -15,7 +15,7 @@ The Ignite UI for Angular List component displays rows of items and supports one The following example represents a list populated with contacts with a _name_ and a _phone number_ properties. The [`IgxList`](mcp:get_api_reference?platform=angular&component=IgxListComponent) component uses [`igx-avatar`](avatar.md) and [`igx-icon`](icon.md) to enrich the user experience and expose the capabilities of setting avatar picture and different icon for _favorite a contact_. In addition, the List View expose sorting capabilities achieved by using our filtering pipe. ```typescript -import { Component, HostBinding, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit } from '@angular/core'; import { IgxFilterOptions, IgxFilterPipe, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; @@ -28,7 +28,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-contact-list2', styleUrls: ['./list-sample-4.component.scss'], templateUrl: './list-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe] }) export class ListSample4Component implements OnInit { @@ -260,14 +259,13 @@ If all went great, this is how our empty list should look like: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxEmptyListTemplateDirective, IgxListComponent } from 'igniteui-angular/list'; @Component({ selector: 'app-list-sample-5', styleUrls: ['./list-sample-5.component.scss'], templateUrl: './list-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxEmptyListTemplateDirective] }) export class ListSample5Component { @@ -317,7 +315,7 @@ Sometimes there may be a delay in your data loading. In this case you can set th ``` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, inject, ViewChild } from '@angular/core'; import { IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -326,10 +324,10 @@ import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directi selector: 'app-list-sample-6', styleUrls: ['./list-sample-6.component.scss'], templateUrl: './list-sample-6.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxEmptyListTemplateDirective, IgxButtonDirective, IgxDataLoadingTemplateDirective] }) export class ListSample6Component { + private cdr = inject(ChangeDetectorRef); @ViewChild('fruitList', { static: true }) public fruitList: IgxListComponent; @@ -344,6 +342,7 @@ export class ListSample6Component { const availableFruits: string[] = ['banana', 'orange', 'apple', 'strawberry', 'pear']; availableFruits.forEach((fruit) => { this.fruitsData.push(fruit); }); this.fruitList.isLoading = false; + this.cdr.markForCheck(); }, 1000); } @@ -395,14 +394,13 @@ If all went well, you should see the following in your browser: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; @Component({ selector: 'app-igx-list-simple', styleUrls: ['./list-sample-2.component.scss'], templateUrl: './list-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxListItemComponent] }) export class ListSample2Component { @@ -468,7 +466,7 @@ After all that our Angular list should now look like that: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; import { IgxRippleDirective } from 'igniteui-angular/directives'; @@ -476,7 +474,6 @@ import { IgxRippleDirective } from 'igniteui-angular/directives'; selector: 'app-contact-list', styleUrls: ['./list-sample-3.component.scss'], templateUrl: './list-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective] }) export class ListSample3Component { @@ -664,7 +661,7 @@ And here's the result of all that work: ```typescript -import { Component, HostBinding, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit } from '@angular/core'; import { IgxFilterOptions, IgxFilterPipe, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; @@ -677,7 +674,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-contact-list2', styleUrls: ['./list-sample-4.component.scss'], templateUrl: './list-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe] }) export class ListSample4Component implements OnInit { @@ -926,7 +922,7 @@ Now try panning the list items for yourself: ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; import { IgxToastComponent } from 'igniteui-angular/toast'; @@ -941,7 +937,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-contact-list2', styleUrls: ['./list-sample-7.component.scss'], templateUrl: './list-sample-7.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent, FormsModule, IgxListComponent, IgxListItemLeftPanningTemplateDirective, IgxIconComponent, IgxListItemRightPanningTemplateDirective, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxToastComponent, IgxButtonDirective] }) export class ListSample7Component implements OnInit { @@ -1171,7 +1166,7 @@ The list items have a `selected` property that helps us track which items are "s Here's an example illustrating how the visual style of the items changes when using the `selected` property: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxFilterOptions, IgxFilterPipe, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -1183,7 +1178,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-list-item-selection', templateUrl: './list-item-selection.component.html', styleUrls: ['./list-item-selection.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxRippleDirective, IgxFilterPipe] }) export class ListItemSelectionComponent { @@ -1349,7 +1343,7 @@ If you prefer to use the list theming function, there are parameters available t The following sample demonstrates how to create a simple chat component using **IgxList**. ```typescript -import { AfterViewInit, Component, ElementRef, TemplateRef, ViewChild, ViewEncapsulation, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, TemplateRef, ViewChild, ViewEncapsulation, inject } from '@angular/core'; import { ContactsService } from './services/contacts.service'; import { IMessage, MessagesService } from './services/messages.service'; import { FormsModule } from '@angular/forms'; @@ -1365,7 +1359,6 @@ import { NgClass, NgTemplateOutlet, DatePipe } from '@angular/common'; selector: 'app-list-chat-sample', styleUrls: ['./list-chat-sample.component.scss'], templateUrl: './list-chat-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxListComponent, IgxListItemComponent, IgxAvatarComponent, NgClass, NgTemplateOutlet, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxIconComponent, DatePipe] }) export class ListChatSampleComponent implements AfterViewInit { @@ -1903,7 +1896,7 @@ The last step is to **include** the newly created themes. The result is the following: ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; import { IgxToastComponent } from 'igniteui-angular/toast'; @@ -1916,7 +1909,6 @@ import { IgxRippleDirective } from 'igniteui-angular/directives'; selector: 'app-list-8', styleUrls: ['./list-sample-8.component.scss'], templateUrl: './list-sample-8.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, IgxRippleDirective] }) export class ListSample8Component implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/mask.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/mask.md index 3f751ad4a..87f7e2efa 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/mask.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/mask.md @@ -13,7 +13,7 @@ By applying the [`igxMask`](mcp:get_api_reference?platform=angular&component=Igx ## Angular Mask Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxMaskDirective } from 'igniteui-angular/directives'; @@ -22,7 +22,6 @@ import { IgxMaskDirective } from 'igniteui-angular/directives'; selector: 'app-mask-sample-2', styleUrls: ['./mask-sample-2.component.scss'], templateUrl: './mask-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective, IgxInputDirective, IgxMaskDirective] }) export class MaskSample2Component { @@ -186,7 +185,7 @@ public clear() { ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxMaskDirective } from 'igniteui-angular/directives'; @@ -197,7 +196,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-mask-sample-3', styleUrls: ['./mask-sample-3.component.scss'], templateUrl: './mask-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxMaskDirective] }) export class MaskSample3Component { @@ -277,7 +275,7 @@ private notify(snackbar, message, input) { ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxMaskDirective, IgxTextSelectionDirective } from 'igniteui-angular/directives'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; @@ -286,7 +284,6 @@ import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; selector: 'app-mask-sample-1', styleUrls: ['./mask-sample-1.component.scss'], templateUrl: './mask-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxMaskDirective, IgxTextSelectionDirective, IgxSnackbarComponent] }) @@ -416,7 +413,7 @@ As a result, a '%' sign should be appended to the value on blur (i.e. when the u ```typescript -import { Component, Pipe, PipeTransform, ChangeDetectionStrategy } from '@angular/core'; +import { Component, Pipe, PipeTransform } from '@angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxMaskDirective, IgxTextSelectionDirective } from 'igniteui-angular/directives'; import { FormsModule } from '@angular/forms'; @@ -424,7 +421,6 @@ import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-mask-sample-4', templateUrl: './mask-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxMaskDirective, IgxTextSelectionDirective] }) export class MaskSample4Component { @@ -497,7 +493,7 @@ value = null; ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxMaskDirective } from 'igniteui-angular/directives'; import { FormsModule } from '@angular/forms'; @@ -505,7 +501,6 @@ import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-mask-sample-5', templateUrl: './mask-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxMaskDirective] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-angular-material-theming.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-angular-material-theming.md index f44324770..065312058 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-angular-material-theming.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-angular-material-theming.md @@ -23,10 +23,10 @@ The following article demonstrates how to use both Ignite UI and Angular Materia ## Angular Material Theming Example ```typescript -import { Component, HostBinding, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit, ViewChild, inject } from '@angular/core'; import { IgxDialogActionsDirective, IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; -import { IgxButtonDirective, IgxDividerDirective, IgxIconButtonDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; +import { IgxButtonDirective, IgxDividerComponent, IgxIconButtonDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; @@ -46,8 +46,7 @@ import { MatInput } from '@angular/material/input'; selector: 'app-angular-sample', styleUrls: ['./angular-sample.component.scss'], templateUrl: './angular-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [MatToolbar, IgxButtonDirective, MatMenuTrigger, IgxIconComponent, MatMenu, MatMenuItem, IgxLayoutDirective, IgxAvatarComponent, IgxIconButtonDirective, IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, MatButton, IgxDialogComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxOverlayOutletDirective, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, MatSlider, MatSliderThumb, IgxDividerDirective, MatStepper, MatStep, FormsModule, ReactiveFormsModule, MatStepLabel, MatFormField, MatLabel, MatInput, MatStepperNext, MatStepperPrevious] + imports: [MatToolbar, IgxButtonDirective, MatMenuTrigger, IgxIconComponent, MatMenu, MatMenuItem, IgxLayoutDirective, IgxAvatarComponent, IgxIconButtonDirective, IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, MatButton, IgxDialogComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxOverlayOutletDirective, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, MatSlider, MatSliderThumb, IgxDividerComponent, MatStepper, MatStep, FormsModule, ReactiveFormsModule, MatStepLabel, MatFormField, MatLabel, MatInput, MatStepperNext, MatStepperPrevious] }) export class AngularMaterialComponent implements OnInit { @@ -86,7 +85,7 @@ export class AngularMaterialComponent implements OnInit { private toggleOverlayClasses(theme: 'light' | 'dark') { const overlayClasses = this.overlayContainer.getContainerElement().classList; overlayClasses.add('mat-menu'); - + switch (theme) { case 'light': overlayClasses.remove('dark-menu-theme'); diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-bootstrap-theming.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-bootstrap-theming.md index 9f1c68379..bb761f589 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-bootstrap-theming.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-bootstrap-theming.md @@ -19,7 +19,7 @@ The Ignite UI for Angular is a complete set of Material-based UI Widgets, Compon ## Demo ```typescript -import { Component, HostBinding, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; import { IgxDialogActionsDirective, IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; import { IgxButtonDirective, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; @@ -34,7 +34,6 @@ import { NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, NgbRa selector: 'app-bootstrap-sample', styleUrls: ['./bootstrap-sample.component.scss'], templateUrl: './bootstrap-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, IgxAvatarComponent, IgxIconButtonDirective, IgxIconComponent, IgxLayoutDirective, IgxCardComponent, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, NgbRating, IgxCardActionsComponent, IgxDialogComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxOverlayOutletDirective, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader, NgbAccordionToggle, NgbAccordionButton, NgbCollapse, NgbAccordionCollapse, NgbAccordionBody, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListActionDirective] }) @@ -407,9 +406,8 @@ $custom-dark-palette: palette( $dark-primary: color($custom-dark-palette, "primary"); $dark-secondary: color($custom-dark-palette, "secondary"); -.d-flex.align-items-center { - width: 100%; - padding: 0 16px; +.d-flex { + align-items: center; } .card-wrapper { @@ -554,6 +552,10 @@ $dark-secondary: color($custom-dark-palette, "secondary"); ::ng-deep{ /* Importing Bootstrap .scss file. */ @import "bootstrap/scss/bootstrap"; + + .collapse { + visibility: visible; + } } ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-tailwind-classes.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-tailwind-classes.md index b5566c830..18341c83d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-tailwind-classes.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/misc-tailwind-classes.md @@ -113,13 +113,12 @@ In the sample below, you’ll see a 404 page built entirely with Tailwind utilit > You can see how to style each component by checking out the **Styling** section in its respective documentation topic. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ standalone: true, selector: 'app-tailwind-sample', styleUrls: ['./tailwind-sample.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, templateUrl: './tailwind-sample.component.html' }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/month-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/month-picker.md index f16ea70fc..7fb27239f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/month-picker.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/month-picker.md @@ -15,7 +15,7 @@ _tocName: Month Picker What you see here is a basic Angular Month Picker example with a the component's default view, enabling users to select the year and the month. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCardComponent } from 'igniteui-angular/card'; import { IgxMonthPickerComponent } from 'igniteui-angular/calendar'; @@ -23,7 +23,6 @@ import { IgxMonthPickerComponent } from 'igniteui-angular/calendar'; selector: 'app-monthpicker-sample-1', styleUrls: ['./monthpicker-sample-1.component.scss'], templateUrl: './monthpicker-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxMonthPickerComponent] }) export class MonthpickerSample1Component { @@ -183,7 +182,7 @@ Here is an example of localizing and formatting the month picker component: ```typescript import { registerLocaleData } from '@angular/common'; -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IFormattingOptions, IgxMonthPickerComponent } from 'igniteui-angular/calendar'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxPrefixDirective } from 'igniteui-angular/input-group'; @@ -198,7 +197,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-monthpicker-sample-3', styleUrls: ['./monthpicker-sample-3.component.scss'], templateUrl: './monthpicker-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, IgxSelectItemComponent, IgxCardComponent, IgxMonthPickerComponent] }) export class MonthpickerSample3Component implements OnInit { @@ -305,14 +303,13 @@ After everything's done, your component should look like this: ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxMonthPickerComponent } from 'igniteui-angular/calendar'; @Component({ selector: 'app-monthpicker-styling', styleUrls: ['./monthpicker-styling.component.scss'], templateUrl: './monthpicker-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxMonthPickerComponent] }) export class MonthpickerStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/navbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/navbar.md index 2ac2a3bc3..f63d69e57 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/navbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/navbar.md @@ -13,7 +13,7 @@ The Ignite UI for Angular [`IgxNavbarComponent`](mcp:get_api_reference?platform= ## Angular Navbar Example ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { IgxNavbarComponent } from 'igniteui-angular/navbar'; @Component({ @@ -21,7 +21,6 @@ import { IgxNavbarComponent } from 'igniteui-angular/navbar'; selector: 'app-navbar', styleUrls: ['./navbar.component.scss'], templateUrl: './navbar.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent] }) export class NavbarComponent { } @@ -151,7 +150,7 @@ Next, we need to update our template with an icon button for each of the options If all went well, you should see the following in your browser: ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { IgxNavbarActionDirective, IgxNavbarComponent } from 'igniteui-angular/navbar'; import { IgxIconButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -161,7 +160,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-navbar-sample-1', styleUrls: ['./navbar-sample-1.component.scss'], templateUrl: './navbar-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxIconButtonDirective, IgxIconComponent] }) export class NavbarSample1Component { } @@ -227,7 +225,7 @@ What if we want to use a custom template for our app navigation on the left-most Finally, this is how our navbar should look like with its custom action button icon: ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { IgxNavbarActionDirective, IgxNavbarComponent } from 'igniteui-angular/navbar'; import { IgxIconButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -237,7 +235,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-navbar-sample-2', styleUrls: ['./navbar-sample-2.component.scss'], templateUrl: './navbar-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxIconButtonDirective, IgxIconComponent] }) export class NavbarSample2Component { } @@ -307,7 +304,7 @@ If the sample is configured properly, you should see the following in your brows ```typescript import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common'; -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { IgxNavbarComponent } from 'igniteui-angular/navbar'; @Component({ @@ -315,7 +312,6 @@ import { IgxNavbarComponent } from 'igniteui-angular/navbar'; selector: 'app-navbar', styleUrls: ['./navbar-sample-3.component.scss'], templateUrl: './navbar-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent] }) export class NavbarSample3Component { @@ -388,7 +384,7 @@ If we want to provide a custom content for a navbar's title, we can achieve this > If [`igx-navbar-title`](mcp:get_api_reference?platform=angular&component=IgxNavbarTitleDirective) or [`igxNavbarTitle`](mcp:get_api_reference?platform=angular&component=IgxNavbarTitleDirective) is provided, the default [`title`](mcp:get_api_reference?platform=angular&component=IgxNavbarComponent&member=title) will not be used. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarTitleDirective } from 'igniteui-angular/navbar'; import { IgxIconButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -397,7 +393,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-navbar-custom-title', templateUrl: './navbar-custom-title.component.html', styleUrls: ['./navbar-custom-title.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxIconButtonDirective, IgxIconComponent, IgxNavbarTitleDirective] }) export class NavbarCustomTitleComponent { } @@ -505,7 +500,7 @@ The last step is to pass the newly created theme to the `tokens` mixin: ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxNavbarActionDirective, IgxNavbarComponent } from 'igniteui-angular/navbar'; import { IgxIconButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -514,7 +509,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-navbar-style', styleUrls: ['./navbar-style.component.scss'], templateUrl: './navbar-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxIconButtonDirective, IgxIconComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/navdrawer.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/navdrawer.md index 1e22ddc18..5d75730af 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/navdrawer.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/navdrawer.md @@ -15,7 +15,7 @@ _tocName: Navigation Drawer
```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer'; import { IgxIconButtonDirective, IgxRippleDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -25,7 +25,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-nav-drawer-simple', styleUrls: ['./nav-drawer-simple.component.scss'], templateUrl: './nav-drawer-simple.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective, IgxToggleActionDirective] }) export class NavDrawerSimpleComponent { @@ -334,7 +333,7 @@ Here's how that would look applied to the previous example: Now the changed example should look like that: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -344,7 +343,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-nav-drawer-pin', styleUrls: ['./nav-drawer-pin.component.scss'], templateUrl: './nav-drawer-pin.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective] }) export class NavDrawerPinComponent { @@ -454,7 +452,7 @@ The mini variant is commonly used in a persistent setup, so we've set `pin` and ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -464,7 +462,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-nav-drawer-mini', styleUrls: ['./nav-drawer-mini.component.scss'], templateUrl: './nav-drawer-mini.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxNavDrawerMiniTemplateDirective, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective] }) export class NavDrawerMiniComponent { @@ -602,7 +599,7 @@ import { RouterModule } from '@angular/router'; After all the steps above are completed, your app should look like that: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer'; import { IgxIconButtonDirective, IgxRippleDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -613,7 +610,6 @@ import { RouterLinkActive, RouterLink } from '@angular/router'; selector: 'app-nav-drawer-routing', styleUrls: ['./nav-drawer-routing.component.scss'], templateUrl: './nav-drawer-routing.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, RouterLinkActive, RouterLink, IgxIconButtonDirective, IgxToggleActionDirective, IgxIconComponent] }) export class NavDrawerRoutingComponent { @@ -737,7 +733,7 @@ There's also child routing extracted from the `children` property of the routes. The example below presents the capabilities of a hierarchical structure by using predefined data with topic names and links. The structure allows users to easily generate functional and detailed navigations and to have the ability to define each element whether to be displayed as a link or as an indicator. ```typescript -import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, ViewChild } from '@angular/core'; import { IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective } from 'igniteui-angular/tree'; import { IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxNavDrawerTemplateDirective, IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer'; @@ -749,7 +745,6 @@ import { RouterLink } from '@angular/router'; selector: 'app-nav-drawer-hierarchical', templateUrl: './nav-drawer-hierarchical.component.html', styleUrls: ['./nav-drawer-hierarchical.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, RouterLink, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective, IgxIconComponent] }) export class NavDrawerHierarchicalComponent implements AfterViewInit { @@ -901,14 +896,13 @@ The last step is to **include** the component theme in our application. ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { NavDrawerRoutingComponent } from '../nav-drawer-routing/nav-drawer-routing.component'; @Component({ selector: 'app-nav-drawer-styling', styleUrls: ['./nav-drawer-styling.component.scss'], templateUrl: './nav-drawer-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [NavDrawerRoutingComponent] }) export class NavDrawerStylingComponent { } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-position.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-position.md index 3ce225fff..a24d692cf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-position.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-position.md @@ -13,7 +13,7 @@ Position strategies determine where the content is displayed in the provided `Ig ```typescript -import { Component, OnDestroy, ViewContainerRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnDestroy, ViewContainerRef, inject } from '@angular/core'; import { IgxOverlayService } from 'igniteui-angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { MyDynamicCardComponent} from '../overlay-dynamic-card/overlay-dynamic-card.component'; @@ -21,7 +21,6 @@ import { MyDynamicCardComponent} from '../overlay-dynamic-card/overlay-dynamic-c selector: 'app-overlay-sample', templateUrl: `./overlay-main-sample-1.component.html`, styleUrls: [`./overlay-main-sample-1.component.scss`], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective] }) export class OverlaySampleMain1Component implements OnDestroy { @@ -163,7 +162,7 @@ this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewCo ```typescript -import { Component, ElementRef, OnDestroy, ViewChild, ViewContainerRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnDestroy, ViewChild, ViewContainerRef, inject } from '@angular/core'; import { ConnectedPositioningStrategy, IgxOverlayService, OverlaySettings } from 'igniteui-angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { Subject } from 'rxjs'; @@ -173,7 +172,6 @@ import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic- styleUrls: ['./overlay-position-sample-1.component.scss'], templateUrl: './overlay-position-sample-1.component.html', providers: [IgxOverlayService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective] }) export class OverlayPositionSample1Component implements OnDestroy { @@ -253,7 +251,7 @@ this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewCo ```typescript -import { Component, ElementRef, OnDestroy, ViewChild, ViewContainerRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnDestroy, ViewChild, ViewContainerRef, inject } from '@angular/core'; import { ConnectedPositioningStrategy, HorizontalAlignment, IgxOverlayService, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component'; @@ -262,7 +260,6 @@ import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic- styleUrls: ['./overlay-position-sample-2.component.scss'], templateUrl: './overlay-position-sample-2.component.html', providers: [IgxOverlayService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective] }) export class OverlayPositionSample2Component implements OnDestroy { @@ -334,7 +331,7 @@ overlay.attach(element, { positionStrategy: myPositionStrategy }); ``` ```typescript -import { Component, ElementRef, OnDestroy, ViewChild, ViewContainerRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnDestroy, ViewChild, ViewContainerRef, inject } from '@angular/core'; import { AutoPositionStrategy, IgxOverlayService } from 'igniteui-angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component'; @@ -343,7 +340,6 @@ import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic- styleUrls: ['./overlay-position-sample-3.component.scss'], templateUrl: './overlay-position-sample-3.component.html', providers: [IgxOverlayService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective] }) export class OverlayPositionSample3Component implements OnDestroy { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-scroll.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-scroll.md index c00fee6ac..3a1177ffb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-scroll.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-scroll.md @@ -76,7 +76,7 @@ The scroll strategies can be passed to the [`overlaySettings`](mcp:get_api_refer The demo below illustrates the difference between the separate [`scrollStrategies`](mcp:get_api_reference?platform=angular&component=IScrollStrategy): ```typescript -import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewContainerRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewContainerRef, inject } from '@angular/core'; import { AbsoluteScrollStrategy, BlockScrollStrategy, CloseScrollStrategy, ConnectedPositioningStrategy, IgxOverlayService, NoOpScrollStrategy } from 'igniteui-angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { Subject } from 'rxjs'; @@ -87,12 +87,12 @@ import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic- styleUrls: ['./overlay-scroll-sample-2.component.scss'], templateUrl: './overlay-scroll-sample-2.component.html', providers: [IgxOverlayService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent, MyDynamicCardComponent] }) export class OverlayScrollSample2Component implements OnInit, OnDestroy { private overlay = inject(IgxOverlayService); private viewContainerRef = inject(ViewContainerRef); + private cdr = inject(ChangeDetectorRef); @ViewChild('scrollDemo', { static: true }) public scrollDemo: ElementRef; @@ -116,7 +116,10 @@ export class OverlayScrollSample2Component implements OnInit, OnDestroy { this.overlay .closed .pipe(takeUntil(this.destroy$)) - .subscribe(() => this.previewHidden = false); + .subscribe(() => { + this.previewHidden = false; + this.cdr.markForCheck(); + }); } public ngOnInit(): void { @@ -309,7 +312,7 @@ The [`overlaySettings`](mcp:get_api_reference?platform=angular&component=Overlay ```typescript -import { Component, ElementRef, OnDestroy, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnDestroy, ViewChild, inject } from '@angular/core'; import { AbsoluteScrollStrategy, AutoPositionStrategy, ConnectedPositioningStrategy, ElasticPositionStrategy, GlobalPositionStrategy, HorizontalAlignment, IgxOverlayService, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -321,7 +324,6 @@ import { FormsModule } from '@angular/forms'; styleUrls: ['./overlay-scroll-sample-1.component.scss'], templateUrl: './overlay-scroll-sample-1.component.html', providers: [IgxOverlayService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxIconComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective] }) export class OverlayScrollSample1Component implements OnDestroy { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-styling.md index b3dc34009..a5d62389f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay-styling.md @@ -92,7 +92,7 @@ Now, the combo's list of items are properly rendered **inside** of our component ```typescript -import { Component, ElementRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, inject } from '@angular/core'; import { IgxOverlayService } from 'igniteui-angular/core'; import { IgxComboComponent } from 'igniteui-angular/combo'; import { FormsModule } from '@angular/forms'; @@ -101,7 +101,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-overlay-styling', styleUrls: ['overlay-styling.component.scss'], templateUrl: 'overlay-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxComboComponent, FormsModule] }) export class OverlayStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay.md index 0029f3d3f..b6ad001f5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/overlay.md @@ -18,7 +18,7 @@ The overlay service is fully integrated in the toggle directive. ```typescript -import { Component, OnDestroy, ViewContainerRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnDestroy, ViewContainerRef, inject } from '@angular/core'; import { IgxOverlayService } from 'igniteui-angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { MyDynamicCardComponent} from '../overlay-dynamic-card/overlay-dynamic-card.component'; @@ -26,7 +26,6 @@ import { MyDynamicCardComponent} from '../overlay-dynamic-card/overlay-dynamic-c selector: 'app-overlay-sample', templateUrl: `./overlay-main-sample-1.component.html`, styleUrls: [`./overlay-main-sample-1.component.scss`], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective] }) export class OverlaySampleMain1Component implements OnDestroy { @@ -191,7 +190,7 @@ In the below demo, we can pass the [IgxCard](card.md#angular-card-example) compo ```typescript -import { Component, OnDestroy, ViewContainerRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnDestroy, ViewContainerRef, inject } from '@angular/core'; import { IgxOverlayService } from 'igniteui-angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { MyDynamicCardComponent} from '../overlay-dynamic-card/overlay-dynamic-card.component'; @@ -199,7 +198,6 @@ import { MyDynamicCardComponent} from '../overlay-dynamic-card/overlay-dynamic-c selector: 'app-overlay-sample', templateUrl: `./overlay-main-sample-1.component.html`, styleUrls: [`./overlay-main-sample-1.component.scss`], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective] }) export class OverlaySampleMain1Component implements OnDestroy { @@ -309,7 +307,7 @@ const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings ```typescript -import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewContainerRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewContainerRef, inject } from '@angular/core'; import { AbsolutePosition, IgxOverlayService, OverlaySettings, RelativePosition, RelativePositionStrategy } from 'igniteui-angular/core'; import { IButtonGroupEventArgs, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -323,7 +321,6 @@ import { NgTemplateOutlet } from '@angular/common'; styleUrls: ['./overlay-preset-settings-sample.component.scss'], templateUrl: './overlay-preset-settings-sample.component.html', providers: [IgxOverlayService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent, NgTemplateOutlet, IgxButtonGroupComponent, IgxButtonDirective] }) export class OverlayPresetSettingsSampleComponent implements OnInit, OnDestroy { @@ -714,7 +711,7 @@ Using the [`overlaySettings`](mcp:get_api_reference?platform=angular&component=O ```typescript -import { Component, ElementRef, OnDestroy, ViewChild, ViewContainerRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnDestroy, ViewChild, ViewContainerRef, inject } from '@angular/core'; import { ConnectedPositioningStrategy, IgxOverlayService } from 'igniteui-angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { CardSample1Component } from '../../../layouts/card/card-sample-1/card-sample-1.component'; @@ -723,7 +720,6 @@ import { CardSample1Component } from '../../../layouts/card/card-sample-1/card-s selector: 'app-overlay-sample', templateUrl: `./overlay-main-sample-2.component.html`, styleUrls: [`./overlay-main-sample-2.component.scss`], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective] }) export class OverlaySampleMain2Component implements OnDestroy { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/paginator.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/paginator.md index 20beb7e7d..db8f8819c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/paginator.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/paginator.md @@ -19,7 +19,7 @@ Ignite UI for Angular Paginator allows you to divide a set of data into a number The following Angular Pagination example shows a Paginator template demonstrating how users can navigate through 4 pages with different items and select the number of items to be displayed from a drop-down menu. ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, ViewChild, inject } from '@angular/core'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; import { IgxButtonDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -31,7 +31,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-pagination-sample', styleUrls: ['./pagination-sample.component.scss'], templateUrl: './pagination-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxIconButtonDirective, IgxIconComponent, IgxPaginatorComponent, CurrencyPipe] }) export class PaginationSampleComponent implements AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-export-excel.md index a894a781f..71fd81f4b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-export-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-export-excel.md @@ -23,7 +23,7 @@ The sections below walk through setup, usage patterns, and tips for tailoring ea ## Angular Excel Exporter Example This live example demonstrates the standard Excel and PDF export workflow for the Pivot Grid—bound data, two export buttons (Excel and PDF), and the resulting `.xlsx` and `.pdf` files with preserved filtering and sorting state. Share it with stakeholders who want to preview the experience before wiring it into their application. ```typescript -import { Component, ViewChild, inject, ChangeDetectionStrategy } from "@angular/core"; +import { Component, ViewChild, inject } from "@angular/core"; import { IPivotConfiguration, @@ -71,7 +71,6 @@ export class IgxTotalSaleAggregate { selector: 'app-pivot-export-sample', styleUrls: ['./pivot-export.component.scss'], templateUrl: './pivot-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxPivotGridComponent] }) export class PivotExportComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid-custom.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid-custom.md index 1b2dc0226..282390647 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid-custom.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid-custom.md @@ -21,7 +21,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { The following example show how to handle scenarios, where the data is already aggregated and how its structure should look like: ```typescript -import { AfterViewInit, Component, ViewChild, inject, ChangeDetectionStrategy } from "@angular/core"; +import { AfterViewInit, Component, ViewChild, inject } from "@angular/core"; import { IPivotConfiguration, IgxPivotNumericAggregate, NoopPivotDimensionsStrategy } from 'igniteui-angular/grids/core'; import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid'; @@ -32,7 +32,6 @@ import { PivotDataService } from "../../services/pivotRemoteData.service"; styleUrls: ['./pivot-grid-noop-sample.component.scss'], templateUrl: './pivot-grid-noop-sample.component.html', providers: [PivotDataService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxPivotGridComponent] }) export class PivotGridNoopSampleComponent implements AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid-features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid-features.md index 55942488d..d5d30d6e4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid-features.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid-features.md @@ -23,7 +23,7 @@ The pivot and flat grid component classes inherit from a common base and thus sh The Pivot Grid component has additional features and functionalities related to its dimensions as described below. ```typescript -import { Component, ChangeDetectionStrategy } from "@angular/core"; +import { Component } from "@angular/core"; import { IPivotConfiguration, IgxPivotDateDimension, IgxPivotNumericAggregate, PivotAggregation } from 'igniteui-angular/grids/core'; import { FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand } from 'igniteui-angular/core'; @@ -61,7 +61,6 @@ export class IgxTotalSaleAggregate { selector: 'app-pivot-features-sample', styleUrls: ['./pivot-features.component.scss'], templateUrl: './pivot-features.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxPivotGridComponent, IgxPivotDataSelectorComponent] }) export class PivotFeaturesComponent { @@ -358,7 +357,7 @@ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, h > The row summary related options - `horizontalSummary` and `horizontalSummariesPosition` are applicable only for the `Horizontal` layout mode. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from "@angular/core"; +import { Component, ViewChild } from "@angular/core"; import { IPivotConfiguration, IPivotUISettings, IgxPivotDateDimension, IgxPivotNumericAggregate, PivotAggregation, PivotRowLayoutType, PivotSummaryPosition } from 'igniteui-angular/grids/core'; import { FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand } from 'igniteui-angular/core'; @@ -398,7 +397,6 @@ export class IgxTotalSaleAggregate { selector: 'app-pivot-layout-sample', styleUrls: ['./pivot-layout.component.scss'], templateUrl: './pivot-layout.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, IgxPivotGridComponent] }) export class PivotGridLayoutComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid.md index 05d82b34a..e8c4efd9f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid.md @@ -22,7 +22,7 @@ The rows and columns represent distinct data groups, and the data cell values re The following is an Angular Pivot Grid example in combination with the Angular Pivot Data Selector Component. This way you can have more flexible runtime configuration options. ```typescript -import { Component, ChangeDetectionStrategy } from "@angular/core"; +import { Component } from "@angular/core"; import { GridColumnDataType } from 'igniteui-angular/core'; import { IPivotConfiguration, IgxPivotDateDimension, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core'; import { IgxPivotDataSelectorComponent, IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid'; @@ -31,7 +31,6 @@ import { SALES_DATA_NEW } from '../../data/salesDataNew'; selector: 'app-pivot-data-selector-sample', styleUrls: ['./pivot-data-selector-sample.component.scss'], templateUrl: './pivot-data-selector-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxPivotGridComponent, IgxPivotDataSelectorComponent] }) export class PivotDataSelectorSampleComponent { @@ -409,7 +408,7 @@ public data = [ Resulting in the following view, which groups the Product Categories unique columns, Sellers Names in unique rows and displays the related aggregations for the number of units in the related cells: ```typescript -import { Component, ChangeDetectionStrategy } from "@angular/core"; +import { Component } from "@angular/core"; import { DATA } from '../../data/pivot-data'; import { IPivotConfiguration, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core'; @@ -419,7 +418,6 @@ import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid'; selector: 'app-pivot-grid-basic-sample', styleUrls: ['./pivot-grid-basic-sample.component.scss'], templateUrl: './pivot-grid-basic-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxPivotGridComponent] }) export class PivotGridBasicSampleComponent { @@ -432,7 +430,7 @@ export class PivotGridBasicSampleComponent { memberFunction: (data) => data.Product.Name, enabled: true } - + ], rows: [ { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-state-persistence.md index df2e61dc1..b7abdc343 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-state-persistence.md @@ -124,7 +124,7 @@ public onDimensionInit(dim: IPivotDimension) { ``` ## Demo ```typescript -import { AfterViewInit, Component, OnInit, QueryList, ViewChild, ViewChildren, inject, ChangeDetectionStrategy } from "@angular/core"; +import { AfterViewInit, Component, OnInit, QueryList, ViewChild, ViewChildren, inject } from "@angular/core"; import { NavigationStart, Router, RouterLink } from "@angular/router"; import { GridFeatures, IGridState, IGridStateOptions, IPivotAggregator, IPivotConfiguration, IPivotDimension, IPivotValue, IgxGridStateDirective, IgxPivotDateDimension, IgxPivotNumericAggregate, PivotAggregation } from 'igniteui-angular/grids/core'; @@ -168,7 +168,6 @@ export class IgxTotalSaleAggregate { selector: 'app-pivot-grid-state-persistence-sample', styleUrls: ['./pivot-grid-state-persistence-sample.component.scss'], templateUrl: './pivot-grid-state-persistence-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, IgxPivotGridComponent, IgxGridStateDirective] }) export class PivotGridStatePersistenceSampleComponent implements OnInit, AfterViewInit { @@ -545,7 +544,7 @@ public restoreState() { } ``` ```typescript -import { AfterViewInit, Component, ViewChild, inject, ChangeDetectionStrategy } from "@angular/core"; +import { AfterViewInit, Component, ViewChild, inject } from "@angular/core"; import { IGridState, IGridStateOptions, IPivotConfiguration, IgxGridStateDirective, IgxPivotNumericAggregate, NoopPivotDimensionsStrategy } from 'igniteui-angular/grids/core'; import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid'; import { NoopSortingStrategy } from 'igniteui-angular/core'; @@ -559,7 +558,6 @@ import { take } from 'rxjs/operators'; styleUrls: ['./pivot-grid-noop-persistence-sample.component.scss'], templateUrl: './pivot-grid-noop-persistence-sample.component.html', providers: [PivotDataService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, IgxPivotGridComponent, IgxGridStateDirective] }) export class PivotGridNoopPersistenceSampleComponent implements AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/query-builder-model.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/query-builder-model.md index 1c7a9b45c..5de6f5a0f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/query-builder-model.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/query-builder-model.md @@ -16,7 +16,7 @@ This Angular Query Builder example demonstrates how the [`IgxQueryBuilderCompone ```typescript import { HttpClient } from '@angular/common/http'; -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { FilteringExpressionsTree, FilteringLogic, IExpressionTree } from 'igniteui-angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -28,7 +28,6 @@ const API_ENDPOINT = 'https://data-northwind.indigo.design'; selector: 'query-builder-request-sample', styleUrls: ['./query-builder-request-sample.component.scss'], templateUrl: 'query-builder-request-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxQueryBuilderComponent, IgxGridComponent, IgxColumnComponent] }) export class QueryBuilderRequestSampleComponent implements OnInit, AfterViewInit { @@ -75,11 +74,11 @@ export class QueryBuilderRequestSampleComponent implements OnInit, AfterViewInit fields: this.ordersFields } ]; - + const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['orderId', 'customerId', 'employeeId', 'shipperId', 'orderDate', 'requiredDate', 'shipVia', 'freight', 'shipName', 'completed']); this.expressionTree = tree; } - + public ngAfterViewInit(): void { this.onChange(); } @@ -339,7 +338,7 @@ Now we can set the `expressionsTree` property of the `IgxQueryBuilderComponent` ```typescript import { HttpClient } from '@angular/common/http'; -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { EntityType, FilteringExpressionsTree, IExpressionTree, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -352,7 +351,6 @@ const API_ENDPOINT = 'https://data-northwind.indigo.design'; selector: 'app-query-builder-sql-sample', styleUrls: ['./query-builder-sql-sample.component.scss'], templateUrl: 'query-builder-sql-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxQueryBuilderComponent, IgxGridComponent, IgxColumnComponent] }) export class QueryBuilderSqlSampleComponent implements OnInit, AfterViewInit { @@ -456,7 +454,7 @@ export class QueryBuilderSqlSampleComponent implements OnInit, AfterViewInit { `${tree.returnFields.join(',')}` : '*'; - const selectClause = `SELECT ${selectFields}`; + const selectClause = `SELECT ${selectFields}`; const fromClause = `FROM ${tree.entity}`; const whereClause = this.buildWhereClause(tree); @@ -528,7 +526,7 @@ export class QueryBuilderSqlSampleComponent implements OnInit, AfterViewInit { break; } } - + public onChange() { const sqlQuery = this.transformExpressionTreeToSqlQuery(this.expressionTree); this.sqlQuery = format(sqlQuery); diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/query-builder.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/query-builder.md index 45a3827a6..08bdae8c8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/query-builder.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/query-builder.md @@ -22,7 +22,7 @@ We’ve created this Angular Query Builder example to show you the default funct ```typescript import { HttpClient } from '@angular/common/http'; -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { FilteringExpressionsTree, FilteringLogic, IExpressionTree } from 'igniteui-angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -34,7 +34,6 @@ const API_ENDPOINT = 'https://data-northwind.indigo.design'; selector: 'query-builder-request-sample', styleUrls: ['./query-builder-request-sample.component.scss'], templateUrl: 'query-builder-request-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxQueryBuilderComponent, IgxGridComponent, IgxColumnComponent] }) export class QueryBuilderRequestSampleComponent implements OnInit, AfterViewInit { @@ -81,11 +80,11 @@ export class QueryBuilderRequestSampleComponent implements OnInit, AfterViewInit fields: this.ordersFields } ]; - + const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['orderId', 'customerId', 'employeeId', 'shipperId', 'orderDate', 'requiredDate', 'shipVia', 'freight', 'shipName', 'completed']); this.expressionTree = tree; } - + public ngAfterViewInit(): void { this.onChange(); } @@ -382,7 +381,7 @@ We’ve created this Angular Query Builder example to show you the templating an ```typescript import { NgTemplateOutlet } from '@angular/common'; -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; import { IgxComboModule } from 'igniteui-angular/combo'; @@ -394,7 +393,6 @@ import { IgxSelectModule } from 'igniteui-angular/select'; selector: 'app-query-builder-template-sample', styleUrls: ['./query-builder-template-sample.component.scss'], templateUrl: 'query-builder-template-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, @@ -634,14 +632,13 @@ The last step is to **include** the new component themes using the `tokens` mixi ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgxQueryBuilderComponent } from 'igniteui-angular/query-builder'; @Component({ selector: 'app-query-builder-style-sample', styleUrls: ['./query-builder-style.component.scss'], templateUrl: 'query-builder-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxQueryBuilderComponent] }) export class QueryBuilderStyleComponent implements OnInit { @@ -691,7 +688,7 @@ export class QueryBuilderStyleComponent implements OnInit { name: "Orders", fields: this.ordersFields } - ]; + ]; } } ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/radio-button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/radio-button.md index 84b2803af..68b3a7069 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/radio-button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/radio-button.md @@ -15,7 +15,7 @@ _tocName: Radio & Radio Group ## Angular Radio & Radio Group Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxRadioComponent } from 'igniteui-angular/radio'; import { FormsModule } from '@angular/forms'; @@ -23,7 +23,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-radio-sample-1', styleUrls: ['./radio-sample-1.component.scss'], templateUrl: './radio-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxRadioComponent, FormsModule] }) export class RadioSample1Component { @@ -169,7 +168,7 @@ Pay attention that if you don't use the `NgModel` directive in a two-way data bi The final result would be something like that: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxRadioComponent } from 'igniteui-angular/radio'; import { FormsModule } from '@angular/forms'; @@ -178,7 +177,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-radio-sample-2', styleUrls: ['./radio-sample-2.component.scss'], templateUrl: './radio-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxRadioComponent, FormsModule] }) export class RadioSample2Component { @@ -324,7 +322,7 @@ Finally, **include** the custom theme in your application: ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxRadioComponent } from 'igniteui-angular/radio'; import { FormsModule } from '@angular/forms'; @@ -332,7 +330,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-radio-sample-1', styleUrls: ['./radio-styling-sample.component.scss'], templateUrl: './radio-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxRadioComponent, FormsModule] }) export class RadioStylingSampleComponent { @@ -355,27 +352,15 @@ export class RadioStylingSampleComponent { // CSS variables approach // igx-radio { -// --empty-color: #556b81; -// --label-color: #131e29; -// --fill-color: #0064d9; -// --focus-outline-color: #0032a5; -// } - -// igx-radio:hover { -// --empty-fill-color: #e3f0ff; -// --empty-color: #0064d9; -// --hover-color: transparent; +// --empty-color: #345779; +// --fill-color: #2dabe8; // } // Sass theme approach $custom-radio-theme: radio-theme( - $empty-color: #556b81, - $label-color: #131e29, - $fill-color: #0064d9, - $focus-outline-color: #0032a5, - $fill-color-hover: #0064d9, - $hover-color: transparent + $empty-color: #345779, + $fill-color: #2dabe8, ); :host { @@ -436,7 +421,7 @@ At the end your radio button should look like this: ### Demo ```typescript -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; @@ -447,7 +432,6 @@ import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directi selector: 'app-radio-group-sample', styleUrls: ['./radio-group-sample.component.scss'], templateUrl: './radio-group-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxRippleDirective, IgxLabelDirective] }) export class RadioGroupSampleComponent { @@ -608,7 +592,7 @@ public alignment = RadioGroupAlignment.vertical; ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxRadioComponent, IgxRadioGroupDirective, RadioGroupAlignment } from 'igniteui-angular/radio'; import { FormsModule } from '@angular/forms'; @@ -616,7 +600,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-radio-group-vertical', styleUrls: ['./radio-group-vertical.component.scss'], templateUrl: './radio-group-vertical.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxRadioGroupDirective, IgxRadioComponent, FormsModule] }) export class RadioGroupVerticalComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/rating.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/rating.md index c5235dcd7..885ea6ab0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/rating.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/rating.md @@ -18,7 +18,7 @@ The Ignite UI Angular Star Rating component can be easily installed from the ign This Angular Star Rating example demonstrates how you can use Ignite UI Angular to build simple five-star rating widget, comparing and displaying the score of different products. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxToastComponent } from 'igniteui-angular/toast'; import { CellType, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -34,7 +34,6 @@ defineComponents(IgcRatingComponent); selector: 'app-grid-rating-sample', styleUrls: ['./grid-with-rating.component.scss'], templateUrl: 'grid-with-rating.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgcFormControlDirective, FormsModule, IgxToastComponent] }) export class GridWithRatingComponent implements OnInit { @@ -197,7 +196,7 @@ Add a rating with e.g. ngModel for value and it will two-way bind with your mode The following application shows one example of how this integration works in a real use-case with forms. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgcRatingComponent, defineComponents } from 'igniteui-webcomponents'; import { FormsModule } from '@angular/forms'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; @@ -212,7 +211,6 @@ defineComponents(IgcRatingComponent) selector: 'app-rating-sample', styleUrls: ['./rating-form.component.scss'], templateUrl: './rating-form.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardHeaderSubtitleDirective, IgcFormControlDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent, CurrencyPipe] }) export class RatingInFormComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ripple.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ripple.md index 93157730c..62361994f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ripple.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ripple.md @@ -15,14 +15,13 @@ _tocName: Ripple
```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-ripple-sample-5', styleUrls: ['./ripple-sample-5.component.scss'], templateUrl: './ripple-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective] }) export class RippleSample5Component { } @@ -114,14 +113,13 @@ You can easily change the default ripple color using the `igxRipple`: ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-ripple-sample-6', styleUrls: ['./ripple-sample-6.component.scss'], templateUrl: './ripple-sample-6.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective] }) export class RippleSample6Component { } @@ -147,14 +145,13 @@ By default, the ripple effect starts from the position of the click event. You c ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-ripple-sample-3', styleUrls: ['./ripple-sample-3.component.scss'], templateUrl: './ripple-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective] }) export class RippleSample3Component { } @@ -180,14 +177,13 @@ We can use the [`igxRippleDuration`](mcp:get_api_reference?platform=angular&comp ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-ripple-sample-4', styleUrls: ['./ripple-sample-4.component.scss'], templateUrl: './ripple-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective] }) export class RippleSample4Component { } @@ -216,14 +212,13 @@ Use the [`igxRippleTarget`](mcp:get_api_reference?platform=angular&component=Igx Notice that no matter whether you click on the parent or the child element, the ripple effect will only appear on the button. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-ripple-sample-2', styleUrls: ['./ripple-sample-2.component.scss'], templateUrl: './ripple-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxRippleDirective, IgxButtonDirective] }) export class RippleSample2Component { } @@ -299,7 +294,7 @@ The next step is to pass the custom ripple theme: ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; @@ -308,7 +303,6 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar'; selector: 'app-ripple-styling-sample', styleUrls: ['./ripple-styling-sample.component.scss'], templateUrl: './ripple-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconButtonDirective, IgxIconComponent, IgxAvatarComponent] }) export class RippleStylingSampleComponent { } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/select.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/select.md index 3685fad94..2282f0522 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/select.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/select.md @@ -15,7 +15,7 @@ Angular Select is a form component used for selecting a single value from a list Below is a basic Angular Select example. It has a simple contextual menu that displays a list of several choices opening per click. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -24,7 +24,6 @@ import { IgxLabelDirective } from 'igniteui-angular/input-group'; selector: 'app-select-sample-1', styleUrls: ['select-sample-1.component.scss'], templateUrl: 'select-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent] }) export class SelectSample1Component { @@ -176,7 +175,7 @@ The Select component supports the following directives applicable to the [Input > This component uses Material Icons. Add the following link to your `index.html`: `` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxHintDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -187,7 +186,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-select-input-directives', styleUrls: ['select-input-directives.scss'], templateUrl: 'select-input-directives.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, FormsModule, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxSelectItemComponent] }) @@ -252,7 +250,7 @@ Then in your template file you can iterate over the objects and access their ite ``` ```typescript -import { Component, ElementRef, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, ViewChild, inject } from '@angular/core'; import { IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -262,7 +260,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-select-sample-2', styleUrls: ['select-sample-2.component.scss'], templateUrl: 'select-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectGroupComponent, IgxSelectItemComponent, IgxIconComponent] }) export class SelectSample2Component { @@ -399,7 +396,7 @@ In this example, there are both header and footer ng-templates defined. In the h ``` ```typescript -import { ChangeDetectorRef, Component, ElementRef, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, OnInit, inject } from '@angular/core'; import { IgxSelectComponent, IgxSelectFooterDirective, IgxSelectHeaderDirective, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -410,7 +407,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-select-header-footer', styleUrls: ['select-header-footer.component.scss'], templateUrl: 'select-header-footer.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxIconComponent, IgxSelectHeaderDirective, IgxButtonGroupComponent, IgxButtonDirective, IgxSelectFooterDirective] }) export class SelectHeaderFooterComponent implements OnInit { @@ -556,6 +552,7 @@ igx-select { justify-content: space-between; align-items: center; padding: 0 1.5rem; + gap: 1rem; background: color($color: 'gray', $variant: 100); igx-icon { &.important-icon { @@ -692,7 +689,7 @@ You can see that we create a [_PositionSettings_](mcp:get_api_reference?platform ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -703,7 +700,6 @@ import { scaleInTop, scaleOutBottom } from 'igniteui-angular/animations'; selector: 'app-select-sample-4', styleUrls: ['select-sample-4.component.scss'], templateUrl: 'select-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent] }) export class SelectSample4Component implements OnInit { @@ -842,7 +838,7 @@ The last step is to pass the custom radio theme in our application: ``` ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -853,7 +849,6 @@ import { scaleInTop, scaleOutBottom } from 'igniteui-angular/animations'; selector: 'app-select-styling', styleUrls: ['select-styling.component.scss'], templateUrl: 'select-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent] }) export class SelectStylingComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/simple-combo.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/simple-combo.md index 8f61a371d..8a1bd5033 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/simple-combo.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/simple-combo.md @@ -17,7 +17,7 @@ In this Angular Simple ComboBox example, you can see how users can select the ch
```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgRect } from 'igniteui-angular-core'; import { StockData, updatedStockData } from '../../../data/stocks-data'; import { IgxSimpleComboComponent } from 'igniteui-angular/simple-combo'; @@ -31,7 +31,6 @@ import { IgxFinancialChartCoreModule, IgxFinancialChartModule } from 'igniteui-a selector: 'app-simple-combo-main', templateUrl: 'simple-combo-main.component.html', styleUrls: ['simple-combo-main.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSimpleComboComponent, FormsModule, IgxButtonGroupComponent, IgxButtonDirective, IgxFinancialChartModule, IgxFinancialChartCoreModule] }) export class SimpleComboMainComponent implements OnInit { @@ -266,7 +265,7 @@ export class MySimpleComboComponent implements OnInit { ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { City, getCitiesByPopulation } from '../../../data/cities15000-regions-countries'; import { IgxSimpleComboComponent } from 'igniteui-angular/simple-combo'; import { FormsModule } from '@angular/forms'; @@ -276,7 +275,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-simple-combo-usage', templateUrl: 'simple-combo-usage.component.html', styleUrls: ['simple-combo-usage.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSimpleComboComponent, FormsModule] }) export class SimpleComboUsageComponent implements OnInit { @@ -427,7 +425,7 @@ The following sample demonstrates a scenario where the [igx-simple-combo](mcp:ge ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core'; import { ISimpleComboSelectionChangingEventArgs, IgxSimpleComboComponent } from 'igniteui-angular/simple-combo'; import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar'; import { City, Country, getCitiesByCountry, getCountries, Region } from '../../../data/cities15000-regions-countries'; @@ -438,7 +436,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-simple-combo-cascading', templateUrl: 'simple-combo-cascading.component.html', styleUrls: ['simple-combo-cascading.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSimpleComboComponent, FormsModule, IgxLinearProgressBarComponent] }) export class SimpleComboCascadingComponent implements OnInit { @@ -451,6 +448,7 @@ export class SimpleComboCascadingComponent implements OnInit { public isLoadingRegions: boolean = false; public isLoadingCities: boolean = false; private loadingTime = 0; + private cdr = inject(ChangeDetectorRef); public ngOnInit(): void { this.countriesData = getCountries(['United States', 'Japan', 'United Kingdom']); @@ -471,6 +469,7 @@ export class SimpleComboCascadingComponent implements OnInit { .map(c => ({name: c.region, country: c.country})) .filter((v, i, a) => a.findIndex(r => r.name === v.name) === i); this.isLoadingRegions = false; + this.cdr.markForCheck(); }, this.loadingTime) this.citiesData = []; this.loadingTime = 0; @@ -489,6 +488,7 @@ export class SimpleComboCascadingComponent implements OnInit { this.citiesData = getCitiesByCountry([this.selectedCountry?.name]) .filter(c => c.region === this.selectedRegion?.name); this.isLoadingCities = false; + this.cdr.markForCheck(); }, this.loadingTime) this.loadingTime = 0; } @@ -625,7 +625,7 @@ The Ignite UI for Angular Simple ComboBox Component exposes an API that allows b The sample below demonstrates remote binding using the [dataPreLoad](mcp:get_api_reference?platform=angular&component=IgxSimpleComboComponent&member=dataPreLoad) property to load new chunk of remote data and following the steps described in [ComboBox Remote Binding](combo-remote.md): ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { IComboSearchInputEventArgs } from 'igniteui-angular/combo'; import { IForOfState } from 'igniteui-angular/directives'; import { ISimpleComboSelectionChangingEventArgs, IgxSimpleComboComponent } from 'igniteui-angular/simple-combo'; @@ -639,7 +639,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-simple-combo-remote', templateUrl: './simple-combo-remote.component.html', styleUrls: ['./simple-combo-remote.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSimpleComboComponent, IgxToastComponent, AsyncPipe] }) export class SimpleComboRemoteComponent implements OnInit, AfterViewInit { @@ -836,7 +835,7 @@ The last step is to include the component's theme. ### Demo ```typescript -import { Component, ElementRef, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, OnInit, inject } from '@angular/core'; import { City, getCitiesByPopulation } from '../../../data/cities15000-regions-countries'; import { IgxSimpleComboComponent } from 'igniteui-angular/simple-combo'; @@ -844,7 +843,6 @@ import { IgxSimpleComboComponent } from 'igniteui-angular/simple-combo'; selector: 'app-simple-combo-styling', templateUrl: 'simple-combo-styling.component.html', styleUrls: ['simple-combo-styling.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSimpleComboComponent] }) export class SimpleComboStylingComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/slider-slider.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/slider-slider.md index 4fc2ad6f2..54e382a01 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/slider-slider.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/slider-slider.md @@ -13,7 +13,7 @@ _tocName: Slider ## Angular Slider Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; import { FormsModule } from '@angular/forms'; @@ -22,7 +22,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-slider-sample-1', styleUrls: ['./slider-sample-1.component.scss'], templateUrl: './slider-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, FormsModule, IgxInputDirective] }) export class SliderSample1Component { @@ -209,7 +208,7 @@ We should now see two-way data binding between our two components. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxSliderComponent } from 'igniteui-angular/slider'; import { FormsModule } from '@angular/forms'; @@ -218,7 +217,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-slider-sample-3', styleUrls: ['./slider-sample-3.component.scss'], templateUrl: './slider-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSuffixDirective] }) export class SliderSample3Component { @@ -297,7 +295,7 @@ If the sample is configured properly, dragging the slider thumb should update th ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgxSliderComponent } from 'igniteui-angular/slider'; import { FormsModule } from '@angular/forms'; @@ -305,7 +303,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-slider-sample-2', styleUrls: ['./slider-sample-2.component.scss'], templateUrl: './slider-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent, FormsModule] }) export class SliderSample2Component implements OnInit { @@ -387,7 +384,7 @@ export class SampleComponent { ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; import { FormsModule } from '@angular/forms'; @@ -396,7 +393,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-slider-sample-4', styleUrls: ['./slider-sample-4.component.scss'], templateUrl: './slider-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, FormsModule, IgxInputDirective] }) export class SliderSample4Component { @@ -463,14 +459,13 @@ This can be done by setting [`lowerBound`](mcp:get_api_reference?platform=angula ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; @Component({ selector: 'app-slider-sample-5', styleUrls: ['./slider-sample-5.component.scss'], templateUrl: './slider-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent] }) export class SliderSample5Component { @@ -538,14 +533,13 @@ public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturd ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSliderComponent, IgxSliderType, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective } from 'igniteui-angular/slider'; @Component({ selector: 'app-slider-sample-6', styleUrls: ['./slider-sample-6.component.scss'], templateUrl: './slider-sample-6.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective] }) export class SliderSample6Component { @@ -622,14 +616,13 @@ public type = SliderType.RANGE; ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; @Component({ selector: 'app-discrete-slider-bottom-ticks', styleUrls: ['./discrete-slider-ticks-bottom.component.scss'], templateUrl: './discrete-slider-ticks-bottom.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent] }) export class SliderDiscreteTicksBottomComponent { @@ -680,14 +673,13 @@ We also rotate all viable labels by setting the [`TickLabelsOrientation`](mcp:ge ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSliderComponent, IgxSliderType, TickLabelsOrientation } from 'igniteui-angular/slider'; @Component({ selector: 'app-slider-ticks-bottomtotop-labels', styleUrls: ['./slider-ticks-bottomtotop-labels.component.scss'], templateUrl: './slider-ticks-bottomtotop-labels.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent] }) export class SliderTicksBottomtotopLabelsComponent { @@ -752,14 +744,13 @@ This mirrors the visualization of the **ticks** and displays them above and belo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxSliderComponent, TicksOrientation } from 'igniteui-angular/slider'; @Component({ selector: 'app-slider-bottom-ticks', styleUrls: ['./slider-secondary-ticks-mirror.component.scss'], templateUrl: './slider-secondary-ticks-mirror.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent] }) export class SliderSecondaryTicksMirrorComponent { @@ -811,14 +802,13 @@ This example show how the tick labels and the thumb label works together. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; @Component({ selector: 'app-slider-timeframe', styleUrls: ['./slider-timeframe.component.scss'], templateUrl: './slider-timeframe.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent] }) export class SliderTimeframeComponent { @@ -885,14 +875,13 @@ In the **tickLabel** callback above, we are rounding the **value** of every **pr ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSliderComponent, IgxTickLabelTemplateDirective } from 'igniteui-angular/slider'; @Component({ selector: 'app-tick-labels-template', styleUrls: ['./tick-labels-template.component.scss'], templateUrl: './tick-labels-template.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent, IgxTickLabelTemplateDirective] }) export class TickLabelsTemplateComponent { @@ -1140,14 +1129,13 @@ The last step is to include the newly created component theme in our application This is the final result from applying our new theme. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxSliderComponent, TicksOrientation } from 'igniteui-angular/slider'; @Component({ selector: 'app-slider-styling', styleUrls: ['./app-slider-styling.component.scss'], templateUrl: './app-slider-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent] }) export class AppSliderStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/snackbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/snackbar.md index a9c0e2a08..214497020 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/snackbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/snackbar.md @@ -16,7 +16,7 @@ _tocName: Snackbar ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; @@ -24,7 +24,6 @@ import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; selector: 'app-snackbar-sample-1', styleUrls: ['./snackbar-sample-1.component.scss'], templateUrl: './snackbar-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxSnackbarComponent] }) export class SnackbarSample1Component { } @@ -152,7 +151,7 @@ public close(element) { If the sample is configured properly, the first snackbar appears when the button is clicked, showing both the _message_ and _action button_. The auto-hide feature is disabled and the snackbar disappears on 'CLOSE' button click. Another snackbar passes a different message through the [`open()`](mcp:get_api_reference?platform=angular&component=IgxSnackbarComponent&member=open) method and hides it when the _display time_ expires. The third component passes a message as a param to the [`open()`](mcp:get_api_reference?platform=angular&component=IgxSnackbarComponent&member=open) method and adds an icon using content projection. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -161,7 +160,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-snackbar-sample-2', styleUrls: ['./snackbar-sample-2.component.scss'], templateUrl: './snackbar-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxSnackbarComponent, IgxIconComponent] }) export class SnackbarSample2Component { @@ -269,7 +267,7 @@ As a result, a message and three loading dots appear in the snackbar. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; @@ -277,7 +275,6 @@ import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; selector: 'app-snackbar-sample-5', styleUrls: ['./snackbar-sample-5.component.scss'], templateUrl: './snackbar-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxSnackbarComponent] }) export class SnackbarSample5Component { } @@ -395,7 +392,7 @@ public restore() { ``` ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -407,7 +404,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-snackbar-sample-4', styleUrls: ['./snackbar-sample-4.component.scss'], templateUrl: './snackbar-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListActionDirective, IgxIconButtonDirective, IgxIconComponent, IgxSnackbarComponent] }) export class SnackbarSample4Component implements OnInit { @@ -568,7 +564,7 @@ The last step is to **include** the component theme in our application. ### Demo ```typescript -import { Component, ElementRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, inject } from '@angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; @@ -576,7 +572,6 @@ import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; selector: 'app-snackbar-style', styleUrls: ['./snackbar-style.component.scss'], templateUrl: './snackbar-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxSnackbarComponent] }) export class SnackbarStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/splitter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/splitter.md index bac94a60a..eb317c42e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/splitter.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/splitter.md @@ -13,14 +13,13 @@ The Ignite UI for Angular Splitter component provides the ability to create layo ## Angular Splitter Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSplitterComponent, IgxSplitterPaneComponent, SplitterType } from 'igniteui-angular/splitter'; @Component({ selector: 'app-splitter-horizontal-sample', styleUrls: ['splitter-horizontal-sample.component.scss'], templateUrl: 'splitter-horizontal-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSplitterComponent, IgxSplitterPaneComponent] }) export class SplitterHorizontalSampleComponent { @@ -160,7 +159,7 @@ You can make the splitter collapsible or not by showing or hiding the splitter's ``` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxSplitterComponent, IgxSplitterPaneComponent } from 'igniteui-angular/splitter'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -168,7 +167,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-splitter-collapsible-sample', styleUrls: ['splitter-collapsible-sample.component.scss'], templateUrl: 'splitter-collapsible-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSplitterComponent, IgxSplitterPaneComponent, IgxButtonDirective] }) export class SplitterCollapsibleSampleComponent { @@ -270,14 +268,13 @@ public typeVertical = SplitterType.Vertical; ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSplitterComponent, IgxSplitterPaneComponent, SplitterType } from 'igniteui-angular/splitter'; @Component({ selector: 'app-splitter-nested-sample', styleUrls: ['splitter-nested-sample.component.scss'], templateUrl: 'splitter-nested-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSplitterComponent, IgxSplitterPaneComponent] }) export class SplitterNestedSampleComponent { @@ -402,14 +399,13 @@ This is the final result from applying your new theme. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSplitterComponent, IgxSplitterPaneComponent, SplitterType } from 'igniteui-angular/splitter'; @Component({ selector: 'app-splitter-styling-sample', styleUrls: ['splitter-styling-sample.component.scss'], templateUrl: 'splitter-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSplitterComponent, IgxSplitterPaneComponent] }) export class SplitterStylingSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/stepper.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/stepper.md index 928cb7ea2..f57183dd2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/stepper.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/stepper.md @@ -17,7 +17,7 @@ In this Angular Stepper example, you can see how users are given the opportunity Note that the fourth step in our Angular stepper demo gets enabled only if the user ticks the checkbox in the second step, signifying that their mailing address is different from the business physical address. ```typescript -import { ChangeDetectorRef, Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, ViewChild, inject } from '@angular/core'; import { NgForm, FormsModule } from '@angular/forms'; import { IgxStepComponent, IgxStepContentDirective, IgxStepTitleDirective, IgxStepperComponent } from 'igniteui-angular/stepper'; import { IgxCardComponent, IgxCardContentDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; @@ -34,7 +34,6 @@ import { NgClass, DatePipe } from '@angular/common'; selector: 'app-stepper-overview-sample', styleUrls: ['./stepper-overview-sample.component.scss'], templateUrl: './stepper-overview-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxBadgeComponent, IgxCardComponent, NgClass, IgxCardMediaDirective, IgxCardContentDirective, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxMaskDirective, IgxCheckboxComponent, IgxHintDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxIconComponent, DatePipe] }) export class StepperOverviewSampleComponent { @@ -464,7 +463,7 @@ $my-card: card-theme( $content-text-color: color($default-palette, 'gray', 900), ); -@include card($my-card); +@include tokens($my-card); .selected-card { border: 2px solid color($default-palette, 'primary', 400); @@ -657,7 +656,7 @@ $my-card: card-theme( Here is the a sample demonstrating how to achieve the above functionality using Angular Reactive Forms. ```typescript -import { ChangeDetectorRef, Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, ViewChild, inject } from '@angular/core'; import { FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxStepComponent, IgxStepContentDirective, IgxStepTitleDirective, IgxStepperComponent } from 'igniteui-angular/stepper'; import { IgxCardComponent, IgxCardContentDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; @@ -704,7 +703,6 @@ export interface ShippingDetails{ selector: 'app-stepper-sample-reactive-forms', styleUrls: ['./stepper-sample-reactive-forms.component.scss'], templateUrl: './stepper-sample-reactive-forms.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxBadgeComponent, IgxCardComponent, NgClass, IgxCardMediaDirective, IgxCardContentDirective, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxMaskDirective, IgxCheckboxComponent, IgxHintDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxIconComponent, DatePipe] }) export class StepperSampleReactiveFormsComponent { @@ -1146,7 +1144,7 @@ $my-card: card-theme( $content-text-color: color($default-palette, 'gray', 900), ); -@include card($my-card); +@include tokens($my-card); .selected-card { border: 2px solid color($default-palette, 'primary', 400); @@ -1483,7 +1481,7 @@ You can easily switch from the horizontal to vertical layout. In order to change The sample below demonstrates how stepper [orientation](mcp:get_api_reference?platform=angular&component=IgxStepperComponent&member=orientation) and [titles position](stepper.md#customizing-the-steps) could be changed runtime. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IButtonGroupEventArgs, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxStepComponent, IgxStepContentDirective, IgxStepTitleDirective, IgxStepperComponent, IgxStepperOrientation, IgxStepperTitlePosition } from 'igniteui-angular/stepper'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -1492,7 +1490,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-stepper-label-position-and-orientation-sample', styleUrls: ['./stepper-label-position-and-orientation-sample.component.scss'], templateUrl: './stepper-label-position-and-orientation-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxButtonDirective] }) export class StepperLabelPositionAndOrientationSampleComponent { @@ -1625,7 +1622,7 @@ If the current non-optional step is not valid you cannot go forward to the next The following example demonstrates how to configure a linear stepper: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IButtonGroupEventArgs, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxStepActiveIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepSubtitleDirective, IgxStepTitleDirective, IgxStepperComponent } from 'igniteui-angular/stepper'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -1639,7 +1636,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-stepper-linear-sample', styleUrls: ['./stepper-linear-sample.component.scss'], templateUrl: './stepper-linear-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxStepperComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxButtonDirective, IgxStepSubtitleDirective, IgxRadioGroupDirective, IgxRadioComponent] }) export class StepperLinearSampleComponent { @@ -1883,7 +1879,7 @@ In this way if subtitles are defined, they will also be rendered below the step The sample below demonstrates all exposed step types and how they could be changed: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IButtonGroupEventArgs, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxStepComponent, IgxStepTitleDirective, IgxStepType, IgxStepperComponent } from 'igniteui-angular/stepper'; @@ -1891,7 +1887,6 @@ import { IgxStepComponent, IgxStepTitleDirective, IgxStepType, IgxStepperCompone selector: 'app-stepper-steptypes-sample', styleUrls: ['./stepper-steptypes-sample.component.scss'], templateUrl: './stepper-steptypes-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective] }) export class StepperStepTypesSampleComponent { @@ -2138,7 +2133,7 @@ The last step is to include the component's theme. The sample below demonstrates a simple styling applied through the [Ignite UI for Angular Theming](themes/index.md). ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IStepChangingEventArgs, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepSubtitleDirective, IgxStepTitleDirective, IgxStepperComponent } from 'igniteui-angular/stepper'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -2147,7 +2142,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-stepper-styling-sample', styleUrls: ['./stepper-styling-sample.component.scss'], templateUrl: './stepper-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxStepperComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepContentDirective, IgxButtonDirective] }) export class StepperStylingSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/switch.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/switch.md index 3e6202fb6..c77530361 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/switch.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/switch.md @@ -13,14 +13,13 @@ _tocName: Switch ## Angular Switch Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @Component({ selector: 'app-switch-sample-1', styleUrls: ['./switch-sample-1.component.scss'], templateUrl: './switch-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent] }) export class SwitchSample1Component { } @@ -137,7 +136,7 @@ igx-switch { And the final result should be something like that: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -145,7 +144,6 @@ import { IgxSwitchComponent } from 'igniteui-angular/switch'; selector: 'app-switch-sample-2', styleUrls: ['./switch-sample-2.component.scss'], templateUrl: './switch-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent] }) export class SwitchSample2Component { @@ -447,14 +445,13 @@ Finally, **include** the custom theme in your application: In the sample below, you can see how using the switch component with customized CSS variables allows you to create a design that visually resembles the switch used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.Switch/sample/sap.m.sample.Switch) design system. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @Component({ selector: 'app-switch-styling', styleUrls: ['./switch-styling.component.scss'], templateUrl: './switch-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent] }) export class SwitchStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tabbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tabbar.md index 60c49b267..746f28857 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tabbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tabbar.md @@ -19,7 +19,7 @@ _tocName: Bottom Navigation ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavItemComponent } from 'igniteui-angular/bottom-nav'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -27,7 +27,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-tabbar-sample-1', styleUrls: ['./tabbar-sample-1.component.scss'], templateUrl: './tabbar-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxIconComponent, IgxBottomNavContentComponent] }) export class TabbarSample1Component { @@ -278,7 +277,7 @@ igx-bottom-nav-content { After these modifications our Bottom Navigation should look similar to this: ```typescript -import { Component, ChangeDetectionStrategy } from "@angular/core"; +import { Component } from "@angular/core"; import { IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent } from 'igniteui-angular/bottom-nav'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -287,7 +286,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: "app-tabbar-sample-2", styleUrls: ["./tabbar-sample-2.component.scss"], templateUrl: "./tabbar-sample-2.component.html", - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxIconComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavContentComponent] }) export class TabbarSample2Component { @@ -521,7 +519,7 @@ The approach described above is used by the following sample to demonstrate rout ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { NavigationEnd, Router, RouterOutlet, RouterLinkActive, RouterLink } from '@angular/router'; import { filter } from 'rxjs/operators'; import { IgxBottomNavComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavItemComponent } from 'igniteui-angular/bottom-nav'; @@ -531,7 +529,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-tabbar-sample-3', styleUrls: ['./tabbar-sample-3.component.scss'], templateUrl: './tabbar-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [RouterOutlet, IgxBottomNavComponent, IgxBottomNavItemComponent, RouterLinkActive, IgxBottomNavHeaderComponent, RouterLink, IgxIconComponent, IgxBottomNavHeaderIconDirective] }) export class TabbarSample3Component implements OnInit { @@ -709,7 +706,7 @@ The last step is to **include** the component theme in our application. ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from "@angular/core"; +import { Component, OnInit } from "@angular/core"; import { IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent } from 'igniteui-angular/bottom-nav'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -718,7 +715,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: "app-tabbar-style", styleUrls: ["./tabbar-style.component.scss"], templateUrl: "./tabbar-style.component.html", - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxIconComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavContentComponent] }) export class TabbarStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tabs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tabs.md index a1c44c319..5c2399a8a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tabs.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tabs.md @@ -23,7 +23,7 @@ The [`igx-tabs`](mcp:get_api_reference?platform=angular&component=IgxTabsCompone This is a basic example of Angular Nested Tabs where we have one tab within another where only one view can be seen at the time. Using nested tabs in Angular, we can display information in a better, structured way. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -31,7 +31,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-tabs-sample-3', styleUrls: ['./tabs-sample-3.component.scss'], templateUrl: './tabs-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxIconComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent] }) export class TabsSample3Component { } @@ -195,14 +194,13 @@ If the sample is configured properly, the final result should look like that: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; @Component({ selector: 'app-tabs-sample-1', styleUrls: ['./tabs-sample-1.component.scss'], templateUrl: './tabs-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent] }) export class TabsSample1Component { } @@ -263,14 +261,13 @@ igx-tab-content { Sample below demonstrates how tabs get aligned when switching between `tabAlignment` property values. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; @Component({ selector: 'app-tabs-alignment', templateUrl: './tabs-alignment.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent] }) export class TabsAlignmentComponent { @@ -376,7 +373,7 @@ If the sample is configured properly, the tabs should look like the following ex ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -384,7 +381,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-tabs-sample-3', styleUrls: ['./tabs-sample-3.component.scss'], templateUrl: './tabs-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxIconComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent] }) export class TabsSample3Component { } @@ -450,7 +446,7 @@ If setting the labels and icons is not enough, you can also provide your own cus You can also add you own custom tab header's prefix and suffix simply by using `igxPrefix` and `igxSuffix` directives. The sample below demonstrates how to add a tab with custom header content and prefix/suffix. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconButtonDirective } from 'igniteui-angular/directives'; @@ -460,7 +456,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; @Component({ selector: 'app-tabs-header-prefix-suffix', templateUrl: './tabs-header-prefix-suffix.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent, IgxTabContentComponent] }) export class TabsHeaderPrefixSuffixComponent { @@ -600,7 +595,7 @@ The above code creates an `igx-tabs` component with three tab items. Each tab it ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { NavigationEnd, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router'; import { filter } from 'rxjs/operators'; import { IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; @@ -609,7 +604,6 @@ import { IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, selector: 'app-tabs-sample-4', styleUrls: ['./tabs-sample-4.component.scss'], templateUrl: './tabs-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTabsComponent, IgxTabItemComponent, RouterLinkActive, IgxTabHeaderComponent, RouterLink, IgxTabHeaderLabelDirective, RouterOutlet] }) export class TabsSample4Component implements OnInit { @@ -1055,7 +1049,7 @@ The last step is to **include** the component theme in our application. ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -1063,7 +1057,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-tabs-style', styleUrls: ['./tabs-style.component.scss'], templateUrl: './tabs-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxIconComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent] }) export class TabsStyleComponent { } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/texthighlight.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/texthighlight.md index eed2837bc..f7b5e2919 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/texthighlight.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/texthighlight.md @@ -14,7 +14,7 @@ The [`IgxTextHighlightDirective`](mcp:get_api_reference?platform=angular&compone ```typescript /* eslint-disable max-len */ -import { Component, OnDestroy, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnDestroy, ViewChild, inject } from '@angular/core'; import { IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular/directives'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -25,7 +25,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-text-highlight-1', styleUrls: ['./text-highlight-sample-1.component.scss'], templateUrl: './text-highlight-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective] }) export class TextHighlightSample1Component implements OnDestroy { @@ -421,7 +420,7 @@ If the sample is configured properly, the final result should look like that: ```typescript /* eslint-disable max-len */ -import { Component, OnDestroy, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnDestroy, ViewChild, inject } from '@angular/core'; import { IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular/directives'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -432,7 +431,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-text-highlight-1', styleUrls: ['./text-highlight-sample-1.component.scss'], templateUrl: './text-highlight-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective] }) export class TextHighlightSample1Component implements OnDestroy { @@ -684,7 +682,7 @@ export class HomeComponent { ```typescript /* eslint-disable max-len */ -import { Component, OnDestroy, ViewChildren, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnDestroy, ViewChildren, inject } from '@angular/core'; import { IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular/directives'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -695,7 +693,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-text-highlight-2', styleUrls: ['./text-highlight-sample-2.component.scss'], templateUrl: './text-highlight-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective] }) export class TextHighlightSample2Component implements OnDestroy { @@ -978,7 +975,7 @@ As mentioned earlier, we can even combine them with a theme: ```typescript /* eslint-disable max-len */ -import { Component, OnDestroy, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnDestroy, ViewChild, inject } from '@angular/core'; import { IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular/directives'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -989,7 +986,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-text-highlight-style', styleUrls: ['./text-highlight-style.component.scss'], templateUrl: './text-highlight-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective] }) export class TextHighlightStyleComponent implements OnDestroy { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/themes-roundness.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/themes-roundness.md index a7572f249..c8c4953b6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/themes-roundness.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/themes-roundness.md @@ -50,7 +50,7 @@ igx-chip { You can see the difference between the minimum and maximum border-radius values in the example below: ```typescript -import { Component, ChangeDetectionStrategy } from "@angular/core"; +import { Component } from "@angular/core"; import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; import { IgxChipComponent } from 'igniteui-angular/chips'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -60,7 +60,6 @@ import { IgxPrefixDirective } from 'igniteui-angular/input-group'; selector: "app-chip-simple", styleUrls: ["./roundness-sample.component.scss"], templateUrl: "./roundness-sample.component.html", - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxCardComponent, IgxCardHeaderComponent, diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tile-manager.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tile-manager.md index 5a576ce2a..0ae9edb06 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tile-manager.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tile-manager.md @@ -15,7 +15,7 @@ The Tile Manager component enables the display of content in individual tiles. I The following Ignite UI for Angular Tile Manager Example shows the component in action. ```typescript -import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardThumbnailDirective } from 'igniteui-angular/card'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; @@ -29,7 +29,6 @@ defineComponents(IgcTileManagerComponent); styleUrls: ['./tile-manager.component.scss'], templateUrl: './tile-manager.component.html', imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardThumbnailDirective, IgxCardContentDirective, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, IgxAvatarComponent, IgxIconComponent], - changeDetection: ChangeDetectionStrategy.Eager, schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class TileManagerComponent implements OnInit { @@ -39,13 +38,13 @@ export class TileManagerComponent implements OnInit { public ngOnInit() { const listIcon = ''; - + const calendarIcon = '' - + const productIcon = '' - + this._iconService.addSvgIconFromText("list", listIcon, "material"); this._iconService.addSvgIconFromText("calendar", calendarIcon, "material"); this._iconService.addSvgIconFromText("product", productIcon, "material"); diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/time-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/time-picker.md index 22ec309ae..5f965e3aa 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/time-picker.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/time-picker.md @@ -19,7 +19,7 @@ _tocName: Time Picker In general, users can enter a preferred time either through text input or by choosing a time value from an Angular Time Picker dropdown. The basic Angular Time Picker example below shows how users can easily enter the value with the help of the dropdown or by using the keyboard. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { PickerInteractionMode } from 'igniteui-angular/core'; import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -29,7 +29,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-timepicker-dropdown', styleUrls: ['./timepicker-dropdown.component.scss'], templateUrl: './timepicker-dropdown.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTimePickerComponent, FormsModule, IgxLabelDirective] }) export class TimepickerDropdownComponent { @@ -198,7 +197,7 @@ public date: Date = new Date(); And here's our templated Ignite UI for Angular Time Picker: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; import { IgxHintDirective, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxPickerToggleComponent } from 'igniteui-angular/core'; @@ -209,7 +208,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-timepicker-sample-5', styleUrls: ['./timepicker-sample-5.component.scss'], templateUrl: './timepicker-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTimePickerComponent, FormsModule, IgxLabelDirective, IgxPickerToggleComponent, IgxSuffixDirective, IgxIconComponent, IgxHintDirective] }) @@ -265,7 +263,7 @@ public selectNow(timePicker: IgxTimePickerComponent) { And there we have it, a re-templated time picker with dropdown, custom actions and two-way binding support: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; import { IgxPickerActionsDirective, IgxPickerToggleComponent } from 'igniteui-angular/core'; import { IgxHintDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; @@ -277,7 +275,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-timepicker-sample-6', styleUrls: ['./timepicker-sample-6.component.scss'], templateUrl: './timepicker-sample-6.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTimePickerComponent, FormsModule, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxHintDirective, IgxButtonDirective, IgxPickerActionsDirective] }) export class TimePickerSample6Component { @@ -382,7 +379,7 @@ or just change the [`mode`](mcp:get_api_reference?platform=angular&component=Igx In dialog mode, the dialog header displays the currently selected time in the picker's [`input format`](mcp:get_api_reference?platform=angular&component=IgxTimePickerComponent&member=inputformat). You can change the header position by setting the [`headerOrientation`](mcp:get_api_reference?platform=angular&component=IgxTimePickerComponent&member=headerOrientation) property. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -390,7 +387,6 @@ import { IgxLabelDirective } from 'igniteui-angular/input-group'; selector: 'app-timepicker', styleUrls: ['./timepicker-sample-1.component.scss'], templateUrl: './timepicker-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTimePickerComponent, IgxLabelDirective] }) export class TimePickerSample1Component { } @@ -503,7 +499,7 @@ The dropdown displays values within the min/max range (09:15:30 AM~06:15:30 PM) And there we have it: ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxToastComponent } from 'igniteui-angular/toast'; @@ -513,7 +509,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-timepicker', styleUrls: ['./timepicker-sample-4.component.scss'], templateUrl: './timepicker-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTimePickerComponent, FormsModule, IgxLabelDirective, IgxToastComponent] }) export class TimePickerSample4Component { @@ -557,7 +552,7 @@ In some cases when the [`IgxDatePicker`](date-picker.md) and the IgxTimePicker a To achieve that in template driven forms, use the `ngModel` to bind both components to the same Date object. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; @@ -567,7 +562,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-datetimepicker-template-driven-form', styleUrls: ['./template-driven-form.component.scss'], templateUrl: './template-driven-form.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDatePickerComponent, FormsModule, IgxLabelDirective, IgxTimePickerComponent] }) export class DateTimePickerTDFSampleComponent { @@ -620,7 +614,7 @@ export class DateTimePickerTDFSampleComponent { In reactive forms, we can handle the [`valueChange`](mcp:get_api_reference?platform=angular&component=IgxTimePickerComponent&member=valueChange) event of each component and update the value of the other. ```typescript -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -630,7 +624,6 @@ import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; selector: 'app-datetimepicker-reactive-form', styleUrls: ['./reactive-form.component.scss'], templateUrl: './reactive-form.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, ReactiveFormsModule, IgxDatePickerComponent, IgxLabelDirective, IgxTimePickerComponent] }) export class DateTimePickerRFSampleComponent { @@ -770,7 +763,7 @@ Now, the time picker's items are properly rendered **inside** of our component's ### Demo ```typescript -import { Component, ElementRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, inject } from '@angular/core'; import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -779,10 +772,10 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-timepicker', styleUrls: ['./timepicker-styling.component.scss'], templateUrl: './timepicker-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTimePickerComponent, IgxLabelDirective, IgxButtonDirective] }) -export class TimePickerStylingComponent { element = inject(ElementRef); +export class TimePickerStylingComponent { + element = inject(ElementRef); } ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/toast.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/toast.md index b616a3da1..3fd04628a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/toast.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/toast.md @@ -14,7 +14,7 @@ _tocName: Toast ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxToastComponent } from 'igniteui-angular/toast'; @@ -22,7 +22,6 @@ import { IgxToastComponent } from 'igniteui-angular/toast'; selector: 'app-toast-sample-2', styleUrls: ['./toast-sample-2.component.scss'], templateUrl: './toast-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToastComponent] }) @@ -154,7 +153,7 @@ If the sample is configured properly, the toast will appear when the _Show butto In the other two components you can see in action how to pass different messages through the [`open()`](mcp:get_api_reference?platform=angular&component=IgxToastComponent&member=open) method and use content projection. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxToastComponent } from 'igniteui-angular/toast'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -163,7 +162,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-toast-sample-3', styleUrls: ['./toast-sample-3.component.scss'], templateUrl: './toast-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToastComponent, IgxIconComponent] }) @@ -257,7 +255,7 @@ public open(toast) { ``` ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { VerticalAlignment } from 'igniteui-angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxToastComponent } from 'igniteui-angular/toast'; @@ -265,7 +263,6 @@ import { IgxToastComponent } from 'igniteui-angular/toast'; selector: 'app-toast-sample-5', styleUrls: ['./toast-sample-5.component.scss'], templateUrl: './toast-sample-5.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToastComponent] }) @@ -346,7 +343,7 @@ The last step is to pass the custom toast theme: ### Demo ```typescript -import { Component, ElementRef, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, inject } from '@angular/core'; import { IgxToastComponent } from 'igniteui-angular/toast'; import { VerticalAlignment } from 'igniteui-angular/core'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -355,7 +352,6 @@ import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directi selector: 'app-toast-style', styleUrls: ['./toast-style.component.scss'], templateUrl: './toast-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective, IgxToastComponent] }) export class ToastStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/toggle.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/toggle.md index 1cb3828a6..f3181545b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/toggle.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/toggle.md @@ -14,14 +14,13 @@ _tocName: Toggle ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxButtonDirective, IgxToggleDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-toggle-sample-1', styleUrls: ['./toggle-sample-1.component.scss', '../toggle-samples.scss'], templateUrl: './toggle-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleDirective] }) export class ToggleSample1Component { @@ -185,7 +184,7 @@ This is how our toggle should look like now: ```typescript -import { Component, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core'; import { IgxButtonDirective, IgxToggleDirective } from 'igniteui-angular/directives'; @@ -194,7 +193,6 @@ import { IgxButtonDirective, IgxToggleDirective } from 'igniteui-angular/directi selector: 'app-toggle', styleUrls: ['./toggle-samples.scss'], templateUrl: './toggle.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleDirective] }) export class ToggleComponent { @@ -254,14 +252,13 @@ After these changes the toggle should work exactly in the same way. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxToggleActionDirective, IgxToggleDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-toggle-sample-2', styleUrls: ['../toggle-samples.scss'], templateUrl: './toggle-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleActionDirective, IgxToggleDirective] }) export class ToggleSample2Component { } @@ -299,14 +296,13 @@ If all went well, it will look like this: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxButtonDirective, IgxToggleActionDirective, IgxToggleDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-toggle-sample-3', styleUrls: ['../toggle-samples.scss'], templateUrl: './toggle-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxToggleActionDirective, IgxButtonDirective, IgxToggleDirective] }) export class ToggleSample3Component { } @@ -348,14 +344,13 @@ public offsetToggleSet() { ``` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxButtonDirective, IgxToggleActionDirective, IgxToggleDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-toggle-sample-4', styleUrls: ['../toggle-samples.scss'], templateUrl: './toggle-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxToggleActionDirective, IgxToggleDirective] }) export class ToggleSample4Component { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tooltip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tooltip.md index d7e8b451b..299d084a6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tooltip.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tooltip.md @@ -14,7 +14,7 @@ While most tooltips have a limited number of available positions, with the [`igx ## Angular Tooltip Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; @@ -22,7 +22,6 @@ import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular selector: 'app-tooltip-simple', styleUrls: ['./tooltip-simple.component.scss'], templateUrl: './tooltip-simple.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAvatarComponent, IgxTooltipTargetDirective, IgxTooltipDirective] }) export class TooltipSimpleComponent { } @@ -291,7 +290,7 @@ Now for the tooltip! For its content, we will create a container that will be po If all went well, this is how our location and tooltip should look like: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; @@ -300,7 +299,6 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar'; selector: 'app-tooltip-rich', styleUrls: ['./tooltip-rich.component.scss'], templateUrl: './tooltip-rich.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxAvatarComponent] }) export class TooltipRichComponent { } @@ -365,7 +363,7 @@ The tooltip integrates seamlessly with other components, allowing you to create In the following example, you can see how we create descriptive tooltips by using the [`IgxList`](mcp:get_api_reference?platform=angular&component=IgxListComponent), [`IgxAvatar`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent), [`IgxIcon`](mcp:get_api_reference?platform=angular&component=IgxIconComponent), [`IgxBadge`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent), [`IgxButton`](mcp:get_api_reference?platform=angular&component=IgxButtonDirective), [`IgxCard`](mcp:get_api_reference?platform=angular&component=IgxCardComponent) and [`IgxCategoryChart`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) components. ```typescript -import { Component, inject, ChangeDetectionStrategy } from "@angular/core"; +import { Component, inject } from "@angular/core"; import { IgxButtonDirective, IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; @@ -380,7 +378,6 @@ import { IncomeTaxes } from "./IncomeTaxes"; selector: "app-tooltip-advanced", styleUrls: ["./tooltip-advanced.component.scss"], templateUrl: "./tooltip-advanced.component.html", - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxOverlayOutletDirective, IgxTooltipTargetDirective, @@ -1057,7 +1054,7 @@ What if we want to control the amount of time that should pass before showing an By default, the [`igxTooltip`](mcp:get_api_reference?platform=angular&component=IgxTooltipDirective) is triggered only while hovering over the [`igxTooltipTarget`](mcp:get_api_reference?platform=angular&component=IgxTooltipTargetDirective). However, you can change this behavior using the [`showTriggers`](mcp:get_api_reference?platform=angular&component=IgxTooltipTargetDirective&member=showtriggers) and [`hideTriggers`](mcp:get_api_reference?platform=angular&component=IgxTooltipTargetDirective&member=hidetriggers) properties, which allow you to control when the [`igxTooltip`](mcp:get_api_reference?platform=angular&component=IgxTooltipDirective) appears and disappears. These properties accept event names as values—such as `click`, `focus`, or `keypress`—letting you trigger the [`igxTooltip`](mcp:get_api_reference?platform=angular&component=IgxTooltipDirective) in different scenarios. ```typescript -import { Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy } from "@angular/core"; +import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; import { IgxTooltipTargetDirective, IgxTooltipDirective, @@ -1076,7 +1073,6 @@ defineComponents(IgcInputComponent); styleUrls: ["./tooltip-triggers.component.scss"], templateUrl: "./tooltip-triggers.component.html", schemas: [CUSTOM_ELEMENTS_SCHEMA], - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxTooltipTargetDirective, IgxTooltipDirective, @@ -1312,7 +1308,7 @@ The arrow element is positioned based on the provided position settings. If the In the following example, you can see a demonstration of all position options and the arrow positioning behavior in action: ```typescript -import { Component, QueryList, ViewChild, ViewChildren, ChangeDetectionStrategy } from "@angular/core"; +import { Component, QueryList, ViewChild, ViewChildren } from "@angular/core"; import { IgxButtonDirective, IgxTooltipDirective, TooltipPositionStrategy } from 'igniteui-angular/directives'; import { HorizontalAlignment, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -1321,7 +1317,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: "app-tooltip-placement", styleUrls: ["./tooltip-placement.component.scss"], templateUrl: "./tooltip-placement.component.html", - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxTooltipDirective, IgxIconComponent] }) export class TooltipPlacementComponent { @@ -1551,7 +1546,7 @@ So now our styled tooltip should look like this: ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; @@ -1560,7 +1555,6 @@ import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; selector: 'app-tooltip-style', styleUrls: ['./tooltip-style.component.scss'], templateUrl: './tooltip-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAvatarComponent, IgxTooltipTargetDirective, IgxOverlayOutletDirective, IgxTooltipDirective] }) export class TooltipStyleComponent { } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/transaction-how-to-use.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/transaction-how-to-use.md index 0f79de5aa..2e7e0758b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/transaction-how-to-use.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/transaction-how-to-use.md @@ -18,7 +18,7 @@ In this topic we will use [`igxList`](mcp:get_api_reference?platform=angular&com ```typescript -import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { IgxTransactionService, State, Transaction, TransactionType } from 'igniteui-angular/core'; import { IgxCardComponent } from 'igniteui-angular/card'; import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; @@ -33,7 +33,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-transaction-base', styleUrls: ['./transaction-base.component.scss'], templateUrl: 'transaction-base.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxCardComponent, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, TransactionBasePipe] }) export class TransactionBaseComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tree.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tree.md index 2049f6d1a..4ccfdb25d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tree.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/tree.md @@ -20,7 +20,7 @@ The Angular Tree Component allows users to represent hierarchical data in a tree In this basic Angular Tree example, you can see how to define an `igx-tree` and its nodes by specifying the node hierarchy and iterating through a hierarchical data set. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DATA } from '../../../data/animations-data'; import { IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular/tree'; @@ -29,7 +29,6 @@ import { IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular/tree'; selector: 'app-tree-basic-sample', templateUrl: './tree-basic-sample.component.html', styleUrls: ['./tree-basic-sample.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeComponent, IgxTreeNodeComponent] }) export class TreeBasicSampleComponent { @@ -407,7 +406,7 @@ The Ignite UI for Angular IgxTree can be rendered in such way that it requires t ### Demo ```typescript -import { Component, AfterViewInit, OnDestroy, PLATFORM_ID, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, AfterViewInit, OnDestroy, PLATFORM_ID, inject, ChangeDetectorRef } from '@angular/core'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; import { IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular/tree'; import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; @@ -422,13 +421,13 @@ import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common'; templateUrl: './tree-advanced-sample.component.html', styleUrls: ['./tree-advanced-sample.component.scss'], providers: [DataService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeComponent, IgxTreeNodeComponent, NgTemplateOutlet, IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective] }) export class TreeAdvancedSampleComponent implements AfterViewInit, OnDestroy { private iconService = inject(IgxIconService); private dataService = inject(DataService); private platformId = inject(PLATFORM_ID); + private cdr = inject(ChangeDetectorRef); public family = 'tree-icons'; public data = DATA; @@ -441,6 +440,7 @@ export class TreeAdvancedSampleComponent implements AfterViewInit, OnDestroy { this.dataService.data.pipe(takeUntil(this.destroy$)).subscribe((data) => { this.loading = false; this.remoteData = data; + this.cdr.markForCheck(); }); } @@ -480,6 +480,7 @@ export class TreeAdvancedSampleComponent implements AfterViewInit, OnDestroy { } }); } + this.cdr.markForCheck(); }); } } @@ -667,7 +668,7 @@ The last step is to include the component's theme. ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { DATA } from '../../../data/animations-data'; import { IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular/tree'; @@ -676,7 +677,6 @@ import { IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular/tree'; selector: 'app-tree-styling', templateUrl: './tree-styling.component.html', styleUrls: ['./tree-styling.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeComponent, IgxTreeNodeComponent] }) export class TreeStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-advanced-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-advanced-filtering.md index 18704579c..af47091ee 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-advanced-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-advanced-filtering.md @@ -11,7 +11,7 @@ _premium: true The Advanced filtering provides a dialog which allows the creation of groups with filtering conditions across all columns for any [Angular table](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) like the Tree Grid. ## Angular Tree Grid Advanced Filtering Example ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { generateEmployeeFlatData } from '../data/employees-flat'; @@ -21,7 +21,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-advanced-filtering-sample', styleUrls: ['./tree-grid-advanced-filtering-sample.component.scss'], templateUrl: './tree-grid-advanced-filtering-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent] }) export class TreeGridAdvancedFilteringSampleComponent implements OnInit { @@ -98,7 +97,7 @@ In case you don't want to show the Tree Grid toolbar, you could use the [`openAd As you see the demo above the Advanced filtering dialog is hosted in an overlay on top of the Tree Grid. When the setup in the dialog is ready, the apply or close actions would hide that dialog. There is a way to make that dialog stay always visible - be used as a standalone component. In the demo below, the advanced filtering dialog is declared separately of the Tree Grid. ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxAdvancedFilteringDialogComponent, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -109,7 +108,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-external-advanced-filtering', templateUrl: './tree-grid-external-advanced-filtering.component.html', styleUrls: ['./tree-grid-external-advanced-filtering.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAdvancedFilteringDialogComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridExternalAdvancedFilteringComponent { @@ -234,7 +232,7 @@ $custom-query-builder: query-builder-theme( ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { generateEmployeeFlatData } from '../data/employees-flat'; @@ -244,7 +242,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-advanced-filtering-style', styleUrls: ['./tree-grid-advanced-filtering-style.component.scss'], templateUrl: './tree-grid-advanced-filtering-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent] }) export class TreeGridAdvancedFilteringStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-batch-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-batch-editing.md index 233af7da0..2bec33c2a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-batch-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-batch-editing.md @@ -16,7 +16,7 @@ Below is a detailed example of how is Batch Editing enabled for the Tree Grid co The following sample demonstrates a scenario, where the treeGrid has [`batchEditing`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=batchEditing) enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed. ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -31,7 +31,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-batch-editing-sample', styleUrls: ['tree-grid-batch-editing-sample.component.scss'], templateUrl: 'tree-grid-batch-editing-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxButtonDirective, IgxDialogComponent, IgxGridComponent] }) export class TreeGridBatchEditingSampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-editing.md index 5d70ae4bb..db1b10a0d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-editing.md @@ -11,10 +11,10 @@ _premium: true Ignite UI for Angular Tree Grid component provides a great data manipulation capabilities and powerful API for Angular CRUD operations. By default the Tree Grid is using **in cell** editing and different editors will be shown based on the column data type, thanks to the **default cell editing template**. In addition, you can define your own custom templates for update-data actions and to override the default behavior for committing and discarding any changes. ## Angular Tree Grid cell editing and edit templates Example ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -49,7 +49,6 @@ class CustomNumberSummary { selector: 'app-tree-grid-editing-sample', styleUrls: ['./tree-grid-editing-sample.component.scss'], templateUrl: './tree-grid-editing-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconButtonDirective, IgxDialogComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxDatePickerComponent, IgxCheckboxComponent] }) export class TreeGridEditingSampleComponent implements OnInit { @@ -242,7 +241,7 @@ If you want to provide a custom template which will be applied when a cell is in This code is used in the sample below which implements an [`IgxSelectComponent`](../select.md) in the cells of the `Race`, `Class` and `Alignment` columns. ```typescript import { Character } from './characters'; -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxCellEditorTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; @@ -255,7 +254,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-grid-select-sample', styleUrls: ['./grid-select-sample.component.scss'], templateUrl: './grid-select-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent] }) export class GridSelectComponent implements OnInit { @@ -421,7 +419,7 @@ export class MyTreeGridEventsComponent { Here, we are validating two columns. If the user tries to set an invalid value for an employee's **Age** (below 18) or their **Hire Date** (a future date), the editing will be cancelled (the value will not be submitted) and a toast with an error message will be displayed. The result of the above validation being applied to our `igx-tree-grid` can be seen in the below demo: ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IGridEditEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxToastComponent } from 'igniteui-angular/toast'; import { VerticalAlignment } from 'igniteui-angular/core'; @@ -433,7 +431,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-editing-events', templateUrl: 'tree-grid-editing-events.component.html', styleUrls: ['tree-grid-editing-events.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxToastComponent] }) export class TreeGridEditingEventsComponent implements OnInit { @@ -524,7 +521,7 @@ The easiest way to apply our theme is with a `sass` `@include` statement in the ### Demo In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [`input-group`](../input-group.md#styling), [`datepicker`](../date-picker.md#styling) & [`checkbox`](../checkbox.md#styling) ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -536,7 +533,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-editing-sample', styleUrls: ['./tree-grid-editing-sample.component.scss'], templateUrl: './tree-grid-editing-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent] }) export class TreeGridEditingStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-merging.md index c04fa7f68..6caf6934f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-merging.md @@ -10,7 +10,7 @@ _premium: true The Ignite UI for Angular Tree Grid provides a Cell Merging feature that combines two or more adjacent cells with the same value into a single, larger cell. Merging is applied vertically within a column and helps improve readability by reducing duplicate values. The feature can be configured to merge cells either by default matching data values or by applying a custom condition. ## Angular Cell Merging Example ```typescript -import { ChangeDetectorRef, Component, inject, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, inject, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { GridCellMergeMode, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; @@ -24,7 +24,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-tree-grid-cell-merge-sample', styleUrls: ['./tree-grid-cell-merge-sample.component.scss'], templateUrl: './tree-grid-cell-merge-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxTreeGridComponent, IgxPreventDocumentScrollDirective, @@ -209,7 +208,7 @@ protected customStrategy = new MyCustomStrategy(); ``` ### Demo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { GridCellMergeMode, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; @@ -223,7 +222,6 @@ import { generateEmployeeDetailedFlatData2 } from '../data/employees-flat-detail selector: 'app-tree-grid-cell-merge-custom-sample', styleUrls: ['./tree-grid-cell-merge-custom-sample.component.scss'], templateUrl: './tree-grid-cell-merge-custom-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxTreeGridComponent, IgxPreventDocumentScrollDirective, diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-selection.md index 5273d5d88..f3058fa9b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-cell-selection.md @@ -14,7 +14,7 @@ But let's dive deeper in each of these options. The sample below demonstrates the three types of Tree Grid's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -28,7 +28,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-cell-selection', styleUrls: ['./tree-grid-cellSelection.component.scss'], templateUrl: 'tree-grid-cellSelection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSnackbarComponent, IgxIconComponent] }) export class TreeGridCellSelectionComponent implements OnInit { @@ -145,7 +144,7 @@ How to select cells: - Continuous multiple cell selection is available, by clicking with the mouse and dragging. #### Demo ```typescript -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxToastComponent } from 'igniteui-angular/toast'; @@ -159,7 +158,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-multi-cell-selection-sample', styleUrls: ['./tree-grid-multi-cell-selection.component.scss'], templateUrl: './tree-grid-multi-cell-selection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridComponent, IgxToastComponent] }) export class TreeGridMultiCellSelectionComponent { @@ -420,7 +418,7 @@ Afterwards, all we need to do is include the mixin in our component's style (cou With the custom theme applied, the selected grid cells are highlighted with our selected colors: ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { ORDERS_DATA } from '../data/orders'; @@ -430,7 +428,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-multi-cell-selection-style-sample', styleUrls: ['./tree-grid-multi-cell-selection-style.component.scss'], templateUrl: './tree-grid-multi-cell-selection-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridMultiCellSelectionStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-clipboard-interactions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-clipboard-interactions.md index d0a426270..fc2f55728 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-clipboard-interactions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-clipboard-interactions.md @@ -11,7 +11,7 @@ _premium: true Copy to clipboard operations are now available in the Tree Grid. This functionality provides a fast, easy and customizable way to copy data of the Angular Data Grid through the current multi cell data select. System Clipboard behavior gives the user ability to copy data from the Tree Grid into Excel or other external programs. ## Angular Tree Grid Clipboard Interactions Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { EMPLOYEE_DATA } from './data'; import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -26,7 +26,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-clipboard-operations-sample', styleUrls: ['tree-grid-clipboard-operations-sample.component.scss'], templateUrl: './tree-grid-clipboard-operations-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSwitchComponent, IgxButtonDirective, IgxRippleDirective, IgxColumnComponent] }) export class TreeGridClipboardSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-collapsible-column-groups.md index 9c4fec859..1fa102f52 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-collapsible-column-groups.md @@ -11,7 +11,7 @@ _premium: true Multi-column headers allow you to have multiple levels of nested columns and column groups. They also provide the ability to mark each column group as **collapsible**. **Collapsible multi-column headers** make it possible to collapse/expand, i.e. to show and hide the nested headers under the current one, which will give you a shortened/summarized information for example. ## Angular Grid Collapsible Column Groups Overview Example ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -23,7 +23,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-multi-column-headers-sample', styleUrls: ['./tree-grid-collapsible-column-groups.component.scss'], templateUrl: './tree-grid-collapsible-column-groups.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnGroupComponent, IgxCollapsibleIndicatorTemplateDirective, IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxColumnComponent] }) export class TreeGridMultiCollapsibleColumnGroupsComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-hiding.md index 2cf22471b..263c00a6d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-hiding.md @@ -11,7 +11,7 @@ _premium: true The Ignite UI for Angular Tree Grid provides an [`IgxColumnActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent) with an [`IgxColumnHidingDirective`](mcp:get_api_reference?platform=angular&component=IgxColumnHidingDirective) which allows users to perform column hiding directly through the user interface or by using the Angular component. The Material UI Grid has a built-in column hiding UI, which can be used through the Tree Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page. ## Angular Tree Grid Column Hiding Example ```typescript -import { AfterViewInit, Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnInit } from '@angular/core'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -21,7 +21,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-column-hiding-toolbar-sample', styleUrls: ['./tree-grid-column-hiding-toolbar-sample.component.scss'], templateUrl: './tree-grid-column-hiding-toolbar-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent] }) export class TreeGridColumnHidingToolbarSampleComponent implements OnInit { @@ -294,7 +293,7 @@ We can easily prevent the user from being able to hide columns through the colum If all went well, this is how our column hiding UI component should look like: @@if (igxName === 'IgxGrid') { ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { DATA } from '../../data/customers'; import { IgxColumnActionsComponent, IgxColumnComponent, IgxColumnHidingDirective } from 'igniteui-angular/grids/core'; import { IgxRadioComponent } from 'igniteui-angular/radio'; @@ -305,7 +304,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-column-hiding-sample', styleUrls: ['./grid-column-hiding-sample.component.scss'], templateUrl: './grid-column-hiding-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxColumnActionsComponent, IgxColumnHidingDirective, IgxRadioComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridColumnHidingSampleComponent implements OnInit { @@ -389,7 +387,7 @@ export class GridColumnHidingSampleComponent implements OnInit { } @@if (igxName === 'IgxTreeGrid') { ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; import { IgxColumnActionsComponent, IgxColumnComponent, IgxColumnHidingDirective } from 'igniteui-angular/grids/core'; import { IgxRadioComponent } from 'igniteui-angular/radio'; @@ -400,7 +398,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-column-hiding-sample', styleUrls: ['./tree-grid-column-hiding-sample.component.scss'], templateUrl: './tree-grid-column-hiding-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxColumnActionsComponent, IgxColumnHidingDirective, IgxRadioComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridColumnHidingSampleComponent implements OnInit { @@ -534,7 +531,7 @@ The last step is to **include** the component mixins, each with its respective t ``` ### Demo ```typescript -import { AfterViewInit, Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnInit } from '@angular/core'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -544,7 +541,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-column-hiding-toolbar-style', styleUrls: ['./tree-grid-column-hiding-toolbar-style.component.scss'], templateUrl: './tree-grid-column-hiding-toolbar-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent] }) export class TreeGridColumnHidingToolbarStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-moving.md index 107613132..1e4caeb27 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-moving.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-moving.md @@ -22,7 +22,7 @@ The Tree Grid component in Ignite UI for Angular provides the **Column Moving** ``` ## Angular Tree Grid Column Moving Overview Example ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { ColumnType } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -35,7 +35,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-column-moving-sample', styleUrls: ['./tree-grid-column-moving-sample.component.scss'], templateUrl: './tree-grid-column-moving-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] }) export class TreeGridColumnMovingSampleComponent { @@ -180,7 +179,7 @@ The last step is to **include** the component mixins with its respective theme: ``` ### Demo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { ColumnType } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -193,7 +192,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-column-moving-styled-sample', styleUrls: ['./tree-grid-column-moving-styled-sample.component.scss'], templateUrl: './tree-grid-column-moving-styled-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] }) export class TreeGridColumnMovingStyledSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-pinning.md index 996ee7446..f311ad862 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-pinning.md @@ -11,7 +11,7 @@ _premium: true A column or multiple columns can be pinned to the left or right side of the Angular UI Grid. **Column Pinning** in Ignite UI for Angular allows the end users to lock column in a particular column order, this will allow them to see it while horizontally scrolling the Tree Grid. The Material UI Grid has a built-in column pinning UI, which can be used through the Tree Grid's toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning API. ## Angular Tree Grid Column Pinning Example ```typescript -import { Component, ViewChild, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, OnInit, inject } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; @@ -24,7 +24,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-sample', styleUrls: ['tree-grid-toolbar-pinning.component.scss'], templateUrl: 'tree-grid-toolbar-pinning.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] }) @@ -116,7 +115,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; ``` ### Demo ```typescript -import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { ColumnPinningPosition } from 'igniteui-angular/core'; import { IPinningConfig, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -128,7 +127,6 @@ import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detaile selector: 'app-tree-grid-sample', styleUrls: ['tree-grid-right-pinning.component.scss'], templateUrl: 'tree-grid-right-pinning.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] }) @@ -205,7 +203,7 @@ img.country-flag { ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. ```typescript -import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { ColumnPinningPosition, ColumnType } from 'igniteui-angular/core'; import { IPinningConfig, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -218,7 +216,6 @@ import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detaile selector: 'app-tree-grid-sample', styleUrls: ['tree-grid-both-sides-pinning.component.scss'], templateUrl: 'tree-grid-both-sides-pinning.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxTreeGridComponent, IgxGridToolbarComponent, @@ -361,7 +358,7 @@ public toggleColumn(col: ColumnType) { ``` ### Demo ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, ViewChild, inject } from '@angular/core'; import { ColumnType } from 'igniteui-angular/core'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -375,7 +372,6 @@ const FILTERING_ICONS_FONT_SET = "filtering-icons"; selector: 'app-tree-grid-column-pinning-sample', styleUrls: ['./tree-grid-column-pinning-sample.component.scss'], templateUrl: './tree-grid-column-pinning-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridColumnPinningSampleComponent implements AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-resizing.md index 26f8a00c0..5c6a2dd73 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-resizing.md @@ -11,7 +11,7 @@ _premium: true With deferred grid column resizing, the user will see a temporary resize indicator while the Angular drag resizing operation is in effect. The new grid column width is applied once the drag operation has ended. ## Angular Tree Grid Column Resizing Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; @@ -21,7 +21,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-column-resizing-sample', styleUrls: ['./tree-grid-column-resizing-sample.component.scss'], templateUrl: './tree-grid-column-resizing-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridColumnResizingSampleComponent { @@ -133,7 +132,7 @@ Each column can be set to auto-size on initialization by setting `width` to 'aut When the column is first initialized in the view it resolves its width to the size of the longest visible cell or header. Note that cells that are outside of the visible rows are not included. This approach is more performance optimized than auto-sizing post initialization and is recommended especially in cases where you need to auto-size a large number of columns. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -143,7 +142,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'tree-grid-columnAutoSizing-sample', styleUrls: ['./treegrid-column-autosizing.component.scss'], templateUrl: './treegrid-column-autosizing.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridColumnAutoSizingSampleComponent { @@ -202,7 +200,7 @@ The last step is to **include** the component mixins with its respective theme: ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -212,7 +210,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-resize-line-styling-sample', styleUrls: ['./tree-grid-resize-line-styling-sample.component.scss'], templateUrl: './tree-grid-resize-line-styling-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridResizeLineStylingSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-selection.md index 01ceff200..1a3b67968 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-selection.md @@ -14,7 +14,7 @@ The Column selection feature provides an easy way to select an entire column wit The sample below demonstrates the three types of Tree Grid's **column selection** behavior. Use the _column selection_ dropdown below to enable each of the available selection modes. *_Units_, _Unit Price_ and _Delivered_ are with disabled column selection. ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; @@ -28,7 +28,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-tree-grid-column-selection', templateUrl: './tree-grid-column-selection.component.html', styleUrls: ['./tree-grid-column-selection.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent] }) export class TreeGridColumnSelectionComponent implements OnInit, AfterViewInit { @@ -117,7 +116,7 @@ The default selection mode is `none`. If set to `single` or `multiple` all of th > [`Multi-column Headers`](multi-column-headers.md) don't reflect on the [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable) input. The [`IgxColumnGroupComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) is [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable), if at least one of its children has the selection behavior enabled. In addition, the component is marked as [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=selected) if all of its `selectable` descendants are [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selected). *Under _Personal Details_ Column Group only column _ID_ and _Title_ are selectable. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; @@ -127,7 +126,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-column-group-selection', templateUrl: './column-group-selection.component.html', styleUrls: ['./column-group-selection.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent] }) export class TreeGridColumnGroupSelectionComponent implements OnInit { @@ -225,7 +223,7 @@ The last step is to include the custom `igx-grid` theme. ``` ### Demo ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { ORDERS_DATA } from '../data/orders'; @@ -236,7 +234,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-column-selection-style', templateUrl: './tree-grid-column-selection-style.component.html', styleUrls: ['./tree-grid-column-selection-style.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridColumnSelectionStylesComponent implements OnInit, AfterViewInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-conditional-cell-styling.md index 151d1fda7..4aa40288f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-conditional-cell-styling.md @@ -43,7 +43,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. > Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; @@ -54,7 +54,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-row-classes-sample', styleUrls: ['tree-grid-rowClasses.component.scss'], templateUrl: 'tree-grid-rowClasses.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridRowClassesComponent implements OnInit { @@ -162,7 +161,7 @@ public rowStyles = { ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; @@ -173,7 +172,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-row-styles-sample', styleUrls: ['tree-grid-rowStyle.component.scss'], templateUrl: 'tree-grid-rowStyle.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridRowStylesComponent implements OnInit { @@ -298,7 +296,7 @@ public priceClasses = { > Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -309,7 +307,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-conditional-cell-style-sample', styleUrls: ['./tree-grid-conditional-cell-style-sample.component.scss'], templateUrl: './tree-grid-conditional-cell-style-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) @@ -543,7 +540,7 @@ Define a `popin` animation ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; @@ -556,7 +553,6 @@ import { JsonPipe } from '@angular/common'; selector: 'app-grid-conditional-cell-style-2', styleUrls: ['./tree-grid-conditional-cell-style-2.component.scss'], templateUrl: './tree-grid-conditional-cell-style-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, JsonPipe] }) export class TreeGridConditionalCellStyle2Component implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-display-density.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-display-density.md index fdbf34d26..32571283b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-display-density.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-display-density.md @@ -11,10 +11,10 @@ _premium: true **IgxTreeGrid** design is based on [Material Design Guidelines](https://material.io/design). We currently provide an option to choose between predefined set of size options that will bring a small, medium, or large view respectively. By selecting the right size for your Material UI table / Material UI grid you can significantly improve the user experience when interacting with large amounts of content. ## Angular Tree Grid Size Example ```typescript -import { Component, HostBinding, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -41,7 +41,6 @@ class CustomNumberSummary { selector: 'app-tree-grid-displaydensity-sample', styleUrls: ['./tree-grid-displaydensity-sample.component.scss'], templateUrl: './tree-grid-displaydensity-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, DatePipe] }) export class TreeGridDisplaydensitySampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-editing.md index bd301aca5..37873e4f0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-editing.md @@ -72,7 +72,7 @@ The grid exposes a wide array of events that provide greater control over the ed - `RowEdit` - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting **Done** does not commit or close the row. **Cancel** button closes the editing process and the transaction without committing the changes. The following sample demonstrates the editing execution sequence in action: ```typescript -import { Component, ElementRef, Renderer2, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, Renderer2, ViewChild, inject } from '@angular/core'; import { generateEmployeeFlatData } from '../data/employees-flat'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -85,7 +85,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tgrid-editing-lifecycle', templateUrl: 'tgrid-editing-lifecycle.component.html', styleUrls: ['tgrid-editing-lifecycle.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxButtonDirective, IgxIconComponent] }) export class TGridEditingLifecycleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-excel-style-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-excel-style-filtering.md index 2dc65fe56..483bbc947 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-excel-style-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-excel-style-filtering.md @@ -11,7 +11,7 @@ _premium: true The grid Excel filtering provides an Excel like filtering UI for any Angular table like the Tree Grid. ## Angular Tree Grid Excel Style Filtering Example ```typescript -import { Component, HostBinding, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { TreeGridFilteringStrategy } from 'igniteui-angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; @@ -24,7 +24,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-excel-style-filtering-sample-1', styleUrls: ['./tree-grid-excel-style-filtering-sample-1.component.scss'], templateUrl: 'tree-grid-excel-style-filtering-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective] }) @@ -196,7 +195,7 @@ Sorting, pinning and hiding features can be removed from the filter menu using t In the sample below 'Order Product', 'Category' and 'Units' columns have all three features enabled, 'Price' have all three disabled, 'Order Date' and 'Delivered' have only pinning and hiding.
```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { ORDERS_DATA } from '../data/orders'; @@ -207,7 +206,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-excel-style-filtering-sample-2', styleUrls: ['./tree-grid-excel-style-filtering-sample-2.component.scss'], templateUrl: 'tree-grid-excel-style-filtering-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective] }) @@ -341,7 +339,7 @@ You could also re-template the Excel style filtering icon in the column header u ```
```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleSearchComponent, IgxExcelStyleSortingComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -353,7 +351,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-excel-style-filtering-sample-3', styleUrls: ['./tree-grid-excel-style-filtering-sample-3.component.scss'], templateUrl: 'tree-grid-excel-style-filtering-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective] }) @@ -483,7 +480,7 @@ The list items inside the Excel Style Filtering dialog represent the unique valu ## Formatted Values Filtering Strategy By default, the Tree Grid component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { In order to do that you can use the [`FormattedValuesFilteringStrategy`](mcp:get_api_reference?platform=angular&component=FormattedValuesFilteringStrategy). } In order to do that you can use the [`TreeGridFormattedValuesFilteringStrategy`](mcp:get_api_reference?platform=angular&component=TreeGridFormattedValuesFilteringStrategy). The following sample demonstrates how to format the numeric values of a column as strings and filter the Tree Grid based on the string values: ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { TreeGridFormattedValuesFilteringStrategy } from 'igniteui-angular/core'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -495,7 +492,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-formatted-filtering-strategy', styleUrls: ['./tree-grid-formatted-filtering-strategy.component.scss'], templateUrl: 'tree-grid-formatted-filtering-strategy.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) @@ -569,7 +565,6 @@ import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ - changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-tree-grid-tree-filter-view', styleUrls: ['./tree-grid-tree-filter-view.component.scss'], templateUrl: 'tree-grid-tree-filter-view.component.html', @@ -652,7 +647,7 @@ export class TreeGridTreeFilterViewComponent implements OnInit { As you see at the demos above the default appearance of the Excel Style filtering dialog is inside the Tree Grid. So this dialog is only visible when configuring the filters. There is a way to make that dialog stay always visible - it can be used outside of the grid as a standalone component. In the demo below, the Excel style filtering is declared separately of the Tree Grid. ### Demo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy, OnInit } from '@angular/core'; +import { Component, ViewChild, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; @@ -662,7 +657,6 @@ import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ - changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-tree-grid-external-excel-style-filtering', templateUrl: './tree-grid-external-excel-style-filtering.component.html', styleUrls: ['./tree-grid-external-excel-style-filtering.component.scss'], @@ -768,7 +762,7 @@ The Tree Grid's [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-i However, elements that go outside of the grid (e.g. Excel Style filter) will conflict with outside elements with the same `z-index` (e.g. having two grids one under another) resulting in false rendering. The solution for this issue is to set the [`outlet`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=outlet) property to an external outlet directive which allows the overlay elements to always appear on top. ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; @@ -780,7 +774,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-external-outlet', styleUrls: ['./tree-grid-external-outlet-sample.component.scss'], templateUrl: 'tree-grid-external-outlet-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxOverlayOutletDirective] }) @@ -984,7 +977,7 @@ The last step is to **include** each component’s custom theme. We will also se ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { ORDERS_DATA } from '../data/orders'; @@ -995,7 +988,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-excel-style-filtering-style', styleUrls: ['./tree-grid-excel-style-filtering-style.component.scss'], templateUrl: 'tree-grid-excel-style-filtering-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridExcelStyleFilteringStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-export-excel.md index 586e231fe..8d0d64245 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-export-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-export-excel.md @@ -23,7 +23,7 @@ The sections below walk through setup, usage patterns, and tips for tailoring ea ## Angular Excel Exporter Example This live example demonstrates the standard Excel and PDF export workflow for the Tree Grid—bound data, two export buttons (Excel and PDF), and the resulting `.xlsx` and `.pdf` files with preserved filtering and sorting state. Share it with stakeholders who want to preview the experience before wiring it into their application. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent } from 'igniteui-angular/grids/core'; import { ORDERS_DATA } from '../../../tree-grid/data/orders'; @@ -34,7 +34,6 @@ import { IgxPreventDocumentScrollDirective } from '../../../directives/prevent-s selector: 'app-excel-export-tree-grid-sample', styleUrls: ['./excel-export-tree-grid-sample.component.scss'], templateUrl: './excel-export-tree-grid-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridExcelExportSample1Component implements OnInit { @@ -176,7 +175,7 @@ Grouping is a popular way to summarize customer segments, product categories, or If you need flat data in the exported file, clear the grouping prior to calling `export` or handle the `rowExporting` event to reshape the output. Example: ```typescript -import { Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, inject } from '@angular/core'; import { GridColumnDataType, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxExcelExporterService } from 'igniteui-angular/grids/core'; @@ -187,7 +186,6 @@ import { INVOICE_DATA } from '../data/invoiceData'; selector: 'app-excel-export-sample-1', styleUrls: ['./excel-export-sample-1.component.scss'], templateUrl: './excel-export-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent] }) export class ExcelExportSample1Component implements OnInit { @@ -272,7 +270,7 @@ Dashboards often rely on [multi-column headers](multi-column-headers.md) to add } @@if (igxName === 'IgxGrid') { ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -284,7 +282,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-multi-column-headers-export', styleUrls: ['multi-column-headers-export.component.scss'], templateUrl: 'multi-column-headers-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] }) export class GridMultiColumnHeadersExportComponent { @@ -345,7 +342,7 @@ export class GridMultiColumnHeadersExportComponent { } @@if (igxName === 'IgxTreeGrid') { ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -357,7 +354,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-tree-grid-multi-column-headers-export-sample', styleUrls: ['./tree-grid-multi-column-headers-export.component.scss'], templateUrl: './tree-grid-multi-column-headers-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] }) export class TreeGridMultiColumnHeadersExportComponent { @@ -416,7 +412,7 @@ export class TreeGridMultiColumnHeadersExportComponent { } @@if (igxName === 'IgxHierarchicalGrid') { ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -428,7 +424,6 @@ import { FormsModule } from '@angular/forms'; selector: 'app-hierarchical-grid-multi-column-export', styleUrls: ['./hierarchical-grid-multi-column-export.component.scss'], templateUrl: 'hierarchical-grid-multi-column-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnGroupComponent, IgxColumnComponent, IgxRowIslandComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-filtering.md index e054ae1f7..3a98505f5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-filtering.md @@ -11,7 +11,7 @@ IgniteUI for [Angular Tree Grid component](https://www.infragistics.com/products ## Angular Tree Grid Filtering Example The sample below demonstrates Tree Grid's **Quick filtering** user experience. API [filter()](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=filter) method is used to apply _contains_ condition on the _ProductName column_ through external _igxInputGroup component_. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxStringFilteringOperand } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; @@ -24,7 +24,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-filtering-sample', styleUrls: ['./tree-grid-filtering-sample.component.scss'], templateUrl: 'tree-grid-filtering-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxInputDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) @@ -323,7 +322,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { ``` ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IFilteringOperation, IgxBooleanFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -335,7 +334,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-filtering-custom-sample', styleUrls: ['./tree-grid-filtering-custom-sample.component.scss'], templateUrl: './tree-grid-filtering-custom-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridFilteringCustomSampleComponent implements OnInit { @@ -451,7 +449,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { ## Re-templating filter cell You can add a template marked with `igxFilterCellTemplate` in order to retemplate the filter cell. In the sample below, an input is added for the string columns and IgxDatePicker for the date column. When the user types or selects a value, a filter with contains operator for string columns and equals operator for date columns, is applied using grid's public API. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { ColumnType, GridColumnDataType, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxPickerClearComponent, IgxPickerToggleComponent, IgxStringFilteringOperand } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxFilterCellTemplateDirective } from 'igniteui-angular/grids/core'; @@ -466,7 +464,6 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-tree-grid-filtering-template-sample', styleUrls: ['./tree-grid-filtering-template-sample.component.scss'], templateUrl: 'tree-grid-filtering-template-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, CurrencyPipe] }) @@ -737,7 +734,7 @@ The last step is to **include** the component mixins, each with its respective t ``` ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -748,7 +745,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-filtering-style', styleUrls: ['./tree-grid-filtering-style.component.scss'], templateUrl: './tree-grid-filtering-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridFilteringStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-groupby.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-groupby.md index 4fc461b4e..d78b289a7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-groupby.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-groupby.md @@ -52,7 +52,7 @@ The component's inputs are the following: ## Angular Tree Grid Group By Example ```typescript -import { Component, ElementRef, OnInit, OnDestroy, ViewChild, HostBinding, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy, ViewChild, HostBinding, inject } from '@angular/core'; import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, HorizontalAlignment, IGroupingExpression, IgxOverlayOutletDirective, OverlaySettings, PositionSettings, TreeGridFilteringStrategy, VerticalAlignment } from 'igniteui-angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { ITreeGridAggregation, IgxGroupedTreeGridSorting, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe } from 'igniteui-angular/grids/tree-grid'; @@ -72,12 +72,12 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/direct selector: 'app-tree-grid-finjs-sample', styleUrls: ['./tree-grid-finjs-sample.component.scss'], templateUrl: './tree-grid-finjs-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent, FormsModule, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe, DatePipe, IgxTreeGridGroupingPipe] }) export class TreeGridFinJSComponent implements OnDestroy, OnInit { private elRef = inject(ElementRef); + private cdr = inject(ChangeDetectorRef); dataService = inject(SignalRService); @ViewChild('grid1', { static: true }) public grid1!: IgxTreeGridComponent; @@ -168,6 +168,7 @@ export class TreeGridFinJSComponent implements OnDestroy, OnInit { this.data$.subscribe((data) => { if (data.length !== 0) { this.isLoading = false; + this.cdr.markForCheck(); }; }); } @@ -762,7 +763,7 @@ public sorting = IgxGroupedTreeGridSorting.instance(); ## Angular Tree Grid Group By Load On Demand Example ```typescript -import { Component, Input, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, Input, OnInit, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, IGroupingExpression } from 'igniteui-angular/core'; import { IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -773,7 +774,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-group-by-load-on-demand-sample', styleUrls: ['./tree-grid-group-by-load-on-demand-sample.component.scss'], templateUrl: './tree-grid-group-by-load-on-demand-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxTreeGridGroupByAreaComponent, IgxColumnComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-keyboard-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-keyboard-navigation.md index b0bd794af..a6257f48b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-keyboard-navigation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-keyboard-navigation.md @@ -81,7 +81,7 @@ Practice all of the above mentioned actions in the demo sample below. Focus any /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable no-shadow */ import { animate, state, style, transition, trigger } from '@angular/animations'; -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { CellType, IActiveNodeChangeEventArgs, IgxColumnComponent, IgxColumnGroupComponent, IgxGridDetailTemplateDirective, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; @@ -247,7 +247,6 @@ const summaryCombinations: Item[] = [ ]) ]) ], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridDetailTemplateDirective, IgxColumnGroupComponent, IgxColumnComponent, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class GridKeyboardnavGuide implements OnInit, OnDestroy { @@ -583,7 +582,7 @@ $custom-checkbox-theme: checkbox-theme( ); .list-sample ::ng-deep { - @include checkbox($custom-checkbox-theme); + @include tokens($custom-checkbox-theme); } .sample { @@ -645,7 +644,7 @@ $custom-checkbox-theme: checkbox-theme( /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable no-shadow */ import { animate, state, style, transition, trigger } from '@angular/animations'; -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { CellType, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; @@ -809,7 +808,6 @@ const summaryCombinations: Item[] = [ ]) ]) ], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class HGridKeyboardnavGuide implements OnInit, OnDestroy { @@ -1253,7 +1251,7 @@ $custom-checkbox-theme: checkbox-theme( /* eslint-disable @angular-eslint/component-class-suffix */ /* eslint-disable @typescript-eslint/naming-convention */ import { animate, state, style, transition, trigger } from '@angular/animations'; -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CellType, IActiveNodeChangeEventArgs, IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; @@ -1428,7 +1426,6 @@ const summaryCombinations: Item[] = [ ]) ]) ], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class TGridKeyboardnavGuide implements OnInit, OnDestroy { @@ -1736,7 +1733,7 @@ $custom-checkbox-theme: checkbox-theme( ); .list-sample ::ng-deep { - @include checkbox($custom-checkbox-theme); + @include tokens($custom-checkbox-theme); } .sample { @@ -1838,7 +1835,7 @@ Use the demo below to try out the custom scenarios that we just implemented: - Double click or press F2 key on a cell in the `Age` column, change the value to `16` and press tab key. Prompt message will be shown. - Select a cell and press Enter key a couple of times. Every key press will move the focus to a cell in the next row, under the same column. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { CellType, GridSelectionMode, IGridKeydownEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -1849,7 +1846,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-keyboard-navigation-sample', styleUrls: ['./tree-grid-keyboard-navigation-sample.component.scss'], templateUrl: './tree-grid-keyboard-navigation-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] }) export class TreeGridKBNavigationComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-live-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-live-data.md index d0109493e..db0a5169e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-live-data.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-live-data.md @@ -13,7 +13,7 @@ The Tree Grid component is able to handle thousands of updates per second, while The sample below demonstrates the Tree Grid performance when all records are updated multiple times per second. Use the UI controls to choose the number of records loaded and the frequency of updates. Feed the same data into the [Line Chart](../charts/types/line-chart.md) to experience the powerful charting capabilities of Ignite UI for Angular. The `Chart` button will show `Category Prices per Region` data for the selected rows and the `Chart` column button will show the same for the current row. ```typescript -import { Component, ElementRef, OnInit, OnDestroy, ViewChild, HostBinding, inject, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy, ViewChild, HostBinding, inject } from '@angular/core'; import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, HorizontalAlignment, IGroupingExpression, IgxOverlayOutletDirective, OverlaySettings, PositionSettings, TreeGridFilteringStrategy, VerticalAlignment } from 'igniteui-angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { ITreeGridAggregation, IgxGroupedTreeGridSorting, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe } from 'igniteui-angular/grids/tree-grid'; @@ -33,12 +33,12 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/direct selector: 'app-tree-grid-finjs-sample', styleUrls: ['./tree-grid-finjs-sample.component.scss'], templateUrl: './tree-grid-finjs-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSliderComponent, FormsModule, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe, DatePipe, IgxTreeGridGroupingPipe] }) export class TreeGridFinJSComponent implements OnDestroy, OnInit { private elRef = inject(ElementRef); + private cdr = inject(ChangeDetectorRef); dataService = inject(SignalRService); @ViewChild('grid1', { static: true }) public grid1!: IgxTreeGridComponent; @@ -129,6 +129,7 @@ export class TreeGridFinJSComponent implements OnDestroy, OnInit { this.data$.subscribe((data) => { if (data.length !== 0) { this.isLoading = false; + this.cdr.markForCheck(); }; }); } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-load-on-demand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-load-on-demand.md index b82cae09c..c80081d7b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-load-on-demand.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-load-on-demand.md @@ -15,7 +15,7 @@ The Ignite UI for Angular [`IgxTreeGrid`](mcp:get_api_reference?platform=angular ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { TreeGridLoadOnDemandService } from './remoteService'; @@ -25,7 +25,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-load-on-demand-sample', styleUrls: ['./tree-grid-load-on-demand-sample.component.scss'], templateUrl: './tree-grid-load-on-demand-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridLoadOnDemandSampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-multi-column-headers.md index 286e96d79..d4e3f1ef7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-multi-column-headers.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-multi-column-headers.md @@ -11,7 +11,7 @@ _premium: true [`IgxTreeGrid`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent) supports `multi-column headers` which allows you to group columns by placing them under a common multi headers. Each multi-column headers group could be a representation of combinations between other groups or columns within the Material UI grid. ## Angular Tree Grid Multi-column Headers Overview Example ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -22,7 +22,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-multi-column-headers-sample', styleUrls: ['./tree-grid-multi-column-headers-sample.component.scss'], templateUrl: './tree-grid-multi-column-headers-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxButtonDirective] }) export class TreeGridMultiColumnHeadersSampleComponent { @@ -178,7 +177,7 @@ If you want to re-use a single template for several column groups, you could set ``` The following sample demonstrates how to implement collapsible column groups using header templates. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -189,7 +188,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-multi-column-header-template-sample', styleUrls: ['./tree-grid-multi-column-header-template-sample.component.scss'], templateUrl: './tree-grid-multi-column-header-template-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent] }) export class TreeGridMultiColumnHeaderTemplateSampleComponent { @@ -303,7 +301,7 @@ The last step is to **include** the component mixins: ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; @@ -313,7 +311,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-multi-column-headers-styling', styleUrls: ['./tree-grid-multi-column-headers-styling.component.scss'], templateUrl: './tree-grid-multi-column-headers-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent] }) export class TreeGridMultiColumnHeadersStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-paging.md index 24bfa0838..6ee632383 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-paging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-paging.md @@ -12,7 +12,7 @@ Pagination is used to split a large set of data into a sequence of pages that ha ## Angular Pagination Example The following example represents Tree Grid pagination and exposes the options usage of `items per page` and how paging can be enabled. The user can also quickly navigate through the Tree Grid pages via "Go to last page" and "Go to first page" buttons. ```typescript -import { Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -25,7 +25,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-paging-sample', styleUrls: ['./tree-grid-paging-sample.component.scss'], templateUrl: 'tree-grid-paging-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective] }) @@ -86,7 +85,7 @@ $progressBar-sample-theme: progress-linear-theme( ); .grid__wrapper { - @include progress-linear($progressBar-sample-theme); + @include tokens($progressBar-sample-theme); --ig-size: var(--ig-size-medium); margin: 0 16px; @@ -145,7 +144,7 @@ The `igx-paginator` component is used along with the `igx-tree-grid` component i ``` ### Paginator Component Demo ```typescript -import { Component, OnInit, ViewChild, AfterViewInit, PLATFORM_ID, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, AfterViewInit, PLATFORM_ID, inject } from '@angular/core'; import { IPaginatorResourceStrings } from 'igniteui-angular/core'; import { IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -161,7 +160,6 @@ import { isPlatformBrowser } from '@angular/common'; selector: 'app-tree-grid-pager-sample', styleUrls: ['./tree-grid-pager-sample.component.scss'], templateUrl: './tree-grid-pager-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent, FormsModule] }) export class TreeGridPagerSampleComponent implements OnInit, AfterViewInit { @@ -333,7 +331,7 @@ The last step is to **include** the component mixins, each with its respective t ``` ### Demo ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -345,7 +343,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-paging-sample', styleUrls: ['./tree-grid-paging-style-sample.component.scss'], templateUrl: 'tree-grid-paging-style-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-remote-data-operations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-remote-data-operations.md index 72b0cdb6e..f3faffcde 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-remote-data-operations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-remote-data-operations.md @@ -11,7 +11,7 @@ _premium: true The Ignite UI for Angular Tree Grid supports remote data operations such as remote virtualization, remote sorting, remote filtering and others. This allows the developer to perform these tasks on a server, retrieve the data that is produced and display it in the Tree Grid. ## Angular Tree Grid Remote Data Operations Overview Example ```typescript -import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { NoopFilteringStrategy } from 'igniteui-angular/core'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -29,7 +29,6 @@ const DEBOUNCE_TIME = 300; selector: 'app-tree-grid-remote-filtering-sample', styleUrls: ['./tree-grid-remote-filtering-sample.component.scss'], templateUrl: './tree-grid-remote-filtering-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, AsyncPipe] }) export class TreeGridRemoteFilteringSampleComponent implements OnInit, AfterViewInit, OnDestroy { @@ -169,7 +168,7 @@ public columnValuesStrategy = (column: ColumnType, ``` ### Unique Column Values Strategy Demo ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { ColumnType, IFilteringExpressionsTree } from 'igniteui-angular/core'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -182,7 +181,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro styleUrls: ['./tree-grid-excel-style-filtering-load-on-demand.component.scss'], templateUrl: './tree-grid-excel-style-filtering-load-on-demand.component.html', providers: [RemoteValuesService], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent] }) export class TreeGridExcelStyleFilteringLoadOnDemandComponent implements OnInit { @@ -334,7 +332,7 @@ public paginate(page: number) { ``` ```typescript import { formatNumber, AsyncPipe } from '@angular/common'; -import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core'; import { GridPagingMode, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -349,7 +347,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-remote-paging-default-template', styleUrls: ['./tree-grid-remote-paging-default-template.component.scss'], templateUrl: './tree-grid-remote-paging-default-template.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, AsyncPipe] }) export class TreeGridRemotePagingDefaultTemplateComponent implements OnInit, AfterViewInit, OnDestroy { @@ -491,7 +488,7 @@ The last step will be to declare the paginator content based on your requirement After all the changes above, the following result will be achieved. ```typescript import { formatNumber, AsyncPipe } from '@angular/common'; -import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core'; import { GridPagingMode, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -506,7 +503,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-remote-paging-grid-sample', styleUrls: ['./tree-grid-remote-paging-sample.component.scss'], templateUrl: './tree-grid-remote-paging-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, AsyncPipe] }) export class TreeGridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-actions.md index 6aa3c99b9..7a0bccfdb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-actions.md @@ -54,7 +54,7 @@ These components expose templates giving flexibility for customization. For inst ``` ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, IgxGridPinningActionsComponent, RowType } from 'igniteui-angular/grids/core'; import { Transaction } from 'igniteui-angular/core'; @@ -69,7 +69,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-row-action-strip', styleUrls: [`tree-grid-action-strip-sample.scss`], templateUrl: 'tree-grid-action-strip-sample.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class TreeGridActionStripSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-adding.md index 12b63d9ea..791630742 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-adding.md @@ -12,7 +12,7 @@ The Tree Grid provides a convenient way to perform data manipulations through in ## Angular Tree Grid Row Adding Example The following sample demonstrates how to enable native row adding in the Tree Grid. Changing a cell value and then clicking or navigating to another cell on the same row doesn't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridEditingActionsComponent } from 'igniteui-angular/grids/core'; @@ -24,7 +24,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-add-row-sample', styleUrls: ['./tree-grid-add-row-sample.component.scss'], templateUrl: './tree-grid-add-row-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxActionStripComponent, IgxGridEditingActionsComponent] }) export class TreeGridAddRowSampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-drag.md index 03c3c7ec6..466ae0277 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-drag.md @@ -12,7 +12,7 @@ In Ignite UI for Angular Tree Grid, **RowDrag** is initialized on the root `igx- ## Angular Tree Grid Row Drag Example ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; @@ -31,7 +31,6 @@ enum DragIcon { selector: 'app-tree-grid-row-drag-base', styleUrls: ['tree-grid-row-drag-base.component.scss'], templateUrl: 'tree-grid-row-drag-base.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] }) export class TreeGridRowDragBaseComponent { @@ -222,7 +221,7 @@ The drag ghost can be templated using the `IgxRowDragGhost` directive, applied t The result of the configuration can be seem below in a `igx-tree-grid` with row dragging and multiple selection enabled. The demo shows the count of the currently dragged rows: #### Example Demo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxRowDragGhostDirective } from 'igniteui-angular/grids/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -235,7 +234,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-multi-row-drag', styleUrls: ['tree-grid-multi-row-drag.component.scss'], templateUrl: 'tree-grid-multi-row-drag.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowDragGhostDirective] }) export class TreeGridMultiRowDragComponent { @@ -393,7 +391,7 @@ The result can be seen in the demo below: #### Example Demo ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxColumnComponent, IgxDragIndicatorIconDirective, RowType } from 'igniteui-angular/grids/core'; @@ -412,7 +410,6 @@ enum DragIcon { selector: 'app-tree-grid-row-drag', styleUrls: ['tree-grid-row-drag.component.scss'], templateUrl: 'tree-grid-row-drag.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxDragIndicatorIconDirective] }) export class TreeGridRowDragComponent { @@ -586,7 +583,7 @@ export class TreeGridRowReorderComponent { With these few easy steps, you've configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo. Notice that we also have row selection enabled and we preserve the selection when dropping the dragged row. ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { GridSelectionMode, IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; @@ -599,7 +596,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-row-reorder', styleUrls: ['tree-grid-row-reorder.component.scss'], templateUrl: 'tree-grid-row-reorder.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] }) export class TreeGridRowReorderComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-editing.md index 3bb76fd8f..6e30c0eaa 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-editing.md @@ -13,7 +13,7 @@ The Tree Grid provides a convenient way to perform data manipulations through in The following sample demonstrates how to enable row editing in the Tree Grid. Changing a cell value and then clicking or navigating to another cell on the same row won't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript /* eslint-disable max-len */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; @@ -24,7 +24,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-row-editing-sample', styleUrls: ['tree-grid-row-editing-sample.component.scss'], templateUrl: 'tree-grid-row-editing-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridRowEditSampleComponent implements OnInit { @@ -258,7 +257,7 @@ We scope our `@include` statement in `.custom-buttons` so that it is only applie ### Demo After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.md#styling). The result of all the combined styles can be seen below: ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxIconButtonDirective } from 'igniteui-angular/directives'; @@ -271,7 +270,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-row-edit-style', styleUrls: ['tree-grid-row-edit-style.component.scss'], templateUrl: 'tree-grid-row-edit-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxIconButtonDirective, IgxRowEditTabStopDirective, IgxIconComponent] }) export class TreeGridRowEditStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-pinning.md index 316b148c3..b5b047889 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-pinning.md @@ -11,7 +11,7 @@ _premium: true One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. **Row Pinning** in Ignite UI for Angular allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the Tree Grid vertically. The Material UI Grid has a built-in row pinning UI, which is enabled by initializing an `igxActionStrip` component in the context of Tree Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API. ## Angular Tree Grid Row Pinning Example ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { ColumnPinningPosition } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IPinningConfig, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; @@ -25,7 +25,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-row-pinning', styleUrls: ['tree-grid-row-pinning.component.scss'], templateUrl: 'tree-grid-row-pinning.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent] }) export class TreeGridRowPinningSampleComponent implements OnInit { @@ -165,7 +164,7 @@ public togglePinning(row: IgxGridRow, event) { ``` #### Demo ```typescript -import { AfterViewInit, Component, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { AfterViewInit, Component, OnInit, ViewChild, inject } from '@angular/core'; import { ColumnPinningPosition } from 'igniteui-angular/core'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -182,7 +181,6 @@ const FILTERING_ICONS_FONT_SET = 'filtering-icons'; selector: 'app-tree-grid-row-pinning-extra-column', styleUrls: ['tree-grid-row-pinning-extra-column.component.scss'], templateUrl: 'tree-grid-row-pinning-extra-column.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent] }) export class TreeGridRowPinningExtraColumnSampleComponent implements OnInit, AfterViewInit { @@ -314,7 +312,7 @@ The last step is to pass the custom grid theme: ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { ColumnPinningPosition } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IPinningConfig, IgxColumnComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; @@ -327,7 +325,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-row-pinning-styling', styleUrls: ['tree-grid-row-pinning-styling.component.scss'], templateUrl: 'tree-grid-row-pinning-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent] }) export class TreeGridRowPinningStylingSampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-selection.md index 64bdd1051..3ac5d446f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-selection.md @@ -12,7 +12,7 @@ With row selection in Ignite UI for Angular, there is row selector column that p ## Angular Row Selection Example The sample below demonstrates the four types of Tree Grid's **row selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box. Use the switch button to _hide_ or _show_ the row selector checkbox. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { GridSelectionMode, IRowSelectionEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -28,7 +28,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-selection-sample', styleUrls: ['./tree-grid-selection-sample.component.scss'], templateUrl: './tree-grid-selection-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSnackbarComponent, IgxIconComponent] }) export class TreeGridSelectionSampleComponent implements OnInit { @@ -354,7 +353,7 @@ The `selectedCount` and `totalCount` properties can be used to determine if the ### Row Numbering Demo This demo shows the usage of custom header and row selectors. The latter uses `rowContext.index` to display row numbers and an `igx-checkbox` bound to `rowContext.selected`. ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { generateEmployeeFlatData } from '../data/employees-flat'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -366,7 +365,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-selection-template-numbers', styleUrls: ['./tree-grid-selection-template-numbers.component.scss'], templateUrl: './tree-grid-selection-template-numbers.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxHeadSelectorDirective, IgxRowSelectorDirective, IgxCheckboxComponent] }) export class TreeGridSelectionTemplateNumbersSampleComponent implements OnInit { @@ -445,7 +443,7 @@ export class TreeGridSelectionTemplateNumbersSampleComponent implements OnInit { ### Conditional Selection Demo This demo prevents some rows from being selected using the `rowSelectionChanging` event and a custom template with disabled checkbox for non-selectable rows. ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IRowSelectionEventArgs, IgxColumnComponent, IgxRowSelectorDirective } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -457,7 +455,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-conditional-row-selectors', styleUrls: ['./tree-grid-conditional-row-selectors.component.scss'], templateUrl: 'tree-grid-conditional-row-selectors.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowSelectorDirective, IgxCheckboxComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-search.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-search.md index 6db65d628..7e7c91a41 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-search.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-search.md @@ -12,7 +12,7 @@ Angular Tree Grid search enables the process of finding values in the collection ## Angular Search Example The following example represents Tree Grid with search input box that allows searching in all columns and rows, as well as specific filtering options for each column. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -28,7 +28,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-search-sample', styleUrls: ['./tree-grid-search-sample.component.scss'], templateUrl: './tree-grid-search-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxChipsAreaComponent, IgxChipComponent, IgxIconButtonDirective, IgxRippleDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridSearchSampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-selection.md index 6d6189fc3..a5bc7e0ae 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-selection.md @@ -12,7 +12,7 @@ With Ignite UI for Angular Tree Grid you can easily select data by using variety The sample below demonstrates the three types of Tree Grid's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -26,7 +26,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-cell-selection', styleUrls: ['./tree-grid-cellSelection.component.scss'], templateUrl: 'tree-grid-cellSelection.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSnackbarComponent, IgxIconComponent] }) export class TreeGridCellSelectionComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-sorting.md index fea8add39..8ec240229 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-sorting.md @@ -14,7 +14,7 @@ In Ignite UI for Angular Tree Grid, data sorting is enabled on a per-column leve ## Angular Tree Grid Sorting Overview Example Additionally there is a custom context menu added for sorting using **igx-tree-grid**'s [`contextMenu`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=contextMenu) Output. ```typescript -import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { DefaultSortingStrategy, ISortingOptions, SortingDirection } from 'igniteui-angular/core'; import { IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; @@ -31,7 +31,6 @@ import { TreeGridContextmenuComponent } from './tree-grid-contextmenu/tree-grid- selector: 'app-tree-grid-sorting-sample', styleUrls: ['./tree-grid-sorting-sample.component.scss'], templateUrl: 'tree-grid-sorting-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxButtonDirective, IgxGridToolbarActionsComponent, IgxSimpleComboComponent, FormsModule, IgxComboClearIconDirective, IgxComboItemDirective, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, IgxCellTemplateDirective, TreeGridContextmenuComponent, UpperCasePipe] }) @@ -181,7 +180,7 @@ Having a certain amount of sorted columns could be really confusing if there is The **IgxTreeGrid** provides a solution for this problem by indicating the index of each sorted column. @@if(igxName === "IgxGrid"){ ```typescript -import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { DefaultSortingStrategy } from 'igniteui-angular/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -193,7 +192,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-sorting-indicators', templateUrl: './grid-sorting-indicators.component.html', styleUrls: ['./grid-sorting-indicators.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridSortingIndicatorsComponent implements OnInit, AfterViewInit { @@ -351,7 +349,7 @@ The last step is to **include** the component mixins: ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -363,7 +361,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-sorting-styling', styleUrls: ['./tree-grid-sorting-styling.component.scss'], templateUrl: 'tree-grid-sorting-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-state-persistence.md index 1f410a9ec..745151af0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-state-persistence.md @@ -127,7 +127,7 @@ public onColumnInit(column: IgxColumnComponent) { ``` ## Demo ```typescript -import { Component, OnInit, ViewChild, ViewChildren, QueryList, AfterViewInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, ViewChildren, QueryList, AfterViewInit, inject } from '@angular/core'; import { Router, RouterLink } from '@angular/router'; import { FilteringExpressionsTree, FilteringLogic } from 'igniteui-angular/core'; import { GridFeatures, IGridState, IGridStateOptions, IgxColumnComponent, IgxGridStateDirective } from 'igniteui-angular/grids/core'; @@ -145,7 +145,6 @@ import { EMPLOYEE_DATA } from './data'; selector: 'app-tgrid', styleUrls: ['./tGrid-state.component.scss'], templateUrl: './tGrid-state.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, IgxTreeGridComponent, IgxGridStateDirective, IgxPaginatorComponent, IgxColumnComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-summaries.md index 530499aaf..94d1605c2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-summaries.md @@ -11,7 +11,7 @@ _premium: true The Angular UI grid in Ignite UI for Angular has a **summaries** feature that functions on a per-column level as group footer. Angular grid summaries is powerful feature which enables the user to see column information in a separate container with a predefined set of default summary items, depending on the type of data within the column or by implementing a custom angular template in the Tree Grid. ## Angular Tree Grid Summaries Overview Example ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { ColumnType } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -24,7 +24,6 @@ import { DatePipe } from '@angular/common'; selector: 'app-tree-grid-summary-sample', styleUrls: ['./tree-grid-summary-sample.component.scss'], templateUrl: './tree-grid-summary-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] }) export class TreeGridSummarySampleComponent { @@ -322,9 +321,9 @@ class MySummary extends IgxNumberSummaryOperand { } ``` ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { IgxColumnComponent, IgxSummaryOperand } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { generateEmployeeFlatData } from '../data/employees-flat'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -369,7 +368,6 @@ class PTOSummary { selector: 'app-treegrid-all-data-summary-sample', styleUrls: ['./treegrid-allData-summary.component.scss'], templateUrl: './treegrid-allData-summary.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridAllDataSummaryComponent implements OnInit { @@ -422,9 +420,9 @@ When a default summary is defined, the height of the summary area is calculated > [!NOTE] > Column summary template could be defined through API by setting the column [summaryTemplate](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=summaryTemplate) property to the required TemplateRef. ```typescript -import { Component, HostBinding, OnInit, ChangeDetectionStrategy } from '@angular/core'; -import { IgxColumnComponent, IgxSummaryOperand, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { Component, HostBinding, OnInit } from '@angular/core'; +import { IgxColumnComponent, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; @@ -473,7 +471,6 @@ class PTOSummary { selector: 'app-treegrid-summary-template', styleUrls: ['./treegrid-summary-template.component.scss'], templateUrl: './treegrid-summary-template.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSummaryTemplateDirective] }) export class TreeGridSummaryTemplateComponent implements OnInit { @@ -777,7 +774,6 @@ class DeliveredSummary { selector: "app-tree-grid-summary-sample", styleUrls: ["./tree-grid-disable-summaries.component.scss"], templateUrl: "./tree-grid-disable-summaries.component.html", - changeDetection: ChangeDetectionStrategy.Eager, imports: [ IgxTreeGridComponent, IgxPreventDocumentScrollDirective, @@ -1086,9 +1082,9 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp ``` ```typescript import { DatePipe } from '@angular/common'; -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxDateSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; -import { IgxSummaryResult } from 'igniteui-angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxDateSummaryOperand, IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -1097,7 +1093,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-summary-formatter', styleUrls: ['./tree-grid-summary-formatter.component.scss'], templateUrl: 'tree-grid-summary-formatter.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) @@ -1174,9 +1169,9 @@ The [`showSummaryOnCollapse`](mcp:get_api_reference?platform=angular&component=I > [!NOTE] > The [`summaryPosition`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=summaryPosition) property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the Tree Grid. ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { DefaultSortingStrategy, GridSummaryCalculationMode, ISortingExpression, IgxSummaryResult, SortingDirection } from 'igniteui-angular/core'; -import { GridSummaryPosition, IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { DefaultSortingStrategy, GridSummaryCalculationMode, ISortingExpression, IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult, SortingDirection } from 'igniteui-angular/core'; +import { GridSummaryPosition, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -1202,7 +1197,6 @@ class AvgSummary { selector: 'app-tree-grid-summary2-sample', styleUrls: ['./tree-grid-summary2-sample.component.scss'], templateUrl: './tree-grid-summary2-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridSummary2SampleComponent implements OnInit { @@ -1346,7 +1340,7 @@ igx-buttongroup{ There is an [`exportSummaries`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterOptions&member=exportSummaries) option in `IgxExcelExporterOptions` that specifies whether the exported data should include the grid's summaries. Default `exportSummaries` value is **false**. The [`IgxExcelExporterService`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) will export the default summaries for all column types as their equivalent excel functions so they will continue working properly when the sheet is modified. Try it for yourself in the example below: ```typescript -import { Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, inject } from '@angular/core'; import { ColumnType } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -1360,7 +1354,6 @@ import { DatePipe } from '@angular/common'; selector: 'app-tree-grid-summary-export', styleUrls: ['./tree-grid-summary-export.component.scss'], templateUrl: './tree-grid-summary-export.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] }) export class TreeGridSummaryExportComponent { @@ -1629,7 +1622,7 @@ The last step is to **include** the component custom theme: ``` ### Demo ```typescript -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { ColumnType } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -1642,7 +1635,6 @@ import { DatePipe } from '@angular/common'; selector: 'app-tree-grid-summary-styling', styleUrls: ['./tree-grid-summary-styling.component.scss'], templateUrl: './tree-grid-summary-styling.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] }) export class TreeGridSummaryStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-toolbar.md index ac24f1117..7b986d723 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-toolbar.md @@ -16,7 +16,7 @@ The Tree Grid in Ignite UI for Angular provides an [`IgxGridToolbarComponent`](m or just any other custom content. The toolbar and the predefined UI components support Angular events and expose API for developers. ## Angular Toolbar Grid Example ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { EMPLOYEE_FLAT_AVATARS_DATA } from '../data/employees-flat-avatars'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -27,7 +27,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-toolbar-sample-4', styleUrls: ['./tree-grid-toolbar-sample-4.component.scss'], templateUrl: './tree-grid-toolbar-sample-4.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class TreeGridToolbarSample4Component { @@ -119,7 +118,7 @@ These features can be enabled independently from each other by following a patte the Ignite UI for Angular suite. Listed below are the main features of the toolbar with example code for each of them. ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { EMPLOYEE_FLAT_AVATARS_DATA } from '../data/employees-flat-avatars'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; @@ -134,7 +133,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-toolbar-sample-1', styleUrls: ['./tree-grid-toolbar-sample-1.component.scss'], templateUrl: './tree-grid-toolbar-sample-1.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class TreeGridToolbarSample1Component { @@ -394,7 +392,7 @@ configureExport(args: IGridToolbarExportEventArgs) { ``` The following sample demonstrates how to customize the exported files: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { CsvFileTypes, IColumnExportingEventArgs, @@ -418,7 +416,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-toolbar-sample-2', styleUrls: ['./tree-grid-toolbar-sample-2.component.scss'], templateUrl: './tree-grid-toolbar-sample-2.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class TreeGridToolbarSample2Component { @@ -432,7 +429,7 @@ export class TreeGridToolbarSample2Component { public configureExport(args: IGridToolbarExportEventArgs) { // You can customize the exporting from this event const options: IgxExporterOptionsBase = args.options; - + options.fileName = `Report_${new Date().toDateString()}`; if (options instanceof IgxExcelExporterOptions) { @@ -504,7 +501,7 @@ Moreover, users can set the toolbar [showProgress](mcp:get_api_reference?platfor or just as another way to signify an action taking place in the grid. The sample below has significant amount of data. While the data is being exported, the progress bar is shown. Additionally, it has another button that simulates a long running operation in the grid: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component, inject, ChangeDetectorRef } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent } from 'igniteui-angular/grids/core'; @@ -516,10 +513,10 @@ import { CurrencyPipe } from '@angular/common'; selector: 'app-tree-grid-export-visualization', templateUrl: './tree-grid-export-visualization.component.html', styleUrls: ['./tree-grid-export-visualization.component.scss'], - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class TreeGridExportVisualizationComponent { + private cdr = inject(ChangeDetectorRef); public localData = []; private data = ORDERS_DATA; @@ -543,7 +540,10 @@ export class TreeGridExportVisualizationComponent { longRunning(toolbar: any) { toolbar.showProgress = true; - setTimeout(() => toolbar.showProgress = false, 5000); + setTimeout(() => { + toolbar.showProgress = false; + this.cdr.markForCheck(); + }, 5000); } } ``` @@ -621,7 +621,7 @@ Here is a sample snippet: ``` The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers: ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { EMPLOYEE_FLAT_AVATARS_DATA } from '../data/employees-flat-avatars'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -634,7 +634,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-toolbar-sample-3', styleUrls: ['./tree-grid-toolbar-sample-3.component.scss'], templateUrl: './tree-grid-toolbar-sample-3.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class TreeGridToolbarSample3Component { @@ -767,7 +766,7 @@ The last step is to **include** the newly created themes. ``` ### Demo ```typescript -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component } from '@angular/core'; import { EMPLOYEE_FLAT_AVATARS_DATA } from '../data/employees-flat-avatars'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; @@ -778,7 +777,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-toolbar-style', styleUrls: ['./tree-grid-toolbar-style.component.scss'], templateUrl: './tree-grid-toolbar-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class TreeGridToolbarStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-tree-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-tree-grid.md index 874016807..54ec40f9d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-tree-grid.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-tree-grid.md @@ -15,7 +15,7 @@ The Ignite UI for Angular Tree Grid is used to display and manipulate hierarchic In this example, you can see how users can display hierarchical data. We have included filtering and sorting options, pinning and hiding, row selection, export to excel, csv and pdf, and cell templating that uses our [Sparkline](../charts/types/sparkline-chart.md) component. In addition, you can see an example of custom pagination with [Angular Pagination](paging.md). ```typescript -import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { GridSelectionMode, IgxCSVTextDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxExcelTextDirective, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IColumnExportingEventArgs, IgxCsvExporterService, IgxExcelExporterService } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -27,7 +27,6 @@ import { IgxSparklineCoreModule } from 'igniteui-angular-charts'; selector: 'app-tree-grid-childdatakey-sample', styleUrls: ['./tree-grid-childdatakey-sample.component.scss'], templateUrl: './tree-grid-childdatakey-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSparklineCoreModule] }) export class TreeGridChilddatakeySampleComponent implements OnInit { @@ -367,7 +366,7 @@ In addition we will enable the row selection feature of the tree grid by using t And here is the final result: ```typescript -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { Data } from './data'; @@ -378,7 +377,6 @@ import { IgxSparklineCoreModule } from 'igniteui-angular-charts'; selector: 'app-tree-grid-primaryforeignkey-sample', styleUrls: ['./tree-grid-primaryforeignkey-sample.component.scss'], templateUrl: './tree-grid-primaryforeignkey-sample.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSparklineCoreModule] }) export class TreeGridPrimaryforeignkeySampleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-validation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-validation.md index a3790d4fa..f5ceeeedd 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-validation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-validation.md @@ -25,7 +25,7 @@ To validate that a column input would be set and the value is going to be format The following sample demonstrates how to use the prebuilt `required`, `email` and `min` validator directives in a Tree Grid. ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxColumnComponent, IgxColumnMaxValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; @@ -37,7 +37,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-validator-service-component', styleUrls: ['tree-grid-validator-service.component.scss'], templateUrl: 'tree-grid-validator-service.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective] }) export class TreeGridValidatorServiceComponent implements OnInit { @@ -169,8 +168,8 @@ public cellEdit(evt) { The below example demonstrates the above-mentioned customization options. ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, Directive, Input, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { AbstractControl, FormGroup, NG_VALIDATORS, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { Component, Directive, forwardRef, Input, OnInit, ViewChild } from '@angular/core'; +import { AbstractControl, NG_VALIDATORS, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IGridFormGroupCreatedEventArgs, IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnMaxValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -187,7 +186,7 @@ export function phoneFormatValidator(phoneReg: RegExp): ValidatorFn { @Directive({ selector: '[phoneFormat]', - providers: [{ provide: NG_VALIDATORS, useExisting: TGridPhoneFormatDirective, multi: true }] + providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => TGridPhoneFormatDirective), multi: true }] }) export class TGridPhoneFormatDirective extends Validators { @Input('phoneFormat') @@ -203,7 +202,6 @@ export class TGridPhoneFormatDirective extends Validators { selector: 'app-tree-grid-validator-service-extended-component', styleUrls: ['tree-grid-validator-service-extended.component.scss'], templateUrl: 'tree-grid-validator-service-extended.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective, IgxColumnMaxValidatorDirective, TGridPhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxButtonDirective] }) export class TreeGridValidatorServiceExtendedComponent implements OnInit { @@ -415,7 +413,7 @@ public stateMessage(cell: CellType) { The below sample demonstrates the cross-field validation in action. ```typescript /* eslint-disable @typescript-eslint/naming-convention */ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ColumnPinningPosition } from 'igniteui-angular/core'; import { CellType, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IPinningConfig, IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxColumnMaxValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; @@ -431,7 +429,6 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-validator-service-cross-field-component', styleUrls: ['tree-grid-validator-service-cross-field.component.scss'], templateUrl: 'tree-grid-validator-service-cross-field.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective, IgxCellEditorTemplateDirective, IgxSelectComponent, ReactiveFormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxButtonDirective] }) export class TreeGridValidatorServiceCrossFieldComponent implements OnInit { @@ -665,7 +662,7 @@ public cellStyles = { ``` ### Demo ```typescript -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, RowType } from 'igniteui-angular/grids/core'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; @@ -676,7 +673,6 @@ import { NgTemplateOutlet } from '@angular/common'; selector: 'app-tree-grid-validation-style', styleUrls: ['tree-grid-validation-style.component.scss'], templateUrl: 'tree-grid-validation-style.component.html', - changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet] }) export class TreeGridValidationStyleComponent implements OnInit { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/avatar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/avatar.md index 06b2651fc..e4d7d406a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/avatar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/avatar.md @@ -13,32 +13,7 @@ The Ignite UI for Blazor Avatar helps to display initials, images, or icons in y ## Blazor Icon Avatar Example -```razor -@using IgniteUI.Blazor.Controls - - -
- - - -
- -@code { - - public IgbIcon ChildIcon { get; set; } - protected override void OnAfterRender(bool firstRender) - { - if (this.ChildIcon != null && firstRender) - { - this.ChildIcon.EnsureReady().ContinueWith(new Action((e) => - { - this.ChildIcon.RegisterIcon("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material"); - })); - } - } -} -```
@@ -86,20 +61,8 @@ If the [`Initials`](mcp:get_api_reference?platform=blazor&component=IgbAvatar&me ``` -```razor -@using IgniteUI.Blazor.Controls -
- -
- -@code { - - -} -``` - ### Image The avatar can also display an image when the [`Src`](mcp:get_api_reference?platform=blazor&component=IgbAvatar&member=Src) attribute is assigned a valid URL to a static asset. In that case the [`Initials`](mcp:get_api_reference?platform=blazor&component=IgbAvatar&member=Initials) value will be ignored and children elements will not be rendered. @@ -132,25 +95,66 @@ The avatar supports three shapes - `circle`, `rounded`, and `square`. The defaul ```razor @using IgniteUI.Blazor.Controls - -
- - +
+ + + Circle + + + + + 2 + + Square + + + + + + Rounded
@code { + private const string MailIcon = + ""; - public IgbIcon ChildIcon { get; set; } + private const string CheckIcon = + ""; - protected override void OnAfterRender(bool firstRender) + public IgbIcon MailIconRef { get; set; } + public IgbIcon CheckIconRef { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) { - if (this.ChildIcon != null && firstRender) + if (firstRender) { - this.ChildIcon.EnsureReady().ContinueWith(new Action((e) => + if (MailIconRef != null) + { + await MailIconRef.EnsureReady(); + await MailIconRef.RegisterIconFromTextAsync("mail", MailIcon, "material"); + } + + if (CheckIconRef != null) { - this.ChildIcon.RegisterIcon("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material"); - })); + await CheckIconRef.EnsureReady(); + await CheckIconRef.RegisterIconFromTextAsync("check", CheckIcon, "material"); + } } } } @@ -169,16 +173,37 @@ igc-avatar { ```razor @using IgniteUI.Blazor.Controls - -
- - - +
+ + + Large + + + + Medium + + + + Small
- -@code { - -} ``` ### Styling @@ -204,21 +229,199 @@ igc-avatar::part(base) { ```razor @using IgniteUI.Blazor.Controls +
+ + + @foreach (var group in Sections) + { + @group.Header -
- - -
- - - -
+ @foreach (var item in group.Items) + { + +
+ + @if (!string.IsNullOrEmpty(item.Avatar.Icon)) + { + + } + + + @if (item.Badge != null) + { + + + + } +
+ @item.Title + @item.Subtitle +
@item.End
+ + } + } +
+ @code { + private const string CheckIcon = + ""; + + private const string CalendarIcon = + ""; + + private const string XIcon = + ""; + + private const string HorizontalRuleIcon = + ""; + + private const string PeopleIcon = + ""; + + private readonly List Sections = new() + { + new AvatarListSection + { + Header = "Chats", + Items = new List + { + new AvatarListItem + }, + Badge = new BadgeData + { + Icon = "check", + Variant = StyleVariant.Success + } + }, + new AvatarListItem + { + Title = "James Ford", + Subtitle = "I'll send the text and im ...", + End = "8:30 AM", + Avatar = new AvatarData + { + Initials = "JF", + Alt = "A profile photo of James Ford.", + ClassName = "avatar-muted" + }, + Badge = new BadgeData + { + Icon = "x", + Variant = StyleVariant.Primary, + ClassName = "avatar-muted-badge" + } + }, + new AvatarListItem + { + Title = "Kate Porter", + Subtitle = "That's great!", + End = "Yesterday", + Avatar = new AvatarData + { + Src = "https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png", + Alt = "A profile photo of Kate Porter." + }, + Badge = new BadgeData + { + Icon = "horizontalRule", + Variant = StyleVariant.Danger + } + } + } + }, + new AvatarListSection + { + Header = "Meetings", + Items = new List + { + new AvatarListItem + } + }, + new AvatarListItem + { + Title = "Design Discussion", + Subtitle = "https://www.infra.com", + End = "11:30 AM", + Avatar = new AvatarData + { + Icon = "people", + Alt = "Group Icon.", + ClassName = "avatar-meeting" + } + } + } + } + }; + + private IgbIcon IconRef { get; set; } + + private string GetAvatarClass(AvatarListItem item) + { + return string.IsNullOrEmpty(item.Avatar.ClassName) + ? "profile-avatar" + : $"profile-avatar {item.Avatar.ClassName}"; + } + private string GetBadgeClass(AvatarListItem item) + { + return string.IsNullOrEmpty(item.Badge?.ClassName) + ? "avatar-status avatar-check-badge" + : $"avatar-status avatar-check-badge {item.Badge.ClassName}"; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender && IconRef != null) + { + await IconRef.EnsureReady(); + await IconRef.RegisterIconFromTextAsync("calendar", CalendarIcon, "material"); + await IconRef.RegisterIconFromTextAsync("check", CheckIcon, "material"); + await IconRef.RegisterIconFromTextAsync("x", XIcon, "material"); + await IconRef.RegisterIconFromTextAsync("horizontalRule", HorizontalRuleIcon, "material"); + await IconRef.RegisterIconFromTextAsync("people", PeopleIcon, "material"); + } + } + + private class AvatarListSection + { + public string Header { get; set; } + public List Items { get; set; } + } + + private class AvatarListItem + { + public string Title { get; set; } + public string Subtitle { get; set; } + public string End { get; set; } + public AvatarData Avatar { get; set; } + public BadgeData Badge { get; set; } + } + + private class AvatarData + { + public string Src { get; set; } + public string Icon { get; set; } + public string Initials { get; set; } + public string Alt { get; set; } + public string ClassName { get; set; } + } + + private class BadgeData + { + public string Icon { get; set; } + public StyleVariant Variant { get; set; } + public string ClassName { get; set; } + } } ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md index 39bf84b43..16eb2559d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md @@ -16,18 +16,61 @@ The Ignite UI for Blazor Badge is a component used in conjunction with avatars, ```razor @using IgniteUI.Blazor.Controls -
-
-
- - -
- Terrance Orta -
+
+
+
+ +
+ 23 +
+
+ + + + +
+
+
+
+ 1 +
+ Orders +
+ +
+
+ 2 + +
+ Payment +
+ +
+
+ 3 +
+ Shipping +
+
@code { - + private const string FavoriteBorderIcon = ""; + private const string CloseIcon = ""; + + private IgbIcon iconRef; + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && iconRef != null) + { + iconRef.EnsureReady().ContinueWith(_ => + { + iconRef.RegisterIconFromText("favorite_border", FavoriteBorderIcon, "material"); + iconRef.RegisterIconFromText("close", CloseIcon, "material"); + }); + } + } } ``` @@ -74,13 +117,77 @@ The Ignite UI for Blazor badge supports several pre-defined stylistic variants. ```razor @using IgniteUI.Blazor.Controls - -
- +
+
+
+ + + + 2 +
+ Primary +
+
+
+ + + + +
+ Info +
+
+
+ + + + +
+ Success +
+
+
+ + + + 2 +
+ Warn +
+
+
+ + + + +
+ Error +
@code { - + private const string CheckIcon = ""; + private const string CloseIcon = ""; + private const string MailIcon = ""; + private const string NotificationsIcon = ""; + + private IgbIcon iconRef; + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && iconRef != null) + { + iconRef.EnsureReady().ContinueWith(_ => + { + iconRef.RegisterIconFromText("check", CheckIcon, "material"); + iconRef.RegisterIconFromText("close", CloseIcon, "material"); + iconRef.RegisterIconFromText("mail", MailIcon, "material"); + iconRef.RegisterIconFromText("notifications", NotificationsIcon, "material"); + }); + } + } } ``` @@ -95,13 +202,44 @@ The badge component supports `rounded`(default) and `square` shapes. These value ```razor @using IgniteUI.Blazor.Controls - -
- +
+
+ Rounded + + + + 2 + + + +
+
+ Square + + + + 2 + + + +
@code { - + private const string CheckIcon = ""; + + private IgbIcon checkIconRef; + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && checkIconRef != null) + { + checkIconRef.EnsureReady().ContinueWith(_ => + { + checkIconRef.RegisterIconFromText("check", CheckIcon, "material"); + }); + } + } } ``` @@ -116,12 +254,81 @@ The Ignite UI for Blazor badge component can also render as a minimal dot indica ```razor @using IgniteUI.Blazor.Controls -
- +
+
+
+ +
+ +
+
+
+ + + + Contract renewal + 09:12 + +
+
+ + Weekly digest + Yesterday + +
+
+
+ + +
+
+
+ + + + Home +
+
+ + + + + Chat +
+
+ + + + Profile +
+
@code { - + private const string NotificationsIcon = ""; + private const string ChevronRightIcon = ""; + private const string HomeIcon = ""; + private const string PersonIcon = ""; + private const string FacebookMessengerIcon = ""; + + private IgbIcon iconRef; + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && iconRef != null) + { + iconRef.EnsureReady().ContinueWith(_ => + { + iconRef.RegisterIconFromText("notifications", NotificationsIcon, "material"); + iconRef.RegisterIconFromText("chevron_right", ChevronRightIcon, "material"); + iconRef.RegisterIconFromText("home", HomeIcon, "material"); + iconRef.RegisterIconFromText("person", PersonIcon, "material"); + iconRef.RegisterIconFromText("facebookMessenger", FacebookMessengerIcon, "material"); + }); + } + } } ``` @@ -139,13 +346,56 @@ igc-badge::part(base) { ```razor @using IgniteUI.Blazor.Controls - -
- +
+
+ + + + + + +
+
+ + + + +
+
+ + + + 2 +
+
+ + +
@code { - + private const string PersonIcon = ""; + private const string PhotoCameraIcon = ""; + private const string StarBorderIcon = ""; + private const string FavoriteBorderIcon = ""; + + private IgbIcon iconRef; + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && iconRef != null) + { + iconRef.EnsureReady().ContinueWith(_ => + { + iconRef.RegisterIconFromText("person", PersonIcon, "material"); + iconRef.RegisterIconFromText("photo_camera", PhotoCameraIcon, "material"); + iconRef.RegisterIconFromText("star_border", StarBorderIcon, "material"); + iconRef.RegisterIconFromText("favorite_border", FavoriteBorderIcon, "material"); + }); + } + } } ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button-group.md index bc3b3ec56..4b529e5d2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button-group.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button-group.md @@ -16,57 +16,45 @@ The Blazor Button Group component is used to organize [`IgbToggleButton`](mcp:ge ```razor @using IgniteUI.Blazor.Controls - +
- - - - - - - - - - - - - - - - - + + Device + Cloud -
- @code { - private string formatAlignLeft = ""; - private string formatAlignCenter = ""; - private string formatAlignRight = ""; - private string formatAlignJustify = ""; +
+ Trip around the world +
+ @foreach (var photo in Photos) + { + Trip around the world + } +
+
+
- private IgbIcon iconRef; +@code { + private static readonly string[] DevicePhotos = { + "https://picsum.photos/id/1015/300/220", + "https://picsum.photos/id/1016/300/220", + "https://picsum.photos/id/1018/300/220", + "https://picsum.photos/id/1019/300/220" + }; + + private static readonly string[] CloudPhotos = { + "https://picsum.photos/id/1036/300/220", + "https://picsum.photos/id/1051/300/220", + "https://picsum.photos/id/1062/300/220", + "https://picsum.photos/id/1067/300/220" + }; + + private string[] Photos { get; set; } = CloudPhotos; - protected override void OnAfterRender(bool firstRender) + private void OnSelect(IgbComponentValueChangedEventArgs args) { - if (this.iconRef != null && firstRender) - { - this.iconRef.EnsureReady().ContinueWith(new Action((e) => - { - this.iconRef.RegisterIconFromText("format_align_left", formatAlignLeft, "material"); ; - this.iconRef.RegisterIconFromText("format_align_center", formatAlignCenter, "material"); ; - this.iconRef.RegisterIconFromText("format_align_right", formatAlignRight, "material"); ; - this.iconRef.RegisterIconFromText("format_align_justify", formatAlignJustify, "material"); ; - })); - } + this.Photos = args.Detail == "device" ? DevicePhotos : CloudPhotos; } } ``` @@ -123,39 +111,30 @@ Use the [`Alignment`](mcp:get_api_reference?platform=blazor&component=IgbButtonG ```razor @using IgniteUI.Blazor.Controls - - -
- - - Sofia - - - - London - - - - New York - - - - Tokyo - - -
- @code { +@code { + private static readonly string[] Cities = { "Sofia", "London", "New York" }; + private static readonly ContentOrientation[] Alignments = { ContentOrientation.Horizontal, ContentOrientation.Vertical }; } ``` @@ -172,17 +151,34 @@ The sample below demonstrates the exposed [`IgbButtonGroup`](mcp:get_api_referen ```razor @using IgniteUI.Blazor.Controls + + -
-
- - - Single - Single-Required - Multiple - -
- - +
+ @foreach (var selection in modes) + { +
+ @(selection == ButtonGroupSelection.SingleRequired ? "Single-Required" : selection.ToString()) + + - + @@ -213,7 +205,9 @@ The sample below demonstrates the exposed [`IgbButtonGroup`](mcp:get_api_referen - + +
+ }
@code { @@ -222,7 +216,7 @@ The sample below demonstrates the exposed [`IgbButtonGroup`](mcp:get_api_referen private string underlinedIcon = ""; private IgbIcon iconRef; - private IgbButtonGroup buttonGroupRef; + private readonly ButtonGroupSelection[] modes = { ButtonGroupSelection.Single, ButtonGroupSelection.SingleRequired, ButtonGroupSelection.Multiple }; protected override void OnAfterRender(bool firstRender) { @@ -237,20 +231,6 @@ The sample below demonstrates the exposed [`IgbButtonGroup`](mcp:get_api_referen } } - private void OnSingleClick() - { - this.buttonGroupRef.Selection = ButtonGroupSelection.Single; - } - - private void OnSingleRequiredClick() - { - this.buttonGroupRef.Selection = ButtonGroupSelection.SingleRequired; - } - - private void OnMultipleClick() - { - this.buttonGroupRef.Selection = ButtonGroupSelection.Multiple; - } } ``` @@ -283,27 +263,30 @@ The `--ig-size` CSS custom property can be used to control the size of the butto ```razor @using IgniteUI.Blazor.Controls -
- - - Small - - - Medium - - - Large - - + + +
+ @foreach (var size in Sizes) + { +
+ @(char.ToUpperInvariant(size[0]) + size.Substring(1)) + + @foreach (var city in Cities) + { + + @city + + + } + +
+ }
@code { - private string style = "--ig-size: var(--ig-size-large)"; + private static readonly string[] Cities = { "Sofia", "London", "New York" }; - private void OnSelect(IgbComponentValueChangedEventArgs args) - { - this.style = $"--ig-size: var(--ig-size-{args.Detail})"; - } + private static readonly string[] Sizes = { "small", "medium", "large" }; } ``` @@ -326,59 +309,22 @@ igc-toggle-button::part(toggle) { ```razor @using IgniteUI.Blazor.Controls - - -
- - - Sofia - - - - London - - - - New York - - - - Tokyo - - +
+ + @foreach (var alignmentOption in Layouts) + { + + @alignmentOption + + + }
- @code { - +@code { + private static readonly string[] Layouts = { "Left", "Center", "Right" }; } ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-tables.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-tables.md index bfecd5f91..49b25b11b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-tables.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-tables.md @@ -14,10 +14,8 @@ The Infragistics Blazor Excel Engine's `WorksheetTable` functionality allows you
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md index bb74b2c5a..7285aee0f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md @@ -115,7 +115,6 @@ The following code shows how to bind the [`IgbGeographicSymbolSeries`](mcp:get_a ```razor @using IgniteUI.Blazor.Controls - @for (int i = 0; i < this.DataSource.Count; i++) { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md index 7dcd05cbe..6b058ab19 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md @@ -131,7 +131,6 @@ For your convenience, all above code snippets are combined into one code block b ```razor @using IgniteUI.Blazor.Controls - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md index c9a927400..1b3aeee64 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md @@ -119,7 +119,6 @@ For your convenience, all above code snippets are combined into one code block b ```razor @using IgniteUI.Blazor.Controls - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md index 0b61468a1..f43418b27 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md @@ -84,7 +84,6 @@ The following code binds [`IgbGeographicPolylineSeries`](mcp:get_api_reference?p ```razor @using IgniteUI.Blazor.Controls - @@ -89,7 +88,6 @@ Alternatively, you can use the [EsriUtility](geo-map-resources-esri.md) which de ```razor @using IgniteUI.Blazor.Controls - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md index 5073d60ca..ba2611683 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md @@ -100,7 +100,6 @@ The following code shows how to bind the [`IgbGeographicScatterAreaSeries`](mcp: ```razor @using IgniteUI.Blazor.Controls - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md index 0a35bf772..cc89ea79d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md @@ -69,7 +69,6 @@ The following code shows how to bind the [`IgbGeographicPolylineSeries`](mcp:get ```razor @using IgniteUI.Blazor.Controls - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md index cc65507c7..abdce71ab 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md @@ -261,7 +261,6 @@ During runtime the expressions are gettable and settable from the `groupingExpre new IgbGroupingExpression() { FieldName = "ShipCity", Dir= SortingDirection.Asc } }; - private void GroupGrid() { this.grid.GroupBy(GroupingExpression1); @@ -323,7 +322,6 @@ As an example, the following template would make the group rows summary more ver ```razor - //In JavaScript: igRegisterScript("WebGridGroupByRowTemplate", (ctx) => { var html = window.igTemplating.html; diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-filtering.md index 11ec27e1e..d707b1a57 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-filtering.md @@ -124,7 +124,7 @@ await grid.Filter(new IgbGridLiteFilterExpression { Key = "FirstName", Condition await grid.Filter(new IgbGridLiteFilterExpression[] { new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "a" }, - new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "g", Criteria = "or" } ``` + new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "g", Criteria = "or" }``` The `ClearFilter()` method, as the name implies, clears the filter state of a single column or the whole grid component, depending on the passed arguments. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-sorting.md index 835294454..b8797621a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-sorting.md @@ -187,7 +187,7 @@ await grid.Sort(new IgbGridLiteSortingExpression { Key = "Price", Direction = Gr await grid.Sort(new IgbGridLiteSortingExpression[] { new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending }, - new IgbGridLiteSortingExpression { Key = "Name", Direction = GridLiteSortingDirection.Descending } ``` + new IgbGridLiteSortingExpression { Key = "Name", Direction = GridLiteSortingDirection.Descending }``` The `ClearSort()` method, as the name implies, clears the sort state of a single column or the whole grid component, depending on the passed arguments. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md index ec5733a3d..1404260ea 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md @@ -237,7 +237,6 @@ Basically the main function will look like this: this.MenuY = e.ClientY + "px"; } - public void onMenuShow(IgbGridCellEventArgs e) { IgbGridCellEventArgsDetail detail = e.Detail; @@ -260,7 +259,6 @@ The context menu will have the following functions: StateHasChanged(); } - public async void CopyRowData() { this.ShowMenu = false; diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md index b955eedb8..a0d64bcc5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md @@ -588,7 +588,6 @@ This can be done by creating a header template for the columns with a custom ico HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column6" @ref="column6"> - // In JavaScript igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/avatar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/avatar.md index e78b2aa0a..27cf5ccc2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/avatar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/avatar.md @@ -13,36 +13,7 @@ The Ignite UI for React Avatar helps to display initials, images, or icons in yo ## React Icon Avatar Example -```tsx -import React, { useEffect } from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - - -const homeIcon = - ''; - -export default function AvatarIcon() { - - useEffect(() => { - registerIconFromText("home", homeIcon, "material"); - }, []); - return ( -
- - - -
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -```
@@ -89,26 +60,7 @@ If the [`initials`](mcp:get_api_reference?platform=react&component=IgrAvatar&mem ``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default function AvatarInitials() { - - return ( -
- -
- ); -} -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` ### Image @@ -133,7 +85,7 @@ export default function AvatarImage() { return (
- +
); } @@ -147,34 +99,127 @@ root.render(); The avatar supports three shapes - `circle`, `rounded`, and `square`. The default shape of the avatar is `square` and it can be changed via the `shape` attribute. -```tsx -import React, { useEffect } from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +```css +.avatar-shape-sample { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: 2.5rem; + row-gap: 0.5rem; + height: 100vh; + padding: 2rem; +} -const homeIcon = - ''; +:where(igc-avatar) { + --ig-size: var(--ig-size-small); + grid-row: 1; +} -export default function AvatarShape() { +:where(span) { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", Arial, sans-serif; + font-size: 0.875rem; + line-height: 1.25rem; + margin: 0; +} - useEffect(() => { - registerIconFromText("home", homeIcon, "material"); - }, []); - - return ( -
- - - -
- ); +:where(igc-badge) { + --ig-size: var(--ig-size-small); + --ig-badge-icon-color: #ffffff; + --ig-badge-text-color: #ffffff; + + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} + +.avatar-shape-sample igc-avatar:nth-of-type(1) { + anchor-name: --circle; +} + +.avatar-shape-sample igc-avatar:nth-of-type(2) { + anchor-name: --square; +} + +.avatar-shape-sample igc-avatar:nth-of-type(3) { + anchor-name: --rounded; +} + +.avatar-shape-sample igc-badge:nth-of-type(1) { + position-anchor: --circle; +} + +.avatar-shape-sample igc-badge:nth-of-type(2) { + position-anchor: --square; +} + +.avatar-shape-sample igc-badge:nth-of-type(3) { + position-anchor: --rounded; +} +``` +```tsx +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrAvatar, + IgrBadge, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +const mailIcon = + ''; + +const checkIcon = + ''; + +export default function AvatarShape() { + useEffect(() => { + registerIconFromText("mail", mailIcon, "material"); + registerIconFromText("check", checkIcon, "material"); + }, []); + + return ( +
+ + + Circle + + + + + + 2 + + Square + + + + + + Rounded +
+ ); } // rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); ``` ### Size @@ -188,44 +233,109 @@ igc-avatar { ``` ```css -.size-small { - --ig-size: var(--ig-size-small); +.avatar-size-sample { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: 3rem; + row-gap: 0.5rem; + height: 100vh; + padding: 2rem; } -.size-medium { - --ig-size: var(--ig-size-medium); +:where(igc-avatar) { + grid-row: 1; } -.size-large { - --ig-size: var(--ig-size-large); +:where(span) { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", Arial, sans-serif; + font-size: 0.875rem; + line-height: 1.25rem; + margin: 0; } -.sample { - flex-direction: row; - gap: 10px; +:where(igc-badge) { + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} + +.avatar-size-sample igc-avatar:nth-of-type(1) { + --ig-size: var(--ig-size-large); + anchor-name: --large; +} + +.avatar-size-sample igc-avatar:nth-of-type(2) { + --ig-size: var(--ig-size-medium); + anchor-name: --medium; +} + +.avatar-size-sample igc-avatar:nth-of-type(3) { + --ig-size: var(--ig-size-small); + anchor-name: --small; +} + +.avatar-size-sample igc-badge:nth-of-type(1) { + --ig-size: var(--ig-size-large); + position-anchor: --large; +} + +.avatar-size-sample igc-badge:nth-of-type(2) { + --ig-size: var(--ig-size-medium); + position-anchor: --medium; +} + +.avatar-size-sample igc-badge:nth-of-type(3) { + --ig-size: var(--ig-size-small); + position-anchor: --small; } ``` ```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrAvatar, IgrBadge } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; export default function AvatarSize() { - - return ( -
- - - -
- ); + return ( +
+ + + Large + + + + Medium + + + + Small +
+ ); } // rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); ``` ### Styling @@ -248,94 +358,271 @@ igc-avatar::part(base) { } ``` +```typescript +export const checkIcon = + ''; + +export const calendarTodayIcon = + ''; + +export const xIcon = + ''; + +export const horizontalRuleIcon = + ''; + +export const peopleIcon = + ''; +``` ```css -.sizes .size-small { - --ig-size: var(--ig-size-small); +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; } -.sizes .size-medium { - --ig-size: var(--ig-size-medium); +.chat-list { + --ig-list-header-text-color: var(--ig-gray-900); + max-width: 20.5rem; } -.sizes .size-large, -.size-large { - --ig-size: var(--ig-size-large); +.chat-list * { + font-family: "Aktiv Grotesk", Arial, sans-serif; } -.sample { - display: flex; - flex-direction: row; - justify-content: space-around; - gap: 10px; - margin-top: 20px; +.chat-list [slot="title"] { + font-weight: 600; } -.sizes { - display: flex; - flex-direction: row; - gap: 10px; +.chat-list [slot="end"] { + color: var(--ig-gray-600); + font-size: 0.875rem; + line-height: 1.25rem; } -igc-avatar { - --ig-avatar-background: var(--ig-success-100); +.chat-list-item--split { + --border-width: 0.0625rem; + --border-color: var(--ig-gray-300); } -igc-avatar::part(base) { - border: 2px solid var(--ig-error-500); +:where(igc-avatar) { + --ig-size: var(--ig-size-small); + --ig-avatar-background: var(--ig-gray-300); + --ig-avatar-color: var(--ig-gray-300-contrast); + --ig-avatar-icon-color: var(--ig-gray-300-contrast); } -igc-avatar::part(initials) { - color: var(--ig-success-500-contrast); - background: var(--ig-error-500); - padding: 5px 10px; - margin: 10px; - border-radius: 50px; - /* border: 1px solid greenyellow; */ +.avatar-icon { + --ig-size: var(--ig-size-small); } -igc-avatar::part(image) { - border-radius: 20px; - padding: 5px; - border: 2px solid var(--ig-primary-500); +.avatar-with-badge { + position: relative; } -``` -```tsx -import React, { useEffect } from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +:where(igc-badge) { + --ig-size: var(--ig-size-small); + --ig-badge-icon-color: #ffffff; + --ig-badge-text-color: #ffffff; +} -const homeIcon = - ''; - -export default function AvatarStyling() { +.avatar-status { + --ig-size: var(--ig-size-small); + position: absolute; + inset-inline-end: -0.25rem; + inset-block-end: -0.25rem; +} - useEffect(() => { - registerIconFromText("home", homeIcon, "material"); - }, []); - - return ( -
+.avatar-muted-badge { + --ig-badge-background-color: var(--ig-gray-500); +} +``` +```tsx +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrList, + IgrListHeader, + IgrListItem, + IgrAvatar, + IgrBadge, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import { + calendarTodayIcon, + checkIcon, + horizontalRuleIcon, + peopleIcon, + xIcon, +} from "./icons"; + +type AvatarListItem = { + title: string; + subtitle: string; + end: string; + avatar: { + src?: string; + icon?: string; + initials?: string; + alt: string; + className?: string; + }; + badge?: { + icon: string; + variant: "success" | "info" | "warning" | "danger" | "primary"; + className?: string; + }; +}; + +type AvatarListSection = { + header: string; + items: AvatarListItem[]; +}; + +const sections: AvatarListSection[] = [ + { + header: "Chats", + items: [ + { + title: "Nick Evans", + subtitle: "Hi Samira, thanks for the ...", + end: "9:44 AM", + avatar: { + src: "https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png", + alt: "A profile photo of Nick Evans.", + }, + badge: { + icon: "check", + variant: "success", + }, + }, + { + title: "James Ford", + subtitle: "I'll send the text and im ...", + end: "8:30 AM", + avatar: { + initials: "JF", + alt: "A profile photo of Nick Evans.", + className: "avatar-muted", + }, + badge: { + icon: "x", + variant: "primary", + className: "avatar-muted-badge", + }, + }, + { + title: "Kate Porter", + subtitle: "That's great!", + end: "Yesterday", + avatar: { + src: "https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png", + alt: "A profile photo of Nick Evans.", + }, + badge: { + icon: "horizontalRule", + variant: "danger", + }, + }, + ], + }, + { + header: "Meetings", + items: [ + { + title: "Weekly Meeting", + subtitle: "https://www.infra.com", + end: "Monday", + avatar: { + icon: "calendar", + alt: "Calendar Icon.", + className: "avatar-meeting", + }, + }, + { + title: "Design Discussion", + subtitle: "https://www.infra.com", + end: "11:30 AM", + avatar: { + icon: "people", + alt: "Group Icon.", + className: "avatar-meeting", + }, + }, + ], + }, +]; + +function renderAvatar(item: AvatarListItem) { + return ( + + {item.avatar.icon && ( + + )} + + ); +} - - -
- - - -
-
- ); +export default function AvatarStyling() { + useEffect(() => { + registerIconFromText("calendar", calendarTodayIcon, "material"); + registerIconFromText("check", checkIcon, "material"); + registerIconFromText("x", xIcon, "material"); + registerIconFromText("horizontalRule", horizontalRuleIcon, "material"); + registerIconFromText("people", peopleIcon, "material"); + }, []); + + return ( +
+ + {sections.map((section) => ( + + {section.header} + {section.items.map((item) => ( + +
+ {renderAvatar(item)} + {item.badge && ( + + + + )} +
+

{item.title}

+ {item.subtitle} +
{item.end}
+ + ))} + + ))} + +
+ ); } // rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); ```
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md index e2b635b57..8335d0ee3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md @@ -17,62 +17,208 @@ The Ignite UI for React Badge is a component used in conjunction with avatars, n /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.wrapper { +igc-badge { + --ig-size: var(--ig-size-small); +} + +igc-avatar { + --size: 40px; + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +.outlined-example igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.outlined-example:nth-child(2) igc-badge { + inset-block-start: auto; + inset-block-end: -6px; + inset-inline-end: -6px; +} + +.step-marker igc-badge { + position: absolute; + inset-block-start: -1px; + inset-inline-end: -2px; +} + +.outlined-example igc-badge { + position: absolute; + inset-block-start: -6px; + inset-inline-end: -10px; +} + +.icon-circle igc-icon { + font-size: 20px; +} + +.badge-outlined { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.outlined-example { position: relative; display: flex; - width: fit-content; +} + +.icon-circle, +.step-circle { + display: flex; align-items: center; - margin-block: 1rem; - gap: 0.5rem; - padding: 0.5rem; - border: 1px solid var(--ig-gray-300); - border-radius: .25rem; + justify-content: center; + border-radius: 50%; } -igc-avatar { - @container style(--ig-theme: indigo) { - --ig-size: var(--ig-size-large); - } +.icon-circle { + width: 36px; + height: 36px; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} - anchor-name: --avatar; +.badge-info-blue { + --ig-badge-background-color: #0057A9; } -igc-badge { - --size: .75rem; +.badge-info-blue::part(base) { + background-color: #0057A9; +} - position: absolute; - inset-block-end: anchor(--avatar bottom); - inset-inline-end: anchor(--avatar right); +.payment-dot-blue { + --ig-badge-background-color: #0057A9; + --ig-badge-dot-size: 0.5rem; +} + +.payment-dot-blue::part(base) { + background-color: #0057A9; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + +.steps { + display: flex; + align-items: flex-start; + gap: 8px; +} + +.step { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.step-marker { + position: relative; + display: flex; +} + +.step-circle { + width: 26px; + height: 26px; + background: var(--ig-gray-900); + color: var(--ig-gray-50); + font-size: 12px; +} + +.step-circle.pending { + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.step-connector { + width: 56px; + margin-block-start: 13px; + border-block-start: 1px solid var(--ig-gray-900); +} + +.step-connector.pending { + border-block-start-style: dashed; + border-block-start-color: var(--ig-gray-400); } -span { - display: block; - font-weight: 600; +.step-label { + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; } ``` ```tsx -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge, IgrAvatar } from 'igniteui-react'; +import { IgrBadge, IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeOutlined extends React.Component { - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
-
- - -
- Terrance Orta -
- ); - } +const favoriteBorderIcon = + ''; +const closeIcon = + ''; + +const steps = [ + { index: 1, label: 'Orders', current: false, pending: false }, + { index: 2, label: 'Payment', current: true, pending: false }, + { index: 3, label: 'Shipping', current: false, pending: true } +]; + +export default function BadgeOutlined(): JSX.Element { + useEffect(() => { + registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + }, []); + + return ( +
+
+
+ +
+ 23 +
+
+ + + + +
+
+ {steps.map((step, i) => ( + + {i > 0 && ( + + )} +
+
+ + {step.index} + + {step.current && ( + + )} +
+ {step.label} +
+ + ))} +
+
+ ); } // rendering above class to the React DOM @@ -122,32 +268,170 @@ The Ignite UI for React badge supports several pre-defined stylistic variants. Y ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-end: -4px; + inset-inline-end: -4px; +} + +igc-avatar { + --ig-size: var(--ig-size-small); + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +.variant-item:first-child igc-avatar igc-icon, +.variant-item:nth-child(4) igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-variants { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.variant-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + min-width: 56px; +} + +.variant-item span { + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; +} + +.avatar-wrapper { + position: relative; + display: flex; +} + +.badge-info-blue { + --ig-badge-background-color: #0057A9; +} + +.badge-info-blue::part(base) { + background-color: #0057A9; +} + +.badge-primary-blue { + --ig-badge-background-color: #0070BA; +} + +.badge-primary-blue::part(base) { + background-color: #0070BA; +} + +.badge-warning-black::part(base) { + background-color: #FAA419; + color: #000; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} ``` ```tsx -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeVariants extends React.Component { - - constructor(props: any) { - super(props); - } +const checkIcon = + ''; +const closeIcon = + ''; +const mailIcon = + ''; +const notificationsIcon = + ''; + +export default function BadgeVariants(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + registerIconFromText('mail', mailIcon, 'material'); + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- + return ( +
+
+
+ + + + 2 +
+ Primary +
+
+
+ + + + +
+ Info +
+
+
+ + + + +
+ Success
- ); - } +
+
+ + + + 2 +
+ Warn +
+
+
+ + + + +
+ Error +
+
+ ); } // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); ``` ### Shape @@ -161,27 +445,95 @@ The badge component supports `rounded`(default) and `square` shapes. These value ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.badge-shape { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.badge-shape-row { + display: grid; + grid-template-columns: 80px 40px 40px 40px; + align-items: center; + justify-items: center; + gap: 8px; +} + +.row-label { + justify-self: end; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; +} + +.badge-small { + --ig-size: var(--ig-size-small); +} + +.badge-info-blue { + --ig-badge-background-color: #0057A9; +} + +.badge-info-blue::part(base) { + background-color: #0057A9; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} ``` ```tsx -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeShape extends React.Component { +const checkIcon = + ''; - constructor(props: any) { - super(props); - } +export default function BadgeShape(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- + return ( +
+
+ Rounded + + + + 2 + + +
- ); - } +
+ Square + + + + 2 + + + +
+
+ ); } // rendering above class to the React DOM @@ -200,25 +552,228 @@ The Ignite UI for React badge component can also render as a minimal dot indicat ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); + --ig-badge-dot-size: 0.5rem; +} + +igc-avatar { + --size: 40px; +} + +.icon-example igc-badge, +.avatar-example igc-badge, +.nav-icon igc-badge { + position: absolute; +} + +.icon-example igc-badge { + inset-block-start: 0; + inset-inline-end: 2px; +} + +.avatar-example igc-badge { + inset-block-start: -0.25rem; + inset-inline-end: -2px; +} + +.nav-icon igc-badge { + inset-block-start: -2px; + inset-inline-end: -6px; +} + +.badge-dot { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.dot-example { + position: relative; +} + +.icon-example, +.avatar-example, +.icon-circle { + display: flex; + align-items: center; + width: 36px; + height: 36px; +} + +.icon-circle { + justify-content: center; + border-radius: 50%; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.notifications-card, +.nav-card { + background: var(--ig-surface-500); + border-radius: 4px; + box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12); +} + +.notifications-card { + min-width: 272px; + padding: 8px 0; +} + +.notification-row { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + font-size: 14px; + color: var(--ig-gray-900); +} + +.row-indicator { + display: inline-flex; + justify-content: center; + width: 12px; +} + +.row-indicator igc-badge, +.nav-icon igc-badge { + --ig-badge-background-color: #0057A9; +} + +.row-indicator igc-badge::part(base), +.nav-icon igc-badge::part(base) { + background-color: #0057A9; +} + +.row-title { + flex: 1; +} + +.row-time { + font-size: 13px; + color: var(--ig-gray-900); +} + +.row-time.unread { + color: #0057A9; + font-weight: 600; +} + +.row-chevron { + --ig-size: 1; + + color: var(--ig-gray-600); + font-size: 18px; +} + +.nav-card { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; +} + +.nav-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + min-width: 56px; + color: var(--ig-gray-700); + font-size: 12px; +} + +.nav-item.active { + color: #0075D2; +} + +.nav-icon { + position: relative; + display: inline-flex; +} ``` ```tsx -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; +import './index.css'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeDot extends React.Component { - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- +const notificationsIcon = + ''; +const chevronRightIcon = + ''; +const homeIcon = + ''; +const personIcon = + ''; +const facebookMessengerIcon = + ''; + +const notifications = [ + { title: 'Contract renewal', time: '09:12', unread: true }, + { title: 'Weekly digest', time: 'Yesterday', unread: false } +]; + +const tabs = [ + { label: 'Home', icon: 'home', active: true, hasUpdates: false }, + { label: 'Chat', icon: 'facebookMessenger', active: false, hasUpdates: true }, + { label: 'Profile', icon: 'person', active: false, hasUpdates: false } +]; + +export default function BadgeDot(): JSX.Element { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('chevron_right', chevronRightIcon, 'material'); + registerIconFromText('home', homeIcon, 'material'); + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('facebookMessenger', facebookMessengerIcon, 'material'); + }, []); + + return ( +
+
+
+ +
+
- ); - } +
+ {notifications.map((item) => ( +
+ + {item.unread && } + + {item.title} + {item.time} + +
+ ))} +
+
+ + +
+
+ {tabs.map((tab) => ( +
+ + + {tab.hasUpdates && } + + {tab.label} +
+ ))} +
+
+ ); } // rendering above class to the React DOM @@ -241,31 +796,145 @@ igc-badge::part(base) { /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-badge::part(base) { - --background-color: var(--ig-error-A100); - --border-radius: 2px; +igc-badge { + --ig-size: var(--ig-size-small); +} + +.badge-teal { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; +} + +.badge-amber { + --ig-badge-background-color: #C97C00; + --ig-badge-border-radius: 50%; +} + +.badge-magenta { + --ig-badge-background-color: #9C27B0; + --ig-badge-text-color: var(--ig-gray-50); + --ig-badge-border-radius: 50%; +} + +.badge-lime { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; + --ig-badge-dot-size: 0.5rem; +} + +.badge-teal igc-icon, +.badge-amber igc-icon, +.styling-item.pink igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-teal igc-icon { + position: relative; +} + +.badge-teal igc-icon::after { + content: ""; + position: absolute; + inset: 50% auto auto 50%; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--ig-success-700); + transform: translate(-50%, -50%); +} + +.styling-item igc-avatar { + --size: 40px; +} + +.styling-item.green igc-avatar { + --icon-color: #248436; + --ig-avatar-background: #A9CEB0; + --ig-avatar-color: #248436; +} + +.styling-item.pink igc-avatar { + --ig-avatar-background: #DA64FF; + --ig-avatar-color: var(--ig-gray-50); +} + +.styling-item igc-badge { + position: absolute; + inset-block-end: -2px; + inset-inline-end: -2px; +} + +.badge-styling { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.styling-item { + position: relative; + display: flex; } ``` ```tsx -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeStyling extends React.Component { +const personIcon = + ''; +const photoCameraIcon = + ''; +const starBorderIcon = + ''; +const favoriteBorderIcon = + ''; + +export default function BadgeStyling(): JSX.Element { + useEffect(() => { + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('photo_camera', photoCameraIcon, 'material'); + registerIconFromText('star_border', starBorderIcon, 'material'); + registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); + }, []); - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- + return ( +
+
+ + + + + + +
+
+ + + +
- ); - } +
+ + + + 2 +
+
+ + +
+
+ ); } // rendering above class to the React DOM diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button-group.md index 58aecc680..b69ebeb36 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button-group.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button-group.md @@ -14,79 +14,117 @@ The React Button Group component is used to organize [`IgrToggleButton`](mcp:get ## React Button Example ```css +.container.sample { + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem; +} + igc-button-group { - max-width: 400px; + display: block; + width: 280px; + max-width: 100%; } igc-ripple { --color: gray; } + +.album { + margin-top: 8px; + width: 280px; + max-width: 100%; +} + +.album-title { + display: inline-block; + margin-bottom: 8px; + color: #1f89d4; +} + +.album-photos { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 4px; +} + +.album-photos img { + width: 100%; + object-fit: cover; + display: block; +} ``` ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` ```tsx -import React, { useEffect } from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, - IgrIcon, IgrRipple, IgrToggleButton, - registerIconFromText, } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; import './ButtonGroupOverview.css'; import './index.css'; -const icons = [ - { - name: 'format_align_left', - iconText: '', - }, - { - name: 'format_align_center', - iconText: '', - }, - { - name: 'format_align_right', - iconText: '', +const albums = { + device: { + title: 'Trip around the world', + photos: [ + 'https://picsum.photos/id/1015/300/220', + 'https://picsum.photos/id/1016/300/220', + 'https://picsum.photos/id/1018/300/220', + 'https://picsum.photos/id/1019/300/220', + ], }, - { - name: 'format_align_justify', - iconText: '', + cloud: { + title: 'Trip around the world', + photos: [ + 'https://picsum.photos/id/1036/300/220', + 'https://picsum.photos/id/1051/300/220', + 'https://picsum.photos/id/1062/300/220', + 'https://picsum.photos/id/1067/300/220', + ], }, -]; +}; export default function ButtonGroupOverview() { - useEffect(() => { - icons.forEach((icon) => { - registerIconFromText(icon.name, icon.iconText, 'material'); - }); - }, []) + const [source, setSource] = useState<'device' | 'cloud'>('cloud'); + const album = albums[source]; return (
- - - - - - - + ) => { + if (e.detail === 'device' || e.detail === 'cloud') { + setSource(e.detail); + } + }} + > + + Device - - + + Cloud - - - - + +
+ {album.title} +
+ {album.photos.map((photo) => ( + {album.title} + ))} +
+
); } @@ -145,13 +183,45 @@ Use the [`IgrButtonGroup`](mcp:get_api_reference?platform=react&component=IgrBut Use the [`alignment`](mcp:get_api_reference?platform=react&component=IgrButtonGroup&member=alignment) property to set the orientation of the buttons in the button group. ```css -igc-button-group { - width: 200px; -} - igc-ripple { --color: gray; } + +.button-group-alignment { + display: flex; + align-items: flex-start; + justify-content: center; + gap: 60px; + padding: 24px; +} + +.button-group-alignment-item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 16px; +} + +.button-group-alignment-item igc-button-group { + width: 240px; +} + +.button-group-alignment-item:first-child igc-button-group { + width: 320px; +} + +.button-group-alignment-item span { + width: 100%; + text-align: center; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; +} ``` ```css /* shared styles are loaded from: */ @@ -160,44 +230,41 @@ igc-ripple { ```tsx import React from 'react'; import ReactDOM from 'react-dom/client'; -import { - IgrButtonGroup, - IgrRipple, - IgrToggleButton, - } from 'igniteui-react'; +import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; import './ButtonGroupAlignment.css'; import './index.css'; +const cities = ['Sofia', 'London', 'New York']; + +const alignments: Array<'horizontal' | 'vertical'> = ['horizontal', 'vertical']; -export default function ButtonGroupAlignment() { +export default function ButtonGroupAlignment(): JSX.Element { return ( -
- - - Sofia - - - - London - - - - New York - - - - Tokyo - - - -
+
+ {alignments.map((alignment) => ( +
+ {alignment.charAt(0).toUpperCase() + alignment.slice(1)} + + {cities.map((city) => ( + + {city} + + + ))} + +
+ ))} +
); } // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); ``` ### Selection @@ -211,16 +278,34 @@ In order to configure the Ignite UI for React [`IgrButtonGroup`](mcp:get_api_ref The sample below demonstrates the exposed [`IgrButtonGroup`](mcp:get_api_reference?platform=react&component=IgrButtonGroup) selection modes: ```css -.radio-group-container { - width: 400px; - margin-bottom: 1rem; +.selection-samples { + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + gap: 32px; + padding-left: 32px; } -igc-radio-group { - padding: 0.5rem; +.selection-sample { + display: flex; + align-items: center; + gap: 30px; } -igc-button-group { +.selection-sample > span { + width: 120px; + text-align: right; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; +} + +.selection-sample igc-button-group { width: 200px; } @@ -233,15 +318,11 @@ igc-ripple { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` ```tsx -import React, { useEffect, useRef } from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import { - ButtonGroupSelection, IgrButtonGroup, IgrIcon, - IgrRadio, - IgrRadioChangeEventArgs, - IgrRadioGroup, IgrRipple, IgrToggleButton, registerIconFromText, @@ -272,43 +353,27 @@ export default function ButtonGroupSelectionSample() { }); }, []) - const buttonGroupRef = useRef(null); - - function onRadioChange(e: IgrRadioChangeEventArgs) { - const value = e.detail.value as ButtonGroupSelection; - buttonGroupRef.current.selection = value; - } - return ( -
-
- - - - Single - - - Single-Required - - - Multiple - - -
- - - - - - - - - - - - - - +
+ {(['single', 'single-required', 'multiple'] as const).map((selection) => ( +
+ {selection === 'single-required' ? 'Single-Required' : selection.charAt(0).toUpperCase() + selection.slice(1)} + + + + + + + + + + + + + + +
+ ))}
); } @@ -344,50 +409,85 @@ A [`IgrToggleButton`](mcp:get_api_reference?platform=react&component=IgrToggleBu The `--ig-size` CSS custom property can be used to control the size of the button group. +```css +igc-ripple { + --color: gray; +} + +.button-group-size { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 32px; + padding: 13px; + padding-left: 3rem; +} + +.button-group-size-item { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 32px; +} + +.button-group-size-item span { + width: 52px; + text-align: right; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; +} +``` ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` ```tsx -import React, { useState } from 'react'; +import React from 'react'; import ReactDOM from 'react-dom/client'; -import { - IgrButtonGroup, - IgrComponentValueChangedEventArgs, - IgrToggleButton, - } from 'igniteui-react'; +import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; +import './ButtonGroupSize.css'; import './index.css'; -export default function ButtonGroupSize() { - const [style, setStyle] = useState({ '--ig-size': 'var(--ig-size-large)' } as React.CSSProperties) +const cities = ['Sofia', 'London', 'New York']; - function onSelect(args: IgrComponentValueChangedEventArgs) { - setStyle({ - '--ig-size': `var(--ig-size-${args.detail})` - } as React.CSSProperties) - } +const sizes = ['small', 'medium', 'large']; +export default function ButtonGroupSize(): JSX.Element { return ( -
- - - Small - - - Medium - - - Large - - -
+
+ {sizes.map((size) => ( +
+ {size.charAt(0).toUpperCase() + size.slice(1)} + + {cities.map((city) => ( + + {city} + + + ))} + +
+ ))} +
); } // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); ``` ## Styling @@ -407,32 +507,37 @@ igc-toggle-button::part(toggle) { ``` ```css -igc-button-group { - width: 200px; -} - igc-ripple { --color: gray; } -igc-toggle-button::part(toggle) { - color: #fdfdfd; - background: #2f4d6a; +.button-group-styling { + display: flex; + align-items: center; + justify-content: center; + min-height: 7rem; } -igc-toggle-button::part(toggle):hover { - color: #fdfdfd; - background: #1f3347; +.button-group-styling igc-button-group { + width: 420px; + border: 2px solid #4da3e8; + border-radius: 4px; + overflow: hidden; } -igc-toggle-button[disabled]::part(toggle) { - color: gray; - background: lightgray; +.button-group-styling igc-toggle-button::part(toggle) { + color: #4a5a66; + background: #cfe8fb; + border-color: #4da3e8; } -igc-toggle-button[selected]::part(toggle) { - color: #fdfdfd; - background: #1f3347; +.button-group-styling igc-toggle-button::part(toggle):hover { + background: #b3daf8; +} + +.button-group-styling igc-toggle-button[selected]::part(toggle) { + color: #2f4d6a; + background: #6db3ea; } ``` ```css @@ -442,43 +547,35 @@ igc-toggle-button[selected]::part(toggle) { ```tsx import React from 'react'; import ReactDOM from 'react-dom/client'; -import { - IgrButtonGroup, - IgrRipple, - IgrToggleButton, - } from 'igniteui-react'; +import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; import './ButtonGroupStyling.css'; import './index.css'; -export default function ButtonGroupStyling() { +const layouts = ['Left', 'Center', 'Right']; + +export default function ButtonGroupStyling(): JSX.Element { return ( -
- - - Sofia - - - - London - - - - New York - - - - Tokyo - - +
+ + {layouts.map((layout) => ( + + {layout} + + + ))} -
+
); } // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); ``` ## API Reference diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/excel-library-using-tables.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/excel-library-using-tables.md index a9800eba7..bce9fe6d8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/excel-library-using-tables.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/excel-library-using-tables.md @@ -14,10 +14,8 @@ The Infragistics React Excel Engine's [`WorksheetTable`](https://www.infragistic
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/features.md index 3a623da0b..408473d04 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/features.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/features.md @@ -140,7 +140,6 @@ const [comboDisabled, setComboDisabled] = useState(false); disabled={comboDisabled}> - setDisableFiltering(e.detail.checked)}> Disable Filtering diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-binding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-binding.md index 5f3198289..236fd82ab 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-binding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-binding.md @@ -43,7 +43,6 @@ If the grid has `autoGenerate` enabled, it will "_infer_" the new column configu ```tsx const [data, setData] = React.useState([/* initial data */]); - /** After the new binding the grid will infer the column collection from the bound data. */ const updateData = () => { setData([/* new data */]); diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-header-template.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-header-template.md index 2f77ec730..feee3bf29 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-header-template.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-header-template.md @@ -48,7 +48,6 @@ const ratingHeaderTemplate = (ctx: IgrHeaderContext) => (

{"⭐ Rating ⭐"}

); - return ( diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/avatar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/avatar.md index 2545df574..73d27f610 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/avatar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/avatar.md @@ -13,10 +13,7 @@ The Ignite UI for Web Components Avatar helps to display initials, images, or ic ## Web Components Icon Avatar Example -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` +
@@ -64,10 +61,7 @@ If the [`initials`](mcp:get_api_reference?platform=webcomponents&component=IgcAv ``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` + ### Image @@ -92,8 +86,68 @@ The avatar can also display an image when the [`src`](mcp:get_api_reference?plat The avatar supports three shapes - `circle`, `rounded`, and `square`. The default shape of the avatar is `square` and it can be changed via the `shape` attribute. ```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.avatar-shape-sample { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: 2.5rem; + row-gap: 0.5rem; + height: 100vh; + padding: 2rem; + box-sizing: border-box; +} + +:where(igc-avatar) { + --ig-size: var(--ig-size-small); + grid-row: 1; +} + +:where(span) { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", Arial, sans-serif; + font-size: 0.875rem; + line-height: 1.25rem; + margin: 0; +} + +:where(igc-badge) { + --ig-size: var(--ig-size-small); + --ig-badge-icon-color: #ffffff; + --ig-badge-text-color: #ffffff; + + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} + +.avatar-shape-sample igc-avatar:nth-of-type(1) { + anchor-name: --circle; +} + +.avatar-shape-sample igc-avatar:nth-of-type(2) { + anchor-name: --square; +} + +.avatar-shape-sample igc-avatar:nth-of-type(3) { + anchor-name: --rounded; +} + +.avatar-shape-sample igc-badge:nth-of-type(1) { + position-anchor: --circle; +} + +.avatar-shape-sample igc-badge:nth-of-type(2) { + position-anchor: --square; +} + +.avatar-shape-sample igc-badge:nth-of-type(3) { + position-anchor: --rounded; +} ``` ### Size @@ -107,26 +161,69 @@ igc-avatar { ``` ```css -.size-small { - --ig-size: var(--ig-size-small); +.avatar-size-sample { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: 3rem; + row-gap: 0.5rem; + height: 100vh; + padding: 2rem; + box-sizing: border-box; } -.size-medium { - --ig-size: var(--ig-size-medium); +:where(igc-avatar) { + grid-row: 1; } -.size-large { - --ig-size: var(--ig-size-large); +:where(span) { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", Arial, sans-serif; + font-size: 0.875rem; + line-height: 1.25rem; + margin: 0; } -.sample { - flex-direction: row; - gap: 10px; +:where(igc-badge) { + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} + +.avatar-size-sample igc-avatar:nth-of-type(1) { + --ig-size: var(--ig-size-large); + anchor-name: --large; +} + +.avatar-size-sample igc-avatar:nth-of-type(2) { + --ig-size: var(--ig-size-medium); + anchor-name: --medium; +} + +.avatar-size-sample igc-avatar:nth-of-type(3) { + --ig-size: var(--ig-size-small); + anchor-name: --small; +} + +.avatar-size-sample igc-badge:nth-of-type(1) { + --ig-size: var(--ig-size-large); + position-anchor: --large; +} + +.avatar-size-sample igc-badge:nth-of-type(2) { + --ig-size: var(--ig-size-medium); + position-anchor: --medium; +} + +.avatar-size-sample igc-badge:nth-of-type(3) { + --ig-size: var(--ig-size-small); + position-anchor: --small; } -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` ### Styling @@ -150,19 +247,68 @@ igc-avatar::part(base) { ``` ```css -igc-avatar { - --ig-avatar-size: 60px; - --ig-avatar-color: var(--ig-success-500-contrast); - --ig-avatar-background: var(--ig-success-500); +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; } -igc-avatar::part(base) { - border-radius: 20px; +.chat-list { + --ig-list-header-text-color: var(--ig-gray-900); + max-width: 20.5rem; +} + +.chat-list * { + font-family: "Aktiv Grotesk", Arial, sans-serif; +} + +.chat-list [slot="title"] { + font-weight: 600; +} + +.chat-list [slot="end"] { + color: var(--ig-gray-600); + font-size: 0.875rem; + line-height: 1.25rem; +} + +.chat-list-item--split { + --border-width: 0.0625rem; + --border-color: var(--ig-gray-300); +} + +:where(igc-avatar) { + --ig-size: var(--ig-size-small); + --ig-avatar-background: var(--ig-gray-300); + --ig-avatar-color: var(--ig-gray-300-contrast); + --ig-avatar-icon-color: var(--ig-gray-300-contrast); +} + +.avatar-icon { + --ig-size: var(--ig-size-small); +} + +.avatar-with-badge { + position: relative; +} + +:where(igc-badge) { + --ig-size: var(--ig-size-small); + --ig-badge-icon-color: #ffffff; + --ig-badge-text-color: #ffffff; +} + +.avatar-status { + --ig-size: var(--ig-size-small); + position: absolute; + inset-inline-end: -0.25rem; + inset-block-end: -0.25rem; +} + +.avatar-muted-badge { + --ig-badge-background-color: var(--ig-gray-500); } -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ```
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md index 27b1fd103..95198306d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md @@ -17,37 +17,145 @@ The Ignite UI for Web Components Badge is a component used in conjunction with a /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.wrapper { +igc-badge { + --ig-size: var(--ig-size-small); +} + +igc-avatar { + --size: 40px; + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +.outlined-example igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.outlined-example:nth-child(2) igc-badge { + inset-block-start: auto; + inset-block-end: -6px; + inset-inline-end: -6px; +} + +.step-marker igc-badge { + position: absolute; + inset-block-start: -1px; + inset-inline-end: -2px; +} + +.outlined-example igc-badge { + position: absolute; + inset-block-start: -6px; + inset-inline-end: -10px; +} + +.icon-circle igc-icon { + font-size: 20px; +} + +.badge-outlined { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.outlined-example { position: relative; display: flex; - width: fit-content; +} + +.icon-circle, +.step-circle { + display: flex; align-items: center; - margin-block: 1rem; - gap: 0.5rem; - padding: 0.5rem; - border: 1px solid var(--ig-gray-300); - border-radius: .25rem; + justify-content: center; + border-radius: 50%; } -igc-avatar { - @container style(--ig-theme: indigo) { - --ig-size: var(--ig-size-large); - } +.icon-circle { + width: 36px; + height: 36px; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} - anchor-name: --avatar; +.badge-info-blue { + --ig-badge-background-color: #0057A9; } -igc-badge { - --size: .75rem; +.badge-info-blue::part(base) { + background-color: #0057A9; +} - position: absolute; - inset-block-end: anchor(--avatar bottom); - inset-inline-end: anchor(--avatar right); +.payment-dot-blue { + --ig-badge-background-color: #0057A9; + --ig-badge-dot-size: 0.5rem; +} + +.payment-dot-blue::part(base) { + background-color: #0057A9; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + +.steps { + display: flex; + align-items: flex-start; + gap: 8px; +} + +.step { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.step-marker { + position: relative; + display: flex; } -span { - display: block; - font-weight: 600; +.step-circle { + width: 26px; + height: 26px; + background: var(--ig-gray-900); + color: var(--ig-gray-50); + font-size: 12px; +} + +.step-circle.pending { + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.step-connector { + width: 56px; + margin-block-start: 13px; + border-block-start: 1px solid var(--ig-gray-900); +} + +.step-connector.pending { + border-block-start-style: dashed; + border-block-start-color: var(--ig-gray-400); +} + +.step-label { + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; } ``` @@ -97,6 +205,84 @@ The Ignite UI for Web Components badge supports several pre-defined stylistic va ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-end: -4px; + inset-inline-end: -4px; +} + +igc-avatar { + --ig-size: var(--ig-size-small); + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +.variant-item:first-child igc-avatar igc-icon, +.variant-item:nth-child(4) igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-variants { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.variant-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + min-width: 56px; +} + +.variant-item span { + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; +} + +.avatar-wrapper { + position: relative; + display: flex; +} + +.badge-info-blue { + --ig-badge-background-color: #0057A9; +} + +.badge-info-blue::part(base) { + background-color: #0057A9; +} + +.badge-primary-blue { + --ig-badge-background-color: #0070BA; +} + +.badge-primary-blue::part(base) { + background-color: #0070BA; +} + +.badge-warning-black::part(base) { + background-color: #FAA419; + color: #000; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} ``` ### Shape @@ -110,6 +296,54 @@ The badge component supports `rounded`(default) and `square` shapes. These value ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.badge-shape { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.badge-shape-row { + display: grid; + grid-template-columns: 80px 40px 40px 40px; + align-items: center; + justify-items: center; + gap: 8px; +} + +.row-label { + justify-self: end; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; +} + +.badge-small { + --ig-size: var(--ig-size-small); +} + +.badge-info-blue { + --ig-badge-background-color: #0057A9; +} + +.badge-info-blue::part(base) { + background-color: #0057A9; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} ``` ### Dot @@ -123,6 +357,148 @@ The Ignite UI for Web Components badge component can also render as a minimal do ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); + --ig-badge-dot-size: 0.5rem; +} + +igc-avatar { + --size: 40px; +} + +.icon-example igc-badge, +.avatar-example igc-badge, +.nav-icon igc-badge { + position: absolute; +} + +.icon-example igc-badge { + inset-block-start: 0; + inset-inline-end: 2px; +} + +.avatar-example igc-badge { + inset-block-start: -0.25rem; + inset-inline-end: -2px; +} + +.nav-icon igc-badge { + inset-block-start: -2px; + inset-inline-end: -6px; +} + +.badge-dot { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.dot-example { + position: relative; +} + +.icon-example, +.avatar-example, +.icon-circle { + display: flex; + align-items: center; + width: 36px; + height: 36px; +} + +.icon-circle { + justify-content: center; + border-radius: 50%; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.notifications-card, +.nav-card { + background: var(--ig-surface-500); + border-radius: 4px; + box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12); +} + +.notifications-card { + min-width: 272px; + padding: 8px 0; +} + +.notification-row { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + font-size: 14px; + color: var(--ig-gray-900); +} + +.row-indicator { + display: inline-flex; + justify-content: center; + width: 12px; +} + +.row-indicator igc-badge, +.nav-icon igc-badge { + --ig-badge-background-color: #0057A9; +} + +.row-indicator igc-badge::part(base), +.nav-icon igc-badge::part(base) { + background-color: #0057A9; +} + +.row-title { + flex: 1; +} + +.row-time { + font-size: 13px; + color: var(--ig-gray-900); +} + +.row-time.unread { + color: #0057A9; + font-weight: 600; +} + +.row-chevron { + --ig-size: 1; + + color: var(--ig-gray-600); + font-size: 18px; +} + +.nav-card { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; +} + +.nav-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + min-width: 56px; + color: var(--ig-gray-700); + font-size: 12px; +} + +.nav-item.active { + color: #0075D2; +} + +.nav-icon { + position: relative; + display: inline-flex; +} ``` ## Styling @@ -136,15 +512,90 @@ igc-badge::part(base) { } ``` -```css -igc-badge::part(base) { - --background-color: var(--ig-error-A100); - --border-radius: 2px; -} -``` ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); +} + +.badge-teal { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; +} + +.badge-amber { + --ig-badge-background-color: #C97C00; + --ig-badge-border-radius: 50%; +} + +.badge-magenta { + --ig-badge-background-color: #9C27B0; + --ig-badge-text-color: var(--ig-gray-50); + --ig-badge-border-radius: 50%; +} + +.badge-lime { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; + --ig-badge-dot-size: 0.5rem; +} + +.badge-teal igc-icon, +.badge-amber igc-icon, +.styling-item.pink igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-teal igc-icon { + position: relative; +} + +.badge-teal igc-icon::after { + content: ""; + position: absolute; + inset: 50% auto auto 50%; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--ig-success-700); + transform: translate(-50%, -50%); +} + +.styling-item igc-avatar { + --size: 40px; +} + +.styling-item.green igc-avatar { + --icon-color: #248436; + --ig-avatar-background: #A9CEB0; + --ig-avatar-color: #248436; +} + +.styling-item.pink igc-avatar { + --ig-avatar-background: #DA64FF; + --ig-avatar-color: var(--ig-gray-50); +} + +.styling-item igc-badge { + position: absolute; + inset-block-end: -2px; + inset-inline-end: -2px; +} + +.badge-styling { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.styling-item { + position: relative; + display: flex; +} ```
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button-group.md index 31169c786..8e1575ed0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button-group.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button-group.md @@ -14,15 +14,49 @@ The Web Components Button Group component is used to organize [`IgcToggleButtonC ## Web Components Button Example ```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.container.sample { + display: flex; + flex-direction: column; + align-items: center; +} + igc-button-group { - max-width: 400px; + display: block; + width: 280px; + max-width: 100%; } igc-ripple { --color: gray; } + +.album { + margin-top: 8px; + width: 280px; + max-width: 100%; +} + +.album-title { + display: inline-block; + margin-bottom: 8px; + color: #1f89d4; +} + +.album-photos { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 4px; +} + +.album-photos img { + width: 100%; + object-fit: cover; + display: block; +} +``` +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` ## Usage @@ -79,15 +113,49 @@ Use the [`IgcButtonGroupComponent`](mcp:get_api_reference?platform=webcomponents Use the [`alignment`](mcp:get_api_reference?platform=webcomponents&component=IgcButtonGroupComponent&member=alignment) property to set the orientation of the buttons in the button group. ```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-button-group { - width: 200px; -} - igc-ripple { --color: gray; } + +.button-group-alignment { + display: flex; + align-items: flex-start; + justify-content: center; + gap: 60px; + padding: 21px; +} + +.button-group-alignment-item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 16px; +} + +.button-group-alignment-item igc-button-group { + width: 240px; +} + +.button-group-alignment-item:first-child igc-button-group { + width: 320px; +} + +.button-group-alignment-item span { + width: 100%; + text-align: center; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; +} +``` +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` ### Selection @@ -101,18 +169,34 @@ In order to configure the Ignite UI for Web Components [`IgcButtonGroupComponent The sample below demonstrates the exposed [`IgcButtonGroupComponent`](mcp:get_api_reference?platform=webcomponents&component=IgcButtonGroupComponent) selection modes: ```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.radio-group-container { - width: 400px; - margin-bottom: 1rem; +.selection-samples { + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + gap: 32px; + padding-left: 32px; } -igc-radio-group { - padding: 0.5rem; +.selection-sample { + display: flex; + align-items: center; + gap: 30px; } -igc-button-group { +.selection-sample > span { + width: 120px; + text-align: right; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; +} + +.selection-sample igc-button-group { width: 200px; } @@ -120,6 +204,10 @@ igc-ripple { --color: gray; } ``` +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +``` A [`IgcToggleButtonComponent`](mcp:get_api_reference?platform=webcomponents&component=IgcToggleButtonComponent) could be marked as selected via its [`selected`](mcp:get_api_reference?platform=webcomponents&component=IgcToggleButtonComponent&member=selected) attribute or through the [`IgcButtonGroupComponent`](mcp:get_api_reference?platform=webcomponents&component=IgcButtonGroupComponent) [`selectedItems`](mcp:get_api_reference?platform=webcomponents&component=IgcButtonGroupComponent&member=selectedItems) attribute: @@ -149,6 +237,41 @@ A [`IgcToggleButtonComponent`](mcp:get_api_reference?platform=webcomponents&comp The `--ig-size` CSS custom property can be used to control the size of the button group. +```css +igc-ripple { + --color: gray; +} + +.button-group-size { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 32px; + padding: 13px; + padding-left: 4rem; +} + +.button-group-size-item { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 32px; +} + +.button-group-size-item span { + width: 52px; + text-align: right; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; +} +``` ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ @@ -171,46 +294,43 @@ igc-toggle-button::part(toggle) { ``` ```css -igc-button-group::part(group) { - background-color: var(--ig-primary-500); - padding: 8px; -} - -igc-toggle-button::part(toggle) { - color: var(--ig-secondary-300); -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-button-group { - width: 200px; -} - igc-ripple { --color: gray; } -igc-toggle-button::part(toggle) { - color: #fdfdfd; - background: #2f4d6a; +.button-group-styling { + display: flex; + align-items: center; + justify-content: center; + min-height: 7rem; +} + +.button-group-styling igc-button-group { + width: 420px; + border: 2px solid #4da3e8; + border-radius: 4px; + overflow: hidden; } -igc-toggle-button::part(toggle):hover { - color: #fdfdfd; - background: #1f3347; +.button-group-styling igc-toggle-button::part(toggle) { + color: #4a5a66; + background: #cfe8fb; + border-color: #4da3e8; } -igc-toggle-button[disabled]::part(toggle) { - color: gray; - background: lightgray; +.button-group-styling igc-toggle-button::part(toggle):hover { + background: #b3daf8; } -igc-toggle-button[selected]::part(toggle) { - color: #fdfdfd; - background: #1f3347; +.button-group-styling igc-toggle-button[selected]::part(toggle) { + color: #2f4d6a; + background: #6db3ea; } ``` +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +``` ## API Reference diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/excel-library-using-tables.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/excel-library-using-tables.md index 6b18c8dbe..ced38d170 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/excel-library-using-tables.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/excel-library-using-tables.md @@ -14,10 +14,8 @@ The Infragistics Web Components Excel Engine's [`WorksheetTable`](https://www.in
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md index 0ab053c28..55d112b26 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md @@ -117,7 +117,6 @@ constructor() { column3.inlineEditorTemplate = this.webGridCellEditCellTemplate; } - public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { let cellValues: any = []; let uniqueValues: any = []; diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-lite-header-template.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-lite-header-template.md index e51f23eb0..fc05db80e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-lite-header-template.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-lite-header-template.md @@ -40,7 +40,6 @@ Similar to the cell template, you can also pass a custom template renderer and c ```typescript import { html } from 'lit'; - const column = document.querySelector('igc-grid-lite-column'); column.headerTemplate = () => html`

⭐ Rating ⭐

`; ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md index 2fa90b1f6..28f85f3cf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md @@ -143,7 +143,6 @@ The context menu will have the following functions: this.toggleContextMenu(); } - public copySelectedData() { const selectedData = this.grid.getSelectedData(); this.copyData(selectedData); diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md index 95d4997d3..f65f7c5b6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md @@ -256,7 +256,6 @@ Let's take a look at a basic pivot configuration: enabled: true } - ], rows: [ {