title
Angular Material Introduction & Setup

description
Angular Material allows you to create beautiful Angular apps which incorporate the Google Material design spec. And it's not just about the styling: Angular Material offers a rich suite of pre-built Angular components for you to choose from. ---------- Build a complete Angular App with Angular Material, Angularfire, NgRx & More: https://www.udemy.com/angular-full-app-with-angular-material-angularfire-ngrx/?couponCode=ACAD_M Further Resources (incl. Link to Code): https://www.academind.com/learn/angular/angular-material-a-thorough-guide/introduction-setup Want to learn something totally different? Check out all other courses: https://academind.com/learn/our-courses ---------- • You can follow Max on Twitter (@maxedapps). • And you should of course also follow @academind_real. • You can also find us on Facebook.(https://www.facebook.com/academindchannel/) • Or visit our Website (https://www.academind.com) and subscribe to our newsletter! See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': 'Angular Material Introduction & Setup', 'heatmap': [{'end': 359.829, 'start': 338.422, 'weight': 1}, {'end': 401.985, 'start': 359.829, 'weight': 0.717}, {'end': 713.927, 'start': 693.158, 'weight': 0.77}], 'summary': 'Provides an introduction to angular material, explaining its pre-built components implementing google material design, the simplified approach for adding it to an angular project using angular cli, and the efficient integration of matbutton module for small bundle size and configuring button themes.', 'chapters': [{'end': 150.065, 'segs': [{'end': 126.672, 'src': 'embed', 'start': 81.818, 'weight': 0, 'content': [{'end': 89.325, 'text': 'Now Angular Material, on the other hand, is the styling, the CSS part implementing the Google Material design,', 'start': 81.818, 'duration': 7.507}, {'end': 95.451, 'text': 'but it also is about the logic implemented with Angular or within Angular components.', 'start': 89.325, 'duration': 6.126}, {'end': 102.217, 'text': 'So you get things which are Angular components and therefore can be dropped into any Angular application.', 'start': 95.871, 'duration': 6.346}, {'end': 110.045, 'text': 'Now, the Angular Material also uses something which is known as the Component Development Kit, or CDK.', 'start': 103.283, 'duration': 6.762}, {'end': 113.107, 'text': "We'll have a look at this on their webpage in a second.", 'start': 110.546, 'duration': 2.561}, {'end': 119.369, 'text': 'The CDK basically is a separate package, you could say, developed by the same team, though,', 'start': 114.027, 'duration': 5.342}, {'end': 126.672, 'text': "And it's a package which contains a lot of utility functionalities, for example,", 'start': 120.209, 'duration': 6.463}], 'summary': 'Angular material implements google material design with angular components and cdk.', 'duration': 44.854, 'max_score': 81.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM81818.jpg'}], 'start': 2.535, 'title': 'Angular material overview', 'summary': 'Introduces angular material as a suite of pre-built angular components that implements google material design, and explains the difference between angular material and css frameworks like bootstrap, along with the usage of component development kit (cdk).', 'chapters': [{'end': 150.065, 'start': 2.535, 'title': 'Angular material overview', 'summary': 'Introduces angular material as a suite of pre-built angular components that implements google material design, and explains the difference between angular material and css frameworks like bootstrap, along with the usage of component development kit (cdk).', 'duration': 147.53, 'highlights': ['Angular Material is a suite of pre-built Angular components implementing Google Material design, not a CSS framework like Bootstrap, and it includes logic implemented with Angular components. Angular Material provides pre-built Angular components implementing Google Material design and includes logic implemented with Angular components, distinguishing it from CSS frameworks like Bootstrap.', 'Angular Material utilizes the Component Development Kit (CDK) which offers utility functionalities and base components like data table. The Component Development Kit (CDK) used by Angular Material provides utility functionalities and base components like data table, enhancing the functionality of the suite.', 'Bootstrap is mainly a CSS framework, while Angular Material encompasses styling, logic implemented with Angular, and uses the Component Development Kit (CDK) for utility functionalities and base components. Angular Material differs from Bootstrap as it encompasses styling, logic implemented with Angular, and utilizes the Component Development Kit (CDK) for utility functionalities and base components, unlike Bootstrap which is primarily a CSS framework.']}], 'duration': 147.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM2535.jpg', 'highlights': ['Angular Material is a suite of pre-built Angular components implementing Google Material design, not a CSS framework like Bootstrap, and it includes logic implemented with Angular components.', 'Angular Material utilizes the Component Development Kit (CDK) which offers utility functionalities and base components like data table.', 'Bootstrap is mainly a CSS framework, while Angular Material encompasses styling, logic implemented with Angular, and uses the Component Development Kit (CDK) for utility functionalities and base components.']}, {'end': 515.102, 'segs': [{'end': 177.146, 'src': 'embed', 'start': 150.786, 'weight': 1, 'content': [{'end': 159.117, 'text': 'And Angular Material basically takes that component development kit, so this set of utility functions, and builds upon that.', 'start': 150.786, 'duration': 8.331}, {'end': 163.262, 'text': "To be precise, it's a concrete implementation of it, you could say.", 'start': 159.638, 'duration': 3.624}, {'end': 170.465, 'text': 'So it takes all these utility functions, which are also written in Angular code or using Angular features,', 'start': 163.943, 'duration': 6.522}, {'end': 177.146, 'text': 'but it then builds concrete Angular components based on them or implementing these features,', 'start': 170.465, 'duration': 6.681}], 'summary': 'Angular material builds concrete components based on utility functions.', 'duration': 26.36, 'max_score': 150.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM150786.jpg'}, {'end': 246.084, 'src': 'embed', 'start': 219.551, 'weight': 2, 'content': [{'end': 228.714, 'text': 'And you can take the CDK and build your own component libraries with it, without the Google material design, without the Angular material package,', 'start': 219.551, 'duration': 9.163}, {'end': 235.517, 'text': 'just by taking these utility functions, these tools and easily building your own components with them.', 'start': 228.714, 'duration': 6.803}, {'end': 237.658, 'text': "And that's essentially what Angular Material did.", 'start': 235.597, 'duration': 2.061}, {'end': 239.76, 'text': 'So feel free to scroll through that.', 'start': 238.199, 'duration': 1.561}, {'end': 246.084, 'text': 'You also see some base components, which essentially work but have no styling here, like the data table.', 'start': 239.96, 'duration': 6.124}], 'summary': 'Cdk allows building custom component libraries without google material design or angular material package, as demonstrated by angular material.', 'duration': 26.533, 'max_score': 219.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM219551.jpg'}, {'end': 359.829, 'src': 'heatmap', 'start': 325.614, 'weight': 0, 'content': [{'end': 332.82, 'text': 'since this is a core dependency of angular material because, as i said, it builds up on these utility functions and base components.', 'start': 325.614, 'duration': 7.206}, {'end': 338.022, 'text': 'So we can simply use this approach and we could just copy that command.', 'start': 333.62, 'duration': 4.402}, {'end': 347.985, 'text': "But if you're using Angular 6 and most importantly, the Angular CLI version 6, which you can check by typing ng-v.", 'start': 338.422, 'duration': 9.563}, {'end': 353.985, 'text': 'So if you got version 6 here, Angular CLI version 6.', 'start': 348.565, 'duration': 5.42}, {'end': 356.347, 'text': 'Then what you can do is in your project.', 'start': 353.985, 'duration': 2.362}, {'end': 359.829, 'text': 'so in your Angular project, where you want to add Angular Material,', 'start': 356.347, 'duration': 3.482}], 'summary': 'Angular material usage in angular 6 with angular cli v6.', 'duration': 28.371, 'max_score': 325.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM325614.jpg'}, {'end': 401.985, 'src': 'heatmap', 'start': 359.829, 'weight': 0.717, 'content': [{'end': 368.336, 'text': 'you can use the new ng-add command to add a third-party library that supports this command and Angular Material does support it.', 'start': 359.829, 'duration': 8.507}, {'end': 373.661, 'text': 'So here, you can then simply run ng-add add angular slash material.', 'start': 368.837, 'duration': 4.824}, {'end': 381.855, 'text': 'And now, if you hit enter, it will automatically install all the packages, all the dependencies you need,', 'start': 374.67, 'duration': 7.185}, {'end': 389.199, 'text': 'and add them to your project and do everything you need to give you access to any material in this project.', 'start': 381.855, 'duration': 7.344}, {'end': 390.88, 'text': "So let's wait a second for this to finish.", 'start': 389.319, 'duration': 1.561}, {'end': 398.144, 'text': 'and now that it is finished, we can see that it actually did more than just install a couple of packages.', 'start': 391.901, 'duration': 6.243}, {'end': 401.985, 'text': 'it basically did everything which is outlined down here.', 'start': 398.144, 'duration': 3.841}], 'summary': 'Using ng-add command to add angular material automatically installs all necessary dependencies for access to material in the project.', 'duration': 42.156, 'max_score': 359.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM359829.jpg'}], 'start': 150.786, 'title': 'Angular material', 'summary': 'Provides an overview of angular material, its components, and the process of adding it to an angular project using the angular cli, with emphasis on the simplified approach in version 6.', 'chapters': [{'end': 515.102, 'start': 150.786, 'title': 'Angular material overview', 'summary': 'Provides an overview of angular material, detailing its relationship with the cdk, the components it offers, and the process of adding it to an angular project using the angular cli, emphasizing the simplified approach in version 6.', 'duration': 364.316, 'highlights': ['Angular Material is a concrete implementation of the component development kit (CDK), adding Google material design styling to utility functions to create pre-styled Angular components. It takes utility functions written in Angular code, builds concrete Angular components, and adds Google material design styling; resulting in a separate package depending on the CDK.', 'The CDK provides common behaviors and tools, enabling the creation of custom component libraries without the Google material design or Angular material package. The CDK offers tools like handling overlays and allows the creation of custom component libraries without Google material design or Angular material package.', "The process of adding Angular Material to an Angular project is simplified in version 6, utilizing the 'ng-add' command and automatically installing dependencies. In Angular CLI version 6, the 'ng-add' command can be used to add Angular Material, automatically installing necessary dependencies and making required configurations."]}], 'duration': 364.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM150786.jpg', 'highlights': ["The process of adding Angular Material to an Angular project is simplified in version 6, utilizing the 'ng-add' command and automatically installing dependencies.", 'Angular Material is a concrete implementation of the component development kit (CDK), adding Google material design styling to utility functions to create pre-styled Angular components.', 'The CDK provides common behaviors and tools, enabling the creation of custom component libraries without the Google material design or Angular material package.']}, {'end': 909.109, 'segs': [{'end': 639.478, 'src': 'embed', 'start': 610.672, 'weight': 0, 'content': [{'end': 616.933, 'text': 'Now, to use it, and that is the case for any Angular Material component, you need to unlock it.', 'start': 610.672, 'duration': 6.261}, {'end': 625.715, 'text': "By default, and that's really important, just by installing the Angular Material package, you got no access to any of the components it ships with.", 'start': 617.433, 'duration': 8.282}, {'end': 629.216, 'text': 'This is also done to keep your bundle size small.', 'start': 626.375, 'duration': 2.841}, {'end': 633.677, 'text': "So by default, it doesn't import any component of the Angular Material package.", 'start': 629.756, 'duration': 3.921}, {'end': 639.478, 'text': 'You have to tell Angular Material or your Angular app which components you want,', 'start': 634.157, 'duration': 5.321}], 'summary': 'To use angular material components, you need to explicitly import them to keep bundle size small.', 'duration': 28.806, 'max_score': 610.672, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM610672.jpg'}, {'end': 715.548, 'src': 'heatmap', 'start': 683.788, 'weight': 1, 'content': [{'end': 690.275, 'text': "Now it's a module because even if it's just one component we're using, behind the scenes it can be composed from multiple components.", 'start': 683.788, 'duration': 6.487}, {'end': 692.518, 'text': 'That is why we import such a module.', 'start': 690.535, 'duration': 1.983}, {'end': 697.64, 'text': 'So we import the MatButton module.', 'start': 693.158, 'duration': 4.482}, {'end': 700.741, 'text': 'And this is generally how these modules are named.', 'start': 698.18, 'duration': 2.561}, {'end': 705.083, 'text': "You take the selector of the component you're using.", 'start': 701.162, 'duration': 3.921}, {'end': 713.927, 'text': "In this case, it's an attribute selector, but you also get other components like the icon, which uses a normal tag selector.", 'start': 705.323, 'duration': 8.604}, {'end': 715.548, 'text': 'So you take that selector name.', 'start': 714.267, 'duration': 1.281}], 'summary': 'Import the matbutton module for composing components.', 'duration': 31.76, 'max_score': 683.788, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM683788.jpg'}, {'end': 796.99, 'src': 'embed', 'start': 744.415, 'weight': 2, 'content': [{'end': 755.618, 'text': 'So now I can go to my app component and in there we can simply add a button where I say click me and to turn it into an angular material button we add this matte button selector.', 'start': 744.415, 'duration': 11.203}, {'end': 756.698, 'text': 'you saw in the example.', 'start': 755.618, 'duration': 1.08}, {'end': 769.181, 'text': 'And now when I run ng serve we should see our angular component, our app component here with that button in the material design being presented.', 'start': 757.378, 'duration': 11.803}, {'end': 772.622, 'text': "And that's indeed the case on localhost 4200.", 'start': 769.761, 'duration': 2.861}, {'end': 776.983, 'text': "If I click it, we see this ripple effect, which is a good sign that it's using the material design.", 'start': 772.622, 'duration': 4.361}, {'end': 786.566, 'text': 'But maybe we want to have a button which actually is colored, so a raised button, as it is called, not this flat button.', 'start': 777.504, 'duration': 9.062}, {'end': 796.99, 'text': 'And we can get there by going back to the material docs, clicking on the button again, and there we actually see we got different possible selectors.', 'start': 787.127, 'duration': 9.863}], 'summary': 'Added angular material button to app component with ripple effect and explored different button styles.', 'duration': 52.575, 'max_score': 744.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM744415.jpg'}, {'end': 854.551, 'src': 'embed', 'start': 820.638, 'weight': 5, 'content': [{'end': 824.961, 'text': 'it has this drop shadow but it still has no color.', 'start': 820.638, 'duration': 4.323}, {'end': 833.505, 'text': 'now, to give it a color, we can assign a color property, as you can see here under theming, and we can set it to the primary color,', 'start': 824.961, 'duration': 8.544}, {'end': 835.866, 'text': 'an accent color or a worn color.', 'start': 834.005, 'duration': 1.861}, {'end': 836.866, 'text': "And that's important.", 'start': 836.066, 'duration': 0.8}, {'end': 841.927, 'text': 'Themes in material design have a primary accent and worn color.', 'start': 837.286, 'duration': 4.641}, {'end': 845.549, 'text': 'They also got some other colors, but these are the colors we can use for the button.', 'start': 842.308, 'duration': 3.241}, {'end': 854.551, 'text': 'So to color our button here, we go back to the app component and we simply add color here as an additional attribute to this button.', 'start': 846.089, 'duration': 8.462}], 'summary': 'Material design buttons can be colored using primary, accent, or worn colors, as well as other available colors.', 'duration': 33.913, 'max_score': 820.638, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM820638.jpg'}], 'start': 516.344, 'title': 'Angular material components and buttons', 'summary': 'Focuses on adding angular material components, particularly the matbutton module, for efficient integration and small bundle size. it also covers implementing and configuring angular material buttons, including importing, adding to the imports array, using selectors for different button types, applying colors and themes, and utilizing primary, accent, and worn colors for button theming.', 'chapters': [{'end': 729.951, 'start': 516.344, 'title': 'Adding angular material components', 'summary': 'Explores adding angular material components, emphasizing the process of unlocking and importing the matbutton module in the app module to efficiently add components, ensuring a small bundle size.', 'duration': 213.607, 'highlights': ['The process of unlocking and importing Angular Material components ensures a small bundle size, as only the necessary components are added to the final bundle, optimizing app performance. By default, just by installing the Angular Material package, there is no access to any of the components it ships with, and the components need to be explicitly unlocked and imported to ensure a small bundle size.', 'The MatButton module is imported in the app module to add the button component, following the naming convention of using the selector name to compose the module name, ultimately allowing for efficient addition of components. The MatButton module is imported in the app module to add the button component, following the naming convention of using the selector name to compose the module name, allowing for efficient addition of components.', 'The chapter demonstrates the process of adding the Angular Material button component, highlighting the simplicity of using the map button selector to replace a normal HTML button with the Angular Material button component without the need for any special CSS. The chapter demonstrates the process of adding the Angular Material button component, highlighting the simplicity of using the map button selector to replace a normal HTML button with the Angular Material button component without the need for any special CSS.']}, {'end': 909.109, 'start': 730.472, 'title': 'Angular material button', 'summary': 'Demonstrates how to implement and configure angular material buttons, including importing, adding to the imports array, using selectors for different button types, applying colors and themes, and the importance of checking component-specific documentation. it also showcases the ripple effect and emphasizes the primary, accent, and worn colors available for button theming.', 'duration': 178.637, 'highlights': ['Demonstrating the implementation and configuration of Angular Material buttons, including importing, adding to the imports array, using selectors for different button types, applying colors and themes, and the importance of checking component-specific documentation. N/A', 'Showcasing the ripple effect upon clicking the button, indicating the utilization of material design. N/A', 'Emphasizing the availability of primary, accent, and worn colors for button theming in material design. N/A']}], 'duration': 392.765, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/u679SQsfRVM/pics/u679SQsfRVM516344.jpg', 'highlights': ['The process of unlocking and importing Angular Material components ensures a small bundle size, optimizing app performance.', 'The MatButton module is imported in the app module to add the button component, allowing for efficient addition of components.', 'The chapter demonstrates the process of adding the Angular Material button component, highlighting the simplicity of using the mat-button selector.', 'Demonstrating the implementation and configuration of Angular Material buttons, including importing, adding to the imports array, using selectors for different button types, applying colors and themes.', 'Showcasing the ripple effect upon clicking the button, indicating the utilization of material design.', 'Emphasizing the availability of primary, accent, and worn colors for button theming in material design.']}], 'highlights': ['Angular Material utilizes the Component Development Kit (CDK) which offers utility functionalities and base components like data table.', "The process of adding Angular Material to an Angular project is simplified in version 6, utilizing the 'ng-add' command and automatically installing dependencies.", 'The process of unlocking and importing Angular Material components ensures a small bundle size, optimizing app performance.', 'The MatButton module is imported in the app module to add the button component, allowing for efficient addition of components.', 'The chapter demonstrates the process of adding the Angular Material button component, highlighting the simplicity of using the mat-button selector.']}