title
Learn Angular Material - Full Tutorial

description
Learn how to use Angular Material in this full tutorial course for beginners. Angular Material is a UI component library for Angular JS developers. Angular Material design components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation. 🎥 Tutorial from Codevolution. Check out their YouTube channel: https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Introduction ⌨️ (0:02:42) Getting Started ⌨️ (0:10:01) Material Module ⌨️ (0:13:00) Typography ⌨️ (0:17:18) Button ⌨️ (0:23:35) Button Toggle ⌨️ (0:29:27) Icons ⌨️ (0:31:51) Badges ⌨️ (0:39:52) Progress Spinner ⌨️ (0:44:19) Navbar ⌨️ (0:47:51) Sidenav ⌨️ (0:57:39) Menu ⌨️ (1:10:00) List ⌨️ (1:14:47) Grid List ⌨️ (1:19:46) Expansion Panel ⌨️ (1:25:08) Cards ⌨️ (1:28:09) Tabs ⌨️ (1:31:12) Stepper ⌨️ (1:37:17) Input ⌨️ (1:43:60) Select ⌨️ (1:50:13) Autocomplete ⌨️ (2:00:38) Checkbox and Radio Button ⌨️ (2:05:18) Date Picker ⌨️ (2:11:48) Tooltip ⌨️ (2:15:05) Snackbar ⌨️ (2:24:08) Dialog ⌨️ (2:33:40) Data table ⌨️ (2:42:29) Exploring Data table ⌨️ (2:47:36) Data table Filtering ⌨️ (2:51:43) Data table Sorting ⌨️ (2:55:11) Data table Pagination ⌨️ (2:58:18) Virtual Scrolling -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://www.freecodecamp.org/news

