title
Angular Material Tutorial | Mosh

description
🔥Get the COMPLETE COURSE (60% OFF - LIMITED TIME): https://programmingwithmosh.com/courses/angular Learn to use Angular Material Design to make your Angular applications look modern and beautiful. TABLE OF CONTENT 00:00 Introduction 00:43 What is Angular Material 05:14 Installing Angular Material 12:45 Check Boxes 17:14 Radio Buttons 22:58 Selects 26:06 Inputs RELATED VIDEOS Angular 4 Tutorial for Beginners https://youtu.be/k5E2AVpwsko Angular Version History https://youtu.be/9AaRJ8COXdM MY OTHER COURSES I have several other courses on web and mobile application development. You can find them all here: http://programmingwithmosh.com/courses STAY IN TOUCH https://www.facebook.com/programmingwithmosh/ https://twitter.com/moshhamedani

detail
{'title': 'Angular Material Tutorial | Mosh', 'heatmap': [{'end': 611.601, 'start': 478.592, 'weight': 1}, {'end': 763.04, 'start': 740.322, 'weight': 0.72}], 'summary': "Tutorial 'angular material tutorial | mosh' introduces angular material, emphasizing its components, internationalization, clean api, and customization, covers angular material vs. bootstrap, installation, checkbox and radio button components, module import, and input controls, providing examples and tips for usage.", 'chapters': [{'end': 183.427, 'segs': [{'end': 26.118, 'src': 'embed', 'start': 2.185, 'weight': 2, 'content': [{'end': 9.889, 'text': "In this section, we're going to look at Angular Material, which is a collection of components that give our applications a modern look and feel.", 'start': 2.185, 'duration': 7.704}, {'end': 19.654, 'text': "More specifically, you're going to learn how to work with various kinds of components, such as form controls, icons, dialog boxes, progress spinners,", 'start': 10.67, 'duration': 8.984}, {'end': 20.675, 'text': 'tooltips and so on.', 'start': 19.654, 'duration': 1.021}, {'end': 26.118, 'text': "You're going to learn how to use the pre-built themes, as well as create a custom theme.", 'start': 21.315, 'duration': 4.803}], 'summary': 'Learn to use angular material components for modern app look and feel, including form controls, icons, dialog boxes, and themes.', 'duration': 23.933, 'max_score': 2.185, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU2185.jpg'}, {'end': 70.881, 'src': 'embed', 'start': 47.491, 'weight': 0, 'content': [{'end': 54.974, 'text': 'Angular Material is a library of reusable and high quality UI components that are built with Angular and TypeScript.', 'start': 47.491, 'duration': 7.483}, {'end': 60.516, 'text': 'These components are internationalized, so users with different languages can use them.', 'start': 55.694, 'duration': 4.822}, {'end': 63.177, 'text': 'They have a clean and simple API.', 'start': 61.077, 'duration': 2.1}, {'end': 66.159, 'text': "They're well tested with unit and integration tests.", 'start': 63.417, 'duration': 2.742}, {'end': 67.679, 'text': "They're customizable.", 'start': 66.659, 'duration': 1.02}, {'end': 70.881, 'text': "They're very fast and have minimal performance overhead.", 'start': 67.899, 'duration': 2.982}], 'summary': 'Angular material: reusable ui components built with angular and typescript, internationalized, well tested, customizable, and fast.', 'duration': 23.39, 'max_score': 47.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU47491.jpg'}, {'end': 126.712, 'src': 'embed', 'start': 98.055, 'weight': 3, 'content': [{'end': 101.937, 'text': 'we have layout components like lists, cars, grids.', 'start': 98.055, 'duration': 3.882}, {'end': 109.42, 'text': "we've got buttons, indicators and icons, pop-ups and models and data table.", 'start': 101.937, 'duration': 7.483}, {'end': 112.382, 'text': 'so let me show you a few of these in action.', 'start': 109.42, 'duration': 2.962}, {'end': 116.303, 'text': 'the first one i want to show you is under form controls.', 'start': 112.382, 'duration': 3.921}, {'end': 120.285, 'text': "so here let's go to this check box.", 'start': 116.303, 'duration': 3.982}, {'end': 126.712, 'text': 'so here on the examples tab, You can see these checkboxes and radio buttons in action.', 'start': 120.285, 'duration': 6.427}], 'summary': 'The presentation covered various layout components such as lists, cards, and grids, along with form controls like checkboxes and radio buttons.', 'duration': 28.657, 'max_score': 98.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU98055.jpg'}, {'end': 183.427, 'src': 'embed', 'start': 156.113, 'weight': 4, 'content': [{'end': 160.635, 'text': "So under pop-ups and models, let's take a look at the dialogue.", 'start': 156.113, 'duration': 4.522}, {'end': 168.287, 'text': 'Once again, under the examples tab, So here we have a button, launch dialog.', 'start': 162.416, 'duration': 5.871}, {'end': 172.272, 'text': 'And when we click this, we get a dialog with a nice animation.', 'start': 169.248, 'duration': 3.024}, {'end': 173.374, 'text': 'One more time.', 'start': 172.913, 'duration': 0.461}, {'end': 176.478, 'text': 'See, it has a very nice animation.', 'start': 174.636, 'duration': 1.842}, {'end': 183.427, 'text': 'Now, a question that you might have is that we already have the concept of dialogs in Bootstrap.', 'start': 177.56, 'duration': 5.867}], 'summary': 'Demonstrated pop-up and model dialogue with animations in bootstrap.', 'duration': 27.314, 'max_score': 156.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU156113.jpg'}], 'start': 2.185, 'title': 'Angular material components', 'summary': 'Introduces angular material, a library of reusable ui components built with angular and typescript, emphasizing its internationalization, clean api, customization, speed, and minimal performance overhead. it also covers the various components available in angular material, including form controls, navigation components, layout components, buttons, indicators, icons, pop-ups, and models, providing examples and demonstrations of their functionality.', 'chapters': [{'end': 70.881, 'start': 2.185, 'title': 'Angular material overview', 'summary': 'Introduces angular material, a library of reusable ui components built with angular and typescript, emphasizing its internationalization, clean api, customization, speed, and minimal performance overhead.', 'duration': 68.696, 'highlights': ['Angular Material is a library of reusable and high quality UI components that are built with Angular and TypeScript, featuring internationalization and a clean and simple API.', 'The components are well tested with unit and integration tests, customizable, and offer minimal performance overhead, making them fast and efficient.']}, {'end': 183.427, 'start': 71.541, 'title': 'Angular material components', 'summary': 'Introduces the various components available in angular material, including form controls, navigation components, layout components, buttons, indicators, icons, pop-ups, and models, providing examples and demonstrations of their functionality.', 'duration': 111.886, 'highlights': ['The chapter introduces various components available in Angular Material, including form controls, navigation components, layout components, buttons, indicators, icons, pop-ups, and models.', 'Examples of form controls demonstrated include checkboxes and radio buttons, showcasing their appearance and animations.', 'A demonstration of pop-ups and models is provided, with a focus on the dialogue component and its animations.']}], 'duration': 181.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU2185.jpg', 'highlights': ['Angular Material is a library of reusable and high quality UI components that are built with Angular and TypeScript, featuring internationalization and a clean and simple API.', 'The components are well tested with unit and integration tests, customizable, and offer minimal performance overhead, making them fast and efficient.', 'The chapter introduces various components available in Angular Material, including form controls, navigation components, layout components, buttons, indicators, icons, pop-ups, and models.', 'Examples of form controls demonstrated include checkboxes and radio buttons, showcasing their appearance and animations.', 'A demonstration of pop-ups and models is provided, with a focus on the dialogue component and its animations.']}, {'end': 476.117, 'segs': [{'end': 234.428, 'src': 'embed', 'start': 207.609, 'weight': 0, 'content': [{'end': 213.671, 'text': 'We need to create custom directives or custom components and do some magic in order to use those components.', 'start': 207.609, 'duration': 6.062}, {'end': 219.434, 'text': 'Angular material, on the other hand, is built specifically for Angular applications.', 'start': 214.672, 'duration': 4.762}, {'end': 221.235, 'text': "So we don't have to do anything magical.", 'start': 219.714, 'duration': 1.521}, {'end': 228.398, 'text': 'We can simply import a module and use Angular material components just like how we use our custom components.', 'start': 221.575, 'duration': 6.823}, {'end': 231.302, 'text': 'also in terms of the aesthetics.', 'start': 229.338, 'duration': 1.964}, {'end': 234.428, 'text': 'bootstrap has a different design language.', 'start': 231.302, 'duration': 3.126}], 'summary': 'Angular material simplifies component usage without magic, while bootstrap has different design language.', 'duration': 26.819, 'max_score': 207.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU207609.jpg'}, {'end': 317.465, 'src': 'embed', 'start': 273.216, 'weight': 1, 'content': [{'end': 274.798, 'text': 'So then you might have to use Bootstrap.', 'start': 273.216, 'duration': 1.582}, {'end': 281.262, 'text': 'But, as I told you before, because we cannot use Bootstrap, JavaScript easily in our Angular applications,', 'start': 275.258, 'duration': 6.004}, {'end': 284.764, 'text': 'we have to use third-party components that are based on Bootstrap.', 'start': 281.262, 'duration': 3.502}, {'end': 290.588, 'text': 'And that means our application is going to have a lot of dependencies to libraries built by others.', 'start': 285.305, 'duration': 5.283}, {'end': 293.29, 'text': 'And these libraries can break at any time.', 'start': 291.148, 'duration': 2.142}, {'end': 302.176, 'text': "so. that's why I personally prefer angular material, because all these components are built with the same list of quality standards,", 'start': 294.13, 'duration': 8.046}, {'end': 307.979, 'text': "they have a common API, they're well tested and we can easily use them in our angular applications.", 'start': 302.176, 'duration': 5.803}, {'end': 309.74, 'text': 'so enough theory.', 'start': 307.979, 'duration': 1.761}, {'end': 316.945, 'text': "next, we're going to install angular material in our project.", 'start': 309.74, 'duration': 7.205}, {'end': 317.465, 'text': 'in this lecture.', 'start': 316.945, 'duration': 0.52}], 'summary': 'Using angular material reduces dependencies, ensures quality, and provides common api for components.', 'duration': 44.249, 'max_score': 273.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU273216.jpg'}, {'end': 369.907, 'src': 'embed', 'start': 341.169, 'weight': 3, 'content': [{'end': 345.531, 'text': "under this guides page, you'll find this guide getting started,", 'start': 341.169, 'duration': 4.362}, {'end': 352.194, 'text': 'And this shows you all the steps that you need to follow in order to add Angular material to a project.', 'start': 346.751, 'duration': 5.443}, {'end': 355.256, 'text': 'So now let me show you these steps in action.', 'start': 353.175, 'duration': 2.081}, {'end': 362.26, 'text': "First in the terminal, just like the previous sections, I'm going to create a new project using Angular CLI.", 'start': 356.677, 'duration': 5.583}, {'end': 366.022, 'text': 'So ng new material-demo.', 'start': 363.021, 'duration': 3.001}, {'end': 369.907, 'text': 'All right, beautiful.', 'start': 369.266, 'duration': 0.641}], 'summary': 'Guide shows steps to add angular material to a project using angular cli.', 'duration': 28.738, 'max_score': 341.169, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU341169.jpg'}, {'end': 481.293, 'src': 'embed', 'start': 455.546, 'weight': 4, 'content': [{'end': 461.049, 'text': 'So Hammer.js is a powerful library that allows you to add gesture support to your pages.', 'start': 455.546, 'duration': 5.503}, {'end': 465.411, 'text': 'For example, you may tap with your finger or swipe or rotate and so on.', 'start': 461.449, 'duration': 3.962}, {'end': 472.935, 'text': 'Now, once again, this is an optional dependency, but I recommend you to add it to your application to make it more accessible.', 'start': 466.932, 'duration': 6.003}, {'end': 476.117, 'text': "All right, now let's install these dependencies.", 'start': 472.955, 'duration': 3.162}, {'end': 481.293, 'text': 'All right, so the first step was to install these dependencies.', 'start': 478.592, 'duration': 2.701}], 'summary': 'Hammer.js adds gesture support, making pages more accessible.', 'duration': 25.747, 'max_score': 455.546, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU455546.jpg'}], 'start': 184.008, 'title': 'Angular material and bootstrap in angular', 'summary': "Compares angular material and bootstrap, emphasizing angular material's design for angular, making it easier to use, and the additional work and dependencies required for integrating bootstrap. it also discusses the benefits, installation process, essential and optional packages, and recommends adding gesture support using hammer.js for improved accessibility.", 'chapters': [{'end': 293.29, 'start': 184.008, 'title': 'Angular material vs bootstrap', 'summary': 'Compares using angular material and bootstrap in angular applications, highlighting that angular material is specifically designed for angular, making it easier to use, while bootstrap, though more established, may require additional work and dependencies to integrate with angular.', 'duration': 109.282, 'highlights': ['Angular Material is specifically designed for Angular applications, making it easier to use without the need for custom directives or components.', 'Bootstrap, being older and based on plain old javascript, requires additional work and potential dependencies to use in Angular applications.', 'Angular Material is based on the material design language developed by Google in 2014, offering a consistent look and feel with Google applications.', 'Bootstrap components have a different design language compared to Angular Material, which may affect the aesthetics of the application.', 'Angular Material, although newer, may not have all the components available in Bootstrap, particularly for complex user interfaces.']}, {'end': 476.117, 'start': 294.13, 'title': 'Angular material installation', 'summary': 'Discusses the benefits of using angular material, guides through the installation process, including the installation of essential and optional packages, and recommends adding gesture support using hammer.js for improved accessibility.', 'duration': 181.987, 'highlights': ['Benefits of Angular Material Angular Material provides components built with quality standards, a common API, and easy integration with Angular applications, enhancing development efficiency and consistency.', 'Installation of Angular Material The installation process involves creating a new project using Angular CLI, installing essential packages such as Angular CDK and Angular Material, and optionally adding animation and gesture support for improved user experience.', 'Optional Package: Hammer.js Hammer.js is recommended for adding gesture support to applications, allowing users to perform actions such as tapping, swiping, and rotating, thus enhancing accessibility and user interaction.']}], 'duration': 292.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU184008.jpg', 'highlights': ['Angular Material is specifically designed for Angular applications, making it easier to use without the need for custom directives or components.', 'Bootstrap, being older and based on plain old javascript, requires additional work and potential dependencies to use in Angular applications.', 'Angular Material provides components built with quality standards, a common API, and easy integration with Angular applications, enhancing development efficiency and consistency.', 'Installation of Angular Material involves creating a new project using Angular CLI, installing essential packages such as Angular CDK and Angular Material, and optionally adding animation and gesture support for improved user experience.', 'Optional Package: Hammer.js is recommended for adding gesture support to applications, allowing users to perform actions such as tapping, swiping, and rotating, thus enhancing accessibility and user interaction.']}, {'end': 771.911, 'segs': [{'end': 547.151, 'src': 'embed', 'start': 478.592, 'weight': 0, 'content': [{'end': 481.293, 'text': 'All right, so the first step was to install these dependencies.', 'start': 478.592, 'duration': 2.701}, {'end': 483.554, 'text': 'Next, we need to include a theme.', 'start': 481.893, 'duration': 1.661}, {'end': 486.015, 'text': "So let's go to Visual Studio Code.", 'start': 484.294, 'duration': 1.721}, {'end': 495.258, 'text': 'Here under node modules, under at Angular, you can find the material folder.', 'start': 488.076, 'duration': 7.182}, {'end': 498.8, 'text': 'And here we have these pre-built themes.', 'start': 496.519, 'duration': 2.281}, {'end': 501.341, 'text': 'So we have a bunch of themes.', 'start': 500.26, 'duration': 1.081}, {'end': 502.221, 'text': "They're beautiful.", 'start': 501.541, 'duration': 0.68}, {'end': 507.323, 'text': "The one I'm going to use is indigo-pink, but you might use any other that you prefer.", 'start': 502.741, 'duration': 4.582}, {'end': 511.711, 'text': "So let's go to styles.css.", 'start': 508.689, 'duration': 3.022}, {'end': 517.034, 'text': 'We need to import a theme, just the same way we imported Bootstrap before.', 'start': 512.792, 'duration': 4.242}, {'end': 519.336, 'text': 'So at import.', 'start': 517.794, 'duration': 1.542}, {'end': 523.259, 'text': 'And here we add the relative path from node modules.', 'start': 520.457, 'duration': 2.802}, {'end': 536.127, 'text': 'So start with a tilde at Angular slash material slash prebuilt-themes slash indigo-pink.css.', 'start': 523.759, 'duration': 12.368}, {'end': 543.068, 'text': "Make sure to spell it properly, otherwise it's not going to work.", 'start': 539.966, 'duration': 3.102}, {'end': 544.989, 'text': 'So this was our second step.', 'start': 543.708, 'duration': 1.281}, {'end': 547.151, 'text': 'And now the final step.', 'start': 545.99, 'duration': 1.161}], 'summary': 'Install dependencies, include theme in visual studio code, import indigo-pink theme in styles.css.', 'duration': 68.559, 'max_score': 478.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU478592.jpg'}, {'end': 611.601, 'src': 'heatmap', 'start': 478.592, 'weight': 1, 'content': [{'end': 481.293, 'text': 'All right, so the first step was to install these dependencies.', 'start': 478.592, 'duration': 2.701}, {'end': 483.554, 'text': 'Next, we need to include a theme.', 'start': 481.893, 'duration': 1.661}, {'end': 486.015, 'text': "So let's go to Visual Studio Code.", 'start': 484.294, 'duration': 1.721}, {'end': 495.258, 'text': 'Here under node modules, under at Angular, you can find the material folder.', 'start': 488.076, 'duration': 7.182}, {'end': 498.8, 'text': 'And here we have these pre-built themes.', 'start': 496.519, 'duration': 2.281}, {'end': 501.341, 'text': 'So we have a bunch of themes.', 'start': 500.26, 'duration': 1.081}, {'end': 502.221, 'text': "They're beautiful.", 'start': 501.541, 'duration': 0.68}, {'end': 507.323, 'text': "The one I'm going to use is indigo-pink, but you might use any other that you prefer.", 'start': 502.741, 'duration': 4.582}, {'end': 511.711, 'text': "So let's go to styles.css.", 'start': 508.689, 'duration': 3.022}, {'end': 517.034, 'text': 'We need to import a theme, just the same way we imported Bootstrap before.', 'start': 512.792, 'duration': 4.242}, {'end': 519.336, 'text': 'So at import.', 'start': 517.794, 'duration': 1.542}, {'end': 523.259, 'text': 'And here we add the relative path from node modules.', 'start': 520.457, 'duration': 2.802}, {'end': 536.127, 'text': 'So start with a tilde at Angular slash material slash prebuilt-themes slash indigo-pink.css.', 'start': 523.759, 'duration': 12.368}, {'end': 543.068, 'text': "Make sure to spell it properly, otherwise it's not going to work.", 'start': 539.966, 'duration': 3.102}, {'end': 544.989, 'text': 'So this was our second step.', 'start': 543.708, 'duration': 1.281}, {'end': 547.151, 'text': 'And now the final step.', 'start': 545.99, 'duration': 1.161}, {'end': 550.453, 'text': 'We need to go to app.module.', 'start': 548.051, 'duration': 2.402}, {'end': 557.117, 'text': 'Here, if you want to add animation support, you need to import browser animations module.', 'start': 551.934, 'duration': 5.183}, {'end': 561.42, 'text': 'Otherwise, you need to import noop animations module.', 'start': 557.777, 'duration': 3.643}, {'end': 562.46, 'text': 'So let me show you.', 'start': 561.82, 'duration': 0.64}, {'end': 579.241, 'text': 'So, if you previously installed Angular animations, You need to import browser animations module from at angular slash platform.', 'start': 563.761, 'duration': 15.48}, {'end': 581.661, 'text': 'dash browser slash animations.', 'start': 579.241, 'duration': 2.42}, {'end': 589.084, 'text': 'Okay So this is the implementation of the animations module in a browser.', 'start': 584.082, 'duration': 5.002}, {'end': 597.537, 'text': "Now if you don't want to have animations, instead of browser animations module, you need to import noop animations module.", 'start': 590.475, 'duration': 7.062}, {'end': 606.5, 'text': "So I'm going to select this line, duplicate, and change this module to noop animations module.", 'start': 598.297, 'duration': 8.203}, {'end': 611.601, 'text': 'So now we need to import one of these modules into our ng module.', 'start': 607.62, 'duration': 3.981}], 'summary': 'Install dependencies, add theme, and import modules in angular app.', 'duration': 133.009, 'max_score': 478.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU478592.jpg'}, {'end': 611.601, 'src': 'embed', 'start': 584.082, 'weight': 5, 'content': [{'end': 589.084, 'text': 'Okay So this is the implementation of the animations module in a browser.', 'start': 584.082, 'duration': 5.002}, {'end': 597.537, 'text': "Now if you don't want to have animations, instead of browser animations module, you need to import noop animations module.", 'start': 590.475, 'duration': 7.062}, {'end': 606.5, 'text': "So I'm going to select this line, duplicate, and change this module to noop animations module.", 'start': 598.297, 'duration': 8.203}, {'end': 611.601, 'text': 'So now we need to import one of these modules into our ng module.', 'start': 607.62, 'duration': 3.981}], 'summary': 'Implementing animations module in a browser, importing noop animations module instead of browser animations module, and selecting and importing the modules into ng module.', 'duration': 27.519, 'max_score': 584.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU584082.jpg'}, {'end': 763.04, 'src': 'heatmap', 'start': 681.364, 'weight': 6, 'content': [{'end': 691.746, 'text': 'md-checkbox is not a known element because we have used a custom component, but we have not imported this component into our app module.', 'start': 681.364, 'duration': 10.382}, {'end': 694.007, 'text': "so let's go to app.module.", 'start': 691.746, 'duration': 2.261}, {'end': 700.522, 'text': 'Every component in Angular Material is defined in a separate module.', 'start': 696.34, 'duration': 4.182}, {'end': 708.106, 'text': 'So we need to go on the top, import this module here, and then add it to the imports array of our ng module.', 'start': 701.363, 'duration': 6.743}, {'end': 713.589, 'text': 'But how do we know what module a component is defining? Very easy.', 'start': 708.767, 'duration': 4.822}, {'end': 717.271, 'text': 'We go to material.angular.io.', 'start': 714.169, 'duration': 3.102}, {'end': 722.053, 'text': 'components form controls checkbox.', 'start': 717.271, 'duration': 4.782}, {'end': 728.999, 'text': 'now, under API, You can see the name of the module in which this component is defined.', 'start': 722.053, 'duration': 6.946}, {'end': 733.26, 'text': 'So this component is defined in MD checkbox module.', 'start': 729.799, 'duration': 3.461}, {'end': 738.642, 'text': "I'm going to simply copy this line back here, paste it.", 'start': 734.08, 'duration': 4.562}, {'end': 741.263, 'text': "Let's reformat it.", 'start': 740.322, 'duration': 0.941}, {'end': 745.964, 'text': 'Okay And finally add it to the imports array.', 'start': 742.383, 'duration': 3.581}, {'end': 752.306, 'text': 'md checkbox module save back in the browser.', 'start': 748.141, 'duration': 4.165}, {'end': 758.674, 'text': 'all right now we have a beautiful, modern checkbox with animation.', 'start': 752.306, 'duration': 6.368}, {'end': 763.04, 'text': "so over the rest of this section, we're going to explore each of these components in more detail.", 'start': 758.674, 'duration': 4.366}], 'summary': 'Imported md checkbox module to enable modern checkbox with animation.', 'duration': 64.6, 'max_score': 681.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU681364.jpg'}], 'start': 478.592, 'title': 'Angular material installation & usage', 'summary': 'Covers the installation of angular material, including steps for installing dependencies, selecting a theme, and importing it, as well as adding a checkbox component and identifying the module for a component. it emphasizes the importance of proper spelling for successful implementation.', 'chapters': [{'end': 547.151, 'start': 478.592, 'title': 'Installing angular material theme', 'summary': "Outlines the process of installing an angular material theme, including the steps of installing dependencies, selecting a theme, and importing it into the project's styles.css, emphasizing the importance of proper spelling for successful implementation.", 'duration': 68.559, 'highlights': ["The one I'm going to use is indigo-pink, but you might use any other that you prefer. - Emphasizing the flexibility of theme selection.", "We have a bunch of themes. They're beautiful. - Describing the availability and aesthetic appeal of the themes.", 'Next, we need to include a theme. - Highlighting the importance of including a theme in the project.', "So at import. And here we add the relative path from node modules. So start with a tilde at Angular slash material slash prebuilt-themes slash indigo-pink.css. - Detailing the specific process of importing the chosen theme into the project's styles.css.", "Make sure to spell it properly, otherwise it's not going to work. - Stressing the significance of correct spelling for successful implementation."]}, {'end': 771.911, 'start': 548.051, 'title': 'Angular material installation & component usage', 'summary': 'Details the installation process of angular material, including importing browser animations module or noop animations module, adding a checkbox component, and identifying the module for a component on material.angular.io.', 'duration': 223.86, 'highlights': ['The chapter explains the steps for importing browser animations module or noop animations module for adding animation support or disabling animations in Angular Material. The tutorial specifies the process of importing browser animations module or noop animations module for adding animation support or disabling animations in Angular Material.', "The chapter demonstrates the process of adding a checkbox component in Angular Material and resolving the 'md-checkbox is not a known element' error by importing the corresponding module. The tutorial illustrates the process of adding a checkbox component in Angular Material and resolving the 'md-checkbox is not a known element' error by importing the corresponding module.", 'The chapter provides guidance on identifying the module for a component by navigating to material.angular.io and locating the corresponding module under the API section. The tutorial offers guidance on identifying the module for a component by navigating to material.angular.io and locating the corresponding module under the API section.']}], 'duration': 293.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU478592.jpg', 'highlights': ['Emphasizing the flexibility of theme selection.', 'Describing the availability and aesthetic appeal of the themes.', 'Highlighting the importance of including a theme in the project.', "Detailing the specific process of importing the chosen theme into the project's styles.css.", 'Stressing the significance of correct spelling for successful implementation.', 'Explaining the steps for importing browser animations module or noop animations module for adding animation support or disabling animations in Angular Material.', "Illustrating the process of adding a checkbox component in Angular Material and resolving the 'md-checkbox is not a known element' error by importing the corresponding module.", 'Offering guidance on identifying the module for a component by navigating to material.angular.io and locating the corresponding module under the API section.']}, {'end': 1144.684, 'segs': [{'end': 862.56, 'src': 'embed', 'start': 772.812, 'weight': 0, 'content': [{'end': 781.437, 'text': 'So this checkbox component in Angular Material implements a very similar API to the native checkbox we have in HTML5.', 'start': 772.812, 'duration': 8.625}, {'end': 791.284, 'text': 'For example, in HTML5, in order to add a checkbox, we need to use input with the type checkbox.', 'start': 781.497, 'duration': 9.787}, {'end': 803.358, 'text': 'Okay, here we have a bunch of attributes like checked, we can set it to checked, we have value, we have the change event and so on.', 'start': 792.785, 'duration': 10.573}, {'end': 809.226, 'text': 'So our custom checkbox in Angular material also has these properties.', 'start': 804.28, 'duration': 4.946}, {'end': 816.126, 'text': 'So, once again, if you go back to the documentation for this component under the APIs tab,', 'start': 810.782, 'duration': 5.344}, {'end': 820.169, 'text': 'you can find all the properties implemented in this component.', 'start': 816.126, 'duration': 4.043}, {'end': 825.813, 'text': 'So here under directives, you can see the name of our component that is MD checkbox.', 'start': 820.829, 'duration': 4.984}, {'end': 832.157, 'text': 'And below that we have a table with a list of all the input and output properties.', 'start': 826.694, 'duration': 5.463}, {'end': 837.863, 'text': "now there is not enough time to go through each of these properties and it's really pointless.", 'start': 832.978, 'duration': 4.885}, {'end': 844.789, 'text': "so i want to show you a few key properties that you're going to use in a lot of real world applications.", 'start': 837.863, 'duration': 6.926}, {'end': 851.455, 'text': "so back here, i'm going to delete this native html5 checkbox.", 'start': 844.789, 'duration': 6.666}, {'end': 853.938, 'text': "now here's our md checkbox.", 'start': 851.455, 'duration': 2.483}, {'end': 862.56, 'text': 'Here we can set the value exactly the same way of a native checkbox, or we can use property binding.', 'start': 855.353, 'duration': 7.207}], 'summary': 'The angular material checkbox component mirrors the html5 checkbox with similar api and properties.', 'duration': 89.748, 'max_score': 772.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU772812.jpg'}, {'end': 1056.461, 'src': 'embed', 'start': 1028.499, 'weight': 3, 'content': [{'end': 1031.762, 'text': 'So this is how we work with Angular Material checkboxes.', 'start': 1028.499, 'duration': 3.263}, {'end': 1040.769, 'text': 'Another component that is very similar to a checkbox is the radio button.', 'start': 1036.645, 'duration': 4.124}, {'end': 1050.857, 'text': "So back in the Angular Material website, under components page, let's go to form controls and look at this radio button.", 'start': 1041.608, 'duration': 9.249}, {'end': 1056.461, 'text': 'So as a quick tip, whenever you want to work with a component, look at this overview tab.', 'start': 1052.098, 'duration': 4.363}], 'summary': 'Angular material: working with checkboxes and radio buttons', 'duration': 27.962, 'max_score': 1028.499, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU1028499.jpg'}], 'start': 772.812, 'title': 'Angular material checkbox and radio button components', 'summary': 'Compares angular material checkbox component with native html5 checkbox, emphasizing shared api and properties. it also explores the usage of angular material checkboxes and radio buttons, demonstrating key properties, event subscription, and conditional rendering using ngif, with examples and tips for working with these components.', 'chapters': [{'end': 832.157, 'start': 772.812, 'title': 'Angular material checkbox component', 'summary': 'Discusses the similarity between the checkbox component in angular material and the native html5 checkbox, highlighting the shared api and properties such as checked, value, and change event.', 'duration': 59.345, 'highlights': ['The checkbox component in Angular Material implements a very similar API to the native checkbox in HTML5, including properties like checked, value, and change event.', 'The documentation for the Angular Material checkbox component provides a list of all the input and output properties under the APIs tab.', "In HTML5, a checkbox is added using input with the type checkbox, and Angular Material's custom checkbox also has similar properties."]}, {'end': 1144.684, 'start': 832.978, 'title': 'Angular material checkboxes and radio buttons', 'summary': 'Explores the usage of angular material checkboxes and radio buttons, demonstrating key properties such as value setting, property binding, change event subscription, and conditional rendering using ngif, with examples and tips for working with these components.', 'duration': 311.706, 'highlights': ['The chapter explores the usage of Angular Material checkboxes and radio buttons Key point: Introduction to the main topic of the chapter.', 'demonstrating key properties such as value setting, property binding, change event subscription, and conditional rendering using ngIf Key points: Demonstrating the essential properties and functionalities of the Angular Material checkboxes, including value setting, property binding, event subscription, and conditional rendering.', 'examples and tips for working with these components Key points: Providing practical examples and tips for effectively working with Angular Material checkboxes and radio buttons.']}], 'duration': 371.872, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU772812.jpg', 'highlights': ['The checkbox component in Angular Material implements a very similar API to the native checkbox in HTML5, including properties like checked, value, and change event.', 'The documentation for the Angular Material checkbox component provides a list of all the input and output properties under the APIs tab.', "In HTML5, a checkbox is added using input with the type checkbox, and Angular Material's custom checkbox also has similar properties.", 'The chapter explores the usage of Angular Material checkboxes and radio buttons Key point: Introduction to the main topic of the chapter.', 'demonstrating key properties such as value setting, property binding, change event subscription, and conditional rendering using ngIf Key points: Demonstrating the essential properties and functionalities of the Angular Material checkboxes, including value setting, property binding, event subscription, and conditional rendering.', 'examples and tips for working with these components Key points: Providing practical examples and tips for effectively working with Angular Material checkboxes and radio buttons.']}, {'end': 1595.335, 'segs': [{'end': 1258.24, 'src': 'embed', 'start': 1228.811, 'weight': 0, 'content': [{'end': 1236.593, 'text': 'okay, now we got a blank screen and if you look in the console, You see the error I was talking about.', 'start': 1228.811, 'duration': 7.782}, {'end': 1240.094, 'text': 'So MD radio button is not a known element.', 'start': 1236.973, 'duration': 3.121}, {'end': 1241.914, 'text': "So here's the lesson.", 'start': 1241.094, 'duration': 0.82}, {'end': 1247.196, 'text': 'Whenever you want to use a component, make sure to import its module first.', 'start': 1242.434, 'duration': 4.762}, {'end': 1252.918, 'text': 'So back in the documentation for the radio button, look at the API tab.', 'start': 1248.596, 'duration': 4.322}, {'end': 1255.999, 'text': "Here's the module that we need to import.", 'start': 1254.358, 'duration': 1.641}, {'end': 1258.24, 'text': 'MD radio module.', 'start': 1256.539, 'duration': 1.701}], 'summary': 'Error: md radio button is not a known element. import md radio module before use.', 'duration': 29.429, 'max_score': 1228.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU1228811.jpg'}, {'end': 1410.809, 'src': 'embed', 'start': 1324.248, 'weight': 1, 'content': [{'end': 1326.409, 'text': 'So we can see female is checked by default.', 'start': 1324.248, 'duration': 2.161}, {'end': 1336.697, 'text': 'Now, if you look at the documentation for this radio button, here we can see the MD radio group class or MD radio group component.', 'start': 1327.37, 'duration': 9.327}, {'end': 1341.281, 'text': 'Here we have an input property called value.', 'start': 1337.898, 'duration': 3.383}, {'end': 1347.787, 'text': 'So we can set the value of the group and this will automatically check the radio button with that value.', 'start': 1342.142, 'duration': 5.645}, {'end': 1354.172, 'text': "For example, back here, I'm going to remove this check property.", 'start': 1348.567, 'duration': 5.605}, {'end': 1357.935, 'text': 'So the value of the female radio button is zero.', 'start': 1355.573, 'duration': 2.362}, {'end': 1366.78, 'text': 'I can set the value of the group to zero, and this will automatically check the female radio button.', 'start': 1359.036, 'duration': 7.744}, {'end': 1370.002, 'text': 'And once again, the female radio button is checked.', 'start': 1367.82, 'duration': 2.182}, {'end': 1375.565, 'text': 'So you can see these components in Angular Material are very easy to use.', 'start': 1371.442, 'duration': 4.123}, {'end': 1383.499, 'text': 'All right, now let me show you how to render a dropdown list.', 'start': 1380.674, 'duration': 2.825}, {'end': 1393.495, 'text': "So once again, on Angular Material website, under the components page, let's go to form controls and then select.", 'start': 1384.2, 'duration': 9.295}, {'end': 1402.083, 'text': 'Just like always, we go to the API tab first and find the module in which this component is defined.', 'start': 1394.738, 'duration': 7.345}, {'end': 1405.105, 'text': "So it's MD select module.", 'start': 1402.643, 'duration': 2.462}, {'end': 1410.809, 'text': "So before going any further, let's import this module into our app module.", 'start': 1405.866, 'duration': 4.943}], 'summary': 'Angular material components allow easy radio button and dropdown list implementation.', 'duration': 86.561, 'max_score': 1324.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU1324248.jpg'}, {'end': 1566.534, 'src': 'embed', 'start': 1506.472, 'weight': 3, 'content': [{'end': 1516.102, 'text': "so, back in the template, Here we're going to apply the ng for directive to repeat these options.", 'start': 1506.472, 'duration': 9.63}, {'end': 1519.324, 'text': 'So let color of colors.', 'start': 1516.902, 'duration': 2.422}, {'end': 1526.608, 'text': "Now for the value, I'm going to use the property binding syntax and bind this to color that ID.", 'start': 1520.484, 'duration': 6.124}, {'end': 1529.81, 'text': 'And here we can render the label.', 'start': 1528.089, 'duration': 1.721}, {'end': 1531.45, 'text': 'So color the name.', 'start': 1530.31, 'duration': 1.14}, {'end': 1537.454, 'text': 'So this is our native HTML5 dropdown list back in the browser.', 'start': 1532.771, 'duration': 4.683}, {'end': 1543.099, 'text': 'we get this ugly, really traditionally looking dropdown list.', 'start': 1539.175, 'duration': 3.924}, {'end': 1543.999, 'text': 'We can do better.', 'start': 1543.399, 'duration': 0.6}, {'end': 1547.903, 'text': "So let's convert this to an Angular material dropdown list.", 'start': 1544.82, 'duration': 3.083}, {'end': 1554.809, 'text': 'Back here, all we have to do is to prefix these elements with MD dash.', 'start': 1549.127, 'duration': 5.682}, {'end': 1562.953, 'text': 'So I put the cursor here, Command and D on Mac or Control D on Windows to trigger multi-cursor editing.', 'start': 1555.57, 'duration': 7.383}, {'end': 1566.534, 'text': 'So Command and D, the first select is selected.', 'start': 1563.433, 'duration': 3.101}], 'summary': 'Using ngfor directive to repeat options and converting to angular material dropdown list.', 'duration': 60.062, 'max_score': 1506.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU1506472.jpg'}], 'start': 1144.684, 'title': 'Angular material module import and dropdown list', 'summary': 'Covers the significance of importing modules for angular material components for error prevention, while also showcasing the process of importing md radio module and implementing its features for rendering radio buttons and setting default values. additionally, it includes the steps for adding an angular material dropdown list using md select module, converting native html5 dropdown list, and applying ngfor directive to repeat options based on an array of items.', 'chapters': [{'end': 1383.499, 'start': 1144.684, 'title': 'Importing modules for angular material components', 'summary': 'Discusses the importance of importing modules for angular material components to avoid errors, demonstrating the process of importing md radio module and utilizing its functionalities to render radio buttons and set default values.', 'duration': 238.815, 'highlights': ["Importing MD radio module is crucial to avoid 'MD radio button is not a known element' error, as demonstrated by the process of importing the module and rendering radio buttons.", 'By setting the value of the MD radio group component, the corresponding radio button can be automatically checked, exemplified by setting the value to zero to check the female radio button.', 'The demonstration showcases the ease of using Angular Material components, emphasizing the simplicity and effectiveness of rendering radio buttons and setting default values.']}, {'end': 1595.335, 'start': 1384.2, 'title': 'Adding angular material dropdown list', 'summary': 'Demonstrates adding an angular material dropdown list using md select module, converting native html5 dropdown list to angular material dropdown list, and applying ngfor directive to repeat options based on an array of items.', 'duration': 211.135, 'highlights': ['The chapter demonstrates adding an Angular Material dropdown list using MD select module It explains the process of importing MD select module into the app module and how to render a dropdown list using md-select and md-option elements.', 'Converting native HTML5 dropdown list to Angular Material dropdown list It shows how to convert a native HTML5 dropdown list to an Angular Material dropdown list by prefixing elements with MD- and using multi-cursor editing.', 'Applying ngFor directive to repeat options based on an array of items It demonstrates how to use the ngFor directive to repeat options based on an array of items and bind properties for rendering the label and value.']}], 'duration': 450.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU1144684.jpg', 'highlights': ["Importing MD radio module is crucial to avoid 'MD radio button is not a known element' error, as demonstrated by the process of importing the module and rendering radio buttons.", 'The chapter demonstrates adding an Angular Material dropdown list using MD select module It explains the process of importing MD select module into the app module and how to render a dropdown list using md-select and md-option elements.', 'By setting the value of the MD radio group component, the corresponding radio button can be automatically checked, exemplified by setting the value to zero to check the female radio button.', 'Converting native HTML5 dropdown list to Angular Material dropdown list It shows how to convert a native HTML5 dropdown list to an Angular Material dropdown list by prefixing elements with MD- and using multi-cursor editing.', 'The demonstration showcases the ease of using Angular Material components, emphasizing the simplicity and effectiveness of rendering radio buttons and setting default values.', 'Applying ngFor directive to repeat options based on an array of items It demonstrates how to use the ngFor directive to repeat options based on an array of items and bind properties for rendering the label and value.']}, {'end': 2175.884, 'segs': [{'end': 1684.078, 'src': 'embed', 'start': 1631.127, 'weight': 0, 'content': [{'end': 1633.148, 'text': "If you go back in the browser, we're going to see an error.", 'start': 1631.127, 'duration': 2.021}, {'end': 1637.355, 'text': "So we have a blank screen, let's take a look at the console.", 'start': 1634.454, 'duration': 2.901}, {'end': 1644.679, 'text': "Alright, can't bind to ngModel since it isn't a known property of mdSelect.", 'start': 1639.376, 'duration': 5.303}, {'end': 1647.02, 'text': 'You have seen this error earlier in the course.', 'start': 1645.139, 'duration': 1.881}, {'end': 1653.263, 'text': 'The reason for this is because ngModel directive is defined in the forms module.', 'start': 1647.721, 'duration': 5.542}, {'end': 1657.826, 'text': 'And because this is a brand new Angular project, we have not imported the forms module.', 'start': 1653.904, 'duration': 3.922}, {'end': 1665.61, 'text': "So Back in app module, in the imports array, I'm going to add forms module.", 'start': 1658.486, 'duration': 7.124}, {'end': 1669.352, 'text': 'Save And back in the browser.', 'start': 1667.351, 'duration': 2.001}, {'end': 1673.534, 'text': 'All right, now you can see green is selected by default.', 'start': 1669.372, 'duration': 4.162}, {'end': 1684.078, 'text': 'So to convert a native HTML5 dropdown list to an Angular material one, all we have to do is to prefix these elements with md dash.', 'start': 1675.134, 'duration': 8.944}], 'summary': "Adding forms module resolves 'ngmodel' error, enabling default selection in angular material dropdown.", 'duration': 52.951, 'max_score': 1631.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU1631127.jpg'}, {'end': 1792.139, 'src': 'embed', 'start': 1714.313, 'weight': 1, 'content': [{'end': 1725.438, 'text': "Now back in our app module, in the imports array, I'm gonna import MD input module, and then import this with my auto import plugin.", 'start': 1714.313, 'duration': 11.125}, {'end': 1736.603, 'text': "Okay, now back in the documentation, let's go to the overview tab and look at a sample example.", 'start': 1726.659, 'duration': 9.944}, {'end': 1741.306, 'text': 'so this is how the input controls of angular material look like.', 'start': 1736.603, 'duration': 4.703}, {'end': 1748.111, 'text': 'instead of having the label before an input field, we have a placeholder that is currently on top of the input field.', 'start': 1741.306, 'duration': 6.805}, {'end': 1754.416, 'text': 'so if i delete sushi here, Look, the placeholder is now bigger and more visible.', 'start': 1748.111, 'duration': 6.305}, {'end': 1757.839, 'text': 'And when we click it, it kind of jumps to the top.', 'start': 1755.517, 'duration': 2.322}, {'end': 1763.563, 'text': 'So this is a very nice modern effect that you have probably seen in a lot of applications out there.', 'start': 1758.8, 'duration': 4.763}, {'end': 1765.785, 'text': "Now let's take a look at the markup.", 'start': 1764.444, 'duration': 1.341}, {'end': 1772.009, 'text': 'So here we have a new element that is MD input container.', 'start': 1767.628, 'duration': 4.381}, {'end': 1777.391, 'text': 'And inside this element, we have a native HTML5 input element.', 'start': 1772.77, 'duration': 4.621}, {'end': 1782.693, 'text': 'Now this input element has a directive that is MD input.', 'start': 1778.291, 'duration': 4.402}, {'end': 1786.635, 'text': 'now you might ask why we need a container here.', 'start': 1783.573, 'duration': 3.062}, {'end': 1792.139, 'text': 'the reason for this is because in angular material we have a few other elements here.', 'start': 1786.635, 'duration': 5.504}], 'summary': 'Imported md input module, demonstrated modern input effect, and explained the need for md input container.', 'duration': 77.826, 'max_score': 1714.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU1714313.jpg'}, {'end': 1896.638, 'src': 'embed', 'start': 1827.957, 'weight': 3, 'content': [{'end': 1830.238, 'text': 'we should also give it a placeholder.', 'start': 1827.957, 'duration': 2.281}, {'end': 1834.755, 'text': "so placeholder, Let's say username.", 'start': 1830.238, 'duration': 4.517}, {'end': 1836.856, 'text': 'Now back in the browser.', 'start': 1835.876, 'duration': 0.98}, {'end': 1839.398, 'text': 'So this is what we get.', 'start': 1838.457, 'duration': 0.941}, {'end': 1843.861, 'text': "Okay Now let's take this to the next level.", 'start': 1841.239, 'duration': 2.622}, {'end': 1847.203, 'text': 'We can have a hint below this input field.', 'start': 1845.081, 'duration': 2.122}, {'end': 1850.765, 'text': 'So we have a new element that is MD hint.', 'start': 1847.643, 'duration': 3.122}, {'end': 1857.909, 'text': 'And here we can say something like type a unique username back in the browser.', 'start': 1851.725, 'duration': 6.184}, {'end': 1860.431, 'text': 'And this is our hint.', 'start': 1859.73, 'duration': 0.701}, {'end': 1865.381, 'text': 'Okay We can also add a suffix here.', 'start': 1862.172, 'duration': 3.209}, {'end': 1867.962, 'text': "For example, let's add a span.", 'start': 1865.781, 'duration': 2.181}, {'end': 1872.404, 'text': 'And here we can have something like at domain.com.', 'start': 1869.062, 'duration': 3.342}, {'end': 1876.146, 'text': 'So imagine in this form, the user is going to select a username.', 'start': 1872.844, 'duration': 3.302}, {'end': 1881.928, 'text': 'And this username combined with at domain.com is going to make up their email address.', 'start': 1876.686, 'duration': 5.242}, {'end': 1888.851, 'text': 'Now, here we can apply a directive on this span that is MD suffix.', 'start': 1882.789, 'duration': 6.062}, {'end': 1890.352, 'text': "Let's take a look.", 'start': 1889.812, 'duration': 0.54}, {'end': 1893.175, 'text': "So here's our suffix.", 'start': 1891.894, 'duration': 1.281}, {'end': 1896.638, 'text': 'We can add mosh.hamadani at domain.com.', 'start': 1893.856, 'duration': 2.782}], 'summary': 'Adding a placeholder, hint, and suffix to input field for username with example mosh.hamadani at domain.com.', 'duration': 68.681, 'max_score': 1827.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU1827957.jpg'}, {'end': 2068.603, 'src': 'embed', 'start': 1957.661, 'weight': 5, 'content': [{'end': 1965.185, 'text': 'For example, earlier when we built our forms, we always added this form-control class to our input fields.', 'start': 1957.661, 'duration': 7.524}, {'end': 1971.349, 'text': 'You should not add this here because this will mess up with the appearance of your angular material components.', 'start': 1965.845, 'duration': 5.504}, {'end': 1977.213, 'text': "Okay? So you should either use bootstrap or angular material when you're building a form.", 'start': 1971.809, 'duration': 5.404}, {'end': 1978.974, 'text': "So let's delete this.", 'start': 1978.134, 'duration': 0.84}, {'end': 1985.579, 'text': 'So I added this required attribute to our input field here.', 'start': 1981.436, 'duration': 4.143}, {'end': 1990.262, 'text': "And here inside md-error element, I'm going to add an error message.", 'start': 1986.8, 'duration': 3.462}, {'end': 1993.725, 'text': 'The username field is required.', 'start': 1991.243, 'duration': 2.482}, {'end': 1995.482, 'text': "Now let's see what happens.", 'start': 1994.622, 'duration': 0.86}, {'end': 2000.265, 'text': 'So back in the browser, note this asterisk here.', 'start': 1996.263, 'duration': 4.002}, {'end': 2003.546, 'text': 'This indicates that this field is required.', 'start': 2000.925, 'duration': 2.621}, {'end': 2007.788, 'text': 'And when I click it, the asterisk turns red.', 'start': 2004.447, 'duration': 3.341}, {'end': 2016.312, 'text': "However, when I tab away, we don't see the error message because we have not applied the ngModel directive on this input field.", 'start': 2008.529, 'duration': 7.783}, {'end': 2022.715, 'text': 'So there is no form control to keep track of the validity of this input field under the hood.', 'start': 2016.893, 'duration': 5.822}, {'end': 2026.547, 'text': "So Here's our input field.", 'start': 2023.636, 'duration': 2.911}, {'end': 2031.532, 'text': "I'm going to apply the ngModel directive.", 'start': 2029.069, 'duration': 2.463}, {'end': 2036.977, 'text': 'And also, as a requirement, we should give each input field a name.', 'start': 2032.393, 'duration': 4.584}, {'end': 2040.3, 'text': 'This is when we are building template-driven forms.', 'start': 2037.598, 'duration': 2.702}, {'end': 2044.004, 'text': "Remember that? So let's call this username.", 'start': 2040.701, 'duration': 3.303}, {'end': 2051.63, 'text': 'Now with these angular is going to create a form control object and associated with this input field.', 'start': 2045.546, 'duration': 6.084}, {'end': 2056.034, 'text': 'And this form control will keep track of the validity of this input field.', 'start': 2052.232, 'duration': 3.802}, {'end': 2057.697, 'text': "So let's see this in action.", 'start': 2056.636, 'duration': 1.061}, {'end': 2061.159, 'text': 'I put the focus here and then tab away.', 'start': 2059.038, 'duration': 2.121}, {'end': 2063.141, 'text': "And here's our error message.", 'start': 2062.04, 'duration': 1.101}, {'end': 2068.603, 'text': 'Beautiful So this is how we work with input fields in Angular Material.', 'start': 2063.562, 'duration': 5.041}], 'summary': 'Avoid form-control class for angular material. use ngmodel and form control for validation.', 'duration': 110.942, 'max_score': 1957.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU1957661.jpg'}, {'end': 2150.289, 'src': 'embed', 'start': 2099.043, 'weight': 8, 'content': [{'end': 2104.066, 'text': 'Now with this variable, we can see if our input field has an error or not.', 'start': 2099.043, 'duration': 5.023}, {'end': 2113.652, 'text': 'So ng if username.invalid and username.errors.required.', 'start': 2104.827, 'duration': 8.825}, {'end': 2123.588, 'text': 'And with this, we can have multiple errors of different kind, exactly the same way we implemented error handling in the template driven form section.', 'start': 2115.12, 'duration': 8.468}, {'end': 2126.651, 'text': 'The only difference is in the markup.', 'start': 2124.509, 'duration': 2.142}, {'end': 2132.577, 'text': "So instead of using divs with bootstrap classes, we're using Angular material elements.", 'start': 2127.252, 'duration': 5.325}, {'end': 2136.481, 'text': 'Okay So this is all about input fields.', 'start': 2133.418, 'duration': 3.063}, {'end': 2142.322, 'text': 'Hi, thank you for watching my Angular tutorial.', 'start': 2140, 'duration': 2.322}, {'end': 2145.785, 'text': 'If you enjoyed this video, please like it and share it with others.', 'start': 2142.803, 'duration': 2.982}, {'end': 2150.289, 'text': 'Also, you can subscribe to my channel for free new videos every week.', 'start': 2146.366, 'duration': 3.923}], 'summary': 'Angular tutorial covers input field error handling and angular material elements usage.', 'duration': 51.246, 'max_score': 2099.043, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU2099043.jpg'}], 'start': 1595.355, 'title': 'Angular material input controls and field features', 'summary': 'Covers setting default value using ngmodel directive, resolving error by importing forms module, converting html5 dropdown list to angular material by prefixing with md dash, and explores the modern effect of using placeholders in angular material input fields, along with the usage of md input container, md hint, md suffix, md prefix, and error messages to enhance user experience in web forms.', 'chapters': [{'end': 1741.306, 'start': 1595.355, 'title': 'Angular material input controls', 'summary': 'Covers setting default value using ngmodel directive, resolving error by importing forms module, and converting html5 dropdown list to angular material one by prefixing with md dash.', 'duration': 145.951, 'highlights': ["Using ngModel directive to set default value 'green' for MD select element", "Resolving error by importing forms module in app module to fix 'Can't bind to ngModel' error", 'Converting native HTML5 dropdown list to Angular material one by prefixing elements with md dash', "Importing MD input module and adding it to app module's imports array to work with Angular material input controls"]}, {'end': 1929.127, 'start': 1741.306, 'title': 'Angular material input field features', 'summary': 'Explores the modern effect of using placeholders in angular material input fields, along with the usage of md input container, md hint, md suffix, md prefix, and error messages to enhance user experience in web forms.', 'duration': 187.821, 'highlights': ['The modern effect of using placeholders in Angular Material input fields includes a placeholder that increases in size and visibility when the input field is empty, and jumps to the top when clicked, providing a contemporary user experience.', 'The MD input container is utilized to facilitate the inclusion of additional elements such as hints, prefixes, suffixes, and error messages within an Angular Material input field, enhancing the flexibility of the form design.', 'The addition of elements like MD hint allows for the inclusion of helpful messages below the input field, such as prompting the user to input a unique username, thereby improving user guidance and experience.', "The utilization of MD suffix and MD prefix enables the addition of text or symbols before or after the input field, for instance, combining a username with 'at domain.com' to form an email address, thereby enhancing the functionality and context of the input field.", 'The chapter also demonstrates the implementation of error messages in Angular Material input fields by making a field required, providing a mechanism to alert users and improve data validation in web forms.']}, {'end': 2175.884, 'start': 1931.649, 'title': 'Working with input fields', 'summary': 'Discusses working with input fields in angular material, including avoiding the use of bootstrap classes, applying the required attribute, using ngmodel directive for form control, implementing error handling with ngif, and the benefits of using angular material elements over bootstrap classes.', 'duration': 244.235, 'highlights': ['Angular Material components should not use bootstrap classes to avoid affecting appearance. The speaker mentions that when using Angular Material, bootstrap classes should not be used to avoid affecting the appearance of the components.', 'Applying the required attribute to input fields for validation. The speaker demonstrates adding the required attribute to an input field for validation, which is indicated by an asterisk and changes in appearance.', 'Using ngModel directive to create a form control object for input field validity. The speaker explains the use of ngModel directive to create a form control object associated with an input field to track its validity.', 'Implementing error handling with ngIf to render error messages based on field validity. The speaker explains the use of ngIf to render error messages only if the field has an error, demonstrating multiple errors handling.', 'Advantages of using Angular Material elements over bootstrap classes for input fields. The speaker emphasizes the benefits of using Angular Material elements instead of divs with bootstrap classes for input fields, highlighting the differences in markup.']}], 'duration': 580.529, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPT3K3w6JtU/pics/wPT3K3w6JtU1595355.jpg', 'highlights': ["Resolving error by importing forms module in app module to fix 'Can't bind to ngModel' error", 'The modern effect of using placeholders in Angular Material input fields includes a placeholder that increases in size and visibility when the input field is empty, and jumps to the top when clicked, providing a contemporary user experience.', 'The MD input container is utilized to facilitate the inclusion of additional elements such as hints, prefixes, suffixes, and error messages within an Angular Material input field, enhancing the flexibility of the form design.', 'The addition of elements like MD hint allows for the inclusion of helpful messages below the input field, such as prompting the user to input a unique username, thereby improving user guidance and experience.', "The utilization of MD suffix and MD prefix enables the addition of text or symbols before or after the input field, for instance, combining a username with 'at domain.com' to form an email address, thereby enhancing the functionality and context of the input field.", 'The chapter also demonstrates the implementation of error messages in Angular Material input fields by making a field required, providing a mechanism to alert users and improve data validation in web forms.', 'Applying the required attribute to input fields for validation. The speaker demonstrates adding the required attribute to an input field for validation, which is indicated by an asterisk and changes in appearance.', 'Using ngModel directive to create a form control object for input field validity. The speaker explains the use of ngModel directive to create a form control object associated with an input field to track its validity.', 'Implementing error handling with ngIf to render error messages based on field validity. The speaker explains the use of ngIf to render error messages only if the field has an error, demonstrating multiple errors handling.', 'Advantages of using Angular Material elements over bootstrap classes for input fields. The speaker emphasizes the benefits of using Angular Material elements instead of divs with bootstrap classes for input fields, highlighting the differences in markup.', 'Converting native HTML5 dropdown list to Angular material one by prefixing elements with md dash', "Importing MD input module and adding it to app module's imports array to work with Angular material input controls", 'Angular Material components should not use bootstrap classes to avoid affecting appearance. The speaker mentions that when using Angular Material, bootstrap classes should not be used to avoid affecting the appearance of the components.']}], 'highlights': ['Angular Material is a library of reusable and high quality UI components that are built with Angular and TypeScript, featuring internationalization and a clean and simple API.', 'The components are well tested with unit and integration tests, customizable, and offer minimal performance overhead, making them fast and efficient.', 'The chapter introduces various components available in Angular Material, including form controls, navigation components, layout components, buttons, indicators, icons, pop-ups, and models.', 'Examples of form controls demonstrated include checkboxes and radio buttons, showcasing their appearance and animations.', 'A demonstration of pop-ups and models is provided, with a focus on the dialogue component and its animations.', 'Angular Material is specifically designed for Angular applications, making it easier to use without the need for custom directives or components.', 'Bootstrap, being older and based on plain old javascript, requires additional work and potential dependencies to use in Angular applications.', 'Angular Material provides components built with quality standards, a common API, and easy integration with Angular applications, enhancing development efficiency and consistency.', 'Installation of Angular Material involves creating a new project using Angular CLI, installing essential packages such as Angular CDK and Angular Material, and optionally adding animation and gesture support for improved user experience.', 'Optional Package: Hammer.js is recommended for adding gesture support to applications, allowing users to perform actions such as tapping, swiping, and rotating, thus enhancing accessibility and user interaction.', 'Emphasizing the flexibility of theme selection.', 'Describing the availability and aesthetic appeal of the themes.', 'Highlighting the importance of including a theme in the project.', "Detailing the specific process of importing the chosen theme into the project's styles.css.", 'Stressing the significance of correct spelling for successful implementation.', 'Explaining the steps for importing browser animations module or noop animations module for adding animation support or disabling animations in Angular Material.', "Illustrating the process of adding a checkbox component in Angular Material and resolving the 'md-checkbox is not a known element' error by importing the corresponding module.", 'Offering guidance on identifying the module for a component by navigating to material.angular.io and locating the corresponding module under the API section.', 'The checkbox component in Angular Material implements a very similar API to the native checkbox in HTML5, including properties like checked, value, and change event.', 'The documentation for the Angular Material checkbox component provides a list of all the input and output properties under the APIs tab.', "In HTML5, a checkbox is added using input with the type checkbox, and Angular Material's custom checkbox also has similar properties.", 'The chapter explores the usage of Angular Material checkboxes and radio buttons Key point: Introduction to the main topic of the chapter.', 'demonstrating key properties such as value setting, property binding, change event subscription, and conditional rendering using ngIf Key points: Demonstrating the essential properties and functionalities of the Angular Material checkboxes, including value setting, property binding, event subscription, and conditional rendering.', 'examples and tips for working with these components Key points: Providing practical examples and tips for effectively working with Angular Material checkboxes and radio buttons.', "Importing MD radio module is crucial to avoid 'MD radio button is not a known element' error, as demonstrated by the process of importing the module and rendering radio buttons.", 'The chapter demonstrates adding an Angular Material dropdown list using MD select module It explains the process of importing MD select module into the app module and how to render a dropdown list using md-select and md-option elements.', 'By setting the value of the MD radio group component, the corresponding radio button can be automatically checked, exemplified by setting the value to zero to check the female radio button.', 'Converting native HTML5 dropdown list to Angular Material dropdown list It shows how to convert a native HTML5 dropdown list to an Angular Material dropdown list by prefixing elements with MD- and using multi-cursor editing.', 'The demonstration showcases the ease of using Angular Material components, emphasizing the simplicity and effectiveness of rendering radio buttons and setting default values.', 'Applying ngFor directive to repeat options based on an array of items It demonstrates how to use the ngFor directive to repeat options based on an array of items and bind properties for rendering the label and value.', "Resolving error by importing forms module in app module to fix 'Can't bind to ngModel' error", 'The modern effect of using placeholders in Angular Material input fields includes a placeholder that increases in size and visibility when the input field is empty, and jumps to the top when clicked, providing a contemporary user experience.', 'The MD input container is utilized to facilitate the inclusion of additional elements such as hints, prefixes, suffixes, and error messages within an Angular Material input field, enhancing the flexibility of the form design.', 'The addition of elements like MD hint allows for the inclusion of helpful messages below the input field, such as prompting the user to input a unique username, thereby improving user guidance and experience.', "The utilization of MD suffix and MD prefix enables the addition of text or symbols before or after the input field, for instance, combining a username with 'at domain.com' to form an email address, thereby enhancing the functionality and context of the input field.", 'The chapter also demonstrates the implementation of error messages in Angular Material input fields by making a field required, providing a mechanism to alert users and improve data validation in web forms.', 'Applying the required attribute to input fields for validation. The speaker demonstrates adding the required attribute to an input field for validation, which is indicated by an asterisk and changes in appearance.', 'Using ngModel directive to create a form control object for input field validity. The speaker explains the use of ngModel directive to create a form control object associated with an input field to track its validity.', 'Implementing error handling with ngIf to render error messages based on field validity. The speaker explains the use of ngIf to render error messages only if the field has an error, demonstrating multiple errors handling.', 'Advantages of using Angular Material elements over bootstrap classes for input fields. The speaker emphasizes the benefits of using Angular Material elements instead of divs with bootstrap classes for input fields, highlighting the differences in markup.', 'Converting native HTML5 dropdown list to Angular material one by prefixing elements with md dash', "Importing MD input module and adding it to app module's imports array to work with Angular material input controls", 'Angular Material components should not use bootstrap classes to avoid affecting appearance. The speaker mentions that when using Angular Material, bootstrap classes should not be used to avoid affecting the appearance of the components.']}