{"id":490,"date":"2021-09-23T05:30:15","date_gmt":"2021-09-23T05:30:15","guid":{"rendered":"https:\/\/externlabs.com\/blogs\/?p=490"},"modified":"2023-04-13T18:41:35","modified_gmt":"2023-04-13T13:11:35","slug":"what-is-angular-material","status":"publish","type":"post","link":"https:\/\/externlabs.com\/blogs\/what-is-angular-material\/","title":{"rendered":"What is Angular Material?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Angular Material is a UI library. This library is very useful for <a href=\"https:\/\/externlabs.com\/angular-js-development.php\" target=\"_blank\" rel=\"noreferrer noopener\">Angular developers<\/a> for creating UI fast and interactive in minimal time. In this many types of components, predefined styles are available.<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_63 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Page Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/externlabs.com\/blogs\/what-is-angular-material\/#Installation_Steps_for_Angular_Material\" title=\"Installation Steps for Angular Material\">Installation Steps for Angular Material<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/externlabs.com\/blogs\/what-is-angular-material\/#Some_Important_features_of_Angular_Material\" title=\"Some Important features of Angular Material\">Some Important features of Angular Material<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/externlabs.com\/blogs\/what-is-angular-material\/#AngularCDK\" title=\"Angular\/CDK\">Angular\/CDK<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/externlabs.com\/blogs\/what-is-angular-material\/#Angular_Material_DatePicker\" title=\"Angular Material DatePicker\">Angular Material DatePicker<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/externlabs.com\/blogs\/what-is-angular-material\/#Some_Important_Angular_Material_Built-in_Directive\" title=\"Some Important Angular Material Built-in Directive\">Some Important Angular Material Built-in Directive<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Installation_Steps_for_Angular_Material\"><\/span>Installation Steps for Angular Material<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>npm install -g @angular\/cli&nbsp;<\/li>\n\n\n\n<li>npm install @angular\/material @angular\/cdk @angular\/animations &#8211;save&nbsp;&nbsp;<\/li>\n\n\n\n<li>ng add @angular\/material&nbsp;&nbsp;<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">After that we can use different modules from this library.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Getting Started. You can run an angular project with nodemon also like this.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Some_Important_features_of_Angular_Material\"><\/span>Some Important features of Angular Material<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Responsive design<br><\/li>\n\n\n\n<li>In-built CSS for UI components<br><\/li>\n\n\n\n<li>You can create your own styling for its predefined UI Components<br><\/li>\n\n\n\n<li>Includes effective and latest design of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts.<\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>browser portability, device independence, and graceful degradation.<\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li>There are new features or we can say new and advanced components are available. Some of these features are cards, toolbar, speed dial, side nav, swipe, and so on.<\/li>\n\n\n\n<li>In this developers can configure their own theme with $mdThemingProvider during application configuration. The following properties can be used to assign different color palettes.<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>primaryPalette<\/li>\n\n\n\n<li>accentPalette<\/li>\n\n\n\n<li>warnPalette<\/li>\n\n\n\n<li>backgroundPalette<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"AngularCDK\"><\/span>Angular\/CDK<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/material.angular.io\/cdk\/\" rel=\"nofollow noopener\" target=\"_blank\">Component Dev Kit (CDK)<\/a> is a set of behavior primitives for building UI components. This gives developers solid, fully tested and highly effective facilities to add common interaction patterns.<br>When you want to write a generic, reusable component library then you can&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">use CDK . It helps you to build&nbsp; what you need in less time with minimal effort.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are many Categories of angular CDK.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Angular_Material_DatePicker\"><\/span>Angular Material DatePicker<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">According&nbsp;to its name, it is used for picking up dates.<br><br>import{MatDatepickerModule}from&#8217;@angular\/material\/datepicker&#8217;;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Some_Important_Angular_Material_Built-in_Directive\"><\/span>Some Important Angular Material Built-in Directive<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>md-autocomplete<\/li>\n\n\n\n<li>md-autofocus<\/li>\n\n\n\n<li>md-card<\/li>\n\n\n\n<li>md-chips&nbsp;<\/li>\n\n\n\n<li>md-dialog&nbsp;<\/li>\n\n\n\n<li>md-divider&nbsp;<\/li>\n\n\n\n<li>Md-fab-speed-dial<\/li>\n\n\n\n<li>Md-grid-list<\/li>\n\n\n\n<li>md-ink-ripple<\/li>\n\n\n\n<li>md-nav-bar<\/li>\n\n\n\n<li>Md-progress-circular<\/li>\n\n\n\n<li>Md-slider<\/li>\n\n\n\n<li>Md-swipe-down<\/li>\n\n\n\n<li>Md-switch<\/li>\n\n\n\n<li>Md-tab<\/li>\n\n\n\n<li>Md-toolbar<\/li>\n\n\n\n<li>md-tooltip<\/li>\n\n\n\n<li>Md-truncate<\/li>\n\n\n\n<li>md-virtual-repeat<\/li>\n\n\n\n<li>md-virtual-repeat-container<\/li>\n\n\n\n<li>md-whiteframe<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, If you are looking to <a href=\"https:\/\/externlabs.com\/hire-developer.php\">hire Angular Developers<\/a> for your Development needs, Extern Labs is here to provide you with the best Skilled and Experienced Angular Programmers and Developers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular Material is a UI library. This library is very useful for Angular developers for creating UI fast and interactive in minimal time. In this many types of components, predefined styles are available. Installation Steps for Angular Material After that we can use different modules from this library. Getting Started. You can run an angular&hellip;<\/p>\n","protected":false},"author":7,"featured_media":764,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[45],"tags":[265],"class_list":["post-490","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development","tag-angular-material"],"_links":{"self":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/posts\/490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/comments?post=490"}],"version-history":[{"count":0,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/posts\/490\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/media\/764"}],"wp:attachment":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/media?parent=490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/categories?post=490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/tags?post=490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}