detail
{'title': 'Learn Angular Material - Full Tutorial', 'heatmap': [{'end': 557.923, 'start': 330.639, 'weight': 0.732}, {'end': 778.682, 'start': 656.593, 'weight': 1}, {'end': 8826.767, 'start': 8714.052, 'weight': 0.732}], 'summary': 'The tutorial on angular material covers ui components, typography, icons, badges, navigation, menus, form components, expansion panels, cards, date pickers, tooltips, snackbars, dialogs, data tables, filtering, sorting, pagination, and virtual scrolling, with a total duration of 3 hours.', 'chapters': [{'end': 729.8, 'segs': [{'end': 77.755, 'src': 'embed', 'start': 25.575, 'weight': 0, 'content': [{'end': 33.32, 'text': 'What that means is Angular Material provides us with components to build awesome user interfaces in quick time.', 'start': 25.575, 'duration': 7.745}, {'end': 39.501, 'text': "It is also an implementation of Google's material design specification.", 'start': 34.537, 'duration': 4.964}, {'end': 49.028, 'text': 'Just like how we have Material UI for React, Beautify for Vue, we have Angular Material for Angular.', 'start': 41.002, 'duration': 8.026}, {'end': 55.914, 'text': 'The goal here is to learn how to use the library components to build clean and elegant UI.', 'start': 50.069, 'duration': 5.845}, {'end': 60.838, 'text': 'Now before we get started, let me quickly run you through the prerequisites.', 'start': 57.275, 'duration': 3.563}, {'end': 65.923, 'text': 'As always, HTML, CSS and JavaScript go without saying.', 'start': 62.239, 'duration': 3.684}, {'end': 71.269, 'text': 'In addition to these, you also need to have a knowledge of Angular.', 'start': 66.904, 'duration': 4.365}, {'end': 77.755, 'text': "You don't have to be an expert by any means, but some basic knowledge is absolutely necessary.", 'start': 72.23, 'duration': 5.525}], 'summary': 'Angular material offers components for quick ui development, requires knowledge of html, css, javascript, and some basic angular.', 'duration': 52.18, 'max_score': 25.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL825575.jpg'}, {'end': 557.923, 'src': 'heatmap', 'start': 330.639, 'weight': 0.732, 'content': [{'end': 332.36, 'text': "I'm going to stick with indigo pink.", 'start': 330.639, 'duration': 1.721}, {'end': 337.303, 'text': 'Next, it checks with us for HammerJS for gesture recognition.', 'start': 333.501, 'duration': 3.802}, {'end': 339.585, 'text': 'I will simply go with yes for now.', 'start': 337.863, 'duration': 1.722}, {'end': 342.366, 'text': 'Next, browser animations.', 'start': 340.765, 'duration': 1.601}, {'end': 343.667, 'text': 'Again, yes.', 'start': 342.867, 'duration': 0.8}, {'end': 348.831, 'text': 'And that is pretty much all you have to do.', 'start': 346.969, 'duration': 1.862}, {'end': 353.459, 'text': 'You are ready to start using Angular material in your application.', 'start': 349.758, 'duration': 3.701}, {'end': 360.722, 'text': 'Now this was possible because Angular material is packaged with CLI schematics.', 'start': 353.479, 'duration': 7.243}, {'end': 370.285, 'text': 'What that means is that the Angular team provided us with a single command that will handle setting up material in your application.', 'start': 362.062, 'duration': 8.223}, {'end': 376.347, 'text': "Let's take a look at the differences to see what changes were made by running the command.", 'start': 371.445, 'duration': 4.902}, {'end': 379.997, 'text': 'First up, angular.json.', 'start': 377.776, 'duration': 2.221}, {'end': 386.342, 'text': 'The only difference is the inclusion of a CSS file in the styles array.', 'start': 381.078, 'duration': 5.264}, {'end': 390.664, 'text': 'And this is the indigo pink theme which we opted for.', 'start': 387.162, 'duration': 3.502}, {'end': 394.787, 'text': 'The next file is package.json.', 'start': 391.885, 'duration': 2.902}, {'end': 401.972, 'text': 'Here you can see that Angular CDK and Angular Material have been added to the list of dependencies.', 'start': 395.888, 'duration': 6.084}, {'end': 408.582, 'text': 'Next, we also have updates to the package lock.json file.', 'start': 403.959, 'duration': 4.623}, {'end': 412.345, 'text': 'And then we have index.html.', 'start': 409.863, 'duration': 2.482}, {'end': 415.447, 'text': 'Here, two references have been added.', 'start': 413.206, 'duration': 2.241}, {'end': 420.311, 'text': 'One to material icons and the other to Roboto font.', 'start': 416.288, 'duration': 4.023}, {'end': 425.354, 'text': 'In main.ts, there is the inclusion of HammerJS.', 'start': 422.032, 'duration': 3.322}, {'end': 432.76, 'text': 'In styles.css, there is some CSS reset that has been added to the body tag.', 'start': 427.016, 'duration': 5.744}, {'end': 442.284, 'text': 'Finally, in app.module.ts, we are importing the browser animations module and adding it to the imports array.', 'start': 433.916, 'duration': 8.368}, {'end': 447.309, 'text': "Now, if you're doing this manually, make sure to add it after the browser's module.", 'start': 442.985, 'duration': 4.324}, {'end': 458.139, 'text': 'So the command basically adds project dependencies, includes them in the module, and sets up the style and theme for your Angular application.', 'start': 449.03, 'duration': 9.109}, {'end': 464.687, 'text': "To test if it is actually working, let's use materials button component.", 'start': 459.465, 'duration': 5.222}, {'end': 467.489, 'text': 'There are three simple steps.', 'start': 465.888, 'duration': 1.601}, {'end': 472.231, 'text': 'First step, import it in app.module.ts.', 'start': 468.449, 'duration': 3.782}, {'end': 482.555, 'text': 'Import math button module from Angular slash material.', 'start': 473.891, 'duration': 8.664}, {'end': 486.057, 'text': 'Second step, add it to the imports array.', 'start': 483.836, 'duration': 2.221}, {'end': 490.022, 'text': 'Third step, use it in the HTML.', 'start': 488.001, 'duration': 2.021}, {'end': 508.807, 'text': 'So in app.component.html, wipe out the existing HTML and add a button tag with the text hello world, but also with the directive mat-button.', 'start': 490.662, 'duration': 18.145}, {'end': 511.548, 'text': "Now let's run the application.", 'start': 510.027, 'duration': 1.521}, {'end': 515.409, 'text': 'In the terminal, run the command ng serve-o.', 'start': 512.288, 'duration': 3.121}, {'end': 528.577, 'text': 'In the browser you can see that we have a button that says hello world which is styled with Angular material.', 'start': 522.133, 'duration': 6.444}, {'end': 534.12, 'text': 'Let me change the directive to mat raised button.', 'start': 530.137, 'duration': 3.983}, {'end': 541.323, 'text': 'Go back to the browser and you can see the subtle difference.', 'start': 537.201, 'duration': 4.122}, {'end': 543.465, 'text': 'The button is now raised.', 'start': 541.804, 'duration': 1.661}, {'end': 547.647, 'text': 'So the material library is working perfectly fine.', 'start': 544.945, 'duration': 2.702}, {'end': 557.923, 'text': "You're probably thinking, how would I know to use mat button or mat raised button, right? Well, it's pretty simple.", 'start': 549.138, 'duration': 8.785}], 'summary': 'Angular material setup adds dependencies, styles, and themes to the application using a single cli command.', 'duration': 227.284, 'max_score': 330.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL8330639.jpg'}, {'end': 376.347, 'src': 'embed', 'start': 346.969, 'weight': 3, 'content': [{'end': 348.831, 'text': 'And that is pretty much all you have to do.', 'start': 346.969, 'duration': 1.862}, {'end': 353.459, 'text': 'You are ready to start using Angular material in your application.', 'start': 349.758, 'duration': 3.701}, {'end': 360.722, 'text': 'Now this was possible because Angular material is packaged with CLI schematics.', 'start': 353.479, 'duration': 7.243}, {'end': 370.285, 'text': 'What that means is that the Angular team provided us with a single command that will handle setting up material in your application.', 'start': 362.062, 'duration': 8.223}, {'end': 376.347, 'text': "Let's take a look at the differences to see what changes were made by running the command.", 'start': 371.445, 'duration': 4.902}], 'summary': 'Angular material can be easily set up using a single cli command.', 'duration': 29.378, 'max_score': 346.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL8346969.jpg'}, {'end': 661.997, 'src': 'embed', 'start': 631.193, 'weight': 4, 'content': [{'end': 638.539, 'text': 'And that approach is to create a separate module that deals with importing and exporting material components.', 'start': 631.193, 'duration': 7.346}, {'end': 644.644, 'text': 'So in the terminal, let us use the CLI to generate a new module.', 'start': 639.86, 'duration': 4.784}, {'end': 653.651, 'text': 'NG, G for generate, M for module, followed by name of the module, which we will call as material.', 'start': 645.605, 'duration': 8.046}, {'end': 661.997, 'text': 'Once the command completes, you should have a folder called material inside the app folder.', 'start': 656.593, 'duration': 5.404}], 'summary': 'Creating a separate module for importing and exporting material components using cli to generate a new module.', 'duration': 30.804, 'max_score': 631.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL8631193.jpg'}], 'start': 1.209, 'title': 'Angular material usage', 'summary': "Introduces angular material as a ui component library, an implementation of google's material design, and aims to teach the usage of its components to build clean and elegant ui. it also discusses the prerequisites for adding angular material to an angular application, including the knowledge of html, css, javascript, and basic angular, the process of adding angular material, and the recommended approach to create a separate module for importing and exporting material components.", 'chapters': [{'end': 55.914, 'start': 1.209, 'title': 'Angular material tutorial', 'summary': "Introduces angular material as a ui component library, an implementation of google's material design, and aims to teach the usage of its components to build clean and elegant ui.", 'duration': 54.705, 'highlights': ['Angular Material is a UI component library, providing components for building user interfaces in quick time.', "It is an implementation of Google's material design specification, similar to Material UI for React and Beautify for Vue.", 'The goal is to learn how to use the library components to build clean and elegant UI.']}, {'end': 729.8, 'start': 57.275, 'title': 'Adding angular material to angular', 'summary': 'Discusses the prerequisites for adding angular material to an angular application, including the knowledge of html, css, javascript, and basic angular, the process of adding angular material, and the recommended approach to create a separate module for importing and exporting material components.', 'duration': 672.525, 'highlights': ['The chapter discusses the prerequisites for adding Angular Material to an Angular application The transcript emphasizes the prerequisites of having knowledge of HTML, CSS, JavaScript, and basic Angular to add Angular Material to an Angular application.', 'The process of adding Angular Material is explained, including the use of CLI schematics and the changes made to the project files The process of adding Angular Material is detailed, including the use of CLI schematics, the changes made to angular.json, package.json, package-lock.json, index.html, main.ts, styles.css, and app.module.ts.', 'The recommended approach to create a separate module for importing and exporting material components is discussed The transcript introduces the recommended approach of creating a separate module for importing and exporting material components, emphasizing the removal of common module and declarations array, addition of exports array, moving the imports to the material module, and including the material module in the app module.']}], 'duration': 728.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL81209.jpg', 'highlights': ['Angular Material is a UI component library, providing components for building user interfaces in quick time.', 'The goal is to learn how to use the library components to build clean and elegant UI.', 'The chapter discusses the prerequisites for adding Angular Material to an Angular application, emphasizing the knowledge of HTML, CSS, JavaScript, and basic Angular.', 'The process of adding Angular Material is detailed, including the use of CLI schematics and changes made to project files.', 'The recommended approach of creating a separate module for importing and exporting material components is introduced.']}, {'end': 1759.692, 'segs': [{'end': 763.395, 'src': 'embed', 'start': 731.101, 'weight': 1, 'content': [{'end': 740.183, 'text': 'In the imports array, material module, which is going to auto import the material module from material.module.ts.', 'start': 731.101, 'duration': 9.082}, {'end': 742.944, 'text': "Now let's restart the server.", 'start': 741.403, 'duration': 1.541}, {'end': 748.605, 'text': 'Control C and then ng serve dash O.', 'start': 744.124, 'duration': 4.481}, {'end': 757.212, 'text': 'And you can see that the raised button still has the same material styling.', 'start': 752.97, 'duration': 4.242}, {'end': 763.395, 'text': 'So what we have done is extracted material into its own module.', 'start': 758.993, 'duration': 4.402}], 'summary': 'Extracted material into its own module for raised button styling.', 'duration': 32.294, 'max_score': 731.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL8731101.jpg'}, {'end': 859.631, 'src': 'embed', 'start': 797.702, 'weight': 0, 'content': [{'end': 805.064, 'text': 'If your website has text content with way too many styles or font sizes, it kind of spoils the UI.', 'start': 797.702, 'duration': 7.362}, {'end': 810.745, 'text': 'To address this concern, Angular Material provides typography levels.', 'start': 805.984, 'duration': 4.761}, {'end': 817.707, 'text': 'Each level has a definite font size, font weight and line height.', 'start': 812.006, 'duration': 5.701}, {'end': 821.808, 'text': "Let's take a closer look at the different typography levels.", 'start': 818.688, 'duration': 3.12}, {'end': 829.61, 'text': 'To create huge headers in the webpage, we can make use of the material display classes.', 'start': 823.329, 'duration': 6.281}, {'end': 838.012, 'text': 'Now there are a total of four display classes, so let me create four div tags, one for each display class.', 'start': 830.63, 'duration': 7.382}, {'end': 842.357, 'text': 'In fact, let me simply copy paste the code and then explain it.', 'start': 838.854, 'duration': 3.503}, {'end': 846.921, 'text': 'So we have four div tags, each with a different class.', 'start': 843.718, 'duration': 3.203}, {'end': 854.127, 'text': 'The topmost one is matDisplay4, matDisplay3, 2, and 1.', 'start': 847.922, 'duration': 6.205}, {'end': 859.631, 'text': 'If we save this and take a look at the browser, you can see how they appear on the webpage.', 'start': 854.127, 'duration': 5.504}], 'summary': 'Angular material offers typography levels and display classes to improve website ui.', 'duration': 61.929, 'max_score': 797.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL8797702.jpg'}, {'end': 1295.396, 'src': 'embed', 'start': 1219.294, 'weight': 4, 'content': [{'end': 1224.118, 'text': 'And the MiniFabButton, which is just a smaller version of the FabButton.', 'start': 1219.294, 'duration': 4.824}, {'end': 1228.46, 'text': 'So these are the variants for circular buttons.', 'start': 1225.198, 'duration': 3.262}, {'end': 1232.123, 'text': "Next, let's talk about button colors.", 'start': 1230.061, 'duration': 2.062}, {'end': 1243.674, 'text': 'When it comes to material, there are three colors we talk about, primary, accent and worn colors, W-A-R-N, worn.', 'start': 1233.732, 'duration': 9.942}, {'end': 1249.696, 'text': 'To apply the color, we make use of the color attribute on the button element.', 'start': 1244.955, 'duration': 4.741}, {'end': 1254.937, 'text': 'Let me copy paste three buttons and add the colors.', 'start': 1251.316, 'duration': 3.621}, {'end': 1264.98, 'text': 'Color is equal to primary, The text is primary.', 'start': 1257.957, 'duration': 7.023}, {'end': 1268.522, 'text': 'Color is equal to accent.', 'start': 1266.721, 'duration': 1.801}, {'end': 1272.784, 'text': 'The text is accent.', 'start': 1271.483, 'duration': 1.301}, {'end': 1276.766, 'text': 'And finally, color is equal to worn.', 'start': 1273.465, 'duration': 3.301}, {'end': 1279.768, 'text': 'And the text is worn.', 'start': 1278.087, 'duration': 1.681}, {'end': 1286.452, 'text': 'If you take a look at the browser, you can see the button text in different colors.', 'start': 1281.549, 'duration': 4.903}, {'end': 1290.514, 'text': 'Primary, accent and worn.', 'start': 1288.053, 'duration': 2.461}, {'end': 1295.396, 'text': 'How the colors apply are based on the variant of the button.', 'start': 1291.854, 'duration': 3.542}], 'summary': 'Discusses circular button variants and colors with primary, accent, and worn colors.', 'duration': 76.102, 'max_score': 1219.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL81219294.jpg'}, {'end': 1359.107, 'src': 'embed', 'start': 1331.81, 'weight': 6, 'content': [{'end': 1338.256, 'text': "If you don't like it for some reason you can add the disable ripple attribute to the button element.", 'start': 1331.81, 'duration': 6.446}, {'end': 1346.485, 'text': 'So on this third button which is for warm I am going to add a disable ripple.', 'start': 1338.737, 'duration': 7.748}, {'end': 1355.307, 'text': 'If I save this and go back to the browser, only on this button when I click, you can see that there is no more ripple effect.', 'start': 1347.465, 'duration': 7.842}, {'end': 1359.107, 'text': 'Ripple effect, no ripple effect.', 'start': 1356.647, 'duration': 2.46}], 'summary': 'Adding the disable ripple attribute to the warm button removes the ripple effect.', 'duration': 27.297, 'max_score': 1331.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL81331810.jpg'}, {'end': 1451.148, 'src': 'embed', 'start': 1420.626, 'weight': 7, 'content': [{'end': 1424.43, 'text': "Alright guys, let's take a look at the button toggle element in this video.", 'start': 1420.626, 'duration': 3.804}, {'end': 1433.603, 'text': 'Button toggle is basically an element with the appearance of a button and can toggle between on and off states.', 'start': 1426.621, 'duration': 6.982}, {'end': 1443.326, 'text': 'To get started, we need to import matButtonToggle module from Angular Material and add it to the material array.', 'start': 1435.123, 'duration': 8.203}, {'end': 1451.148, 'text': 'Import it and add it to the material components array.', 'start': 1447.487, 'duration': 3.661}], 'summary': 'Tutorial on using button toggle in angular material', 'duration': 30.522, 'max_score': 1420.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL81420626.jpg'}, {'end': 1604.256, 'src': 'embed', 'start': 1574.726, 'weight': 8, 'content': [{'end': 1577.529, 'text': 'Now, although these elements can be used individually,', 'start': 1574.726, 'duration': 2.803}, {'end': 1585.536, 'text': 'they are typically grouped together and presented as better alternatives to radio buttons or checkboxes.', 'start': 1577.529, 'duration': 8.007}, {'end': 1592.052, 'text': "For example, let's say you have a list of front-end technologies.", 'start': 1588.151, 'duration': 3.901}, {'end': 1596.574, 'text': 'Let me show you how to display them using the button toggle element.', 'start': 1592.952, 'duration': 3.622}, {'end': 1604.256, 'text': 'To create a group of button toggle elements, we use the mat-button-toggle-group directive.', 'start': 1597.574, 'duration': 6.682}], 'summary': 'Button toggle elements are presented as better alternatives to radio buttons or checkboxes for displaying front-end technologies.', 'duration': 29.53, 'max_score': 1574.726, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL81574726.jpg'}], 'start': 731.101, 'title': 'Angular material typography and button toggle', 'summary': 'Discusses the usage of typography levels, classes, and buttons in angular material, covering distinct font sizes and styles, button variants, and button toggle implementation, providing practical examples and best practices for website text content and interactive elements.', 'chapters': [{'end': 829.61, 'start': 731.101, 'title': 'Angular material typography levels', 'summary': 'Discusses the extraction of material into its own module, the usage of typography levels in angular material to provide distinct font sizes, font weight, and line height for text content on websites.', 'duration': 98.509, 'highlights': ['Angular Material provides typography levels with distinct font sizes, font weight, and line height for text content on websites. The chapter discusses the usage of typography levels in Angular Material, which provides specific font sizes, font weight, and line height for text content on websites.', 'Material is extracted into its own module to isolate material code and maintain a clean app module. The approach of extracting material into its own module is discussed, which isolates material code and maintains the app module clean.', 'The material display classes can be used to create huge headers in the webpage. The usage of material display classes to create large headers on webpages is mentioned.']}, {'end': 1359.107, 'start': 830.63, 'title': 'Angular material typography and buttons', 'summary': 'Covers the usage of angular material typography classes for text styling and appearance, including display classes, section headings, body text, and captions. it also discusses the usage of material buttons with various variants, circular buttons, button colors, and disabling ripple effect.', 'duration': 528.477, 'highlights': ['Angular Material Typography It introduces the usage of display classes (matDisplay4 to matDisplay1) for text size variation, section headings (mat-headline to subheading1) for different heading styles, and body text classes (matte body1, matte body2) for different text styles.', 'Material Buttons Variants It explains the usage of different button variants including raised button, flat button, stroked button, icon button, FAB button, and miniFAB button with their respective attributes.', 'Button Colors It discusses the application of primary, accent, and worn colors to buttons using the color attribute, and how the colors apply based on the button variant.', 'Disabling Ripple Effect It demonstrates how to disable the ripple animation effect on buttons by adding the disable ripple attribute, providing an option to customize button behavior.']}, {'end': 1759.692, 'start': 1360.528, 'title': 'Angular material button toggle', 'summary': 'Introduces the usage of angular material button toggle, including importing, usage, properties, and grouping, with examples of toggling behavior and multiple selection, demonstrating how to implement and customize button toggle elements for angular material.', 'duration': 399.164, 'highlights': ['Button toggle is an element with the appearance of a button that can toggle between on and off states. The chapter introduces button toggle as an element that can toggle between on and off states, and demonstrates how to import the matButtonToggle module from Angular Material, add it to the material array, and implement it in the HTML to create a toggle button.', 'Button toggle can be grouped together as an alternative to radio buttons or checkboxes, allowing for single or multiple selections. The chapter explains how button toggle elements can be grouped using the mat-button-toggle-group directive, and demonstrates the behavior of single and multiple selections, providing examples of displaying front-end technologies as a group of button toggle elements with different selection behaviors.', 'The chapter provides guidance on accessing the value, listening to change events, and executing code for button toggle elements. The chapter provides guidance on accessing the value of a button toggle group in HTML, listening to change events, and executing code in the component class, as well as referencing a separate series on Angular component interaction for further details.']}], 'duration': 1028.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL8731101.jpg', 'highlights': ['Angular Material provides typography levels with distinct font sizes, font weight, and line height for text content on websites.', 'Material is extracted into its own module to isolate material code and maintain a clean app module.', 'The material display classes can be used to create huge headers in the webpage.', 'It introduces the usage of display classes (matDisplay4 to matDisplay1) for text size variation, section headings (mat-headline to subheading1) for different heading styles, and body text classes (matte body1, matte body2) for different text styles.', 'It explains the usage of different button variants including raised button, flat button, stroked button, icon button, FAB button, and miniFAB button with their respective attributes.', 'It discusses the application of primary, accent, and worn colors to buttons using the color attribute, and how the colors apply based on the button variant.', 'It demonstrates how to disable the ripple animation effect on buttons by adding the disable ripple attribute, providing an option to customize button behavior.', 'Button toggle is an element with the appearance of a button that can toggle between on and off states.', 'Button toggle can be grouped together as an alternative to radio buttons or checkboxes, allowing for single or multiple selections.', 'The chapter provides guidance on accessing the value, listening to change events, and executing code for button toggle elements.']}, {'end': 2607.103, 'segs': [{'end': 1824.354, 'src': 'embed', 'start': 1797.421, 'weight': 0, 'content': [{'end': 1802.165, 'text': 'By including mat icon module, we can now use the mat icon component.', 'start': 1797.421, 'duration': 4.744}, {'end': 1807.53, 'text': 'So in the HTML, mat icon.', 'start': 1802.866, 'duration': 4.664}, {'end': 1814.876, 'text': 'In between the opening and closing tags, we need to specify text that corresponds to an icon.', 'start': 1808.771, 'duration': 6.105}, {'end': 1824.354, 'text': 'But the question is, what text do we specify? The mat icon component accepts material icon fonts.', 'start': 1816.037, 'duration': 8.317}], 'summary': 'By including mat icon module, we can now use the mat icon component with material icon fonts.', 'duration': 26.933, 'max_score': 1797.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL81797421.jpg'}, {'end': 1944.915, 'src': 'embed', 'start': 1849.79, 'weight': 2, 'content': [{'end': 1857.773, 'text': 'so you can select any icon from the list and just include the text in the matte icon component to add a color.', 'start': 1849.79, 'duration': 7.983}, {'end': 1867.657, 'text': 'we use the color attribute with either primary accent or worn as a value which is retrieved based on your theme.', 'start': 1857.773, 'duration': 9.884}, {'end': 1880.187, 'text': 'so if I add color is equal to primary, back to the browser you should see the icon with the primary color, which in our case is indigo.', 'start': 1867.657, 'duration': 12.53}, {'end': 1888.611, 'text': 'now you can also use your own svgs and there is a detailed explanation on how to use them as well.', 'start': 1880.187, 'duration': 8.424}, {'end': 1897.496, 'text': 'so if you go to the material docs components, under buttons and indicators there is icon,', 'start': 1888.611, 'duration': 8.885}, {'end': 1901.859, 'text': 'and over here there is a good amount of explanation on using svgs.', 'start': 1897.496, 'duration': 4.363}, {'end': 1909.116, 'text': 'But then again, material font has tons of icons which might be more than enough.', 'start': 1904.175, 'duration': 4.941}, {'end': 1918.078, 'text': "Let's take a look at material badges in this video.", 'start': 1915.077, 'duration': 3.001}, {'end': 1923.559, 'text': "If you've worked with Bootstrap, badges should seem familiar to you.", 'start': 1919.678, 'duration': 3.881}, {'end': 1928.32, 'text': 'They are basically small status descriptors for UI elements.', 'start': 1924.379, 'duration': 3.941}, {'end': 1939.332, 'text': 'example, if you have to display notifications for a user or the number of unread messages in your inbox, badges are the way to go.', 'start': 1929.705, 'duration': 9.627}, {'end': 1944.915, 'text': "so let's see what is possible with angular material badges in this video.", 'start': 1939.332, 'duration': 5.583}], 'summary': 'Angular material components include icons, with options for custom svgs and badges for ui status descriptors.', 'duration': 95.125, 'max_score': 1849.79, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL81849790.jpg'}, {'end': 2479.416, 'src': 'embed', 'start': 2458.392, 'weight': 4, 'content': [{'end': 2467.559, 'text': 'you can also bind to the value attribute programmatically to indicate any progress that has to be conveyed to the user.', 'start': 2458.392, 'duration': 9.167}, {'end': 2475.205, 'text': 'now, a more common use case of the spinner is the indeterminate spinner or the spinner that never stops spinning.', 'start': 2467.559, 'duration': 7.646}, {'end': 2479.416, 'text': 'For that we make use of the math spinner component.', 'start': 2476.274, 'duration': 3.142}], 'summary': 'Use math spinner component for indeterminate spinner progress.', 'duration': 21.024, 'max_score': 2458.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL82458392.jpg'}], 'start': 1761.052, 'title': 'Angular material ui components', 'summary': 'Covers the usage of angular material icons with importing mat icon module and customizing icon display, and explores the usage of badges with customizations like position, size, color, and overlap, along with the usage of determinate and indeterminate spinner components with practical examples and programmatic value binding.', 'chapters': [{'end': 1880.187, 'start': 1761.052, 'title': 'Angular material icons usage', 'summary': 'Explains the simplest way to use angular material icons, including importing the mat icon module, specifying icon text, and adding color attributes, enabling users to easily display and customize icons based on their requirements.', 'duration': 119.135, 'highlights': ['The mat icon component accepts material icon fonts, and users can specify the icon text by grabbing it from material.io/tools/icons, thus enabling the display of various material icons in the application.', 'By including the mat icon module, users can use the mat icon component to easily display icons corresponding to the specified text, enhancing the visual appeal and functionality of the application.', 'To add color to the icons, the color attribute can be used with values such as primary, accent, or warn, which are retrieved based on the theme, allowing for customization and visual consistency within the application.']}, {'end': 2607.103, 'start': 1880.187, 'title': 'Angular material: badges & progress spinner', 'summary': 'Covers the usage of angular material badges, including customizations such as position, size, color, and overlap, as well as binding values and conditional rendering, with a detailed explanation on importing and using svgs, and then progresses to the usage of determinate and indeterminate spinner components with practical examples of binding values programmatically and indicating data loading through a button click.', 'duration': 726.916, 'highlights': ['The chapter covers the usage of Angular Material badges, including customizations such as position, size, color, and overlap, as well as binding values and conditional rendering. The transcript provides a comprehensive guide to utilizing Angular Material badges, discussing various customizations like position, size, color, and overlap, along with examples of binding values and conditional rendering.', 'The chapter progresses to the usage of determinate and indeterminate spinner components with practical examples of binding values programmatically and indicating data loading through a button click. The transcript delves into the usage of determinate and indeterminate spinner components, demonstrating practical examples of binding values programmatically and indicating data loading through a button click.', 'The chapter also includes a detailed explanation on importing and using svgs. The transcript provides a detailed explanation on how to import and use svgs in Angular Material.']}], 'duration': 846.051, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL81761052.jpg', 'highlights': ['The mat icon component accepts material icon fonts, enabling the display of various material icons in the application.', 'By including the mat icon module, users can easily display icons corresponding to the specified text, enhancing the visual appeal and functionality of the application.', 'The color attribute can be used with values such as primary, accent, or warn, allowing for customization and visual consistency within the application.', 'The chapter covers the usage of Angular Material badges, including customizations such as position, size, color, and overlap, as well as binding values and conditional rendering.', 'The chapter progresses to the usage of determinate and indeterminate spinner components with practical examples of binding values programmatically and indicating data loading through a button click.', 'The chapter also includes a detailed explanation on importing and using svgs in Angular Material.']}, {'end': 4019.868, 'segs': [{'end': 2667.935, 'src': 'embed', 'start': 2639.128, 'weight': 0, 'content': [{'end': 2648.834, 'text': 'it works almost the same as progress spinner, so i will leave it up to you guys to experiment and understand how it works well.', 'start': 2639.128, 'duration': 9.706}, {'end': 2653.977, 'text': 'that is about buttons and indicators in angular material.', 'start': 2648.834, 'duration': 5.143}, {'end': 2658.54, 'text': "from the next video, let's take a look at the different components related to navigation.", 'start': 2653.977, 'duration': 4.563}, {'end': 2667.935, 'text': "Let's take a look at navigation components, starting with the toolbar.", 'start': 2663.871, 'duration': 4.064}], 'summary': 'Angular material covers buttons, indicators, and navigation components like toolbar.', 'duration': 28.807, 'max_score': 2639.128, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL82639128.jpg'}, {'end': 2791.301, 'src': 'embed', 'start': 2761.627, 'weight': 1, 'content': [{'end': 2768.091, 'text': 'If you head back to the browser, you should be able to see a primary colored toolbar in your application.', 'start': 2761.627, 'duration': 6.464}, {'end': 2773.554, 'text': "Now let's see how to convert this basic toolbar into a navbar.", 'start': 2769.391, 'duration': 4.163}, {'end': 2781.693, 'text': 'A navbar typically consists of the brand title on the left and a group of links on the right.', 'start': 2775.287, 'duration': 6.406}, {'end': 2791.301, 'text': "I'm going to convert our span tag into a div tag, which is going to be our brand code evolution.", 'start': 2781.713, 'duration': 9.588}], 'summary': 'Convert basic toolbar into a navbar with brand title and links.', 'duration': 29.674, 'max_score': 2761.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL82761627.jpg'}, {'end': 3192.705, 'src': 'embed', 'start': 3167.591, 'weight': 2, 'content': [{'end': 3174.875, 'text': 'Before we take a look at the next method, I want to quickly show you the different modes that can be applied to a side nav.', 'start': 3167.591, 'duration': 7.284}, {'end': 3183.079, 'text': 'The mode for a side nav can be specified using the mode attribute on the mat side nav component.', 'start': 3176.376, 'duration': 6.703}, {'end': 3186.221, 'text': 'The default mode is over.', 'start': 3184.16, 'duration': 2.061}, {'end': 3188.962, 'text': 'Mode is equal to over.', 'start': 3187.222, 'duration': 1.74}, {'end': 3192.705, 'text': 'And this is the mode we have seen so far.', 'start': 3190.543, 'duration': 2.162}], 'summary': "The default mode for a side nav is 'over.'", 'duration': 25.114, 'max_score': 3167.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL83167591.jpg'}, {'end': 3537.687, 'src': 'embed', 'start': 3496.092, 'weight': 3, 'content': [{'end': 3505.5, 'text': "Now let's go to app.component.html and over here to create a menu, we use the matMenu component.", 'start': 3496.092, 'duration': 9.408}, {'end': 3515.529, 'text': 'To specify the choices for a menu, we use the button elements with a matMenuItem attribute.', 'start': 3508.723, 'duration': 6.806}, {'end': 3523.156, 'text': 'Button, frontend is the text, and we add the matMenuItem attribute.', 'start': 3516.77, 'duration': 6.386}, {'end': 3530.684, 'text': "Similarly, let's also have backend as a menu item.", 'start': 3527.102, 'duration': 3.582}, {'end': 3537.687, 'text': "If you save this and take a look at the browser, you're not going to see anything.", 'start': 3533.325, 'duration': 4.362}], 'summary': 'Creating menu with matmenu component for frontend and backend choices.', 'duration': 41.595, 'max_score': 3496.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL83496092.jpg'}], 'start': 2608.598, 'title': 'Angular material components and toolbars in angular', 'summary': 'Covers the usage of progress spinner, toolbar as a navbar, and progress bar indicator in angular material. it also demonstrates creating primary-colored toolbar, side nav, controlling side nav visibility, and creating and customizing menus in angular, with practical examples.', 'chapters': [{'end': 2728.023, 'start': 2608.598, 'title': 'Angular material components', 'summary': 'Introduces the usage of progress spinner and toolbar as a navbar in angular material, and also mentions the usage of progress bar indicator. it also discusses how the color attribute can be customized for the progress spinner.', 'duration': 119.425, 'highlights': ['The chapter introduces the usage of progress spinner and toolbar as a navbar in Angular material It discusses the usage of progress spinner and toolbar as a navbar, providing an overview of their functionality and usage.', 'Mentions the usage of progress bar indicator It briefly mentions the usage of the progress bar indicator in Angular material.', 'Discusses how the color attribute can be customized for the progress spinner It explains how the color attribute for the progress spinner can be set to accent or worn, providing flexibility in customization.']}, {'end': 3051.669, 'start': 2731.544, 'title': 'Creating toolbars and side navs in angular material', 'summary': 'Demonstrates creating a primary-colored toolbar and converting it into a navbar, with the addition of a side nav using angular material, including styling and expected behavior.', 'duration': 320.125, 'highlights': ['The chapter demonstrates creating a primary-colored toolbar and converting it into a navbar. The chapter explains how to add a color to a toolbar, convert it into a navbar with a brand title and a set of links, and apply CSS to achieve the desired layout.', 'Adding a side nav using Angular Material, including styling and expected behavior. The chapter explains the steps to set up a side nav using three components within a container, how to show the side nav with basic styling, and the expected behavior of the hidden side nav.']}, {'end': 3458.069, 'start': 3052.569, 'title': 'Angular material side nav', 'summary': 'Explains how to use two-way binding to control the visibility of a side nav in angular material, demonstrating three methods - using the opened attribute, invoking open/close methods, and toggling the side nav. additionally, it showcases how to listen to opened and closed events and perform actions accordingly.', 'duration': 405.5, 'highlights': ['The chapter explains the three methods of controlling side nav visibility in Angular Material - using the opened attribute, invoking open/close methods, and toggling the side nav. It demonstrates using two-way binding to control the side nav visibility and provides a clear understanding of the three methods - using the opened attribute, invoking open/close methods, and toggling the side nav.', 'It showcases how to listen to opened and closed events and perform actions accordingly. The transcript illustrates how to listen to opened and closed events and perform actions accordingly, providing a comprehensive understanding of event handling in Angular Material.', 'It explains the different modes that can be applied to a side nav - over, push, and side. The transcript explains the different modes - over, push, and side - that can be applied to a side nav, offering insights into the visual behavior and layout options available in Angular Material.']}, {'end': 4019.868, 'start': 3463.172, 'title': 'Creating and customizing menus', 'summary': 'Demonstrates how to create and customize menus in angular, covering the process of creating basic and nested menus, controlling menu positioning, and implementing lazy rendering with practical code examples.', 'duration': 556.696, 'highlights': ["Creating a basic menu The process of creating a basic menu using the matMenu component and specifying menu choices with the matMenuItem attribute is explained, with a practical example of creating a menu with 'frontend' and 'backend' choices.", "Creating a nested menu The process of creating a nested menu for the 'frontend' choice in the main menu, along with the usage of the matMenuTriggerFor directive and practical demonstration of a nested menu with 'angular', 'react', and 'view' choices.", "Controlling menu positioning The explanation of X position and Y position attributes for controlling the positioning of the menu, with practical examples of using 'before' or 'after' for X position and 'above' or 'below' for Y position, along with a demonstration of repositioning the button using CSS.", 'Implementing lazy rendering Demonstration of implementing lazy rendering using the ngTemplate directive and matMenuContent attribute, with practical examples of creating dynamic content as menu choices and using matMenuTriggerData attribute for dynamic choices.']}], 'duration': 1411.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL82608598.jpg', 'highlights': ['The chapter introduces the usage of progress spinner and toolbar as a navbar in Angular material.', 'The chapter demonstrates creating a primary-colored toolbar and converting it into a navbar.', 'The chapter explains the three methods of controlling side nav visibility in Angular Material.', 'Creating a basic menu using the matMenu component and specifying menu choices with the matMenuItem attribute is explained.']}, {'end': 4790.509, 'segs': [{'end': 4110.196, 'src': 'embed', 'start': 4057.489, 'weight': 0, 'content': [{'end': 4065.713, 'text': 'So what is happening is on the trigger button, we specify the mat menu trigger data attribute and we specify the name.', 'start': 4057.489, 'duration': 8.224}, {'end': 4073.476, 'text': 'So we are saying hey, I know that this button is a trigger for a menu, but when I am triggering that menu,', 'start': 4066.213, 'duration': 7.263}, {'end': 4079.759, 'text': 'let me pass some additional information that the menu can use to dynamically render some data.', 'start': 4073.476, 'duration': 6.283}, {'end': 4091.123, 'text': 'Now in the mat menu component, we use the ngTemplate tag And on the ngTemplate tag, we specify this name variable that we want to access.', 'start': 4080.92, 'duration': 10.203}, {'end': 4095.326, 'text': 'And that can be interpolated in the button element.', 'start': 4092.043, 'duration': 3.283}, {'end': 4099.448, 'text': 'That is how we have log out Vishwas.', 'start': 4096.647, 'duration': 2.801}, {'end': 4104.671, 'text': "Let's add one more property so that we really understand how it works.", 'start': 4100.83, 'duration': 3.841}, {'end': 4110.196, 'text': "To the trigger data object, I'm going to add a new property called hobby.", 'start': 4105.693, 'duration': 4.503}], 'summary': 'Using trigger button to pass additional data for dynamic rendering in mat menu component.', 'duration': 52.707, 'max_score': 4057.489, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL84057489.jpg'}, {'end': 4359.974, 'src': 'embed', 'start': 4325.243, 'weight': 3, 'content': [{'end': 4330.868, 'text': 'Now it is also possible to create multi-line lists and also include material icons.', 'start': 4325.243, 'duration': 5.625}, {'end': 4335.232, 'text': "I'm going to comment this out and start a new list.", 'start': 4332.149, 'duration': 3.083}, {'end': 4343.671, 'text': 'So mat list and within the mat list component, we are going to have a mat list item.', 'start': 4336.73, 'duration': 6.941}, {'end': 4349.352, 'text': 'Within the list item, we can add a material icon.', 'start': 4345.872, 'duration': 3.48}, {'end': 4353.833, 'text': "Mat icon and let's go with home.", 'start': 4351.213, 'duration': 2.62}, {'end': 4359.974, 'text': 'We can then add a heading with mat line attribute.', 'start': 4355.393, 'duration': 4.581}], 'summary': 'New feature allows creation of multi-line lists and inclusion of material icons.', 'duration': 34.731, 'max_score': 4325.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL84325243.jpg'}, {'end': 4542.664, 'src': 'embed', 'start': 4506.351, 'weight': 4, 'content': [{'end': 4513.755, 'text': 'So in material.module.ts, import matGridListModule and add it to the material array.', 'start': 4506.351, 'duration': 7.404}, {'end': 4519.779, 'text': 'matGridListModule Now we can create a grid list.', 'start': 4515.416, 'duration': 4.363}, {'end': 4523.261, 'text': 'The component is matGridList.', 'start': 4520.92, 'duration': 2.341}, {'end': 4531.707, 'text': 'And this component requires a calls attribute which specifies the number of columns in the grid.', 'start': 4525.103, 'duration': 6.604}, {'end': 4534.202, 'text': "let's go with two columns.", 'start': 4532.622, 'duration': 1.58}, {'end': 4536.583, 'text': 'So calls is equal to two.', 'start': 4534.702, 'duration': 1.881}, {'end': 4542.664, 'text': 'As children to this component, we specify mat grid tile components.', 'start': 4537.543, 'duration': 5.121}], 'summary': 'In material.module.ts, import matgridlistmodule, create a grid list with 2 columns using matgridlist component, and add mat grid tile components as children.', 'duration': 36.313, 'max_score': 4506.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL84506351.jpg'}], 'start': 4021.568, 'title': 'Angular material ui', 'summary': 'Covers angular material navigation and menus, demonstrating dynamic rendering of data and personalized menu choices, and usage of layout components for creating lists and grid-based layouts, including examples of basic lists, navigation lists, multi-line lists with icons, and grid lists with customizable row heights and gutter size.', 'chapters': [{'end': 4190.227, 'start': 4021.568, 'title': 'Angular material navigation and menus', 'summary': 'Demonstrates how to dynamically render data in angular material menus using ngtemplate tag and trigger button attributes, resulting in the creation of personalized menu choices for different elements.', 'duration': 168.659, 'highlights': ["The ngTemplate tag and trigger button attributes are used to dynamically render personalized menu choices for different elements, such as displaying 'log out Vishwas' and 'log out code evolution' based on specified data.", "The mat menu trigger data attribute is specified to pass additional information for dynamically rendering menu data, resulting in the creation of personalized menu choices based on the trigger data object properties, such as displaying different hobbies for 'Vishwas' and 'code evolution'.", "The process involves specifying variables using ngTemplate tag, such as 'name' and 'hobby', and then interpolating these variables in the button element to display dynamic content based on the trigger data object properties, resulting in the creation of personalized menu choices for different elements."]}, {'end': 4790.509, 'start': 4190.227, 'title': 'Angular material layout components', 'summary': 'Covers the usage of angular material components for creating lists and grid-based layouts, including examples of creating basic lists, navigation lists, multi-line lists with icons, and grid lists with customizable row heights and gutter size.', 'duration': 600.282, 'highlights': ['Creating basic lists with Angular Material Demonstrates importing mat list module, creating a basic list with mat list component, and applying the dense attribute to reduce font size, with examples of navigation lists and multi-line lists with icons.', 'Creating grid lists with customizable row heights and gutter size Explains importing matGridListModule, creating a grid list with matGridList component, specifying the number of columns and rows, using rowSpan and colSpan attributes to control tile sizes, and customizing row heights and gutter size.']}], 'duration': 768.941, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL84021568.jpg', 'highlights': ['Demonstrates dynamic rendering of personalized menu choices using ngTemplate tag and trigger button attributes.', 'Explains the usage of mat menu trigger data attribute to pass additional information for dynamically rendering menu data.', 'Illustrates the process of creating personalized menu choices for different elements by specifying variables and interpolating them in the button element.', 'Demonstrates creating basic lists with Angular Material, including navigation lists and multi-line lists with icons.', 'Explains creating grid lists with customizable row heights and gutter size using matGridListModule and matGridList component.']}, {'end': 5785.526, 'segs': [{'end': 4864.045, 'src': 'embed', 'start': 4824.423, 'weight': 5, 'content': [{'end': 4827.724, 'text': "Now in the HTML, let's create an expansion panel.", 'start': 4824.423, 'duration': 3.301}, {'end': 4832.346, 'text': 'The component to use is mat-expansion-panel.', 'start': 4828.965, 'duration': 3.381}, {'end': 4836.828, 'text': 'Every panel must contain a panel header component.', 'start': 4833.907, 'duration': 2.921}, {'end': 4843.021, 'text': 'It is this header which is displayed when the panel is collapsed.', 'start': 4838.88, 'duration': 4.141}, {'end': 4847.802, 'text': 'A header can contain a title and a description.', 'start': 4844.461, 'duration': 3.341}, {'end': 4864.045, 'text': 'We use matPanelTitle to add the title Angular Fundamentals and matPanelDescription to add a short description for the panel.', 'start': 4848.862, 'duration': 15.183}], 'summary': 'Create a mat-expansion-panel with title and description.', 'duration': 39.622, 'max_score': 4824.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL84824423.jpg'}, {'end': 5088.97, 'src': 'embed', 'start': 5032.591, 'weight': 6, 'content': [{'end': 5041.456, 'text': 'Now if at all you want multiple panels to be shown at the same time, you can set multi is equal to true on the matte accordion component.', 'start': 5032.591, 'duration': 8.865}, {'end': 5052.723, 'text': 'If we take a look at the browser, you can see that we can now expand both the panels at the same time.', 'start': 5046.199, 'duration': 6.524}, {'end': 5058.327, 'text': 'And if you notice to the right of the panel header, we have the toggle icon.', 'start': 5053.864, 'duration': 4.463}, {'end': 5067.2, 'text': 'If at all, for some reason you want to hide this, simply add the hide toggle attribute on the accordion.', 'start': 5059.266, 'duration': 7.934}, {'end': 5069.524, 'text': 'Hide toggle.', 'start': 5068.462, 'duration': 1.062}, {'end': 5072.866, 'text': 'take a look at the browser.', 'start': 5070.666, 'duration': 2.2}, {'end': 5074.007, 'text': 'now it is hidden.', 'start': 5072.866, 'duration': 1.141}, {'end': 5083.029, 'text': 'now there are a couple of methods which could be useful, depending on your requirement, so I will leave them for you to explore.', 'start': 5074.007, 'duration': 9.022}, {'end': 5088.97, 'text': 'the methods are pretty much like what we have already seen in some of the other components.', 'start': 5083.029, 'duration': 5.941}], 'summary': 'The matte accordion component allows multiple panels to be shown simultaneously by setting multi to true, and the toggle icon can be hidden using the hide toggle attribute.', 'duration': 56.379, 'max_score': 5032.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL85032591.jpg'}, {'end': 5274.763, 'src': 'embed', 'start': 5244.506, 'weight': 8, 'content': [{'end': 5246.987, 'text': 'So let me point you to the documentation.', 'start': 5244.506, 'duration': 2.481}, {'end': 5258.009, 'text': 'In components, under layout, card, and then under examples, you can see a full-fledged application of a card.', 'start': 5247.827, 'duration': 10.182}, {'end': 5268.601, 'text': 'It has a header with an avatar, title, subtitle, an image, content and actions.', 'start': 5259.01, 'duration': 9.591}, {'end': 5274.763, 'text': 'you can also build your own cards for a registration form, a login form, pricing section,', 'start': 5268.601, 'duration': 6.162}], 'summary': 'Documentation shows full-fledged card application with header, avatar, title, subtitle, image, content, and actions.', 'duration': 30.257, 'max_score': 5244.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL85244506.jpg'}, {'end': 5345.827, 'src': 'embed', 'start': 5306.842, 'weight': 3, 'content': [{'end': 5309.284, 'text': "Now first up, let's import the tabs module.", 'start': 5306.842, 'duration': 2.442}, {'end': 5316.15, 'text': "So in material.module.ts, we're going to import mat tabs module and add it to the material array.", 'start': 5309.544, 'duration': 6.606}, {'end': 5321.254, 'text': 'Now we can create tabs in the HTML.', 'start': 5319.072, 'duration': 2.182}, {'end': 5324.52, 'text': 'The component is mat-tab-group.', 'start': 5322.179, 'duration': 2.341}, {'end': 5334.363, 'text': 'And within the opening and closing tags, each tab is represented using the mat-tab component.', 'start': 5327.981, 'duration': 6.382}, {'end': 5342.326, 'text': 'Each tab will have a label and the content.', 'start': 5339.565, 'duration': 2.761}, {'end': 5345.827, 'text': "Let's add the labels Angular, React and Vue.", 'start': 5343.006, 'duration': 2.821}], 'summary': 'Import mat tabs module and create tabs with labels angular, react, and vue.', 'duration': 38.985, 'max_score': 5306.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL85306842.jpg'}, {'end': 5422.772, 'src': 'embed', 'start': 5392.673, 'weight': 4, 'content': [{'end': 5396.156, 'text': 'And then we can use interpolation to view the property value.', 'start': 5392.673, 'duration': 3.483}, {'end': 5408.708, 'text': 'tabref.selectedIndex If you take a look at the browser, You can see that initially it displays zero because index starts from zero.', 'start': 5398.438, 'duration': 10.27}, {'end': 5414.67, 'text': 'Click on react, it changes to one and view changes to two.', 'start': 5409.689, 'duration': 4.981}, {'end': 5422.772, 'text': "Now if you want to perform some operation when you're changing tabs, you can listen to the selected tab change event.", 'start': 5416.13, 'duration': 6.642}], 'summary': 'Using interpolation to view property values and handling tab change events in a browser interface.', 'duration': 30.099, 'max_score': 5392.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL85392673.jpg'}, {'end': 5528.499, 'src': 'embed', 'start': 5498.552, 'weight': 0, 'content': [{'end': 5501.412, 'text': 'Now we can create our stepper in the HTML.', 'start': 5498.552, 'duration': 2.86}, {'end': 5506.773, 'text': 'There are two types of steppers, horizontal and vertical.', 'start': 5502.413, 'duration': 4.36}, {'end': 5513.655, 'text': "First, let's take a look at the horizontal stepper and later on switch to the vertical stepper.", 'start': 5507.894, 'duration': 5.761}, {'end': 5520.096, 'text': 'To create a horizontal stepper, we use the matHorizontalStepper component.', 'start': 5515.095, 'duration': 5.001}, {'end': 5528.499, 'text': 'Within this component, to specify the individual steps, we use the mat step component.', 'start': 5522.557, 'duration': 5.942}], 'summary': 'Creating horizontal and vertical steppers in html.', 'duration': 29.947, 'max_score': 5498.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL85498552.jpg'}, {'end': 5733.127, 'src': 'embed', 'start': 5694.008, 'weight': 1, 'content': [{'end': 5699.335, 'text': 'The first step is to add the linear attribute to the matHorizontalStepper component.', 'start': 5694.008, 'duration': 5.327}, {'end': 5707.806, 'text': 'Linear The second step is to add a completed attribute to the individual steps.', 'start': 5701.438, 'duration': 6.368}, {'end': 5712.072, 'text': 'To each step, I will add the attribute and set it to false.', 'start': 5708.707, 'duration': 3.365}, {'end': 5727.944, 'text': 'If you now go back to the browser, I click on billing address and you can see that we are not navigated to step two.', 'start': 5721.161, 'duration': 6.783}, {'end': 5733.127, 'text': 'Step one is not completed and hence we cannot proceed.', 'start': 5728.705, 'duration': 4.422}], 'summary': 'Configure linear attribute for mathorizontalstepper and set completed attribute to false for each step.', 'duration': 39.119, 'max_score': 5694.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL85694008.jpg'}, {'end': 5793.539, 'src': 'embed', 'start': 5762.68, 'weight': 2, 'content': [{'end': 5769.622, 'text': 'after the user interacts with the step, call a method that will update the completed property to true,', 'start': 5762.68, 'duration': 6.942}, {'end': 5772.902, 'text': 'which will then allow the user to navigate to the next step.', 'start': 5769.622, 'duration': 3.28}, {'end': 5780.925, 'text': 'And if at all you do have a step which is optional, you can simply place the optional attribute on that particular step.', 'start': 5774.163, 'duration': 6.762}, {'end': 5785.526, 'text': 'On step two, I will add the attribute optional.', 'start': 5781.805, 'duration': 3.721}, {'end': 5793.539, 'text': 'And now, if you go back to the browser, You can see that we can navigate all the way to step three,', 'start': 5785.546, 'duration': 7.993}], 'summary': 'User interaction updates completed property, enabling navigation to next step; optional attribute placed on step two.', 'duration': 30.859, 'max_score': 5762.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL85762680.jpg'}], 'start': 4790.969, 'title': 'Angular material ui components', 'summary': 'Covers the creation and customization of expansion panels, accordions, and cards in angular material, with a total duration of 3 hours. it also explains the process of creating tabs and steppers, including various functionalities such as navigation, conversion, and making steps optional.', 'chapters': [{'end': 4893.569, 'start': 4790.969, 'title': 'Angular material expansion panels', 'summary': 'Introduces expansion panels and accordions in angular material, demonstrating the process of creating an expansion panel in angular using mat-expansion-panel component and adding a title and description, with a total duration of 3 hours.', 'duration': 102.6, 'highlights': ['Expansion panels are panels that can collapse or expand to display additional details in a view.', 'To create an expansion panel in Angular, mat-expansion-panel component is used, with matPanelTitle for adding the title and matPanelDescription for adding a short description.', 'The process involves importing mat-expansion-module and adding it to the material array in material.module.ts.', 'The video also demonstrates adding content within the expansion panel to be displayed upon expansion.']}, {'end': 5088.97, 'start': 4895.851, 'title': 'Angular material panel and accordion', 'summary': 'Explains how to create a basic expansion panel with angular material and then demonstrates the creation and customization of an accordion, allowing multiple expansion panels to be grouped together, with the ability to control their behavior and appearance.', 'duration': 193.119, 'highlights': ['Creating a basic expansion panel with Angular material The panel content and action row component are added, with the enrollment button and relevant attributes, allowing the creation of a basic expansion panel.', 'Creating and customizing an accordion with multiple expansion panels Demonstrates the duplication of panels and their conversion into an accordion using the MathAccordion component, with the ability to control panel behavior, appearance, and the option to show multiple panels at the same time.', "Hiding the toggle icon on the accordion The ability to hide the toggle icon on the accordion is demonstrated by adding the hide toggle attribute, allowing for customization of the accordion's appearance."]}, {'end': 5274.763, 'start': 5088.97, 'title': 'Angular material: expansion panels, accordions, and cards', 'summary': 'Explains how to create expansion panels and accordions with angular material, and then details the process of creating cards with predefined sections for title, content, and user actions.', 'duration': 185.793, 'highlights': ['The chapter explains how to create expansion panels and accordions with Angular material. Provides an overview of creating expansion panels and accordions.', 'Details the process of creating cards with predefined sections for title, content, and user actions. Explains the step-by-step process of creating cards with predefined sections.']}, {'end': 5785.526, 'start': 5274.763, 'title': 'Angular material: tabs and stepper', 'summary': 'Explains how to create tabs and steppers using angular material, including importing modules, creating tabs with labels and content, using selectedindex property, listening to selected tab change event, creating horizontal and vertical steppers with individual steps, navigating between steps, converting regular stepper to linear stepper, and making steps optional.', 'duration': 510.763, 'highlights': ['Creating tabs with labels and content Describes the process of creating tabs in Angular Material by using the mat-tab-group component and specifying labels and content for each tab.', 'Using selectedIndex property and selected tab change event Explains how to utilize the selectedIndex property to identify the active tab and how to listen to the selected tab change event to perform operations when tabs are changed.', 'Creating horizontal and vertical steppers with individual steps Demonstrates the creation of horizontal and vertical steppers in Angular Material, including the use of matHorizontalStepper component and mat-step component to define individual steps.', 'Converting regular stepper to linear stepper Illustrates the process of converting a regular stepper into a linear stepper by adding the linear attribute to the matHorizontalStepper component and using the completed attribute for individual steps.', 'Making steps optional Describes how to make specific steps optional by adding the optional attribute to the respective step, allowing users to skip those steps if needed.']}], 'duration': 994.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL84790969.jpg', 'highlights': ['Creating horizontal and vertical steppers in Angular Material, including the use of matHorizontalStepper component and mat-step component to define individual steps.', 'Converting regular stepper to linear stepper by adding the linear attribute to the matHorizontalStepper component and using the completed attribute for individual steps.', 'Making specific steps optional by adding the optional attribute to the respective step, allowing users to skip those steps if needed.', 'Creating tabs in Angular Material by using the mat-tab-group component and specifying labels and content for each tab.', 'Utilizing the selectedIndex property to identify the active tab and listening to the selected tab change event to perform operations when tabs are changed.', 'Creating expansion panels in Angular using mat-expansion-panel component with matPanelTitle for adding the title and matPanelDescription for adding a short description.', 'Creating and customizing an accordion with multiple expansion panels using the MathAccordion component, with the ability to control panel behavior, appearance, and the option to show multiple panels at the same time.', "Hiding the toggle icon on the accordion by adding the hide toggle attribute, allowing for customization of the accordion's appearance.", 'Creating cards with predefined sections for title, content, and user actions.']}, {'end': 7171.233, 'segs': [{'end': 5873.659, 'src': 'embed', 'start': 5812.243, 'weight': 0, 'content': [{'end': 5823.308, 'text': 'Simply change matte horizontal stepper to matte vertical stepper And you can see that we have the exact same stepper,', 'start': 5812.243, 'duration': 11.065}, {'end': 5825.99, 'text': 'but this time with vertical orientation.', 'start': 5823.308, 'duration': 2.682}, {'end': 5832.095, 'text': 'Well, that is about components related to layout in Angular Material.', 'start': 5827.992, 'duration': 4.103}, {'end': 5836.438, 'text': "Starting next video, let's take a look at components related to forms.", 'start': 5832.815, 'duration': 3.623}, {'end': 5847.106, 'text': "In this video, let's take a look at the components related to an input in Angular Material.", 'start': 5841.922, 'duration': 5.184}, {'end': 5858.611, 'text': 'when it comes to controls like inputs, text areas and select, we always discuss them in relation to a common wrapper component,', 'start': 5848.666, 'duration': 9.945}, {'end': 5862.053, 'text': 'and that is the form field component.', 'start': 5858.611, 'duration': 3.442}, {'end': 5870.177, 'text': "so when you talk about an input component, you're effectively talking about the form field component and the input component.", 'start': 5862.053, 'duration': 8.124}, {'end': 5873.659, 'text': "let's take a closer look at both those components in this video.", 'start': 5870.177, 'duration': 3.482}], 'summary': 'Angular material layout components explained, upcoming focus on form components.', 'duration': 61.416, 'max_score': 5812.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL85812243.jpg'}, {'end': 6505.46, 'src': 'embed', 'start': 6474.783, 'weight': 2, 'content': [{'end': 6482.465, 'text': 'the next feature possible with material select is grouping related options under a particular subheading,', 'start': 6474.783, 'duration': 7.682}, {'end': 6486.747, 'text': 'and for that we make use of the material option group component.', 'start': 6482.465, 'duration': 4.282}, {'end': 6495.492, 'text': "so, back in vs code, i'm going to replace the existing options with a set of options that are saved in my clipboard.", 'start': 6486.747, 'duration': 8.745}, {'end': 6505.46, 'text': 'So what we now have is mat option for none, and then we have mat option group component with a particular label.', 'start': 6496.193, 'duration': 9.267}], 'summary': 'Material select can group options using mat option group component.', 'duration': 30.677, 'max_score': 6474.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL86474783.jpg'}, {'end': 6705.782, 'src': 'embed', 'start': 6666.547, 'weight': 3, 'content': [{'end': 6672.611, 'text': 'The next step is to create a list of options that need to be displayed as autocomplete options.', 'start': 6666.547, 'duration': 6.064}, {'end': 6677.415, 'text': "So in the component class, I'm going to add three options.", 'start': 6673.632, 'duration': 3.783}, {'end': 6688.103, 'text': 'Angular, React and View.', 'start': 6686.401, 'duration': 1.702}, {'end': 6695.408, 'text': 'The next step is to make use of the autocomplete component to display this list of options.', 'start': 6689.203, 'duration': 6.205}, {'end': 6700.521, 'text': 'The component for autocomplete is mat autocomplete.', 'start': 6696.96, 'duration': 3.561}, {'end': 6705.782, 'text': 'So right after the input element, mat autocomplete.', 'start': 6701.941, 'duration': 3.841}], 'summary': 'Creating 3 autocomplete options using angular, react, and view.', 'duration': 39.235, 'max_score': 6666.547, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL86666547.jpg'}], 'start': 5785.546, 'title': 'Angular material form components and select', 'summary': 'Covers creating horizontal and vertical steppers, form field and input components, customizations such as labels, hints, appearance, and theming, incorporating material select component, using material option group, implementing autocomplete, and filtered autocomplete in angular, with detailed code explanations and browser demonstrations.', 'chapters': [{'end': 6208.642, 'start': 5785.546, 'title': 'Angular material form components', 'summary': 'Covers the creation of horizontal and vertical steppers in angular material, the usage of form field and input components, and the customization options available for these components, such as labels, hints, appearance, and theming.', 'duration': 423.096, 'highlights': ['The chapter covers the creation of horizontal and vertical steppers in Angular Material. Discusses the creation of horizontal and vertical steppers in Angular Material.', 'The usage of form field and input components, and the customization options available for these components, such as labels, hints, appearance, and theming. Explains the usage of form field and input components, along with their customization options.', 'Describes the customization options available for form field components, such as labels, hints, appearance, and theming. Details the customization options available for form field components.']}, {'end': 6474.783, 'start': 6210.084, 'title': 'Material select component', 'summary': 'Explains how to incorporate the material select component in angular forms, including importing the module, creating options with labels and values, and utilizing two-way binding, demonstrating the process through detailed code explanations and browser demonstrations.', 'duration': 264.699, 'highlights': ['The chapter explains how to incorporate the material select component in Angular forms, including importing the module, creating options with labels and values, and utilizing two-way binding. N/A', 'The documentation on how to incorporate error messages with form fields is recommended, as it provides clear guidance. N/A', 'The process of importing the mat select module and adding it to the material array in material.module.ts is demonstrated. N/A', 'Creating options for the select control with labels and values, with a demonstration of displaying the label and corresponding value in the browser. N/A', 'Utilizing two-way binding to track the value of the select control and demonstrating how the value attribute in the HTML reflects the displayed value in the browser. N/A']}, {'end': 6844.686, 'start': 6474.783, 'title': 'Angular material select & autocomplete', 'summary': 'Demonstrates using material option group to group options under subheadings, allowing multiple selections, and implementing autocomplete with angular material, showcasing features like grouping options, allowing multiple selections, and implementing autocomplete with angular material.', 'duration': 369.903, 'highlights': ['Grouping related options under subheadings using Material Option Group Demonstrated using Material Option Group to group options under subheadings like web and mobile, showcasing the grouping of options and the resulting display in the browser.', 'Allowing multiple selections with the select component Implemented the multiple attribute on the select component, enabling the selection of multiple options and displaying them as checkboxes in the browser.', 'Implementing autocomplete with Angular Material Demonstrated the process of creating an autocomplete feature with Angular Material, including importing the module, creating an input element, defining options, and linking the input element with the autocomplete component.']}, {'end': 7171.233, 'start': 6845.707, 'title': 'Implementing filtered autocomplete in angular', 'summary': 'Explains how to implement a filtered autocomplete in angular using reactive forms, including importing the module, creating a form control linked to the input element, and using rxjs to create a filtered list of options.', 'duration': 325.526, 'highlights': ['To implement a filtered autocomplete, you need to have a decent knowledge of AngularForms. The chapter emphasizes the need for a good understanding of AngularForms to implement a filtered autocomplete.', 'Importing reactive forms module and adding it to the imports array is the first step. The first step in implementing a filtered autocomplete is to import the reactive forms module and add it to the imports array in app.module.ts.', 'Creating a form control and linking it to the input element is the second step. The second step involves creating a form control and linking it to the input element in app.component.ts.', 'Using RxJS to create a filtered list of options is the third step. The third step is to use RxJS to create a filtered list of options by making the necessary imports, defining the filtered options property as an observable array of strings, and implementing the ng on init lifecycle hook.']}], 'duration': 1385.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL85785546.jpg', 'highlights': ['Covers creating horizontal and vertical steppers in Angular Material.', 'Explains the usage of form field and input components, along with their customization options.', 'Demonstrated using Material Option Group to group options under subheadings like web and mobile.', 'Demonstrated the process of creating an autocomplete feature with Angular Material.']}, {'end': 7888.994, 'segs': [{'end': 7207.208, 'src': 'embed', 'start': 7173.564, 'weight': 3, 'content': [{'end': 7182.148, 'text': 'So what is happening here is that whenever the input value changes, this code right here is called.', 'start': 7173.564, 'duration': 8.584}, {'end': 7191.793, 'text': 'And in the filter method, we accept the filter text and check if the option includes that filter text.', 'start': 7182.909, 'duration': 8.884}, {'end': 7196.055, 'text': 'If it does, it returns true and gets displayed.', 'start': 7192.834, 'duration': 3.221}, {'end': 7199.177, 'text': 'If not, the option is hidden in the autocomplete.', 'start': 7196.516, 'duration': 2.661}, {'end': 7207.208, 'text': 'final step is to iterate over this filtered options in the html with the async pipe.', 'start': 7200.663, 'duration': 6.545}], 'summary': 'Code filters and displays options based on input value changes.', 'duration': 33.644, 'max_score': 7173.564, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL87173564.jpg'}, {'end': 7426.609, 'src': 'embed', 'start': 7365.783, 'weight': 0, 'content': [{'end': 7371.087, 'text': 'the third checkbox has a primary theme and the last checkbox has a worn theme.', 'start': 7365.783, 'duration': 5.304}, {'end': 7376.672, 'text': 'And that is all there is to customize the checkbox in Angular Material.', 'start': 7372.188, 'duration': 4.484}, {'end': 7380.275, 'text': 'Native checkbox with styling and animations.', 'start': 7377.513, 'duration': 2.762}, {'end': 7385.342, 'text': "Now let's take a look at Angular Material radio buttons.", 'start': 7382.259, 'duration': 3.083}, {'end': 7391.207, 'text': "Again, they're basically native radio buttons with material styling and animations.", 'start': 7386.503, 'duration': 4.704}, {'end': 7395.271, 'text': 'As always, the first step is to import the module.', 'start': 7392.709, 'duration': 2.562}, {'end': 7404.059, 'text': "So in material.module.ts, we're going to import matRadioModule and also add it to the material array.", 'start': 7395.311, 'duration': 8.748}, {'end': 7407.883, 'text': 'Now we can add radio buttons in the HTML.', 'start': 7405.22, 'duration': 2.663}, {'end': 7411.398, 'text': 'There are two main components that we deal with.', 'start': 7408.956, 'duration': 2.442}, {'end': 7413.84, 'text': 'Radio group and radio button.', 'start': 7412.078, 'duration': 1.762}, {'end': 7418.803, 'text': 'Radio buttons are usually placed inside the radio group component.', 'start': 7414.86, 'duration': 3.943}, {'end': 7421.705, 'text': 'So start off with matRadioGroup.', 'start': 7419.284, 'duration': 2.421}, {'end': 7426.609, 'text': 'And within the radio group, we add the radio buttons.', 'start': 7423.607, 'duration': 3.002}], 'summary': 'Customize checkboxes and radio buttons in angular material.', 'duration': 60.826, 'max_score': 7365.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL87365783.jpg'}, {'end': 7746.312, 'src': 'embed', 'start': 7676.333, 'weight': 1, 'content': [{'end': 7679.314, 'text': 'You can even enter a date in the input element.', 'start': 7676.333, 'duration': 2.981}, {'end': 7687.011, 'text': "Let's go with April 6th, 2019.", 'start': 7679.995, 'duration': 7.016}, {'end': 7689.353, 'text': 'And you can see that the date is selected.', 'start': 7687.011, 'duration': 2.342}, {'end': 7694.217, 'text': 'So this is a basic date picker in Angular material.', 'start': 7690.774, 'duration': 3.443}, {'end': 7699.981, 'text': "Now let's take a look at the different configurations possible for this date picker.", 'start': 7695.098, 'duration': 4.883}, {'end': 7704.986, 'text': 'The first one is regarding the starting view of the calendar.', 'start': 7701.343, 'duration': 3.643}, {'end': 7709.769, 'text': 'By default, it will open the month view.', 'start': 7706.166, 'duration': 3.603}, {'end': 7713.633, 'text': 'We can change it using the start view property.', 'start': 7710.61, 'duration': 3.023}, {'end': 7727.476, 'text': 'So on the mat date picker component start view, and you can set this to year, in which case it displays the months of the year,', 'start': 7714.393, 'duration': 13.083}, {'end': 7736.62, 'text': 'or you can also set it to multi-year, in which case it displays multiple years.', 'start': 7727.476, 'duration': 9.144}, {'end': 7746.312, 'text': 'Another typical requirement when working with date pickers is setting a minimum and maximum date that the user can select.', 'start': 7738.487, 'duration': 7.825}], 'summary': 'Angular material date picker with configurable start view and date range.', 'duration': 69.979, 'max_score': 7676.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL87676333.jpg'}, {'end': 7846.742, 'src': 'embed', 'start': 7820.232, 'weight': 2, 'content': [{'end': 7824.555, 'text': 'Now another requirement sometimes is when you have to filter out certain dates.', 'start': 7820.232, 'duration': 4.323}, {'end': 7830.92, 'text': "For example, let's say a user should not be able to pick Saturdays and Sundays.", 'start': 7825.256, 'duration': 5.664}, {'end': 7837.646, 'text': 'You can do that by using the mat date picker filter property of the date picker input.', 'start': 7832.121, 'duration': 5.525}, {'end': 7842.1, 'text': 'So in the component class, you will need to create a filter function.', 'start': 7838.519, 'duration': 3.581}, {'end': 7846.742, 'text': 'Date filter is going to accept date.', 'start': 7843.601, 'duration': 3.141}], 'summary': 'Filter out weekends using mat date picker filter property.', 'duration': 26.51, 'max_score': 7820.232, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL87820232.jpg'}], 'start': 7173.564, 'title': 'Angular material ui components', 'summary': 'Covers the implementation of filter autocomplete, customization of checkboxes and radio buttons, and date pickers using angular material. it includes styling, animations, and theme color customization, as well as configuring properties such as start view, minimum and maximum dates, and filtering out certain dates. specific examples and instructions are provided.', 'chapters': [{'end': 7481.28, 'start': 7173.564, 'title': 'Angular material checkbox and radio buttons', 'summary': 'Demonstrates the implementation of filter autocomplete, customization of checkboxes and radio buttons using angular material, with the addition of styling, animations, and theme color customization.', 'duration': 307.716, 'highlights': ['The chapter demonstrates the implementation of filter autocomplete The code explained involves accepting filter text and checking if the option includes the filter text, with the final step being to iterate over the filtered options in the html with the async pipe.', 'Customization of checkboxes using Angular Material The process involves importing the mat-checkbox-module, adding a material checkbox in the HTML, positioning the label, and customizing the color attribute to accent, primary, or warn, as demonstrated in the example.', 'Customization of radio buttons using Angular Material The process includes importing the matRadioModule, adding radio buttons in the HTML within the radio group component, and customizing the color attribute to accent, primary, or warn, as illustrated in the example.']}, {'end': 7888.994, 'start': 7481.3, 'title': 'Angular material date picker', 'summary': 'Covers the implementation of radio buttons and date pickers in angular material, including the process for creating a basic date picker, configuring its properties such as start view, minimum and maximum dates, and filtering out certain dates, with specific examples and instructions provided.', 'duration': 407.694, 'highlights': ['The chapter covers the implementation of radio buttons and date pickers in Angular Material. Provides an overview of the main topics covered in the chapter.', 'Process for creating a basic date picker in Angular Material. Explains the steps involved in creating a basic date picker using Angular Material, including importing necessary modules and components, and linking the input, icon, and date picker components.', 'Configuring properties such as start view, minimum and maximum dates for the date picker. Details the process of configuring properties like start view, min, and max dates for the date picker, along with code examples and their impact on the date picker functionality.', 'Filtering out certain dates, such as Saturdays and Sundays, from the date picker. Explains the method to filter out specific dates, using the example of preventing selection of Saturdays and Sundays, with a step-by-step guide and code demonstration.']}], 'duration': 715.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL87173564.jpg', 'highlights': ['The chapter covers the implementation of filter autocomplete, customization of checkboxes and radio buttons, and date pickers using Angular Material.', 'Details the process of configuring properties like start view, min, and max dates for the date picker, along with code examples and their impact on the date picker functionality.', 'Explains the method to filter out specific dates, using the example of preventing selection of Saturdays and Sundays, with a step-by-step guide and code demonstration.', 'The code explained involves accepting filter text and checking if the option includes the filter text, with the final step being to iterate over the filtered options in the HTML with the async pipe.', 'Process for creating a basic date picker in Angular Material. Explains the steps involved in creating a basic date picker using Angular Material, including importing necessary modules and components, and linking the input, icon, and date picker components.', 'Customization of checkboxes using Angular Material The process involves importing the mat-checkbox-module, adding a material checkbox in the HTML, positioning the label, and customizing the color attribute to accent, primary, or warn, as demonstrated in the example.', 'Customization of radio buttons using Angular Material The process includes importing the matRadioModule, adding radio buttons in the HTML within the radio group component, and customizing the color attribute to accent, primary, or warn, as illustrated in the example.']}, {'end': 9075.496, 'segs': [{'end': 7925.835, 'src': 'embed', 'start': 7889.814, 'weight': 0, 'content': [{'end': 7896.64, 'text': 'If we now go back to the calendar, you can see that all the Saturdays and Sundays are disabled.', 'start': 7889.814, 'duration': 6.826}, {'end': 7899.477, 'text': 'You can select only the weekdays.', 'start': 7897.776, 'duration': 1.701}, {'end': 7906.702, 'text': 'Alright, that is pretty much the basics of date picker in Angular Material.', 'start': 7901.739, 'duration': 4.963}, {'end': 7914.687, 'text': "Let's take a look at tooltips in this video.", 'start': 7912.026, 'duration': 2.661}, {'end': 7918.61, 'text': "To get started, let's import the tooltip module.", 'start': 7915.768, 'duration': 2.842}, {'end': 7925.835, 'text': 'So in material.module.ts, import matTooltipModule and add it to the material array.', 'start': 7919.35, 'duration': 6.485}], 'summary': 'The date picker in angular material disables weekends and allows selection of weekdays. the video also covers importing and using tooltips.', 'duration': 36.021, 'max_score': 7889.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL87889814.jpg'}, {'end': 7982.767, 'src': 'embed', 'start': 7954.693, 'weight': 1, 'content': [{'end': 7961.777, 'text': 'If we save this and take a look at the browser, you can see that when I hover on the button, we get the tooltip.', 'start': 7954.693, 'duration': 7.084}, {'end': 7963.958, 'text': 'Welcome to Code Evolution.', 'start': 7962.297, 'duration': 1.661}, {'end': 7971.621, 'text': 'And by default, the position of the tooltip is to the bottom of the element, that is below the element.', 'start': 7965.258, 'duration': 6.363}, {'end': 7977.064, 'text': 'The position can be controlled using the mat tooltip position attribute.', 'start': 7972.502, 'duration': 4.562}, {'end': 7982.767, 'text': 'You can specify before, after, above or below.', 'start': 7978.245, 'duration': 4.522}], 'summary': 'Demonstrates tooltip positioning in a web browser using mat tooltip position attribute.', 'duration': 28.074, 'max_score': 7954.693, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL87954693.jpg'}, {'end': 8413.715, 'src': 'embed', 'start': 8368.261, 'weight': 4, 'content': [{'end': 8376.225, 'text': 'Now using this reference, we can subscribe to the after dismissed or on action observables.', 'start': 8368.261, 'duration': 7.964}, {'end': 8379.647, 'text': 'So the first one is after dismissed.', 'start': 8377.665, 'duration': 1.982}, {'end': 8398.24, 'text': 'So snackbar sorry, snagbar ref.afterDismissed.subscribe and we are going to basically log the statement, the snagbar was dismissed.', 'start': 8379.967, 'duration': 18.273}, {'end': 8413.715, 'text': 'Similarly, we also have snagbar ref.onAction.subscribe And over here, we are going to log the statement.', 'start': 8400.281, 'duration': 13.434}], 'summary': 'Subscribing to after dismissed and on action observables to log dismiss and action events.', 'duration': 45.454, 'max_score': 8368.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL88368261.jpg'}, {'end': 8485.448, 'src': 'embed', 'start': 8452.537, 'weight': 3, 'content': [{'end': 8457.022, 'text': 'There is also a third parameter which accepts some configuration.', 'start': 8452.537, 'duration': 4.485}, {'end': 8462.1, 'text': 'The one which would be used mostly is the duration property.', 'start': 8458.359, 'duration': 3.741}, {'end': 8471.123, 'text': 'The duration property indicates the length of time in milliseconds to wait before automatically dismissing the snack bar.', 'start': 8462.88, 'duration': 8.243}, {'end': 8478.606, 'text': 'I will add an object with the property duration and set it to 2000, which is two seconds.', 'start': 8472.164, 'duration': 6.442}, {'end': 8485.448, 'text': 'So comma, an object, duration set to two seconds.', 'start': 8479.506, 'duration': 5.942}], 'summary': 'Config parameter accepts duration property, set to 2000 milliseconds (2 seconds).', 'duration': 32.911, 'max_score': 8452.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL88452537.jpg'}, {'end': 8563.714, 'src': 'embed', 'start': 8513.537, 'weight': 2, 'content': [{'end': 8522.364, 'text': "and when you don't have an action but want to execute some code when the Snackbar is dismissed, place that code in the afterDismissed observable.", 'start': 8513.537, 'duration': 8.827}, {'end': 8528.508, 'text': 'The last point to discuss is about the openFromComponent method.', 'start': 8523.805, 'duration': 4.703}, {'end': 8538.456, 'text': 'As the name indicates, the openFromComponent method creates and opens a Snackbar with a custom component for the content.', 'start': 8529.349, 'duration': 9.107}, {'end': 8540.843, 'text': "Let's take a look at an example.", 'start': 8539.502, 'duration': 1.341}, {'end': 8549.147, 'text': "In the existing component class, which is app.component.ts, I'm going to quickly copy paste another component.", 'start': 8541.863, 'duration': 7.284}, {'end': 8557.191, 'text': 'Now you could create the component in a separate folder, but for simplicity, I have it right here.', 'start': 8551.968, 'duration': 5.223}, {'end': 8563.714, 'text': 'As you can see, the template is a span tag with color set to orange.', 'start': 8558.372, 'duration': 5.342}], 'summary': 'The openfromcomponent method creates a snackbar with a custom component for the content.', 'duration': 50.177, 'max_score': 8513.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL88513537.jpg'}, {'end': 8826.767, 'src': 'heatmap', 'start': 8700.009, 'weight': 6, 'content': [{'end': 8712.332, 'text': 'So button, add the attribute mat raised button, add a click handler which is openDialog.', 'start': 8700.009, 'duration': 12.323}, {'end': 8717.733, 'text': 'And then the button text is going to be openDialog.', 'start': 8714.052, 'duration': 3.681}, {'end': 8722.115, 'text': "Now let's define the openDialog method.", 'start': 8719.654, 'duration': 2.461}, {'end': 8729.477, 'text': 'To be able to actually open the dialog, we need the matDialog service.', 'start': 8724.775, 'duration': 4.702}, {'end': 8734.658, 'text': 'So import matDialog from Angular slash material.', 'start': 8730.877, 'duration': 3.781}, {'end': 8738.42, 'text': 'After importing, we need to inject it.', 'start': 8736.399, 'duration': 2.021}, {'end': 8750.653, 'text': "So constructor Let's go with public dialog of type matDialog, and then we can define the openDialog method.", 'start': 8738.76, 'duration': 11.893}, {'end': 8763.583, 'text': 'Within the body, we are going to have this.dialog.open, and the open method on dialog accepts two parameters.', 'start': 8752.615, 'duration': 10.968}, {'end': 8770.988, 'text': 'The first parameter is a component, and the second parameter is optional configuration.', 'start': 8765.104, 'duration': 5.884}, {'end': 8775.863, 'text': "To pass in a component parameter, let's first create it.", 'start': 8772.162, 'duration': 3.701}, {'end': 8788.185, 'text': 'So in the terminal we use Angular CLI and run the command ng g for generate c for component and the name of the component,', 'start': 8776.563, 'duration': 11.622}, {'end': 8791.086, 'text': 'which is going to be dialog-example.', 'start': 8788.185, 'duration': 2.901}, {'end': 8794.627, 'text': "And I'm also going to skip the test files.", 'start': 8791.646, 'duration': 2.981}, {'end': 8800.588, 'text': 'The command creates a folder for the component and adds it to the app module.', 'start': 8796.287, 'duration': 4.301}, {'end': 8808.143, 'text': 'But a component that is used for a dialog also has to be included in the entry components array.', 'start': 8801.641, 'duration': 6.502}, {'end': 8812.904, 'text': 'So over here, dialog example component.', 'start': 8809.563, 'duration': 3.341}, {'end': 8816.905, 'text': 'Now we can pass this component as our parameter.', 'start': 8814.104, 'duration': 2.801}, {'end': 8826.767, 'text': 'So nav.component.ts, this.dialog.open, and the first parameter is going to be dialog example component.', 'start': 8817.305, 'duration': 9.462}], 'summary': 'Creating and using a dialog in angular with matdialog service and component generation.', 'duration': 38.411, 'max_score': 8700.009, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL88700009.jpg'}, {'end': 9004.01, 'src': 'embed', 'start': 8965.558, 'weight': 7, 'content': [{'end': 8971.92, 'text': 'We can do that using the after closed observable, which conveniently returns a result.', 'start': 8965.558, 'duration': 6.362}, {'end': 8978.781, 'text': 'So back in VS Code in the component class, first create a reference to the dialog.', 'start': 8972.48, 'duration': 6.301}, {'end': 8985.283, 'text': 'So let dialog ref is going to be this dot dialog dot open.', 'start': 8979.642, 'duration': 5.641}, {'end': 8988.824, 'text': 'Now we can subscribe to the observable.', 'start': 8986.643, 'duration': 2.181}, {'end': 8992.185, 'text': 'Dialog ref dot.', 'start': 8989.704, 'duration': 2.481}, {'end': 9004.01, 'text': "after closed dot subscribe, we get a result and let's simply log that to the console dialog.", 'start': 8992.185, 'duration': 11.825}], 'summary': 'Using after closed observable in vs code component class to log a result', 'duration': 38.452, 'max_score': 8965.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL88965558.jpg'}], 'start': 7889.814, 'title': 'Angular material ui components', 'summary': 'Covers the basics of date picker, tooltips, snackbars, and dialog in angular material, including customization and implementation details, with a focus on controlling position, delays, show/hide durations, observables for dismissal and action, duration settings, and custom component integration.', 'chapters': [{'end': 8090.267, 'start': 7889.814, 'title': 'Angular material: date picker and tooltips', 'summary': 'Covers the basics of date picker in angular material and demonstrates how to create and customize tooltips, including controlling position, adding delays, and specifying show and hide durations.', 'duration': 200.453, 'highlights': ['The chapter covers the basics of date picker in Angular Material, including disabling weekends and selecting only weekdays.', 'The tooltip can be associated with a button using mat-tooltip attribute, and its position can be controlled using matTooltip position attribute, specifying before, after, above, or below.', 'The tooltip can have delays for showing and hiding, which can be controlled using showDelay and hideDelay attributes, with a recommended show delay of 600 milliseconds.']}, {'end': 8540.843, 'start': 8091.243, 'title': 'Angular material snackbars', 'summary': 'Covers the implementation of snackbars in angular material, including importing the module, opening a snackbar with a message and action, using observables to handle snackbar dismissal and action, setting the duration for automatic dismissal, and using the openfromcomponent method for custom content.', 'duration': 449.6, 'highlights': ['The openFromComponent method creates and opens a Snackbar with a custom component for the content, expanding the functionality of Snackbars.', 'The duration property can be set to specify the length of time in milliseconds to wait before automatically dismissing the Snackbar, with an example of setting it to 2000 milliseconds for a two-second duration.', 'Observables like afterDismissed and onAction are used to handle Snackbar dismissal and action, demonstrated by logging statements in the console when the Snackbar is dismissed or the action is triggered.', 'Snackbars are implemented as notifications that inform users of some operation that has been performed, appearing for a short duration at the bottom of the screen and not requiring user input to disappear, with only one Snackbar notification displayed at a time.', 'The openSnackbar method is defined to open a Snackbar by using the matSnackbar service, allowing the user to specify a message and an action for the Snackbar.']}, {'end': 9075.496, 'start': 8541.863, 'title': 'Angular material dialog', 'summary': 'Covers adding custom components to app module, creating and customizing a snack bar, and implementing a dialog with title, content, and action buttons, including subscribing to the after closed observable to handle user actions, all within the context of angular material.', 'duration': 533.633, 'highlights': ['Creating and customizing a snack bar with orange color The template includes a span tag with color set to orange, and a custom snack bar is added to the app with a button and a click handler to display it, demonstrating the use of a custom component.', 'Implementing a dialog with title, content, and action buttons The process involves importing mat dialog module, creating a button with a click handler to open the dialog, defining the openDialog method to open the dialog using matDialog service, and customizing the dialog content with directives specifically meant for structuring the dialog.', 'Subscribing to the after closed observable to handle user actions A reference to the dialog is created in the component class, and the after closed observable is subscribed to, returning a result that can be used to handle user actions, such as keeping the user signed in or logging them out, based on the value of the result.']}], 'duration': 1185.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL87889814.jpg', 'highlights': ['The chapter covers the basics of date picker in Angular Material, including disabling weekends and selecting only weekdays.', 'The tooltip can be associated with a button using mat-tooltip attribute, and its position can be controlled using matTooltip position attribute, specifying before, after, above, or below.', 'The openFromComponent method creates and opens a Snackbar with a custom component for the content, expanding the functionality of Snackbars.', 'The duration property can be set to specify the length of time in milliseconds to wait before automatically dismissing the Snackbar, with an example of setting it to 2000 milliseconds for a two-second duration.', 'Observables like afterDismissed and onAction are used to handle Snackbar dismissal and action, demonstrated by logging statements in the console when the Snackbar is dismissed or the action is triggered.', 'Creating and customizing a snack bar with orange color The template includes a span tag with color set to orange, and a custom snack bar is added to the app with a button and a click handler to display it, demonstrating the use of a custom component.', 'Implementing a dialog with title, content, and action buttons The process involves importing mat dialog module, creating a button with a click handler to open the dialog, defining the openDialog method to open the dialog using matDialog service, and customizing the dialog content with directives specifically meant for structuring the dialog.', 'Subscribing to the after closed observable to handle user actions A reference to the dialog is created in the component class, and the after closed observable is subscribed to, returning a result that can be used to handle user actions, such as keeping the user signed in or logging them out, based on the value of the result.']}, {'end': 9961.843, 'segs': [{'end': 9103.836, 'src': 'embed', 'start': 9076.477, 'weight': 0, 'content': [{'end': 9079.799, 'text': "Now there are a couple of steps, so let's go over each of them.", 'start': 9076.477, 'duration': 3.322}, {'end': 9087.166, 'text': 'The first step, specify the data as the second parameter to the dialogue open method.', 'start': 9080.78, 'duration': 6.386}, {'end': 9095.012, 'text': 'So this is going to be an object, the key is going to be data, which in turn is going to be an object.', 'start': 9088.647, 'duration': 6.365}, {'end': 9098.235, 'text': "I'm going to pass a name called Vishwas.", 'start': 9095.452, 'duration': 2.783}, {'end': 9103.836, 'text': 'So this is the second argument to the open method.', 'start': 9100.674, 'duration': 3.162}], 'summary': 'Specify data as the second parameter to the dialogue open method, passing a name called vishwas.', 'duration': 27.359, 'max_score': 9076.477, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL89076477.jpg'}, {'end': 9173.473, 'src': 'embed', 'start': 9138.886, 'weight': 1, 'content': [{'end': 9152.3, 'text': 'so constructor is going to be at inject and we are injecting math dialog data and then we say public data of type any.', 'start': 9138.886, 'duration': 13.414}, {'end': 9159.785, 'text': 'So basically, we are now making the dialog component capable of receiving any type of data.', 'start': 9154.301, 'duration': 5.484}, {'end': 9165.828, 'text': 'Now in the dialog component HTML, we can simply interpolate the data object.', 'start': 9160.605, 'duration': 5.223}, {'end': 9173.473, 'text': "So in mat dialog content, I'm going to add hi data dot name.", 'start': 9166.969, 'duration': 6.504}], 'summary': 'Injecting math dialog data to make component capable of receiving any type of data.', 'duration': 34.587, 'max_score': 9138.886, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL89138886.jpg'}, {'end': 9266.212, 'src': 'embed', 'start': 9230.882, 'weight': 3, 'content': [{'end': 9233.583, 'text': 'The first step as always is to import the module.', 'start': 9230.882, 'duration': 2.701}, {'end': 9241.624, 'text': 'So in material.module.ts, import matTableModule and add it to the material array.', 'start': 9234.183, 'duration': 7.441}, {'end': 9247.866, 'text': 'Now what we are going to do, to save us some time,', 'start': 9244.065, 'duration': 3.801}, {'end': 9257.728, 'text': 'is copy the code for a basic data table and then understand the different parts that are responsible for the functioning of a data table.', 'start': 9247.866, 'duration': 9.862}, {'end': 9266.212, 'text': 'So in the material docs, go to components and then to the data table section and click on the table link.', 'start': 9258.826, 'duration': 7.386}], 'summary': 'Import mattablemodule in material.module.ts and understand the functioning of a data table.', 'duration': 35.33, 'max_score': 9230.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL89230882.jpg'}, {'end': 9789.866, 'src': 'embed', 'start': 9759.06, 'weight': 2, 'content': [{'end': 9762.402, 'text': "Let's start with the displayed columns property.", 'start': 9759.06, 'duration': 3.342}, {'end': 9769.072, 'text': 'This property, as the name suggests, controls the columns to be displayed in the browser.', 'start': 9763.51, 'duration': 5.562}, {'end': 9772.913, 'text': 'As you can see, it is just an array of strings.', 'start': 9770.112, 'duration': 2.801}, {'end': 9785.037, 'text': 'If I were to, for example, remove symbol from this list, take a look at the browser, the column is not displayed.', 'start': 9774.293, 'duration': 10.744}, {'end': 9789.866, 'text': 'So the property controls which of the columns have to be shown.', 'start': 9785.984, 'duration': 3.882}], 'summary': 'The displayed columns property is an array of strings that controls which columns are shown in the browser.', 'duration': 30.806, 'max_score': 9759.06, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL89759060.jpg'}], 'start': 9076.477, 'title': 'Passing data and implementing data table in angular', 'summary': 'Explains passing data to a dialog component in angular with details on specifying data parameters, accessing data, and customizing the dialog. it also covers implementing a basic data table in angular material, including defining data source and columns, creating column templates, and including header and row definitions.', 'chapters': [{'end': 9197.989, 'start': 9076.477, 'title': 'Passing data to dialog component', 'summary': "Explains the process of passing data to a dialog component in angular, including specifying data parameters, accessing data in the component class, and displaying the data in the html content, enabling the dialog to receive any type of data, and customizing the dialog's height and width.", 'duration': 121.512, 'highlights': ['The process involves specifying data as the second parameter to the dialogue open method, passing a name called Vishwas as the second argument, and accessing the data in the dialog component using the matDialogData injection token.', 'Importing and injecting mat dialog data from angular/material, and making the dialog component capable of receiving any type of data by injecting public data of type any in the constructor.', "Interpolating the data object in the dialog component HTML to display the content, such as adding 'hi data.name', which results in displaying 'hi Vishwas' when clicking on open dialog in the browser.", 'The chapter also explains how to specify the height and width for the dialog, which can be passed into the configuration object.']}, {'end': 9961.843, 'start': 9199.55, 'title': 'Implementing data table in angular material', 'summary': 'Covers the step-by-step process of implementing a basic data table in angular material, including importing the module, defining the data source and columns, creating column templates, and including the header and row definitions.', 'duration': 762.293, 'highlights': ['Defining Displayed Columns Property The displayed columns property controls the columns to be displayed in the browser, and the order in which the fields are specified in the property determines the order in which the columns are displayed, providing flexibility to show/hide and reorder columns.', 'Importing Mat Table Module The first step in implementing a data table involves importing the matTableModule and adding it to the material array in material.module.ts, to set up the required module for creating the data table.', 'Creating Data Source and Binding to Table The process of implementing a data table involves creating a data source and binding it to the table using property binding in app.component.html, which is essential for displaying the data in the data table.', 'Defining Column Templates The second step in implementing a data table is to define the column templates by specifying the columns with ngContainer element and using matColumnDef directive to uniquely identify each column, controlling how the header and data cells are displayed.', 'Including Header and Row Definitions The final step in implementing a data table includes including the header and row definitions using matHeaderRow and matRow components, with the mat header row def and mat row def structural directives to specify the columns to be displayed and the order of data cells to be rendered.']}], 'duration': 885.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL89076477.jpg', 'highlights': ['The process involves specifying data as the second parameter to the dialogue open method, passing a name called Vishwas as the second argument, and accessing the data in the dialog component using the matDialogData injection token.', 'Importing and injecting mat dialog data from angular/material, and making the dialog component capable of receiving any type of data by injecting public data of type any in the constructor.', 'Defining Displayed Columns Property The displayed columns property controls the columns to be displayed in the browser, and the order in which the fields are specified in the property determines the order in which the columns are displayed, providing flexibility to show/hide and reorder columns.', 'Importing Mat Table Module The first step in implementing a data table involves importing the matTableModule and adding it to the material array in material.module.ts, to set up the required module for creating the data table.']}, {'end': 11027.978, 'segs': [{'end': 10325.634, 'src': 'embed', 'start': 10298.188, 'weight': 2, 'content': [{'end': 10301.891, 'text': "Alright, in the next video, let's take a look at sorting in data tables.", 'start': 10298.188, 'duration': 3.703}, {'end': 10310.9, 'text': "In this video, let's take a look at sorting in data tables.", 'start': 10307.437, 'duration': 3.463}, {'end': 10318.849, 'text': 'Just like filtering, Angular Material makes it really simple to implement the sorting feature for your data table.', 'start': 10312.304, 'duration': 6.545}, {'end': 10321.15, 'text': 'Now there are three simple steps.', 'start': 10319.769, 'duration': 1.381}, {'end': 10325.634, 'text': 'The first step is to import the material sorting module.', 'start': 10321.851, 'duration': 3.783}], 'summary': 'Next video covers sorting in data tables, with 3 simple steps.', 'duration': 27.446, 'max_score': 10298.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL810298188.jpg'}, {'end': 10567.053, 'src': 'embed', 'start': 10529.645, 'weight': 1, 'content': [{'end': 10539.257, 'text': 'so in material.module.ts, import mat paginator module and add it to the material array.', 'start': 10529.645, 'duration': 9.612}, {'end': 10544.603, 'text': 'second step we add the paginator component in the html.', 'start': 10539.257, 'duration': 5.346}, {'end': 10553.122, 'text': 'so after mat table mat paginator, We are going to specify two options to the paginator.', 'start': 10544.603, 'duration': 8.519}, {'end': 10556.485, 'text': 'The first one is the page size.', 'start': 10553.883, 'duration': 2.602}, {'end': 10563.07, 'text': 'We specify that using the page size options property.', 'start': 10556.485, 'duration': 6.585}, {'end': 10567.053, 'text': "Let's go with 5, 10 and 20.", 'start': 10563.07, 'duration': 3.983}], 'summary': 'Configure mat-paginator with 5, 10, and 20 page size options.', 'duration': 37.408, 'max_score': 10529.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL810529645.jpg'}, {'end': 10731.868, 'src': 'embed', 'start': 10703.611, 'weight': 0, 'content': [{'end': 10707.515, 'text': "In this video, let's take a look at virtual scrolling with Angular CDK.", 'start': 10703.611, 'duration': 3.904}, {'end': 10715.183, 'text': 'Sometimes you might have to display hundreds or thousands of elements, which can be slow in any browser.', 'start': 10709.181, 'duration': 6.002}, {'end': 10718.744, 'text': 'Virtual scrolling will help you in such situations.', 'start': 10716.163, 'duration': 2.581}, {'end': 10728.827, 'text': 'With virtual scrolling, you can display large lists of elements performantly by only rendering the items that fit on the screen.', 'start': 10719.824, 'duration': 9.003}, {'end': 10731.868, 'text': "Let's see how that can be done in this video.", 'start': 10729.927, 'duration': 1.941}], 'summary': 'Angular cdk enables performant display of large element lists using virtual scrolling.', 'duration': 28.257, 'max_score': 10703.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL810703611.jpg'}], 'start': 9962.644, 'title': 'Implementing angular data table features', 'summary': 'Discusses handling events on row data, implementing filtering, sorting, and pagination in angular material data tables, and utilizing virtual scrolling with angular cdk. it provides quantifiable data on the impact of the features and the reduction in the number of rendered elements.', 'chapters': [{'end': 10019.036, 'start': 9962.644, 'title': 'Handling events on row data', 'summary': 'Explains the row declaration, which allows handling events on each row in a data table, by adding a click event binding and calling a method to provide the row data, resulting in the corresponding row data being logged in the console when clicking on a row.', 'duration': 56.392, 'highlights': ['The chapter explains the row declaration, which allows handling events on each row in a data table. This is the main topic of the chapter, providing context for the subsequent highlights.', 'Adding a click event binding and calling a method to provide the row data. Describes the specific process of handling events on the row data.', 'The corresponding row data being logged in the console when clicking on a row. Quantifies the result of the event handling, emphasizing the practical outcome of the process.']}, {'end': 10703.211, 'start': 10020.037, 'title': 'Angular material data table', 'summary': 'Covers the implementation of filtering, sorting, and pagination in angular material data tables, highlighting the simplicity and effectiveness of these features, including providing quantifiable data such as the steps and the impact of the implementation.', 'duration': 683.174, 'highlights': ['Filtering can be achieved in three simple steps, involving creating the data source, adding an input field, and defining the apply filter method, allowing for efficient data filtering based on user input, as demonstrated through the filtering of text and numeric values. Filtering can be achieved in three simple steps, involving creating the data source, adding an input field, and defining the apply filter method. This allows for efficient data filtering based on user input, as demonstrated through the filtering of text and numeric values.', 'Sorting in data tables involves importing the material sorting module, adding directives in the HTML, and providing the mat sort directive to the data source, showcasing the simplicity and effectiveness of the sorting feature, with practical demonstrations of ascending, descending, and no sort options. Sorting in data tables involves importing the material sorting module, adding directives in the HTML, and providing the mat sort directive to the data source. This showcases the simplicity and effectiveness of the sorting feature, with practical demonstrations of ascending, descending, and no sort options.', 'Pagination implementation is demonstrated in three simple steps, including importing the material paginator module, adding the paginator component in the HTML, and providing the mat paginator directive to the data source, highlighting the customizability and functionality of pagination with options for page size and navigation. Pagination implementation is demonstrated in three simple steps, including importing the material paginator module, adding the paginator component in the HTML, and providing the mat paginator directive to the data source. This highlights the customizability and functionality of pagination with options for page size and navigation.']}, {'end': 11027.978, 'start': 10703.611, 'title': 'Virtual scrolling with angular cdk', 'summary': 'Discusses implementing virtual scrolling with angular cdk to display large lists of elements performantly, by only rendering the items that fit on the screen, using angular cdk scrolling module and cdkvirtual4 directive, reducing the number of rendered elements from a thousand to only a handful.', 'duration': 324.367, 'highlights': ['By implementing virtual scrolling with Angular CDK, large lists of elements can be displayed performantly by only rendering the items that fit on the screen, reducing the number of rendered elements from a thousand to only a handful.', 'The first step involves importing the scrolling module from Angular CDK in app.module.ts and adding it to the imports array to enable virtual scrolling.', 'Creating a viewport for the virtual scroll and defining the item size attribute, along with specifying a height for the viewport, allows displaying only a handful of elements at a time, significantly improving performance.', 'Observing the DOM tree reveals that instead of rendering all the thousand elements, only a handful of them are now rendered, and as the user scrolls, the DOM nodes update to reflect the numbers being displayed, demonstrating the efficiency of virtual scrolling.']}], 'duration': 1065.334, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jUfEn032IL8/pics/jUfEn032IL89962644.jpg', 'highlights': ['By implementing virtual scrolling with Angular CDK, large lists of elements can be displayed performantly by only rendering the items that fit on the screen, reducing the number of rendered elements from a thousand to only a handful.', 'Pagination implementation is demonstrated in three simple steps, including importing the material paginator module, adding the paginator component in the HTML, and providing the mat paginator directive to the data source, highlighting the customizability and functionality of pagination with options for page size and navigation.', 'Sorting in data tables involves importing the material sorting module, adding directives in the HTML, and providing the mat sort directive to the data source, showcasing the simplicity and effectiveness of the sorting feature, with practical demonstrations of ascending, descending, and no sort options.']}], 'highlights': ['Angular Material provides typography levels with distinct font sizes, font weight, and line height for text content on websites.', 'The tutorial on angular material covers ui components, typography, icons, badges, navigation, menus, form components, expansion panels, cards, date pickers, tooltips, snackbars, dialogs, data tables, filtering, sorting, pagination, and virtual scrolling, with a total duration of 3 hours.', 'The chapter covers the basics of date picker in Angular Material, including disabling weekends and selecting only weekdays.', 'By implementing virtual scrolling with Angular CDK, large lists of elements can be displayed performantly by only rendering the items that fit on the screen, reducing the number of rendered elements from a thousand to only a handful.', 'The process involves specifying data as the second parameter to the dialogue open method, passing a name called Vishwas as the second argument, and accessing the data in the dialog component using the matDialogData injection token.', 'The chapter introduces the usage of progress spinner and toolbar as a navbar in Angular material.', 'The chapter covers the implementation of filter autocomplete, customization of checkboxes and radio buttons, and date pickers using Angular Material.', 'The chapter discusses the prerequisites for adding Angular Material to an Angular application, emphasizing the knowledge of HTML, CSS, JavaScript, and basic Angular.', 'The mat icon component accepts material icon fonts, enabling the display of various material icons in the application.', 'The chapter provides guidance on accessing the value, listening to change events, and executing code for button toggle elements.']}