title
How to Build an Angular 5 Material App

description
Written tutorial: https://goo.gl/6Z1p5J https://coursetro.com for more Angular 5 Learn how to integrate Material into an Angular 5 app. You'll find that the process isn't too difficult, and it's just a matter of understanding the official documentation. First we'll start with a new Angular 5 project with the CLI. Then, we'll take the necessary steps to get Material integrated. After that, we will create a simple demonstration app where you will understand how to integrate and use Material components. Follow/like: http://facebook.com/coursetro - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'How to Build an Angular 5 Material App', 'heatmap': [{'end': 89.027, 'start': 63.731, 'weight': 0.832}, {'end': 260, 'start': 240.17, 'weight': 0.721}, {'end': 434.622, 'start': 389.33, 'weight': 1}, {'end': 557.994, 'start': 527.287, 'weight': 0.81}], 'summary': "Tutorial on 'how to build an angular 5 material app' covers the updated process of integrating material in angular 5, emphasizing angular cli installation and project setup, including angular material module import, theme setup, and component documentation, along with creating a material angular app with input fields, progress spinners, and cards.", 'chapters': [{'end': 122.889, 'segs': [{'end': 32.795, 'src': 'embed', 'start': 3.018, 'weight': 3, 'content': [{'end': 5.559, 'text': 'Hey all, Gary Simon, of course, Setro.', 'start': 3.018, 'duration': 2.541}, {'end': 11.921, 'text': "We're going to revisit a topic that I covered in Angular 2, 4, and now 5.", 'start': 5.819, 'duration': 6.102}, {'end': 17.683, 'text': "And it's also worth doing simply because Material has updated and changed and the integration process is a little bit different.", 'start': 11.921, 'duration': 5.762}, {'end': 19.363, 'text': "So let's go ahead.", 'start': 18.283, 'duration': 1.08}, {'end': 23.265, 'text': "I'm going to jump over to the console and..", 'start': 19.403, 'duration': 3.862}, {'end': 28.832, 'text': 'Oh, but real quick, before we begin, make sure you check out my site, courseetro.com,', 'start': 24.489, 'duration': 4.343}, {'end': 32.795, 'text': "where you're going to find a bunch of courses on modern design and development.", 'start': 28.832, 'duration': 3.963}], 'summary': 'Gary simon revisits angular topic due to material update and integration changes.', 'duration': 29.777, 'max_score': 3.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA3018.jpg'}, {'end': 97.153, 'src': 'heatmap', 'start': 63.731, 'weight': 0, 'content': [{'end': 68.133, 'text': "So assuming you have that already installed, we're going to ng new.", 'start': 63.731, 'duration': 4.402}, {'end': 72.635, 'text': "We're going to say ng5-material for the project name.", 'start': 68.933, 'duration': 3.702}, {'end': 77.698, 'text': "I'm not going to add any routing or any other type of flags here for that.", 'start': 74.336, 'duration': 3.362}, {'end': 89.027, 'text': 'Although you may want to add the hyphen hyphen style equals SAS or SCSS flag in case you did want to make custom adjustments to the material theme.', 'start': 78.159, 'duration': 10.868}, {'end': 91.829, 'text': "I kind of forgot about that, but that's no big deal.", 'start': 89.687, 'duration': 2.142}, {'end': 93.39, 'text': "We're not going to do that in this video.", 'start': 91.849, 'duration': 1.541}, {'end': 97.153, 'text': 'You can check out the documentation for that specifically.', 'start': 93.79, 'duration': 3.363}], 'summary': 'Demonstrating ng new command for ng5-material project, no routing or flags added. suggesting to check documentation for custom adjustments.', 'duration': 49.488, 'max_score': 63.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA63731.jpg'}], 'start': 3.018, 'title': 'Angular 5 material integration', 'summary': 'Covers the updated process of integrating material in angular 5, emphasizing the importance of angular cli installation, with a focus on project setup and installation process.', 'chapters': [{'end': 122.889, 'start': 3.018, 'title': 'Angular 5 material integration', 'summary': 'Revisits the integration of material in angular 5, highlighting the updated process and the importance of having the angular cli installed, with a focus on the project setup and installation process.', 'duration': 119.871, 'highlights': ['The importance of having the Angular CLI installed for the integration process.', 'Revisiting the process of setting up an Angular 5 project for Material integration.', 'Emphasizing the updated and changed integration process due to Material updates.', "Mentioning the optional addition of flags such as 'style=SAS' or 'SCSS' for custom adjustments to the material theme.", 'Acknowledging the availability of free courses on modern design and development at courseetro.com.']}], 'duration': 119.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA3018.jpg', 'highlights': ['Emphasizing the importance of Angular CLI installation for integration.', 'Revisiting the process of setting up an Angular 5 project for Material integration.', "Mentioning the optional addition of flags such as 'style=SAS' or 'SCSS' for custom adjustments to the material theme.", 'Emphasizing the updated and changed integration process due to Material updates.']}, {'end': 414.209, 'segs': [{'end': 149.493, 'src': 'embed', 'start': 122.889, 'weight': 0, 'content': [{'end': 135.54, 'text': "uh, like you guys wanted to know that ng5 material and now we're going to run ng serve and this just serves it like builds out the project.", 'start': 122.889, 'duration': 12.651}, {'end': 144.003, 'text': "we can access it at localhost 4200, which we'll be doing periodically throughout this tutorial, And we're also going to get our new console window.", 'start': 135.54, 'duration': 8.463}, {'end': 145.065, 'text': "So I'm using Commander.", 'start': 144.043, 'duration': 1.022}, {'end': 148.01, 'text': "It's a console emulator with a custom theme.", 'start': 145.085, 'duration': 2.925}, {'end': 149.493, 'text': "Maybe I'll release that.", 'start': 148.572, 'duration': 0.921}], 'summary': 'Running ng serve builds out the project accessible at localhost 4200.', 'duration': 26.604, 'max_score': 122.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA122889.jpg'}, {'end': 235.446, 'src': 'embed', 'start': 173.331, 'weight': 1, 'content': [{'end': 185.566, 'text': 'at angular material and also angular cdk and then save it as a dev dependency in the package json file that was created with the cli.', 'start': 173.331, 'duration': 12.235}, {'end': 189.491, 'text': 'so this will install momentarily.', 'start': 185.566, 'duration': 3.925}, {'end': 193.614, 'text': 'normally i would just pause and speed this up, but Kind of pressed for time.', 'start': 189.491, 'duration': 4.123}, {'end': 194.154, 'text': 'All right, good.', 'start': 193.774, 'duration': 0.38}, {'end': 194.835, 'text': "That didn't take too long.", 'start': 194.174, 'duration': 0.661}, {'end': 203.657, 'text': 'All right, then next we have to install animations because Angular material rely on Angular animations.', 'start': 195.455, 'duration': 8.202}, {'end': 206.218, 'text': 'Some of the components rely on having that installed.', 'start': 203.857, 'duration': 2.361}, {'end': 207.899, 'text': 'So we also have to install that.', 'start': 206.258, 'duration': 1.641}, {'end': 212.1, 'text': 'So npm install, save it at angular forward slash animations.', 'start': 207.919, 'duration': 4.181}, {'end': 214.901, 'text': 'All right.', 'start': 214.421, 'duration': 0.48}, {'end': 222.303, 'text': "And I'm going to go ahead while this installs and get out my code editor here.", 'start': 216.861, 'duration': 5.442}, {'end': 226.192, 'text': "I'm gonna open up the project folder off screen.", 'start': 223.848, 'duration': 2.344}, {'end': 229.657, 'text': 'All right.', 'start': 229.317, 'duration': 0.34}, {'end': 230.378, 'text': "And that's done.", 'start': 229.677, 'duration': 0.701}, {'end': 232.462, 'text': 'Sweet Okay.', 'start': 230.519, 'duration': 1.943}, {'end': 235.446, 'text': "So I'm gonna increase this just so you guys can see it.", 'start': 232.502, 'duration': 2.944}], 'summary': 'Installed angular material, cdk, and animations as dev dependencies.', 'duration': 62.115, 'max_score': 173.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA173331.jpg'}, {'end': 263.5, 'src': 'heatmap', 'start': 240.17, 'weight': 0.721, 'content': [{'end': 248.254, 'text': 'Okay So next we have to go to source app and our app module because we just used MPM to install animations.', 'start': 240.17, 'duration': 8.084}, {'end': 250.155, 'text': 'Now we have to actually import it.', 'start': 248.334, 'duration': 1.821}, {'end': 253.197, 'text': "So I'm going to copy this and paste this off screen.", 'start': 250.816, 'duration': 2.381}, {'end': 260, 'text': "By the way, when I'm pasting stuff, I'm getting it from the written version of this tutorial.", 'start': 253.217, 'duration': 6.783}, {'end': 263.5, 'text': 'So pretty much every tutorial I create, I do a written version.', 'start': 260.06, 'duration': 3.44}], 'summary': 'Import animations from source app module using mpm.', 'duration': 23.33, 'max_score': 240.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA240170.jpg'}, {'end': 337.665, 'src': 'embed', 'start': 309.031, 'weight': 3, 'content': [{'end': 313.713, 'text': 'you can create a custom module file specifically for your material component imports.', 'start': 309.031, 'duration': 4.682}, {'end': 315.694, 'text': "And then we'll just import that in here.", 'start': 314.093, 'duration': 1.601}, {'end': 317.875, 'text': "So first let's create a new file.", 'start': 316.014, 'duration': 1.861}, {'end': 325.599, 'text': "So control B here in visual studio code, and we're going to create a new file in the same folder called material.module.ts.", 'start': 317.935, 'duration': 7.664}, {'end': 329.295, 'text': 'All right.', 'start': 328.934, 'duration': 0.361}, {'end': 337.665, 'text': 'So in order for this to work, the first thing that we need to set up is just two different imports right there.', 'start': 329.815, 'duration': 7.85}], 'summary': 'Create a custom module file for material component imports in material.module.ts.', 'duration': 28.634, 'max_score': 309.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA309031.jpg'}, {'end': 389.33, 'src': 'embed', 'start': 361.214, 'weight': 5, 'content': [{'end': 366.856, 'text': "so now, right here in this line is where we're going to import any of our components.", 'start': 361.214, 'duration': 5.642}, {'end': 370.017, 'text': "we're in here within these uh squiggly brackets.", 'start': 366.856, 'duration': 3.161}, {'end': 382.985, 'text': "so we'll import the mat button module, or in other words the button module from or the button component from at angular forward slash material.", 'start': 370.017, 'duration': 12.968}, {'end': 384.246, 'text': "so that's the first step.", 'start': 382.985, 'duration': 1.261}, {'end': 389.33, 'text': 'you import it up here and then in ng module module.', 'start': 384.246, 'duration': 5.084}], 'summary': 'Import the mat button module from angular material in the component file.', 'duration': 28.116, 'max_score': 361.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA361214.jpg'}], 'start': 122.889, 'title': 'Integrating angular 5 material and material component imports', 'summary': 'Covers integrating angular 5 material into an angular 5 project, including installing angular material and angular cdk as dev dependencies, angular animations, and importing browser animations module. it also explains creating a material module file for organizing material component imports in an angular project, emphasizing the need for organization and the process of importing and exporting components, such as the mat button module, to the app module.', 'chapters': [{'end': 281.143, 'start': 122.889, 'title': 'Integrating angular 5 material', 'summary': 'Covers integrating angular 5 material into an angular 5 project, including running ng serve, installing angular material and angular cdk as dev dependencies, installing angular animations, and importing browser animations module into the app module.', 'duration': 158.254, 'highlights': ['Running ng serve to build the project and access it at localhost 4200 The ng serve command is used to build out the project, allowing access at localhost 4200.', 'Installing Angular Material and Angular CDK as dev dependencies The npm install command is used to install Angular Material and Angular CDK as dev dependencies in the package json file created with the CLI.', 'Installing Angular animations and importing browser animations module into the app module Angular animations are installed using npm install and then imported into the app module to support components relying on animations.']}, {'end': 414.209, 'start': 281.183, 'title': 'Material component imports', 'summary': 'Explains how to create a material module file for organizing material component imports in an angular project, emphasizing the need for organization and the process of importing and exporting components, such as the mat button module, to the app module.', 'duration': 133.026, 'highlights': ['The chapter emphasizes the need for creating a custom module file for material component imports in order to maintain organization within the app module.', 'It details the process of setting up the material module file, including creating imports and exports, and exporting the material module class to the app module.', 'The chapter explains the process of importing specific material components, such as the mat button module, and adding them to the material module file.']}], 'duration': 291.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA122889.jpg', 'highlights': ['Running ng serve to build the project and access it at localhost 4200', 'Installing Angular Material and Angular CDK as dev dependencies', 'Installing Angular animations and importing browser animations module into the app module', 'The chapter emphasizes the need for creating a custom module file for material component imports', 'It details the process of setting up the material module file, including creating imports and exports', 'The chapter explains the process of importing specific material components, such as the mat button module, and adding them to the material module file']}, {'end': 636.616, 'segs': [{'end': 557.994, 'src': 'heatmap', 'start': 414.269, 'weight': 0, 'content': [{'end': 426.293, 'text': 'So now we can save this and we go back to our app, module TS, and we import the name of that module, which is material module, right here,', 'start': 414.269, 'duration': 12.024}, {'end': 427.653, 'text': 'from material dot module.', 'start': 426.293, 'duration': 1.36}, {'end': 434.622, 'text': 'Then we take this and we add it right here.', 'start': 428.857, 'duration': 5.765}, {'end': 438.426, 'text': 'Awesome Okay.', 'start': 437.345, 'duration': 1.081}, {'end': 440.268, 'text': "So let's go ahead and save that.", 'start': 438.566, 'duration': 1.702}, {'end': 446.734, 'text': "So the next step that's required is to include an angular material theme.", 'start': 441.249, 'duration': 5.485}, {'end': 452.76, 'text': 'And so a theme provides a set of predefined colors that will be applied to your material design components.', 'start': 447.334, 'duration': 5.426}, {'end': 460.408, 'text': 'So the colors consist of primary colors, accent colors, a warning set of colors, foreground and background colors.', 'start': 453.36, 'duration': 7.048}, {'end': 465.894, 'text': 'And now at the time of writing this tutorial, they provide you, and I think this is pretty much been standard.', 'start': 461.169, 'duration': 4.725}, {'end': 468.577, 'text': "They don't like sit there and make a bunch of these themes.", 'start': 465.914, 'duration': 2.663}, {'end': 470.619, 'text': "There's basically four that you can choose from.", 'start': 468.677, 'duration': 1.942}, {'end': 473.943, 'text': 'So what we want to do now is visit the source.', 'start': 471.24, 'duration': 2.703}, {'end': 480.423, 'text': "styles.css file, and we're going to add the following line.", 'start': 474.981, 'duration': 5.442}, {'end': 487.786, 'text': 'So import, we see angular material, prebuilt themes, indigo pink.css.', 'start': 481.524, 'duration': 6.262}, {'end': 493.368, 'text': 'So the other ones are deep amber.css, pink, blue, gray, and purple, green.', 'start': 488.306, 'duration': 5.062}, {'end': 495.349, 'text': 'Not the greatest names, but whatever.', 'start': 493.528, 'duration': 1.821}, {'end': 497.19, 'text': "So let's go ahead and save that.", 'start': 495.829, 'duration': 1.361}, {'end': 504.414, 'text': 'And now we have to import with NPM or install with NPM HammerJS.', 'start': 498.19, 'duration': 6.224}, {'end': 512.217, 'text': "And that's because some of the components require this for full feature support in terms of gestures.", 'start': 504.974, 'duration': 7.243}, {'end': 518.02, 'text': "So let's go ahead and go back to our console here.", 'start': 512.758, 'duration': 5.262}, {'end': 524.345, 'text': "And we're going to NPM install, save it to a dev dependency, HammerJS.", 'start': 518.041, 'duration': 6.304}, {'end': 528.588, 'text': "All right, so I'm going to let this run.", 'start': 527.287, 'duration': 1.301}, {'end': 536.713, 'text': 'Now we just have to import this in our apps entry point at main.ts.', 'start': 530.129, 'duration': 6.584}, {'end': 542.497, 'text': "So we're going to go right here and we just simply add it right there and save that.", 'start': 536.933, 'duration': 5.564}, {'end': 546.143, 'text': "Okay, so we're almost there.", 'start': 544.241, 'duration': 1.902}, {'end': 553.01, 'text': 'We have one last step, and that is a lot of material design in general.', 'start': 546.784, 'duration': 6.226}, {'end': 557.994, 'text': "If you're building like a full featured app that has, you know, pure material design,", 'start': 553.17, 'duration': 4.824}], 'summary': 'Import material module, apply predefined colors, and install hammerjs for full feature support.', 'duration': 114.319, 'max_score': 414.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA414269.jpg'}, {'end': 606.149, 'src': 'embed', 'start': 557.994, 'weight': 4, 'content': [{'end': 560.797, 'text': "you're probably going to run into a situation where you need icons.", 'start': 557.994, 'duration': 2.803}, {'end': 568.565, 'text': 'In order to use the icons, you have to import the icons in your source index.html file.', 'start': 560.897, 'duration': 7.668}, {'end': 570.287, 'text': 'So that is right here.', 'start': 569.386, 'duration': 0.901}, {'end': 574.813, 'text': "So I'm copying this code from the written tutorial.", 'start': 571.128, 'duration': 3.685}, {'end': 576.976, 'text': 'Hit control B.', 'start': 575.634, 'duration': 1.342}, {'end': 581.341, 'text': 'And this is right here what you want to import.', 'start': 576.976, 'duration': 4.365}, {'end': 584.125, 'text': "It's just from the googleapis.com here.", 'start': 581.361, 'duration': 2.764}, {'end': 585.627, 'text': 'Material icons.', 'start': 584.806, 'duration': 0.821}, {'end': 586.809, 'text': 'All right.', 'start': 586.448, 'duration': 0.361}, {'end': 587.549, 'text': "So that's it.", 'start': 586.869, 'duration': 0.68}, {'end': 590.973, 'text': "It's pretty much ready to go and ready to use at this point.", 'start': 587.69, 'duration': 3.283}, {'end': 594.617, 'text': 'Now we did import one material component, which is the button.', 'start': 591.033, 'duration': 3.584}, {'end': 598.661, 'text': "So let's try that out and test it out and make sure everything works at this point.", 'start': 595.057, 'duration': 3.604}, {'end': 605.048, 'text': "Now, before I even do that, I'm going to step over to the browser and check out just to make sure there's no errors going on in the console.", 'start': 598.681, 'duration': 6.367}, {'end': 606.149, 'text': "So let's go.", 'start': 605.589, 'duration': 0.56}], 'summary': 'To use material icons, import them in the index.html file from googleapis.com. also, import one material component, the button, and ensure the functionality works without errors.', 'duration': 48.155, 'max_score': 557.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA557994.jpg'}], 'start': 414.269, 'title': 'Angular material integration', 'summary': 'Covers angular material module import, theme setup with four options, npm installation of hammerjs, icon import for material design, and material integration testing for error-free project integration.', 'chapters': [{'end': 497.19, 'start': 414.269, 'title': 'Angular material module and theme setup', 'summary': 'Discusses importing the angular material module, adding predefined colors using themes, and importing a specific prebuilt theme, with four options available, for the material design components in an app.', 'duration': 82.921, 'highlights': ['Importing the Angular Material module and adding it to the app module TS The chapter discusses the process of importing the Angular Material module and integrating it into the app module TS.', 'Including an Angular Material theme with predefined colors for material design components The chapter explains the concept of an Angular Material theme, which provides predefined colors, including primary, accent, warning, foreground, and background colors, for material design components.', 'Importing a specific prebuilt theme with four options available The chapter mentions the availability of four prebuilt themes, such as indigo pink, deep amber, pink blue gray, and purple green, for importing into the app.']}, {'end': 587.549, 'start': 498.19, 'title': 'Npm installation and icon import for material design', 'summary': 'Covers the npm installation of hammerjs as a dev dependency and the import of icons in the source index.html file for full feature support in terms of gestures and material design.', 'duration': 89.359, 'highlights': ['NPM install, save to a dev dependency, and import HammerJS for full feature support in terms of gestures and material design.', 'Import icons in the source index.html file for full featured app that has material design.']}, {'end': 636.616, 'start': 587.69, 'title': 'Material integration testing', 'summary': 'Involves testing the integration of a material component into a project, ensuring no errors in the console and confirming the successful integration of the material.', 'duration': 48.926, 'highlights': ['Testing the integration of a material component into the project, ensuring no errors in the console, and confirming the successful integration of the material', 'Importing a material component, specifically the button, and ensuring its functionality within the project', 'Verifying the absence of errors in the console before testing the material integration']}], 'duration': 222.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA414269.jpg', 'highlights': ['Importing the Angular Material module and adding it to the app module TS', 'Including an Angular Material theme with predefined colors for material design components', 'Importing a specific prebuilt theme with four options available', 'NPM install, save to a dev dependency, and import HammerJS for full feature support in terms of gestures and material design', 'Import icons in the source index.html file for full featured app that has material design', 'Testing the integration of a material component into the project, ensuring no errors in the console, and confirming the successful integration of the material', 'Importing a material component, specifically the button, and ensuring its functionality within the project', 'Verifying the absence of errors in the console before testing the material integration']}, {'end': 799.249, 'segs': [{'end': 670.351, 'src': 'embed', 'start': 636.757, 'weight': 2, 'content': [{'end': 641.76, 'text': "So I'm going to my source app app component HTML file, just getting rid of all that.", 'start': 636.757, 'duration': 5.003}, {'end': 654.23, 'text': "And let's just put in a button and what's going to designate this as a actual material button is when we add the directive mat-button.", 'start': 642.581, 'duration': 11.649}, {'end': 660.895, 'text': "And this is all in the documentation and we'll see that how all this works momentarily, my button.", 'start': 655.271, 'duration': 5.624}, {'end': 663.028, 'text': "So let's just save that.", 'start': 662.128, 'duration': 0.9}, {'end': 670.351, 'text': "Let's go back to our, where'd it go? Right here.", 'start': 664.049, 'duration': 6.302}], 'summary': 'Removing unnecessary code, adding a material button to the component html file.', 'duration': 33.594, 'max_score': 636.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA636757.jpg'}, {'end': 721.887, 'src': 'embed', 'start': 692.701, 'weight': 0, 'content': [{'end': 698.464, 'text': "so that you can go on and really understand how to use a specific component that i'm not going to be covering,", 'start': 692.701, 'duration': 5.763}, {'end': 700.326, 'text': "because we're just going to do a few here.", 'start': 698.464, 'duration': 1.862}, {'end': 704.388, 'text': "get your feet wet, understand how the docs work and you'll be able to.", 'start': 700.326, 'duration': 4.062}, {'end': 705.009, 'text': 'you know pretty much.', 'start': 704.388, 'duration': 0.621}, {'end': 708.271, 'text': 'do everything you want with material on your own, all right.', 'start': 705.009, 'duration': 3.262}, {'end': 713.194, 'text': "so let's go ahead and i'm going to come back here.", 'start': 708.271, 'duration': 4.923}, {'end': 716.018, 'text': "let's go to our Let's see.", 'start': 713.194, 'duration': 2.824}, {'end': 721.887, 'text': "Yeah, I think we'll start off with looking at the documentation actually.", 'start': 716.038, 'duration': 5.849}], 'summary': 'Learn to use specific components and understand documentation to work with material on your own.', 'duration': 29.186, 'max_score': 692.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA692701.jpg'}, {'end': 778.934, 'src': 'embed', 'start': 747.81, 'weight': 1, 'content': [{'end': 748.811, 'text': "We'll click on toolbar.", 'start': 747.81, 'duration': 1.001}, {'end': 751.396, 'text': "And we'll see these three tabs up here.", 'start': 749.693, 'duration': 1.703}, {'end': 755.642, 'text': 'And so each component is structured in the same exact format.', 'start': 752.237, 'duration': 3.405}, {'end': 761.571, 'text': 'So you have an overview, contains you just with basic information and potential possibilities.', 'start': 756.103, 'duration': 5.468}, {'end': 768.16, 'text': 'An API, which shows you the name that you need to import.', 'start': 762.552, 'duration': 5.608}, {'end': 772.045, 'text': "And in our case, that's in the material.module.ts file.", 'start': 768.421, 'duration': 3.624}, {'end': 775.69, 'text': 'And also the directives that shows you down here.', 'start': 773.006, 'duration': 2.684}, {'end': 778.934, 'text': 'And then also the examples.', 'start': 775.71, 'duration': 3.224}], 'summary': 'Overview, api, and examples are structured in the same format for each component.', 'duration': 31.124, 'max_score': 747.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA747810.jpg'}], 'start': 636.757, 'title': 'Angular material component documentation', 'summary': 'Delves into integrating angular material components, stressing the significance of consulting official documentation for effective utilization. it showcases the structured format for quick access to component information and usage.', 'chapters': [{'end': 799.249, 'start': 636.757, 'title': 'Angular material component documentation', 'summary': 'Discusses integrating angular material components, emphasizing the importance of consulting the official documentation to understand and utilize specific components effectively, and demonstrates the structured format of the documentation for quick access to information on components and their usage.', 'duration': 162.492, 'highlights': ['The importance of consulting the official documentation to understand and utilize specific components effectively. mention of the significance of using the official documentation for in-depth understanding', 'Demonstration of the structured format of the documentation for quick access to information on components and their usage. explanation of the structured format of the documentation and its tabs (overview, API, examples)', 'Explanation of how to designate a button as an actual material button by adding the directive mat-button. detailed explanation of the process to designate a button as a material button']}], 'duration': 162.492, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA636757.jpg', 'highlights': ['The importance of consulting the official documentation to understand and utilize specific components effectively.', 'Demonstration of the structured format of the documentation for quick access to information on components and their usage.', 'Explanation of how to designate a button as an actual material button by adding the directive mat-button.']}, {'end': 1352.614, 'segs': [{'end': 903.467, 'src': 'embed', 'start': 853.667, 'weight': 0, 'content': [{'end': 856.449, 'text': 'so we just simply have our matte toolbar directive.', 'start': 853.667, 'duration': 2.782}, {'end': 857.31, 'text': 'color is primary.', 'start': 856.449, 'duration': 0.861}, {'end': 864.676, 'text': 'We also use the mat toolbar row and then we put a span for kind of like a logo area called my material.', 'start': 857.99, 'duration': 6.686}, {'end': 867.779, 'text': 'this span class example spacer and then three buttons.', 'start': 864.676, 'duration': 3.103}, {'end': 868.58, 'text': 'All right.', 'start': 868.26, 'duration': 0.32}, {'end': 874.866, 'text': 'Now, in order for this to work, well, you may be wondering, where did I get this HTML from? Well, it actually comes from that documentation.', 'start': 869.161, 'duration': 5.705}, {'end': 877.789, 'text': 'I just edited it slightly based on our needs.', 'start': 874.906, 'duration': 2.883}, {'end': 879.31, 'text': 'So for instance, we could examples.', 'start': 877.949, 'duration': 1.361}, {'end': 882.417, 'text': "We'll see it's actually very similar to this.", 'start': 880.336, 'duration': 2.081}, {'end': 885.358, 'text': "I didn't need three rows, obviously.", 'start': 883.097, 'duration': 2.261}, {'end': 888.72, 'text': 'And the CSS, we also need to put this in.', 'start': 886.419, 'duration': 2.301}, {'end': 894.963, 'text': "So I'm going to copy that and we're going to go to our app component CSS, save that.", 'start': 888.74, 'duration': 6.223}, {'end': 898.104, 'text': 'And now make sure all of your files are saved.', 'start': 895.883, 'duration': 2.221}, {'end': 903.467, 'text': 'And if we go back here, voila, there we go.', 'start': 898.684, 'duration': 4.783}], 'summary': 'Using mat-toolbar directive and mat-toolbar-row with my material logo and three buttons. edited html based on needs and added css to achieve the desired layout.', 'duration': 49.8, 'max_score': 853.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA853667.jpg'}, {'end': 983.285, 'src': 'embed', 'start': 955.43, 'weight': 2, 'content': [{'end': 959.472, 'text': 'So like I wanted an input, click on input, go to API, bam, right there.', 'start': 955.43, 'duration': 4.042}, {'end': 961.353, 'text': "And it shows you, this is what it's going to look like.", 'start': 959.752, 'duration': 1.601}, {'end': 963.614, 'text': 'Very slick inputs here.', 'start': 962.373, 'duration': 1.241}, {'end': 965.535, 'text': 'All right.', 'start': 963.634, 'duration': 1.901}, {'end': 971.557, 'text': "So I'm also going to use a progress spinner.", 'start': 966.115, 'duration': 5.442}, {'end': 973.538, 'text': "That's also in the documentation on the left bar.", 'start': 971.717, 'duration': 1.821}, {'end': 975.199, 'text': 'You can find it there.', 'start': 973.558, 'duration': 1.641}, {'end': 977.059, 'text': 'And then also a card module.', 'start': 975.419, 'duration': 1.64}, {'end': 980.781, 'text': 'So Anga or not angular, but material cards are huge.', 'start': 977.7, 'duration': 3.081}, {'end': 983.285, 'text': 'and just material design in general.', 'start': 981.624, 'duration': 1.661}], 'summary': 'Using angular material components: input, api, progress spinner, and card module.', 'duration': 27.855, 'max_score': 955.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA955430.jpg'}, {'end': 1040.727, 'src': 'embed', 'start': 1010.203, 'weight': 3, 'content': [{'end': 1011.284, 'text': 'So we have our mat card.', 'start': 1010.203, 'duration': 1.081}, {'end': 1016.588, 'text': "So we're going to contain the entire form inside of a card.", 'start': 1012.625, 'duration': 3.963}, {'end': 1020.671, 'text': "So then we're going to put a mat form field.", 'start': 1017.329, 'duration': 3.342}, {'end': 1022.893, 'text': 'This will hold the input.', 'start': 1020.731, 'duration': 2.162}, {'end': 1025.635, 'text': "It's going to be mat input.", 'start': 1022.913, 'duration': 2.722}, {'end': 1030.219, 'text': "We're going to use two-way data binding through ng model.", 'start': 1026.316, 'duration': 3.903}, {'end': 1032.84, 'text': "Why do I say model? Oh, it's not.", 'start': 1031.22, 'duration': 1.62}, {'end': 1033.762, 'text': 'Okay Sorry.', 'start': 1033.021, 'duration': 0.741}, {'end': 1035.782, 'text': 'ng module.', 'start': 1035.022, 'duration': 0.76}, {'end': 1036.503, 'text': "It's not module.", 'start': 1035.823, 'duration': 0.68}, {'end': 1038.867, 'text': 'Oh man, I need some coffee.', 'start': 1037.626, 'duration': 1.241}, {'end': 1040.727, 'text': "So we're basically.", 'start': 1039.146, 'duration': 1.581}], 'summary': 'Creating form with mat card, mat form field, and two-way data binding through ng model.', 'duration': 30.524, 'max_score': 1010.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA1010203.jpg'}], 'start': 799.729, 'title': 'Angular material app creation', 'summary': 'Demonstrates adding a toolbar and creating a material angular app with input fields, progress spinners, and cards, showcasing two-way data binding and event handling.', 'chapters': [{'end': 903.467, 'start': 799.729, 'title': 'Adding a toolbar in angular material', 'summary': 'Demonstrates adding a toolbar in angular material by modifying html and css files, referencing the documentation, and making adjustments to match specific needs.', 'duration': 103.738, 'highlights': ['The process involves adding a toolbar based on the provided documentation and making necessary modifications to the HTML and CSS files.', 'The HTML code includes a mat-toolbar directive, color set to primary, mat-toolbar-row, a span element for the logo, and three buttons.', 'Modifications are made to the HTML code based on specific needs, such as reducing the number of rows, and including necessary CSS styles.', 'The tutorial emphasizes the simplicity of the process and assures that the bulk of HTML code is provided in the written tutorial.']}, {'end': 1352.614, 'start': 904.527, 'title': 'Material angular app tutorial', 'summary': 'Demonstrates the process of creating a material angular app with multiple components, including input fields, progress spinners, and cards, and ties them together using logic in the component class, showcasing two-way data binding and event handling, with a final output of a simple material angular app.', 'duration': 448.087, 'highlights': ['The chapter demonstrates the process of creating a Material Angular app with multiple components The tutorial covers the creation of a Material Angular app with components like input fields, progress spinners, and cards.', 'Showcases two-way data binding and event handling The tutorial includes the usage of two-way data binding through ngModel and event handling for button clicks.', 'Final output is a simple Material Angular app The tutorial concludes with the creation of a simple Material Angular app that shows the result based on user input and interaction.']}], 'duration': 552.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2osMpXOe5fA/pics/2osMpXOe5fA799729.jpg', 'highlights': ['Demonstrates adding a toolbar with mat-toolbar directive and three buttons.', 'Modifications made to HTML and CSS files based on specific needs.', 'Creating a Material Angular app with input fields, progress spinners, and cards.', 'Showcases two-way data binding through ngModel and event handling for button clicks.', 'Concludes with the creation of a simple Material Angular app based on user input and interaction.']}], 'highlights': ['Creating a Material Angular app with input fields, progress spinners, and cards.', 'Emphasizing the importance of Angular CLI installation for integration.', 'Revisiting the process of setting up an Angular 5 project for Material integration.', "Mentioning the optional addition of flags such as 'style=SAS' or 'SCSS' for custom adjustments to the material theme.", 'Emphasizing the updated and changed integration process due to Material updates.', 'Running ng serve to build the project and access it at localhost 4200', 'Installing Angular Material and Angular CDK as dev dependencies', 'Installing Angular animations and importing browser animations module into the app module', 'The chapter emphasizes the need for creating a custom module file for material component imports', 'It details the process of setting up the material module file, including creating imports and exports', 'The chapter explains the process of importing specific material components, such as the mat button module, and adding them to the material module file', 'Importing the Angular Material module and adding it to the app module TS', 'Including an Angular Material theme with predefined colors for material design components', 'Importing a specific prebuilt theme with four options available', 'NPM install, save to a dev dependency, and import HammerJS for full feature support in terms of gestures and material design', 'Import icons in the source index.html file for full featured app that has material design', 'Testing the integration of a material component into the project, ensuring no errors in the console, and confirming the successful integration of the material', 'Importing a material component, specifically the button, and ensuring its functionality within the project', 'Verifying the absence of errors in the console before testing the material integration', 'The importance of consulting the official documentation to understand and utilize specific components effectively.', 'Demonstration of the structured format of the documentation for quick access to information on components and their usage.', 'Explanation of how to designate a button as an actual material button by adding the directive mat-button.', 'Demonstrates adding a toolbar with mat-toolbar directive and three buttons.', 'Modifications made to HTML and CSS files based on specific needs.', 'Showcases two-way data binding through ngModel and event handling for button clicks.', 'Concludes with the creation of a simple Material Angular app based on user input and interaction.']}