{"id":3099,"date":"2025-09-26T08:13:13","date_gmt":"2025-09-26T08:13:13","guid":{"rendered":"https:\/\/www.infragistics.com\/blogs\/?p=3099"},"modified":"2026-02-17T07:10:51","modified_gmt":"2026-02-17T07:10:51","slug":"ignite-ui-angular-vs-angular-material","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/ignite-ui-angular-vs-angular-material","title":{"rendered":"Ignite UI for Angular vs Angular Material: Features, Performance, &amp; Use Cases"},"content":{"rendered":"\n<p>Angular Material is often considered a safe choice when selecting and using a UI library. It is built by the Angular team at Google and, therefore, it carries a sense of instant credibility. It is updated alongside the framework itself, is future-proof, and aligns with Angular\u2019s overall development philosophy. However, being a safe choice doesn\u2019t necessarily mean it is the right choice for every project. There are certain pitfalls, like a steep learning curve, limited controls, etc.<\/p>\n\n\n\n<p>These challenges become the main reason for Angular developers and companies to look for other Angular component libraries like <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\">Ignite UI for Angular<\/a>. While still offering safety and reliability, it also proves to be a significantly more comprehensive alternative, ensuring:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Complex components &#8211; Grids, Charts, Dock Manager, Layout components, Combo, Carousel, Query Builder, and more.<\/li>\n\n\n\n<li>Theming engine, more versatile components in terms of theming and support of different Design Systems \u2013 Bootstrap, Fluent, Indigo Design.<\/li>\n\n\n\n<li>Guaranteed enterprise support.<\/li>\n\n\n\n<li>Performance when dealing with large datasets.<\/li>\n<\/ul>\n\n\n\n<p>To better understand the comparison between Ignite UI for Angular vs Angular Material, this article will compare aspects like features, performance benefits, scalability, use cases, and others.<\/p>\n\n\n\n<p>So, let\u2019s get started.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"quick-head-to-head-comparison-before-we-dive-deep\">Quick Head-to-Head Comparison Before We Dive Deep<\/h2>\n\n\n\n<section class=\"container pb-5\">\n  <div class=\"row\">\n    <div class=\"col-12\">\n      <div class=\"table-header-controls\">\n        <button id=\"expandTable\" class=\"expand-icon\" title=\"Expand full table\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/static.infragistics.com\/marketing\/Website\/shared\/expand-icon.svg\" alt=\"Expand icon\" width=\"20\" height=\"20\" class=\"position-relative\" style=\"top:7px\" \/>\n        <\/button>\n      <\/div>\n      <div id=\"tableContainer\" class=\"table-responsive-sm mw-100\" style=\"overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative;\">\n        <table class=\"table comparison-table mw-100 text-center\" border=\"0\" cellpadding=\"10\">\n          <thead>\n            <tr>\n              <th>Feature \/ Aspect<\/th>\n              <th>Ignite UI for Angular<\/th>\n              <th>Angular Material<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody>\n            <tr>\n              <td>Component Scope<\/td>\n              <td>Full enterprise suite: grids, charts (incl. financial), maps, gauges, etc.<\/td>\n              <td>Core Material Design widgets: buttons, inputs, dialogs, menus, etc.<\/td>\n            <\/tr>\n            <tr>\n              <td>Data Grid<\/td>\n              <td>Advanced igx-grid with virtualization, grouping, summaries, filtering, exporting, editing, pinning\/moving columns, multi-column headers, etc.<\/td>\n              <td>No dedicated data grid (only basic mat-table + CDK). Complex features must be custom-built or use 3rd-party libs.<\/td>\n            <\/tr>\n            <tr>\n              <td>Performance<\/td>\n              <td>Built-in high-performance virtualization for large datasets (rows &amp; columns).<\/td>\n              <td>No virtualization out of the box for tables; relies on manual optimization.<\/td>\n            <\/tr>\n            <tr>\n              <td>Charting<\/td>\n              <td>Extensive chart library: category, financial\/stock, indicators, dashboards.<\/td>\n              <td>No charting components included. Needs external libraries (e.g., Apex Charts, Chart.js, D3).<\/td>\n            <\/tr>\n            <tr>\n              <td>Design &amp; UX<\/td>\n              <td>Material-styled by default but extends beyond Material guidelines. Offers enterprise-specific UX patterns (e.g., Excel-like grids).<\/td>\n              <td>Strict Material Design adherence; excellent choice for pure Material look &amp; feel.<\/td>\n            <\/tr>\n            <tr>\n              <td>Theming<\/td>\n              <td>Customizable themes plus Material presets. Support for Bootstrap, Fluent, Indigo.Design themes.<\/td>\n              <td>Material theming system with palettes, typography, and density configurations.<\/td>\n            <\/tr>\n            <tr>\n              <td>Support &amp; Samples<\/td>\n              <td>Commercial support, priority fixes, hundreds of runnable samples.<\/td>\n              <td>Community support, official docs, and Stack Overflow resources.<\/td>\n            <\/tr>\n            <tr>\n              <td>Licensing<\/td>\n              <td>Commercial license and Open-Source controls (with non-commercial\/NFR options).<\/td>\n              <td>Free and open source (MIT).<\/td>\n            <\/tr>\n            <tr>\n              <td>Best For<\/td>\n              <td>Enterprise apps, data-intensive dashboards, analytics, financial systems.<\/td>\n              <td>Apps needing lightweight Material components, without heavy data visualization needs.<\/td>\n            <\/tr>\n          <\/tbody>\n        <\/table>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"angular-material-resilient-and-versatile\">Angular Material: Resilient and Versatile<\/h2>\n\n\n\n<p>Angular Material is the official UI component library from Google, designed with consistency and simplicity in mind, focusing on delivering a clean set of Material Design components. This makes it ideal for smaller applications, prototypes, or projects where adhering strictly to Google\u2019s design system is a top priority.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What Are the Strengths?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>There are well-tested internationalized and accessible components, including Card, Checkbox, Datepicker, Card, Dialog, Grid list, Menu, List, Stepper, Table, and more.<\/li>\n\n\n\n<li>Straightforward APIs with consistent cross-platform behavior.<\/li>\n\n\n\n<li>It comes packaged with Angular CLI schematics for both @angular\/cdk and @angular\/material.<\/li>\n\n\n\n<li>Angular Material\u2019s theming system that is inspired by Google\u2019s&nbsp;<a href=\"https:\/\/m3.material.io\/styles\" rel=\"noopener\">Material Design<\/a>.<\/li>\n\n\n\n<li>The software system adheres to the Model-View-Controller (MVC) architectural pattern, ensuring a distinct segregation of responsibilities.<\/li>\n\n\n\n<li>Ensures enhanced reusability and testability of code thanks to the Angular\u2019s inherent dependency injection framework.<\/li>\n\n\n\n<li>Minimizes the need for human manipulation of the Document Object Model (DOM) due to the automated synchronization between the model and the display.<\/li>\n\n\n\n<li>Angular has a thriving community (on Discord, StackOverflow, etc.), plus comprehensive documentation, various tutorials, and more resources to facilitate app development.<\/li>\n\n\n\n<li>Has the ability to streamline code and component sharing across different platforms.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">What Are the Weaknesses?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Customizable within the bounds of the Material Design specification.<\/li>\n\n\n\n<li>Limited feature set (primarily core widgets like buttons, inputs, menus).<\/li>\n\n\n\n<li>No advanced components such as Data Grid, Hierarchical Grid, Pivot Grid, financial charts, and other data visualization tools.<\/li>\n\n\n\n<li>Relies on third-party libraries for complex enterprise scenarios.<\/li>\n\n\n\n<li>Steep learning curve compared to other more user-friendly and lightweight frameworks.<\/li>\n\n\n\n<li>Complicated design that might feel overwhelming.<\/li>\n\n\n\n<li>Some apps result in larger codebase that might become challenging to maintain.<\/li>\n\n\n\n<li>In larger applications, performance overhead can occur when two-way data binding is overused, as it increases change detection work, even though Angular has optimized this compared to AngularJS.<\/li>\n\n\n\n<li>Angular apps require extra work for SEO optimization, since content is mainly generated client-side.<\/li>\n\n\n\n<li>Major version updates can demand significant code changes and cause compatibility issues with libraries.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">What Are the Ideal Use Cases?<\/h3>\n\n\n\n<p>Angular Material is best suited for applications where simplicity, consistency, and adherence to Google\u2019s Material Design system are the primary goals. It works well for smaller to medium-sized projects, prototypes, internal tools, or consumer-facing apps that prioritize a clean, familiar user interface over advanced functionality.<\/p>\n\n\n\n<p>Because it is free, open source, and maintained directly by the Angular team, it is also an excellent choice for cost-sensitive projects or teams that want seamless integration with Angular\u2019s ecosystem. In cases where data complexity is minimal and the UI requirements are limited to core components like buttons, forms, dialogs, and navigation, Angular Material provides a reliable solution without the overhead of enterprise-grade features.<\/p>\n\n\n\n<p>Still, be careful with free libraries and technologies. To evaluate the pros and cons, read our overview &#8211; <a href=\"https:\/\/www.infragistics.com\/blogs\/free-open-source-vs-paid-open-source\/\">The True Cost of Free Software: Free Open-Source vs Paid Open-Source Software<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"ignite-ui-for-angular-enterprise-grade-and-performance-driven\">Ignite UI for Angular: Enterprise-Grade and Performance-Driven<\/h2>\n\n\n\n<p>Ignite UI for Angular is a complete UI toolkit built specifically for enterprise-grade applications. Unlike Angular Material, which emphasizes simplicity and adherence to Material Design, Ignite UI is designed for performance, scalability, and data-heavy use cases. It provides advanced components such as <a href=\"https:\/\/www.infragistics.com\/blogs\/the-best-angular-grid\/\">feature-rich grids<\/a>, robust charting options, and enterprise UX patterns, making it ideal for applications that demand high performance and scalability in mission-critical environments.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What Are the Strengths?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Includes advanced components such as <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/angular\/components\/grid\/grid\">Data Grid<\/a>, <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/angular\/components\/hierarchicalgrid\/hierarchical-grid\">Hierarchical Grid<\/a>, <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/angular\/components\/pivotGrid\/pivot-grid\">Pivot Grid<\/a>, and <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/angular\/components\/treegrid\/tree-grid\">Tree Grid<\/a>, <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/angular\/components\/dock-manager\">Dock Manager<\/a>, supporting virtualization, <a href=\"https:\/\/www.infragistics.com\/blogs\/advanced-filtering-in-angular\/\">advanced filtering<\/a>, grouping, sorting, exporting, and Excel-like interactions.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.infragistics.com\/blogs\/open-source-components\/\">50+ Open-Source controls<\/a> including Angular free grid component Grid Lite, Stepper, Tree, Input, Dialog, and many more.<\/li>\n\n\n\n<li>Comes with a comprehensive charting library, including financial charts, stock charts, indicators, and BI-focused visualizations.<\/li>\n\n\n\n<li>Optimized for high-performance rendering of large datasets with built-in row and column virtualization.<\/li>\n\n\n\n<li>Offers customizable themes beyond Material Design and enterprise UX patterns.<\/li>\n\n\n\n<li>Includes <a href=\"https:\/\/www.appbuilder.dev\/platform\" rel=\"noopener\">low-code App Builder<\/a> with <a href=\"https:\/\/www.appbuilder.dev\/platform\/ai\" rel=\"noopener\">AI capabilities<\/a> and production-ready code generation for 80% faster app development.<\/li>\n\n\n\n<li>There are feature-packed and optimized <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/grid-samples\">Angular sample apps<\/a>, helping teams get started more easily, inspect best practices, the code behind each app, and more.<\/li>\n\n\n\n<li>Provides commercial-grade support with SLAs, priority bug fixes, and transparent product roadmaps.<\/li>\n\n\n\n<li>With proven UI patterns like the <a href=\"https:\/\/www.infragistics.com\/blogs\/master-detail-layout\/\">Master-Detail layout<\/a> for presenting related data.<\/li>\n\n\n\n<li>Ships with hundreds of live, runnable code samples and extensive documentation to accelerate development.<\/li>\n\n\n\n<li>Seamlessly integrates into Angular projects, fully supporting Angular\u2019s dependency injection and reactive forms.<\/li>\n\n\n\n<li>Allows teams to consolidate their UI stack by reducing reliance on third-party libraries for grids, charts, or dashboards.<\/li>\n\n\n\n<li>Designed with <a href=\"https:\/\/www.infragistics.com\/blogs\/angular-data-grids-internationalization-localization\/\">accessibility and internationalization (i18n)<\/a> in mind, ensuring enterprise compliance.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">What Are the Weaknesses?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Licensed as a commercial product, which may not suit budget-sensitive projects.<\/li>\n\n\n\n<li>Enterprise-grade capabilities can add additional bundle weight compared to simpler libraries.<\/li>\n\n\n\n<li>Reliance on Infragistics\u2019 ecosystem means updates and support are tied to the vendor, unlike the open-source model of Angular Material.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">What Are the Ideal Use Cases?<\/h3>\n\n\n\n<p>Ignite UI for Angular is best suited for enterprise applications where performance, scalability, and advanced features are essential. It is the right choice for data-heavy apps such as analytics dashboards, financial systems, business intelligence tools, and reporting platforms, where large datasets must be managed efficiently. Organizations that need professional support, reliable updates, and enterprise-ready UX components will find it especially valuable.<\/p>\n\n\n\n<p>While it may not be the most cost-effective option for small projects or prototypes, for mission-critical solutions with complex requirements, Ignite UI provides a comprehensive, future-proof toolkit that goes far beyond the basics. Yet, despite the comprehensive component and feature suite, it doesn\u2019t feel like overkill for small projects because there is Angular datagrid open-source controls along with 50 others.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"wrap-up\">Wrap Up\u2026<\/h2>\n\n\n\n<p>Both Angular Material and Ignite UI for Angular bring value to the table, but they serve different purposes. Angular Material shines as a design-focused library that is perfect for smaller projects, prototypes, and apps where strict adherence to Google\u2019s Material Design is the priority. In contrast, Ignite UI for Angular offers a comprehensive, enterprise-grade library with advanced grids, powerful charting capabilities, and scalability features designed for both basic and data-heavy, mission-critical Angular projects. For more lightweight apps, there is Ignite UI for <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/open-source\">Angular open-source set<\/a> as well.<\/p>\n\n\n\n<p>Ultimately, the choice comes down to your project needs. If you require simplicity and consistency, Angular Material will suffice. However, if you need performance, scalability, and enterprise-ready capabilities, Ignite UI for Angular is the right option for you with better ROI.<\/p>\n\n\n\n<p>To see it all in action, you can <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/angular\/components\/general\/getting-started\">try Ignite UI for Angular for free<\/a>.<\/p>\n\n\n\n<style>\n    \/* Table header controls container *\/\n    .table-header-controls {\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n        margin-bottom: 10px;\n        position: relative;\n    }\ntbody td {\n  text-align: left !important;\n}\n    \/* Expand icon - now always visible outside the table *\/\n    .expand-icon {\n        background: #fff;\n        color: white;\n        border: none;\n        border-radius: 6px;\n        width: 40px;\n        height: 40px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.3s ease;\n        \n        backdrop-filter: blur(4px);\n        opacity: 1;\n        visibility: visible;\n        transform: translateY(0);\n        position: relative;\n        z-index: 10;\n    }\n\n    .expand-icon:hover {\n        background: #fff;\n        transform: scale(1.1);\n        \n    }\n.comparison-table td:first-child, .comparison-table th:first-child {\n    white-space: normal !important; \/* \u041f\u043e\u0437\u0432\u043e\u043b\u0438 \u043f\u0440\u0435\u043d\u0430\u0441\u044f\u043d\u0435 *\/\n    overflow-wrap: break-word !important;\n    max-width: 130px !important; \/* \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0430 *\/\n    min-width: 60px !important;  \/* \u041f\u043e\u0437\u0432\u043e\u043b\u0438 \u0434\u0430 \u0441\u0435 \u0441\u0432\u0438\u0432\u0430 *\/\n}\n\n    .expand-icon img {\n        transition: transform 0.2s ease;\n    }\n\n    .expand-icon:hover img {\n        transform: scale(1.1);\n    }\n\n    .table-responsive-sm {\n        overflow-x: auto !important;\n        -webkit-overflow-scrolling: touch;\n        max-width: 100vw;\n        position: relative;\n        border: none;\n        border-radius: 0.375rem;\n        box-shadow: inset -5px 0 11px 1px #00000014;\n        transition: all 0.5s ease;\n    }\n\n    \/* Expanded mode - table takes full screen *\/\n    .table-expanded {\n        position: fixed !important;\n        top: 0;\n        left: 0;\n        width: 100vw !important;\n        height: 100vh !important;\n        z-index: 999999;\n        background: rgba(255, 255, 255, 0.95);\n        margin: 0 !important;\n        border-radius: 0 !important;\n        box-shadow: none !important;\n        overflow: auto !important;\n        padding: 40px 20px 20px 20px;\n        backdrop-filter: blur(10px);\n        -webkit-backdrop-filter: blur(10px);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .table-expanded .table-responsive-sm {\n        max-width: 95vw !important;\n        max-height: 85vh !important;\n        overflow: auto !important;\n        border-radius: 8px !important;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;\n        background: white !important;\n        z-index: 1;\n    }\n\n    .table-expanded .comparison-table {\n        min-width: auto !important;\n        width: 100% !important;\n        margin: 0 !important;\n        position: relative !important;\n        top: auto !important;\n        left: auto !important;\n        transform: none !important;\n        max-height: none !important;\n    }\n\n    .table-expanded .comparison-table th,\n    .table-expanded .comparison-table td {\n        white-space: normal !important;\n        word-wrap: break-word;\n        max-width: none !important;\n        padding: 15px 10px !important;\n        font-size: 14px;\n    }\n\n    \/* Hide expand icon when in expanded mode *\/\n    .table-expanded .table-header-controls {\n        display: none !important;\n    }\n\n    \/* Close button in expanded mode *\/\n    .close-expanded {\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        z-index: 1000000;\n        background: #dc3545;\n        color: white;\n        border: none;\n        border-radius: 50%;\n        width: 50px;\n        height: 50px;\n        font-size: 20px;\n        cursor: pointer;\n        box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n        transition: all 0.3s ease;\n    }\n\n    .close-expanded:hover {\n        background: #c82333;\n        transform: scale(1.1);\n    }\n\n    .comparison-table {\n        min-width: 750px !important;\n        margin-bottom: 0;\n        position: relative;\n        z-index: -1;\n    }\n\n.comparison-table th,\n.comparison-table td {\n    white-space: normal !important;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    padding: 12px 8px !important;\n    min-width: 50px;\n    border: none !important;\n}\n\n\n    .comparison-table th {\n        background-color: #f8f9fa;\n        font-weight: 600;\n        position: sticky;\n        top: 0;\n        z-index: 10;\n    }\n\n    .comparison-table tr th {\n        background: #666;\n        color: #FFF;\n    }\n\n    .comparison-table tr td {\n        border: none !important;\n        z-index: 1;\n        position: relative;\n    }\n\n    .comparison-table td:first-child,\n    .comparison-table th:first-child {\n        position: sticky !important;\n        left: 0;\n        z-index: 5;\n        min-width: 130px;\n        font-weight: 600;\n        border: none !important;\n        overflow: visible;\n    }\n\n    \/* First column styling with pseudo-element for shadow *\/\n    .comparison-table td:first-child::after,\n    .comparison-table th:first-child::after {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        width: 10px;\n        pointer-events: none;\n        border-right: 1px solid #ccc;\n        box-shadow: 10px 0px 10px 0px #00000014;\n    }\n\n    \/* Background colors for first column *\/\n    .comparison-table tbody tr:nth-of-type(odd) td:first-child {\n        background-color: #fff !important;\n    }\n\n    .comparison-table tbody tr:nth-of-type(even) td:first-child {\n        background-color: #f5f6fb !important;\n    }\n\n    \/* Row background colors *\/\n    .comparison-table tbody tr:nth-of-type(even) td {\n        background-color: #f5f6fb;\n    }\n\n    .comparison-table tbody tr:nth-of-type(odd) td {\n        background-color: #fff;\n    }\n\n    .comparison-table th:first-child {\n        background-color: #4d51b6 !important;\n        z-index: 15;\n        color: #fff;\n        width: 20%;\n    }\n\n    \/* Scroll indicator *\/\n    .table-responsive-sm::after {\n        content: \"\u2190 Swipe to see more \u2192\";\n        display: block;\n        text-align: center;\n        font-size: 12px;\n        color: #6c757d;\n        padding: 8px;\n        background-color: #f8f9fa;\n        border-top: 1px solid #dee2e6;\n    }\n\n    \/* Hide scroll indicator in expanded mode *\/\n    .table-expanded::after {\n        display: none !important;\n    }\n\n    @media (min-width: 1200px) {\n        .table-responsive-sm::after {\n            display: none;\n        }\n    }\n\n    \/* Responsive for small screens *\/\n    @media (max-width: 768px) {\n        .expand-icon {\n            width: 35px;\n            height: 35px;\n        }\n        \n        .table-expanded {\n            padding: 10px;\n        }\n        \n        .table-expanded .comparison-table th,\n        .table-expanded .comparison-table td {\n            font-size: 12px;\n            padding: 8px 5px !important;\n        }\n    }\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ \u041d\u0430\u043c\u0438\u0440\u0430\u043c\u0435 \u0432\u0441\u0438\u0447\u043a\u0438 \u0431\u0443\u0442\u043e\u043d\u0438 \u0437\u0430 \u0440\u0430\u0437\u0448\u0438\u0440\u044f\u0432\u0430\u043d\u0435 \u043d\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0438\n    const expandButtons = document.querySelectorAll('.expand-icon');\n\n    expandButtons.forEach(expandBtn => {\n        expandBtn.addEventListener('click', function() {\n            console.log('\ud83d\udd0d Table expand button clicked - entering full screen mode');\n\n            \/\/ \u041d\u0430\u043c\u0438\u0440\u0430\u043c\u0435 \u043d\u0430\u0439-\u0431\u043b\u0438\u0437\u043a\u0438\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b, \u043a\u043e\u0439\u0442\u043e \u0441\u044a\u0434\u044a\u0440\u0436\u0430 \u0438 \u0431\u0443\u0442\u043e\u043d\u0438\u0442\u0435 \u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0442\u0430\n            \/\/ \u0412 \u0442\u0432\u043e\u044f \u0441\u043b\u0443\u0447\u0430\u0439 - \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f\u0442 \u0441 \u043a\u043b\u0430\u0441 col-12, \u043a\u043e\u0439\u0442\u043e \u0441\u044a\u0434\u044a\u0440\u0436\u0430 .table-header-controls \u0438 #tableContainer\n            const colContainer = this.closest('.col-12');\n\n            \/\/ \u0410\u043a\u043e \u0432\u0435\u0447\u0435 \u0438\u043c\u0430 \u043e\u0442\u0432\u043e\u0440\u0435\u043d \u0440\u0430\u0437\u0448\u0438\u0440\u0435\u043d \u0438\u0437\u0433\u043b\u0435\u0434 - \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u044f\u0432\u0430\u043c\u0435 \u0434\u0430 \u0441\u0435 \u043e\u0442\u0432\u043e\u0440\u0438 \u0432\u0442\u043e\u0440\u0438\n            if (colContainer.classList.contains('table-expanded')) {\n                return;\n            }\n\n            \/\/ \u0421\u044a\u0437\u0434\u0430\u0432\u0430\u043c\u0435 \u0431\u0443\u0442\u043e\u043d \u0437\u0430 \u0437\u0430\u0442\u0432\u0430\u0440\u044f\u043d\u0435\n            const closeBtn = document.createElement('button');\n            closeBtn.className = 'close-expanded';\n            closeBtn.innerHTML = '\u2715';\n            closeBtn.title = 'Close expanded view';\n\n            \/\/ \u0414\u043e\u0431\u0430\u0432\u044f\u043c\u0435 \u0431\u0443\u0442\u043e\u043d\u044a\u0442 \u0437\u0430 \u0437\u0430\u0442\u0432\u0430\u0440\u044f\u043d\u0435 \u043a\u044a\u043c body\n            document.body.appendChild(closeBtn);\n\n            \/\/ \u0414\u043e\u0431\u0430\u0432\u044f\u043c\u0435 \u043a\u043b\u0430\u0441\u0430 \u0437\u0430 \u0440\u0430\u0437\u0448\u0438\u0440\u0435\u043d \u0438\u0437\u0433\u043b\u0435\u0434\n            colContainer.classList.add('table-expanded');\n\n            \/\/ \u0417\u0430\u0431\u0440\u0430\u043d\u044f\u0432\u0430\u043c\u0435 \u0441\u043a\u0440\u043e\u043b \u043d\u0430 body\n            document.body.style.overflow = 'hidden';\n\n            \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0437\u0430 \u0437\u0430\u0442\u0432\u0430\u0440\u044f\u043d\u0435\n            function closeExpanded() {\n                console.log('\u274c Closing expanded table view');\n                colContainer.classList.remove('table-expanded');\n                if (document.body.contains(closeBtn)) {\n                    document.body.removeChild(closeBtn);\n                }\n                document.body.style.overflow = '';\n                document.removeEventListener('keydown', handleEscape);\n            }\n\n            \/\/ \u041a\u043b\u0438\u043a \u0432\u044a\u0440\u0445\u0443 \u0431\u0443\u0442\u043e\u043d\u0430 \u0437\u0430 \u0437\u0430\u0442\u0432\u0430\u0440\u044f\u043d\u0435\n            closeBtn.addEventListener('click', closeExpanded);\n\n            \/\/ \u0417\u0430\u0442\u0432\u0430\u0440\u044f\u043d\u0435 \u0441 ESC\n            function handleEscape(e) {\n                if (e.key === 'Escape') {\n                    closeExpanded();\n                }\n            }\n            document.addEventListener('keydown', handleEscape);\n        });\n    });\n});\n<\/script>\n\n\n\n<p><a id=\"_msocom_1\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ignite UI for Angular vs Angular Material &#8211; which one to choose? In this blog post, we explore the features, performance, and use cases. Read all about this key criteria and factors.<\/p>\n","protected":false},"author":21,"featured_media":3100,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[23,20,38,37],"class_list":["post-3099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-ignite-ui","tag-ignite-ui-angular","tag-ui-library"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=3099"}],"version-history":[{"count":6,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3099\/revisions"}],"predecessor-version":[{"id":3534,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3099\/revisions\/3534"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/3100"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=3099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=3099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=3099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}