{"id":1388,"date":"2023-08-30T05:00:00","date_gmt":"2023-08-30T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1388"},"modified":"2023-08-29T14:48:32","modified_gmt":"2023-08-29T21:48:32","slug":"getting-started-with-angular-material","status":"publish","type":"post","link":"http:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/","title":{"rendered":"Getting Started with Angular Material"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>This is a guest post by Duncan Faulkner. He is an Angular developer for a fintech company based in the UK. A software engineer with over twenty years of experience, Duncan has been working with Angular since the early betas, written blog posts for ng-conf and several <a href=\"https:\/\/anglebrackets.gumroad.com\/\" target=\"_blank\" rel=\"noopener\" title=\"\">short books on Angular Material<\/a>. He&#8217;s also the maintainer for the <a href=\"https:\/\/github.com\/ngbracket\/ngx-layout\" target=\"_blank\" rel=\"noopener\" title=\"\">@ngbracket\/ngx-layout<\/a> (formerly @angular\/flex-layout) open-source project.<\/p>\n\n\n\n<p>You can follow him on Twitter, LinkedIn, Medium and YouTube by using this <a href=\"https:\/\/bio.link\/duncanfaulkner\" target=\"_blank\" rel=\"noopener\" title=\"\">bio link<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<p><a href=\"https:\/\/material.angular.io\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Angular Material<\/a> is a component library for Angular projects, this library comprises of a number of User Interface components (UI) and a <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/cdk\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Component Development Kit (CDK)<\/a>. In this series of posts we&#8217;ll use Angular Material version 16, there haven&#8217;t any major changes to this version of the library.<\/p>\n\n\n\n<p>Some of the components in this library are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>buttons<\/li>\n\n\n\n<li>inputs<\/li>\n\n\n\n<li>cards<\/li>\n\n\n\n<li>date picker<\/li>\n\n\n\n<li>progress bar<\/li>\n\n\n\n<li>grids<\/li>\n\n\n\n<li>toolbar<\/li>\n\n\n\n<li>and many more:<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"726\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-39-1024x726.png\" alt=\"\" class=\"wp-image-1395\" srcset=\"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-39-1024x726.png 1024w, http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-39-300x213.png 300w, http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-39-768x545.png 768w, http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-39.png 1149w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Adding Angular Material to an existing Angular application is quite straight forward, navigate to your Angular project in a terminal window and type:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">ng<\/span> <span class=\"hljs-selector-tag\">add<\/span> <span class=\"hljs-keyword\">@angular<\/span>\/material\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This will install Angular Material, the CDK and the Angular Animations, during this installation process we are asked to make a few choices.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The first one will show the version of Angular Material that will be installed and whether to proceed or not.<\/li>\n\n\n\n<li>Next, choose either one of the pre-built themes or create a custom theme.\n<ul class=\"wp-block-list\">\n<li>The available pre-built themes are:\n<ul class=\"wp-block-list\">\n<li>deeppurple-amber, Palette (Primary, Accent, Warn) &#8211; deep-purple, amber, red.<\/li>\n\n\n\n<li>indigo-pink, Palette (Primary, Accent, Warn) &#8211; indigo, pink, red.<\/li>\n\n\n\n<li>pink-bluegrey, Palette (Primary, Accent, Warn) &#8211; pink, blue-grey, red.<\/li>\n\n\n\n<li>purple-green, Palette (Primary, Accent, Warn) &#8211; purple, green, red.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Custom &#8211; I will discuss this in a future post.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Next, include Angular Material typography styles in our project.\n<ul class=\"wp-block-list\">\n<li>This will add the\u00a0<code>mat-typography<\/code>\u00a0CSS\u00a0<code>class<\/code>\u00a0to the\u00a0<code>body<\/code>\u00a0tag: <code>&lt;body class=\"mat-typography\"> &lt;app-root>&lt;\/app-root> &lt;\/body><\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Finally, include browser animations in our project.\n<ul class=\"wp-block-list\">\n<li>Declining this will disable most of the animations of Angular Material.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Now the installation is complete, there have been a few changes made to our project.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The following two dependencies were added to the\u00a0<code>package.json<\/code>\u00a0file.<code>\"dependencies\" : { \"@angular\/cdk\": \"^16.2.1\" \"@angular\/material\" : \"^16.2.1\" }<\/code><\/li>\n\n\n\n<li>The\u00a0<code>Roboto<\/code>\u00a0font was added to the\u00a0<code>index.html<\/code>\u00a0file: <code>&lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\"> &lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500&amp;display=swap\" rel=\"stylesheet\"><\/code><\/li>\n\n\n\n<li>The Material Design Icon font was also be added to the\u00a0<code>index.html<\/code>\u00a0file. <code>&lt;link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\"><\/code><\/li>\n<\/ul>\n\n\n\n<p>There are also some changes to global CSS styles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Removed the margins from the\u00a0<code>body<\/code>\u00a0tag<\/li>\n\n\n\n<li>Changed the\u00a0<code>height : 100%<\/code>\u00a0on\u00a0<code>html<\/code>\u00a0and\u00a0<code>body<\/code>\u00a0tag.<\/li>\n\n\n\n<li>Made the\u00a0<code>Roboto<\/code>\u00a0font as the applications default.<\/li>\n<\/ul>\n\n\n\n<p>Now we have Angular Material installed, let&#8217;s try out an Angular Material component in our application. In the&nbsp;<code>app.component.ts<\/code>&nbsp;file add the following.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/core'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { MatSliderModule } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/material\/slider'<\/span>;\n\n@Component({\n  <span class=\"hljs-attr\">selector<\/span>: <span class=\"hljs-string\">'app-root'<\/span>,\n  <span class=\"hljs-attr\">templateUrl<\/span>: <span class=\"hljs-string\">'app.component.html'<\/span>,\n  <span class=\"hljs-attr\">styleUrls<\/span>: &#91;<span class=\"hljs-string\">'app.component.scss'<\/span>],\n  <span class=\"hljs-attr\">standalone<\/span>: <span class=\"hljs-literal\">true<\/span>,\n  <span class=\"hljs-attr\">imports<\/span>: &#91;MatSliderModule],\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">AppComponent<\/span> <\/span>{}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>And in the&nbsp;<code>app.component.html<\/code>&nbsp;file add the following line.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">mat-slider<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">matSliderThumb<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">mat-slider<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here we&#8217;ll just add a simple&nbsp;<code>mat-slider<\/code>&nbsp;to the page to test everything is working.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"92\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/mat-slider.png\" alt=\"\" class=\"wp-image-1391\" srcset=\"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/mat-slider.png 350w, http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/mat-slider-300x79.png 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n<\/div>\n\n\n<p>If we now run the application in the browser, we should now see a&nbsp;<code>mat-slider<\/code>&nbsp;on the page.<\/p>\n\n\n\n<p>Coming up in part two of this series we&#8217;ll dig deeper into the\u00a0<code>mat-slider<\/code>\u00a0and the recent changes from Angular Material 15 as Angular Material 16 was mainly minor changes and bug fixes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a guest post by Duncan Faulkner. He is an Angular developer for a fintech company based in the UK. A software engineer with over twenty years of experience, Duncan has been working with Angular since the early betas, written blog posts for ng-conf and several short books on Angular Material. He&#8217;s also the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1388","post","type-post","status-publish","format-standard","hentry","category-material"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1388"}],"version-history":[{"count":6,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1388\/revisions"}],"predecessor-version":[{"id":1407,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1388\/revisions\/1407"}],"wp:attachment":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1388"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}