{"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":"https:\/\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-39-1024x726.png 1024w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-39-300x213.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-39-768x545.png 768w, https:\/\/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 class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/mat-slider.png 350w, https:\/\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"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&#039;s also the\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Alain Chautard\"\/>\n\t<meta name=\"google-site-verification\" content=\"SXxD3jwe28P5x4KWwWlYlHobuesNDkT6VWG1oVG1GcQ\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#article\",\"name\":\"Getting Started with Angular Material | Angular Newsletter\",\"headline\":\"Getting Started with Angular Material\",\"author\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/author\\\/alcfeoh\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/image-39-1024x726.png\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#articleImage\"},\"datePublished\":\"2023-08-30T05:00:00-07:00\",\"dateModified\":\"2023-08-29T14:48:32-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#webpage\"},\"articleSection\":\"Material\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/#listItem\",\"name\":\"Angular\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/#listItem\",\"position\":2,\"name\":\"Angular\",\"item\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/material\\\/#listItem\",\"name\":\"Material\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/material\\\/#listItem\",\"position\":3,\"name\":\"Material\",\"item\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/material\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#listItem\",\"name\":\"Getting Started with Angular Material\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/#listItem\",\"name\":\"Angular\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#listItem\",\"position\":4,\"name\":\"Getting Started with Angular Material\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/material\\\/#listItem\",\"name\":\"Material\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/#organization\",\"name\":\"Angular Training\",\"description\":\"Tutorials and updates about the Angular framework\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/\",\"email\":\"contact@interstate21.com\",\"telephone\":\"+14089106087\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/blue-logo-vertical.png\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#organizationLogo\",\"width\":1234,\"height\":950},\"image\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/www.youtube.com\\\/@AngularTraining\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/achautard\\\/\",\"https:\\\/\\\/blog.angulartraining.com\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/author\\\/alcfeoh\\\/#author\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/author\\\/alcfeoh\\\/\",\"name\":\"Alain Chautard\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/26ae8a75f090f33d4e79871307246008907228871b691f47cf15d2e7353939fd?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Alain Chautard\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/alainchautard\",\"https:\\\/\\\/www.youtube.com\\\/@AngularTraining\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/achautard\\\/\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#webpage\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/\",\"name\":\"Getting Started with Angular Material | Angular Newsletter\",\"description\":\"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's also the\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/getting-started-with-angular-material\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/author\\\/alcfeoh\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/author\\\/alcfeoh\\\/#author\"},\"datePublished\":\"2023-08-30T05:00:00-07:00\",\"dateModified\":\"2023-08-29T14:48:32-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/#website\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/\",\"name\":\"Angular Newsletter\",\"description\":\"Tutorials and updates about the Angular framework\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Getting Started with Angular Material | Angular Newsletter","description":"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's also the","canonical_url":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"SXxD3jwe28P5x4KWwWlYlHobuesNDkT6VWG1oVG1GcQ","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#article","name":"Getting Started with Angular Material | Angular Newsletter","headline":"Getting Started with Angular Material","author":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/author\/alcfeoh\/#author"},"publisher":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-39-1024x726.png","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#articleImage"},"datePublished":"2023-08-30T05:00:00-07:00","dateModified":"2023-08-29T14:48:32-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#webpage"},"isPartOf":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#webpage"},"articleSection":"Material"},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter#listItem","position":1,"name":"Home","item":"https:\/\/www.angulartraining.com\/daily-newsletter","nextItem":{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/#listItem","name":"Angular"}},{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/#listItem","position":2,"name":"Angular","item":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/material\/#listItem","name":"Material"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/material\/#listItem","position":3,"name":"Material","item":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/material\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#listItem","name":"Getting Started with Angular Material"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/#listItem","name":"Angular"}},{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#listItem","position":4,"name":"Getting Started with Angular Material","previousItem":{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/material\/#listItem","name":"Material"}}]},{"@type":"Organization","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/#organization","name":"Angular Training","description":"Tutorials and updates about the Angular framework","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/","email":"contact@interstate21.com","telephone":"+14089106087","logo":{"@type":"ImageObject","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2018\/01\/blue-logo-vertical.png","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#organizationLogo","width":1234,"height":950},"image":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#organizationLogo"},"sameAs":["https:\/\/www.youtube.com\/@AngularTraining","https:\/\/www.linkedin.com\/in\/achautard\/","https:\/\/blog.angulartraining.com\/"]},{"@type":"Person","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/author\/alcfeoh\/#author","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/author\/alcfeoh\/","name":"Alain Chautard","image":{"@type":"ImageObject","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/26ae8a75f090f33d4e79871307246008907228871b691f47cf15d2e7353939fd?s=96&d=mm&r=g","width":96,"height":96,"caption":"Alain Chautard"},"sameAs":["https:\/\/twitter.com\/alainchautard","https:\/\/www.youtube.com\/@AngularTraining","https:\/\/www.linkedin.com\/in\/achautard\/"]},{"@type":"WebPage","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#webpage","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/","name":"Getting Started with Angular Material | Angular Newsletter","description":"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's also the","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/#website"},"breadcrumb":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/#breadcrumblist"},"author":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/author\/alcfeoh\/#author"},"creator":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/author\/alcfeoh\/#author"},"datePublished":"2023-08-30T05:00:00-07:00","dateModified":"2023-08-29T14:48:32-07:00"},{"@type":"WebSite","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/#website","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/","name":"Angular Newsletter","description":"Tutorials and updates about the Angular framework","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/#organization"}}]}},"aioseo_meta_data":{"post_id":"1388","title":null,"description":null,"keywords":[],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2023-08-29 21:33:38","updated":"2025-06-03 23:47:53","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/\" title=\"Angular\">Angular<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/material\/\" title=\"Material\">Material<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tGetting Started with Angular Material\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.angulartraining.com\/daily-newsletter"},{"label":"Angular","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/"},{"label":"Material","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/material\/"},{"label":"Getting Started with Angular Material","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/getting-started-with-angular-material\/"}],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1388"}],"version-history":[{"count":6,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1388\/revisions"}],"predecessor-version":[{"id":1407,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1388\/revisions\/1407"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}