title
Build an App using Angular Material (Tutorial)

description
Full written tutorial: https://goo.gl/6UrzSp For more Angular: https://coursetro.com SUBSCRIBE If you like! Learn how to use Angular Material (Google's Material Design) by building a simple app with tabbed navigation. - - - - - - - - - - - - - - - - - - - - - - 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': 'Build an App using Angular Material (Tutorial)', 'heatmap': [{'end': 203.963, 'start': 134.051, 'weight': 0.804}, {'end': 312.349, 'start': 262.113, 'weight': 0.733}], 'summary': 'Learn to build a simple app using angular material, covering toolbar, icons, cards, tabs, and customization, with installation of angular cli, integration of angular material, inclusion of material design icons, creation of ui components, and customization of angular material.', 'chapters': [{'end': 68.967, 'segs': [{'end': 68.967, 'src': 'embed', 'start': 4.073, 'weight': 0, 'content': [{'end': 6.034, 'text': 'Hey everyone, Gary Simon, of course, setro.com.', 'start': 4.073, 'duration': 1.961}, {'end': 9.917, 'text': "And today we're going to build a very simple app based on Angular Material.", 'start': 6.074, 'duration': 3.843}, {'end': 16.222, 'text': "Now, Angular Material is simply Google's material design made to use for Angular projects.", 'start': 10.438, 'duration': 5.784}, {'end': 23.207, 'text': "All right, so let's go ahead and check out the project that we're going to be creating and learning Angular Material in this tutorial.", 'start': 16.602, 'duration': 6.605}, {'end': 28.407, 'text': 'Okay, so here it is in my browser and temporarily I just added some padding here.', 'start': 24.326, 'duration': 4.081}, {'end': 34.228, 'text': 'So this is more of a mobile sort of layout and this is based on material design components.', 'start': 28.707, 'duration': 5.521}, {'end': 45.05, 'text': 'So we have the material design toolbar here with a menu here and certain icons that we can define along with material design icons right here.', 'start': 34.308, 'duration': 10.742}, {'end': 48.351, 'text': 'We also see some icons down here and this is from a font.', 'start': 45.35, 'duration': 3.001}, {'end': 52.954, 'text': 'uh, also we have, uh, these material design cards.', 'start': 49.231, 'duration': 3.723}, {'end': 57.458, 'text': 'so these are based on cards, this sort of gallery that we have here.', 'start': 52.954, 'duration': 4.504}, {'end': 60.56, 'text': 'we can like them and we can change the colors.', 'start': 57.458, 'duration': 3.102}, {'end': 68.967, 'text': 'we can delete these if we wish, and then we also have material design tabs right here and also a couple of form elements just to show you,', 'start': 60.56, 'duration': 8.407}], 'summary': 'Gary simon demonstrates building a simple app with angular material, showcasing material design components and features.', 'duration': 64.894, 'max_score': 4.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc4073.jpg'}], 'start': 4.073, 'title': 'Building angular material app', 'summary': 'Demonstrates building a simple app based on angular material, showcasing material design components, including toolbar, icons, cards, and tabs, with the ability to interact and customize them.', 'chapters': [{'end': 68.967, 'start': 4.073, 'title': 'Building angular material app', 'summary': 'Demonstrates building a simple app based on angular material, showcasing material design components, including toolbar, icons, cards, and tabs, with the ability to interact and customize them.', 'duration': 64.894, 'highlights': ['The tutorial focuses on building a simple app using Angular Material, demonstrating material design components such as toolbar, icons, cards, and tabs, emphasizing mobile layout and interaction capabilities.', "Angular Material is highlighted as Google's material design tailored for Angular projects, providing an accessible framework for creating visually appealing and interactive web applications.", 'The demonstration includes the utilization of material design icons, font-based icons, and form elements, allowing for customization and interaction with the components.', 'The tutorial showcases the functionality of material design cards, enabling users to like, change colors, and delete them, highlighting the interactivity and customization features of Angular Material.']}], 'duration': 64.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc4073.jpg', 'highlights': ["Angular Material is Google's material design tailored for Angular projects, providing an accessible framework for creating visually appealing and interactive web applications.", 'The tutorial focuses on building a simple app using Angular Material, demonstrating material design components such as toolbar, icons, cards, and tabs, emphasizing mobile layout and interaction capabilities.', 'The demonstration includes the utilization of material design icons, font-based icons, and form elements, allowing for customization and interaction with the components.', 'The tutorial showcases the functionality of material design cards, enabling users to like, change colors, and delete them, highlighting the interactivity and customization features of Angular Material.']}, {'end': 296.214, 'segs': [{'end': 203.963, 'src': 'heatmap', 'start': 68.967, 'weight': 0, 'content': [{'end': 74.552, 'text': 'and integrating these is really easy, as you will find out if you follow along in this tutorial.', 'start': 68.967, 'duration': 5.585}, {'end': 75.693, 'text': "all right, so let's get started.", 'start': 74.552, 'duration': 1.141}, {'end': 87.452, 'text': 'Okay so, here in the command line, you want to run node-v and npm-v to check to see if you have node installed and npm installed as well.', 'start': 76.897, 'duration': 10.555}, {'end': 92.539, 'text': 'If not, if these go unrecognized, go to nodejs.org and download.', 'start': 88.073, 'duration': 4.466}, {'end': 95.942, 'text': 'either the windows or the mac version.', 'start': 93.2, 'duration': 2.742}, {'end': 106.612, 'text': 'install it all the way through and usually by default the node package manager will be included and then reload your console, your command line,', 'start': 95.942, 'duration': 10.67}, {'end': 113.658, 'text': 'and then come back and run these, and it should give you a version number and then also ng for the angular cli command line interface.', 'start': 106.612, 'duration': 7.046}, {'end': 116.88, 'text': 'dash v will also give you a version number.', 'start': 113.658, 'duration': 3.222}, {'end': 127.067, 'text': 'if not, you simply have to run npm install global, which means you only have to do this once the angular CLI and then hit enter,', 'start': 116.88, 'duration': 10.187}, {'end': 134.051, 'text': "and then you can run ng-v and it'll give you some type of output like this, assuming you're all ready to go.", 'start': 127.067, 'duration': 6.984}, {'end': 136.892, 'text': 'our first step is to create the project.', 'start': 134.051, 'duration': 2.841}, {'end': 137.893, 'text': "so we'll go ahead.", 'start': 136.892, 'duration': 1.001}, {'end': 143.656, 'text': "we'll type in ng new and the project name for this.", 'start': 137.893, 'duration': 5.763}, {'end': 145.957, 'text': "we'll go ahead and name it ang-material.", 'start': 143.656, 'duration': 2.301}, {'end': 152.791, 'text': 'Now this does take a little bit time to download and install everything.', 'start': 149.13, 'duration': 3.661}, {'end': 154.792, 'text': "So I'm going to pause it and come right back.", 'start': 152.871, 'duration': 1.921}, {'end': 161.114, 'text': "All right, once complete, we'll cd into ang-material.", 'start': 154.812, 'duration': 6.302}, {'end': 166.095, 'text': "And then we'll go ahead and npm install.", 'start': 162.814, 'duration': 3.281}, {'end': 171.237, 'text': "We'll save it to the package.json at angular material.", 'start': 166.555, 'duration': 4.682}, {'end': 182.287, 'text': 'All right, once that is complete, we can go to our code editor and we have to import Angular material to our app.module.ts file.', 'start': 173.677, 'duration': 8.61}, {'end': 191.857, 'text': "So inside of Visual Studio Code or your code editor, whatever that may be, we'll go ahead to the source, app, and then app.module.ts.", 'start': 182.807, 'duration': 9.05}, {'end': 195.82, 'text': 'Now, up here, we have all of our different imports.', 'start': 193.439, 'duration': 2.381}, {'end': 203.963, 'text': "And I'll go just up here and paste in import the material module from Angular Material.", 'start': 196.44, 'duration': 7.523}], 'summary': 'Tutorial covers installing node.js, angular cli, creating project, and importing angular material.', 'duration': 76.99, 'max_score': 68.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc68967.jpg'}, {'end': 296.214, 'src': 'embed', 'start': 196.44, 'weight': 1, 'content': [{'end': 203.963, 'text': "And I'll go just up here and paste in import the material module from Angular Material.", 'start': 196.44, 'duration': 7.523}, {'end': 210.446, 'text': 'And then we will also have to add it to our imports in the ngModel decorator.', 'start': 204.804, 'duration': 5.642}, {'end': 218.389, 'text': "So just after HTTP module, we'll add in material module for root.", 'start': 210.906, 'duration': 7.483}, {'end': 220.81, 'text': "All right, we'll save it.", 'start': 219.93, 'duration': 0.88}, {'end': 231.422, 'text': 'Now, because Angular Material has potential touch gestures worked into their components, it requires hammer.js.', 'start': 222.901, 'duration': 8.521}, {'end': 234.523, 'text': 'And so we have to use npm to install that.', 'start': 231.983, 'duration': 2.54}, {'end': 236.303, 'text': "So let's go back to our console.", 'start': 234.783, 'duration': 1.52}, {'end': 247.205, 'text': "And we'll type in npm, real quickly, npm install, save it to our dependencies and package.json, and then hammer.js.", 'start': 236.963, 'duration': 10.242}, {'end': 252.286, 'text': 'And then also, one more time, npm install.', 'start': 249.005, 'duration': 3.281}, {'end': 258.833, 'text': "We'll save as a dev dependency at types forward slash hammer js.", 'start': 253.131, 'duration': 5.702}, {'end': 271.056, 'text': "OK, so now we'll go ahead back to our code editor, and we need to import hammer js here in app.module.ts file.", 'start': 262.113, 'duration': 8.943}, {'end': 276.558, 'text': 'So import hammer js, and then save.', 'start': 271.136, 'duration': 5.422}, {'end': 287.07, 'text': 'Also, we need to go to the tsconfig.json file, and right under, we have to add in a property called types.', 'start': 277.927, 'duration': 9.143}, {'end': 296.214, 'text': 'So types, open up in brackets, hammer js, and then save.', 'start': 288.591, 'duration': 7.623}], 'summary': 'Imported angular material module and installed hammer.js for touch gestures', 'duration': 99.774, 'max_score': 196.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc196440.jpg'}], 'start': 68.967, 'title': 'Angular cli installation and angular material integration', 'summary': "Covers the installation process of angular cli and creation of a new project, including steps to check for existing installations, download and install node and npm, and create a new project named 'ang-material' using ng new. additionally, it explains the process of importing angular material to the app.module.ts file, adding it to the ngmodel decorator, and installing hammer.js using npm, along with making necessary imports and configurations in the tsconfig.json file.", 'chapters': [{'end': 171.237, 'start': 68.967, 'title': 'Angular cli installation and project creation', 'summary': "Covers the installation process of angular cli and creation of a new project, including steps to check for existing installations, download and install node and npm, and create a new project named 'ang-material' using ng new.", 'duration': 102.27, 'highlights': ["To ensure the availability of node and npm, run 'node -v' and 'npm -v' in the command line; if unrecognized, download and install from nodejs.org, then run the commands again.", "Once node and npm are installed, run 'ng -v' to check for Angular CLI version; if not recognized, install Angular CLI globally using 'npm install -g @angular/cli'.", "To create a new project, use the command 'ng new project-name', where 'ang-material' is used as an example; then navigate into the project directory and run 'npm install' to save angular material to the package.json file."]}, {'end': 296.214, 'start': 173.677, 'title': 'Adding angular material and hammer.js', 'summary': 'Explains the process of importing angular material to the app.module.ts file, adding it to the ngmodel decorator, and installing hammer.js using npm, along with making necessary imports and configurations in the tsconfig.json file.', 'duration': 122.537, 'highlights': ['Importing Angular Material to app.module.ts file by adding the material module and including it in the imports in the ngModel decorator.', 'Installing hammer.js using npm and saving it as a dev dependency at types/hammer js.', "Adding hammer.js import in app.module.ts file and including a property called types with the value 'hammer js' in the tsconfig.json file."]}], 'duration': 227.247, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc68967.jpg', 'highlights': ["To create a new project, use the command 'ng new project-name', where 'ang-material' is used as an example; then navigate into the project directory and run 'npm install' to save angular material to the package.json file.", 'Importing Angular Material to app.module.ts file by adding the material module and including it in the imports in the ngModel decorator.', 'Installing hammer.js using npm and saving it as a dev dependency at types/hammer js.', "Adding hammer.js import in app.module.ts file and including a property called types with the value 'hammer js' in the tsconfig.json file.", "To ensure the availability of node and npm, run 'node -v' and 'npm -v' in the command line; if unrecognized, download and install from nodejs.org, then run the commands again.", "Once node and npm are installed, run 'ng -v' to check for Angular CLI version; if not recognized, install Angular CLI globally using 'npm install -g @angular/cli'."]}, {'end': 669.756, 'segs': [{'end': 323.579, 'src': 'embed', 'start': 298.297, 'weight': 1, 'content': [{'end': 306.104, 'text': "Now, when you're working with material design, if you know you won't be using any material design icons, you can skip this step.", 'start': 298.297, 'duration': 7.807}, {'end': 312.349, 'text': 'But if you do want these icons, we need to include the material icon font in index.html.', 'start': 306.244, 'duration': 6.105}, {'end': 317.113, 'text': 'And if you want to browse these icons, you can go to material.io forward slash icons.', 'start': 312.669, 'duration': 4.444}, {'end': 319.815, 'text': "And there's a lot of them that you can use.", 'start': 317.654, 'duration': 2.161}, {'end': 323.579, 'text': "So we're going to use a few of these in our own project.", 'start': 320.016, 'duration': 3.563}], 'summary': 'Include material icon font in index.html for using material design icons.', 'duration': 25.282, 'max_score': 298.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc298297.jpg'}, {'end': 411.483, 'src': 'embed', 'start': 379.211, 'weight': 3, 'content': [{'end': 382.852, 'text': 'Now, this, of course, is not mandatory when working with Angular Material.', 'start': 379.211, 'duration': 3.641}, {'end': 387.314, 'text': 'But for the purpose of emulating a real-world environment such as a real project,', 'start': 382.912, 'duration': 4.402}, {'end': 391.675, 'text': "we're going to create a data.json file for declaring a list of thumbnails and descriptions.", 'start': 387.314, 'duration': 4.361}, {'end': 392.855, 'text': 'This could be a blog post.', 'start': 391.715, 'duration': 1.14}, {'end': 399.718, 'text': "In our case, it's just going to be a list of thumbnails and descriptions, and that's about it.", 'start': 395.276, 'duration': 4.442}, {'end': 403.219, 'text': 'But just basically screenshots for some type of game browsing app.', 'start': 399.758, 'duration': 3.461}, {'end': 411.483, 'text': "So later on, we'll iterate through this using ng4 in the template and place them within Angular material cards.", 'start': 403.76, 'duration': 7.723}], 'summary': 'Creating a data.json file with list of thumbnails and descriptions for angular material cards.', 'duration': 32.272, 'max_score': 379.211, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc379211.jpg'}, {'end': 522.74, 'src': 'embed', 'start': 488.164, 'weight': 0, 'content': [{'end': 490.905, 'text': "We'll get rid of this h1.", 'start': 488.164, 'duration': 2.741}, {'end': 497.568, 'text': 'To create a toolbar through material design, we do md-toolbar.', 'start': 491.826, 'duration': 5.742}, {'end': 501.67, 'text': "We're going to give it a color attribute and make it primary.", 'start': 497.588, 'duration': 4.082}, {'end': 506.272, 'text': "We'll go ahead and close that off.", 'start': 501.69, 'duration': 4.582}, {'end': 513.913, 'text': "And then inside we're going to give it a span, which is going to be for a title and we'll just name it game viewer.", 'start': 507.642, 'duration': 6.271}, {'end': 515.515, 'text': 'All right.', 'start': 515.135, 'duration': 0.38}, {'end': 517.26, 'text': 'Save that.', 'start': 516.859, 'duration': 0.401}, {'end': 522.74, 'text': "Now let's go ahead and also add a material menu.", 'start': 518.938, 'duration': 3.802}], 'summary': "Creating a material design toolbar with a primary color and title 'game viewer'.", 'duration': 34.576, 'max_score': 488.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc488164.jpg'}], 'start': 298.297, 'title': 'Including material design icons and angular material setup', 'summary': 'Covers including material design icons in a project, enabling access to a wide range of icons for usage, and setting up angular material including creating a data.json file, importing a material design theme, and adding a material toolbar and menu.', 'chapters': [{'end': 348.361, 'start': 298.297, 'title': 'Including material design icons in project', 'summary': 'Discusses the process of including material design icons in a project, emphasizing the inclusion of the material icon font and the roboto font, which material design uses, in the index.html file, enabling access to a wide range of icons for usage.', 'duration': 50.064, 'highlights': ['The process involves including the material icon font and the Roboto font in the index.html file, enabling access to a wide range of icons for usage.', 'The material icon font can be accessed at material.io/icons, offering a plethora of icons for usage in projects.', 'The chapter emphasizes the importance of including the material icon font and the Roboto font in the index.html file for utilizing Material Design icons in the project.']}, {'end': 669.756, 'start': 350.578, 'title': 'Angular material setup', 'summary': 'Explains setting up angular material, including creating a data.json file for thumbnails and descriptions, importing a material design theme, and adding a material toolbar and menu.', 'duration': 319.178, 'highlights': ['Creating a data.json file for a list of thumbnails and descriptions Emulating a real-world environment, the tutorial creates a data.json file for declaring a list of thumbnails and descriptions, which will be later used to iterate through using ng4 in the template.', 'Importing a material design theme The tutorial imports the Deep Purple Amber theme from Angular Material, offering multiple themes like Indigo Pink, Deep Purple Amber, Purple Green, and Pink Blue Gray.', 'Adding a material toolbar through material design The tutorial demonstrates adding a material toolbar with a primary color attribute and a title for a game viewer within app.component.html.', 'Including a material menu with icons and labels The tutorial adds a material menu with icons like fingerprint, announcement, and notifications off, showing how to bind menu items and display them with labels and icons.']}], 'duration': 371.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc298297.jpg', 'highlights': ['The tutorial demonstrates adding a material toolbar with a primary color attribute and a title for a game viewer within app.component.html.', 'The process involves including the material icon font and the Roboto font in the index.html file, enabling access to a wide range of icons for usage.', 'The material icon font can be accessed at material.io/icons, offering a plethora of icons for usage in projects.', 'Creating a data.json file for a list of thumbnails and descriptions Emulating a real-world environment, the tutorial creates a data.json file for declaring a list of thumbnails and descriptions, which will be later used to iterate through using ng4 in the template.']}, {'end': 930.339, 'segs': [{'end': 712.306, 'src': 'embed', 'start': 670.557, 'weight': 0, 'content': [{'end': 675.278, 'text': "Okay So moving on, we're going to go ahead and create some angular material tabs.", 'start': 670.557, 'duration': 4.721}, {'end': 690.731, 'text': "So just underneath our toolbar here, right in this section, let's go ahead and I'm going to put in MDTabGroup and we'll close that off.", 'start': 677.219, 'duration': 13.512}, {'end': 708.003, 'text': "And inside, Depending on how many different tabs you want, we specify md tab label equals, we'll make this one gallery, and then close this off.", 'start': 693.914, 'duration': 14.089}, {'end': 712.306, 'text': "We'll copy this, paste it.", 'start': 709.824, 'duration': 2.482}], 'summary': 'Creating angular material tabs with mdtabgroup and specifying tab labels.', 'duration': 41.749, 'max_score': 670.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc670557.jpg'}, {'end': 766.047, 'src': 'embed', 'start': 738.506, 'weight': 3, 'content': [{'end': 743.713, 'text': "And we'll use HTTP to fetch the results from the data.json file.", 'start': 738.506, 'duration': 5.207}, {'end': 752.235, 'text': "So what we need to do I'm going to open this up all the way just so we have some more work, some room to work with here.", 'start': 744.313, 'duration': 7.922}, {'end': 755.478, 'text': "And we're going to go to app.component.ts.", 'start': 752.615, 'duration': 2.863}, {'end': 762.424, 'text': 'And the first thing we need to do is to import HTTP from the Angular HTTP library, just like that.', 'start': 756.078, 'duration': 6.346}, {'end': 766.047, 'text': 'And then after that, we have to create a property.', 'start': 763.425, 'duration': 2.622}], 'summary': 'Using http to fetch data from data.json in app.component.ts', 'duration': 27.541, 'max_score': 738.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc738506.jpg'}, {'end': 930.339, 'src': 'embed', 'start': 840.421, 'weight': 5, 'content': [{'end': 846.284, 'text': "And so now we have to iterate through these using ng4 and we're going to embed these in material design cards.", 'start': 840.421, 'duration': 5.863}, {'end': 858.891, 'text': "So to start off with this, we'll have md-card and ng4 let space screen of space screens.", 'start': 846.905, 'duration': 11.986}, {'end': 863.114, 'text': "I'm going to open this up just a bit right here.", 'start': 858.911, 'duration': 4.203}, {'end': 869.137, 'text': 'And then also a semicolon because we want to get the index, let i equal index.', 'start': 864.534, 'duration': 4.603}, {'end': 873.292, 'text': 'and close that off.', 'start': 872.512, 'duration': 0.78}, {'end': 877.114, 'text': "And then inside of there, we're going to have first the image.", 'start': 873.853, 'duration': 3.261}, {'end': 883.597, 'text': 'So image MD card image source equals.', 'start': 877.434, 'duration': 6.163}, {'end': 888.899, 'text': 'And I have the source of the images just embedded right inside of the data dot JSON file.', 'start': 883.937, 'duration': 4.962}, {'end': 895.742, 'text': 'And so through interpolation with squiggly brackets, we have space screen dot IMG.', 'start': 889.56, 'duration': 6.182}, {'end': 899.544, 'text': 'And close that off.', 'start': 897.543, 'duration': 2.001}, {'end': 901.245, 'text': "Let's just save it here.", 'start': 899.764, 'duration': 1.481}, {'end': 915.212, 'text': "And those are broken images because I haven't yet imported the images that it uses inside of the Angular material source assets.", 'start': 905.908, 'duration': 9.304}, {'end': 917.713, 'text': 'We need to create an images folder.', 'start': 915.432, 'duration': 2.281}, {'end': 924.897, 'text': 'So you can either create that here through your code editor or just go into your folders here.', 'start': 918.514, 'duration': 6.383}, {'end': 926.717, 'text': 'make an images folder.', 'start': 925.797, 'duration': 0.92}, {'end': 930.339, 'text': "Then I'm going to paste in the three images I can use.", 'start': 926.737, 'duration': 3.602}], 'summary': 'Iterating through ng4 to embed images in material design cards.', 'duration': 89.918, 'max_score': 840.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc840421.jpg'}], 'start': 670.557, 'title': 'Angular material ui components', 'summary': 'Covers creating tabs with md tab group, fetching data using http, and iterating through ng4 to embed content in material design cards. it includes importing http library, using dependency injection, and embedding images from a data.json file.', 'chapters': [{'end': 737.825, 'start': 670.557, 'title': 'Creating angular material tabs', 'summary': 'Demonstrates creating angular material tabs with md tab group, adding tab labels like gallery and settings, and displaying content from a data.json file.', 'duration': 67.268, 'highlights': ['Displaying content from a data.json file, such as the gallery, using angular material tabs.', 'Creating angular material tabs with md tab group and adding tab labels like gallery and settings.', 'Demonstrating the smooth application of styles to the tabs.']}, {'end': 838.816, 'start': 738.506, 'title': 'Using http to fetch data', 'summary': 'Details the process of using http to fetch data from a data.json file in an angular app, including importing the http library, creating a property, and using dependency injection to retrieve and display the data.', 'duration': 100.31, 'highlights': ["The process involves importing the HTTP library from Angular, creating a property named 'screens' of type array any, and using dependency injection to retrieve the data and display it in the app.component.ts file.", "The code includes using this.http.get to reference the data.json file, mapping the response to response.json, and subscribing to the response to assign the data to the 'screens' property.", 'The chapter emphasizes the use of HTTP to fetch data in an Angular app, showcasing the steps involved in importing, retrieving, and displaying the data.']}, {'end': 930.339, 'start': 840.421, 'title': 'Angular material design cards iteration', 'summary': 'Discusses iterating through ng4 to embed content in material design cards, including ng4 iteration syntax, embedding images and creating an images folder, using data from a data.json file.', 'duration': 89.918, 'highlights': ['Using ng4 to iterate through and embed content in material design cards, including syntax like md-card and ng4 let, and obtaining the index with let i equal index.', 'Interpolating image source from data dot JSON file using squiggly brackets to display images in material design cards.', 'Creating an images folder and importing images for use inside the Angular material source assets.']}], 'duration': 259.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc670557.jpg', 'highlights': ['Covers creating tabs with md tab group and adding tab labels like gallery and settings.', 'Displaying content from a data.json file, such as the gallery, using angular material tabs.', 'Demonstrating the smooth application of styles to the tabs.', 'The process involves importing the HTTP library from Angular and using dependency injection to retrieve the data and display it.', 'The chapter emphasizes the use of HTTP to fetch data in an Angular app, showcasing the steps involved in importing, retrieving, and displaying the data.', 'Using ng4 to iterate through and embed content in material design cards, including syntax like md-card and ng4 let.', 'Interpolating image source from data dot JSON file using squiggly brackets to display images in material design cards.', 'Creating an images folder and importing images for use inside the Angular material source assets.']}, {'end': 1301.785, 'segs': [{'end': 1135.111, 'src': 'embed', 'start': 1079.854, 'weight': 0, 'content': [{'end': 1084.137, 'text': "This one's going to be named delete, and then we'll change this to delete.", 'start': 1079.854, 'duration': 4.283}, {'end': 1086.439, 'text': 'All right.', 'start': 1086.119, 'duration': 0.32}, {'end': 1091.303, 'text': "And then we'll go ahead and save and we'll see what this looks like.", 'start': 1086.559, 'duration': 4.744}, {'end': 1093.105, 'text': 'There we go.', 'start': 1092.664, 'duration': 0.441}, {'end': 1101.692, 'text': "Okay, now let's hop into the component.", 'start': 1097.648, 'duration': 4.044}, {'end': 1107.498, 'text': "So control B here, go to our component file, and let's create those two methods.", 'start': 1102.513, 'duration': 4.985}, {'end': 1111.101, 'text': "I'm just going to paste them in real quickly here.", 'start': 1107.518, 'duration': 3.583}, {'end': 1115.366, 'text': 'So we have like me passing an I, and this is just toggling on and off.', 'start': 1111.582, 'duration': 3.784}, {'end': 1119.73, 'text': 'I probably could do this through a ternary operator, but I have it for now just like that.', 'start': 1115.426, 'duration': 4.304}, {'end': 1120.571, 'text': 'And then delete me.', 'start': 1119.83, 'duration': 0.741}, {'end': 1130.789, 'text': "All we're using is splice just to remove the item here based on whichever one was clicked, which is the purpose for passing in the I argument.", 'start': 1121.363, 'duration': 9.426}, {'end': 1132.429, 'text': "Okay, let's save.", 'start': 1131.729, 'duration': 0.7}, {'end': 1135.111, 'text': "And we'll come over here.", 'start': 1134.07, 'duration': 1.041}], 'summary': "Creating 'delete' functionality with two methods to toggle and remove items.", 'duration': 55.257, 'max_score': 1079.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc1079854.jpg'}, {'end': 1196.787, 'src': 'embed', 'start': 1171.591, 'weight': 5, 'content': [{'end': 1178.477, 'text': 'The purpose of binding it to a method in our component is so that, For instance,', 'start': 1171.591, 'duration': 6.886}, {'end': 1185.461, 'text': 'we could pass along the eye and then we can persist that preference that the person liked in some sort of database.', 'start': 1178.477, 'duration': 6.984}, {'end': 1187.242, 'text': 'You would do that in here.', 'start': 1186.301, 'duration': 0.941}, {'end': 1190.644, 'text': 'But obviously, that would go beyond the scope of this tutorial.', 'start': 1187.982, 'duration': 2.662}, {'end': 1196.787, 'text': 'So what we want to do now next is I create the settings content.', 'start': 1190.864, 'duration': 5.923}], 'summary': 'Binding method in component to persist user preferences in a database.', 'duration': 25.196, 'max_score': 1171.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc1171591.jpg'}, {'end': 1270.789, 'src': 'embed', 'start': 1221.985, 'weight': 1, 'content': [{'end': 1229.393, 'text': 'we just have a heading, h1 tag or element rather and then just a paragraph and then a label.', 'start': 1221.985, 'duration': 7.408}, {'end': 1236.337, 'text': "The label would be associated with a, let's see over here, some type of form element.", 'start': 1230.093, 'duration': 6.244}, {'end': 1239.498, 'text': "Right now it's not styled, but we'll do that shortly.", 'start': 1237.517, 'duration': 1.981}, {'end': 1247.423, 'text': "And so now just to get some experience working with Angular material form components, let's go ahead and add in a slider.", 'start': 1239.959, 'duration': 7.464}, {'end': 1253.148, 'text': "The way we'll do that is just underneath here, we'll put in md-slider.", 'start': 1248.383, 'duration': 4.765}, {'end': 1255.95, 'text': 'And then we have a bunch of values that we can pass through.', 'start': 1253.168, 'duration': 2.782}, {'end': 1263.225, 'text': 'And you could check out the Angular material documentation for all of the possible uh, attributes that you can add here.', 'start': 1255.97, 'duration': 7.255}, {'end': 1269.248, 'text': 'So, uh, show ticks equals true is one of them by the, by default that is false.', 'start': 1263.305, 'duration': 5.943}, {'end': 1270.789, 'text': "So we're going to make it true.", 'start': 1269.268, 'duration': 1.521}], 'summary': 'Adding angular material form components, including a slider with show ticks set to true.', 'duration': 48.804, 'max_score': 1221.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc1221985.jpg'}], 'start': 930.479, 'title': 'Angular project and settings content', 'summary': 'Covers adding buttons and methods, like and delete functionalities in an angular project, along with creating settings content, including a slider with specific values and attributes, to provide experience working with angular material form components, with usage hints.', 'chapters': [{'end': 1171.05, 'start': 930.479, 'title': 'Angular project: adding buttons and methods', 'summary': 'Demonstrates adding buttons and methods in an angular project, including creating like and delete functionalities and modifying button styles, with a real-world environment usage hint.', 'duration': 240.571, 'highlights': ['The chapter demonstrates creating like and delete functionalities in an Angular project, including event binding and method implementation.', 'The transcript provides a practical example of modifying button styles using class and property binding in an Angular project.', 'The speaker explains using splice to remove items based on user interaction, providing a real-world environment usage hint.']}, {'end': 1301.785, 'start': 1171.591, 'title': 'Creating settings content in angular', 'summary': 'Discusses creating settings content in angular, including adding a slider with specific values and attributes, to provide experience working with angular material form components.', 'duration': 130.194, 'highlights': ['The chapter discusses creating settings content in Angular, including adding a slider with specific values and attributes, to provide experience working with Angular material form components.', 'The tutorial explains how to add a slider in Angular, with specific attributes such as show ticks, max, min, step, thumb label, and value.', 'It mentions the purpose of binding the method in the component to persist user preferences in a database, but states that it is beyond the scope of the tutorial.']}], 'duration': 371.306, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc930479.jpg', 'highlights': ['The chapter demonstrates creating like and delete functionalities in an Angular project, including event binding and method implementation.', 'The chapter discusses creating settings content in Angular, including adding a slider with specific values and attributes, to provide experience working with Angular material form components.', 'The transcript provides a practical example of modifying button styles using class and property binding in an Angular project.', 'The tutorial explains how to add a slider in Angular, with specific attributes such as show ticks, max, min, step, thumb label, and value.', 'The speaker explains using splice to remove items based on user interaction, providing a real-world environment usage hint.', 'It mentions the purpose of binding the method in the component to persist user preferences in a database, but states that it is beyond the scope of the tutorial.']}, {'end': 1678.765, 'segs': [{'end': 1405.475, 'src': 'embed', 'start': 1303.046, 'weight': 3, 'content': [{'end': 1303.386, 'text': 'All right.', 'start': 1303.046, 'duration': 0.34}, {'end': 1305.547, 'text': "And let's close that off.", 'start': 1303.506, 'duration': 2.041}, {'end': 1306.448, 'text': "Let's save.", 'start': 1305.828, 'duration': 0.62}, {'end': 1313.532, 'text': 'First, I do need to close this tag right here.', 'start': 1309.59, 'duration': 3.942}, {'end': 1315.733, 'text': 'So MD slider.', 'start': 1314.292, 'duration': 1.441}, {'end': 1321.336, 'text': 'All right.', 'start': 1320.896, 'duration': 0.44}, {'end': 1323.718, 'text': 'There we have our slider.', 'start': 1322.657, 'duration': 1.061}, {'end': 1325.119, 'text': 'Very ugly.', 'start': 1324.518, 'duration': 0.601}, {'end': 1326.059, 'text': "We'll fix that though.", 'start': 1325.279, 'duration': 0.78}, {'end': 1331.563, 'text': "And then let's also add one more just right here.", 'start': 1326.84, 'duration': 4.723}, {'end': 1334.545, 'text': 'And this one will add a toggle.', 'start': 1331.583, 'duration': 2.962}, {'end': 1339.468, 'text': 'So that is md-slide-toggle.', 'start': 1334.785, 'duration': 4.683}, {'end': 1342.95, 'text': 'Some setting of a label here.', 'start': 1341.209, 'duration': 1.741}, {'end': 1344.992, 'text': 'And then close it out.', 'start': 1342.97, 'duration': 2.022}, {'end': 1347.033, 'text': "As you can see, it's very simple to define these things.", 'start': 1345.072, 'duration': 1.961}, {'end': 1351.122, 'text': "All right, now let's go back after saving.", 'start': 1349.582, 'duration': 1.54}, {'end': 1358.364, 'text': 'And we have our toggle working.', 'start': 1354.703, 'duration': 3.661}, {'end': 1363.104, 'text': "Okay, so let's go ahead and give this some styles, just a few of them in our styles.css.", 'start': 1358.864, 'duration': 4.24}, {'end': 1364.745, 'text': "And there's just three of them.", 'start': 1363.704, 'duration': 1.041}, {'end': 1368.645, 'text': "And I'm going to copy this and paste that here.", 'start': 1364.985, 'duration': 3.66}, {'end': 1374.606, 'text': 'So we have the empty slider horizontal class here, the label, and also page padding.', 'start': 1368.725, 'duration': 5.881}, {'end': 1378.267, 'text': 'All right.', 'start': 1374.626, 'duration': 3.641}, {'end': 1380.165, 'text': 'page padding.', 'start': 1379.244, 'duration': 0.921}, {'end': 1385.19, 'text': "we have to add this div id, so let's go back to right here.", 'start': 1380.165, 'duration': 5.025}, {'end': 1386.872, 'text': 'i forgot to add it right here.', 'start': 1385.19, 'duration': 1.682}, {'end': 1396.863, 'text': 'div id equals page padding, just because it looked like things are a little bit up too up against the uh, the sides there for my taste.', 'start': 1386.872, 'duration': 9.991}, {'end': 1400.53, 'text': 'so i wrapped everything inside of a div here.', 'start': 1396.863, 'duration': 3.667}, {'end': 1401.951, 'text': "So now we'll save it.", 'start': 1401.09, 'duration': 0.861}, {'end': 1404.494, 'text': "Notice how it's pretty close like that.", 'start': 1402.532, 'duration': 1.962}, {'end': 1405.475, 'text': 'Do not like that.', 'start': 1404.734, 'duration': 0.741}], 'summary': 'Creating and styling sliders and toggles, along with adding page padding for better display.', 'duration': 102.429, 'max_score': 1303.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc1303046.jpg'}, {'end': 1486.476, 'src': 'embed', 'start': 1461.108, 'weight': 0, 'content': [{'end': 1467.27, 'text': "But what's happening here is we're importing our Angular material, all theme, and the MD core.", 'start': 1461.108, 'duration': 6.162}, {'end': 1470.491, 'text': 'And then basically, your customizations go here.', 'start': 1467.75, 'duration': 2.741}, {'end': 1474.492, 'text': 'So we have app primary, accent, and worn.', 'start': 1470.611, 'duration': 3.881}, {'end': 1478.013, 'text': "And we're declaring palettes here.", 'start': 1475.272, 'duration': 2.741}, {'end': 1484.275, 'text': 'So for our primary color scheme right here, we have MD indigo.', 'start': 1478.533, 'duration': 5.742}, {'end': 1486.476, 'text': 'For our accent, we have pink.', 'start': 1484.895, 'duration': 1.581}], 'summary': 'Importing angular material theme with custom color scheme: md indigo for primary and pink for accent.', 'duration': 25.368, 'max_score': 1461.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc1461108.jpg'}, {'end': 1640.777, 'src': 'embed', 'start': 1578.967, 'weight': 2, 'content': [{'end': 1585.07, 'text': 'if we go to settings, we can also see we have the pink accent color here and this works on.', 'start': 1578.967, 'duration': 6.103}, {'end': 1588.872, 'text': 'you know these certain types of elements that are using it.', 'start': 1585.07, 'duration': 3.802}, {'end': 1600.498, 'text': "so if we go back here to custom theme and also go back to the color theme, let's try making the primary palette, for instance, this teal color.", 'start': 1588.872, 'duration': 11.626}, {'end': 1606.75, 'text': "so we'll specify teal And we'll save it.", 'start': 1600.498, 'duration': 6.252}, {'end': 1610.132, 'text': 'And there we go.', 'start': 1609.152, 'duration': 0.98}, {'end': 1622.783, 'text': 'Great So of course, we only touched on just a few, but really the most important fundamental factors of working with Angular Material.', 'start': 1612.815, 'duration': 9.968}, {'end': 1628.408, 'text': 'But if you go to material.angular.io and go to Components,', 'start': 1623.223, 'duration': 5.185}, {'end': 1638.616, 'text': "you'll see the full list of what they offer in these five different categories for form controls, navigation, layout buttons, icons, indicators,", 'start': 1628.408, 'duration': 10.208}, {'end': 1640.777, 'text': 'pop-up modules, etc.', 'start': 1638.616, 'duration': 2.161}], 'summary': 'Exploring angular material settings, custom themes, and components for form controls, navigation, layout buttons, icons, and more.', 'duration': 61.81, 'max_score': 1578.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc1578967.jpg'}], 'start': 1303.046, 'title': 'Customizing angular material', 'summary': 'Explains creating a custom theme.scss file, defining primary and accent colors, and integrating components easily into apps, based on material.io guidelines.', 'chapters': [{'end': 1405.475, 'start': 1303.046, 'title': 'Creating toggle and slider with md components', 'summary': 'Demonstrates the process of creating a slider and toggle using md components, adding styles to them, and addressing issues with page padding and alignment.', 'duration': 102.429, 'highlights': ['The chapter demonstrates the process of creating a slider and toggle using MD components.', 'It also covers adding styles to the components, including three specific styles in our styles.css.', "Additionally, it addresses the issue of page padding by wrapping everything inside a div with the id 'page padding' to adjust the alignment."]}, {'end': 1678.765, 'start': 1405.555, 'title': 'Customizing angular material', 'summary': 'Explains how to create a custom theme.scss file in angular material, allowing users to define primary and accent colors based on material.io guidelines, and integrate various components easily into their apps.', 'duration': 273.21, 'highlights': ['Users can customize the color theme of Angular Material by creating a custom theme.scss file and defining primary and accent colors based on material.io guidelines. material.io guidelines, custom theme.scss file', 'The primary color scheme is set to MD indigo, and the accent color is set to pink, showcasing how to declare palettes for primary and accent colors in the custom theme.scss file. MD indigo, pink', "Demonstration of how to change the primary palette to teal in the custom theme.scss file and see the immediate effect on the app's color theme. teal color", 'The chapter encourages exploring the full list of components offered by Angular Material, including form controls, navigation, layout buttons, icons, indicators, and pop-up modules, available at material.angular.io. full list of components, material.angular.io']}], 'duration': 375.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gOSdZJ7gpOc/pics/gOSdZJ7gpOc1303046.jpg', 'highlights': ['Users can customize the color theme of Angular Material by creating a custom theme.scss file and defining primary and accent colors based on material.io guidelines.', 'The primary color scheme is set to MD indigo, and the accent color is set to pink, showcasing how to declare palettes for primary and accent colors in the custom theme.scss file.', "Demonstration of how to change the primary palette to teal in the custom theme.scss file and see the immediate effect on the app's color theme.", 'The chapter demonstrates the process of creating a slider and toggle using MD components.', "Additionally, it addresses the issue of page padding by wrapping everything inside a div with the id 'page padding' to adjust the alignment.", 'It also covers adding styles to the components, including three specific styles in our styles.css.', 'The chapter encourages exploring the full list of components offered by Angular Material, including form controls, navigation, layout buttons, icons, indicators, and pop-up modules, available at material.angular.io.']}], 'highlights': ["Angular Material is Google's material design tailored for Angular projects, providing an accessible framework for creating visually appealing and interactive web applications.", 'The tutorial focuses on building a simple app using Angular Material, demonstrating material design components such as toolbar, icons, cards, and tabs, emphasizing mobile layout and interaction capabilities.', 'The demonstration includes the utilization of material design icons, font-based icons, and form elements, allowing for customization and interaction with the components.', 'The tutorial showcases the functionality of material design cards, enabling users to like, change colors, and delete them, highlighting the interactivity and customization features of Angular Material.', "To create a new project, use the command 'ng new project-name', where 'ang-material' is used as an example; then navigate into the project directory and run 'npm install' to save angular material to the package.json file.", 'Importing Angular Material to app.module.ts file by adding the material module and including it in the imports in the ngModel decorator.', 'The tutorial demonstrates adding a material toolbar with a primary color attribute and a title for a game viewer within app.component.html.', 'The process involves including the material icon font and the Roboto font in the index.html file, enabling access to a wide range of icons for usage.', 'Creating tabs with md tab group and adding tab labels like gallery and settings.', 'The chapter demonstrates creating like and delete functionalities in an Angular project, including event binding and method implementation.', 'Users can customize the color theme of Angular Material by creating a custom theme.scss file and defining primary and accent colors based on material.io guidelines.', "Demonstration of how to change the primary palette to teal in the custom theme.scss file and see the immediate effect on the app's color theme.", 'The chapter demonstrates the process of creating a slider and toggle using MD components.', 'The chapter encourages exploring the full list of components offered by Angular Material, including form controls, navigation, layout buttons, icons, indicators, and pop-up modules, available at material.angular.io.']}