{"id":4837,"date":"2018-10-22T08:00:54","date_gmt":"2018-10-22T06:00:54","guid":{"rendered":"https:\/\/code-maze.com\/?page_id=4837"},"modified":"2021-07-09T13:41:28","modified_gmt":"2021-07-09T11:41:28","slug":"angular-material-series","status":"publish","type":"page","link":"https:\/\/code-maze.com\/angular-material-series\/","title":{"rendered":"Angular Material Series"},"content":{"rendered":"<p>Welcome to the Angular Material tutorial. In this tutorial, we are going to go through a detailed example of how to use Angular Material components to create a fully functional client application that consumes the ASP.NET Core Web API server (or you can use any server to consume its responses).<\/p>\n<h2>ASP.NET Core Web API Section<\/h2>\n<p>If you want to learn how to create the server part with ASP.NET Core Web API, you may do that by visiting our series about it <a href=\"https:\/\/code-maze.com\/net-core-series\/\" target=\"_blank\" rel=\"noopener noreferrer\">ASP.NET Core 3.1 Web API.<\/a><\/p>\n<h2>What We Recommend<\/h2>\n<p>If you are not familiar with Angular at all, we have a great tutorial about Angular on our blog:\u00a0<a href=\"https:\/\/code-maze.com\/angular-series\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular Series<\/a>. We strongly recommend reading it first because you will gain all the required knowledge of the Angular framework and it will be much easier to follow along with this tutorial as well. If you are familiar with Angular, then just feel free to continue towards the lectures.<\/p>\n<h2><span style=\"color: #000000;\">What Are We Going to Learn?<\/span><\/h2>\n<p>First of all, we are going to start with the Angular Material Installation. Then, we are going to use various components to create a fully functional client application. We are going to create a fully responsive navigation menu, use material tables with filter, sort, and pagination functionalities. Furthermore, we will show you how to use spinners, a progress bar, card, select, expansion panel, and many other components from Angular Material.<\/p>\n<h2>Prerequisites<\/h2>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\/\">Node.js<\/a> which is a prerequisite for Angular<\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/download\">Visual Studio Code<\/a>, or any other editor you like<\/li>\n<\/ul>\n<h2>Background<\/h2>\n<ul>\n<li>Basic knowledge of Javascript<\/li>\n<li>Familiarity with HTML and CSS<\/li>\n<li>Decent Angular programming knowledge<\/li>\n<\/ul>\n<h2>This Tutorial Is Separated Into Several Parts<\/h2>\n<ul>\n<li><a href=\"https:\/\/code-maze.com\/get-started-angular-material\/\" target=\"_blank\" rel=\"noopener noreferrer\">Getting started with Angular Material<\/a><\/li>\n<li><a href=\"https:\/\/code-maze.com\/angular-material-navigation\/\" target=\"_blank\" rel=\"noopener noreferrer\">Navigation Menu &#8211; Sidebar, Main Navigation<\/a><\/li>\n<li><a href=\"https:\/\/code-maze.com\/angular-material-table\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular Material Table, Filter, Sort, Paging<\/a><\/li>\n<li><a href=\"https:\/\/code-maze.com\/angular-material-error-details-pages\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular Material Progress Bar, Spinner, CheckBox, Card, Select, Expansion Panel \u2013 Create Error and Details Pages<\/a><\/li>\n<li><a href=\"https:\/\/code-maze.com\/angular-material-form-validation\/\" target=\"_blank\" rel=\"noopener noreferrer\">Material Inputs, DatePicker, Form Validation, Modals \u2013 Create Owner Component<\/a><\/li>\n<\/ul>\n<p>Have fun!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to the Angular Material tutorial. In this tutorial, we are going to go through a detailed example of how to use Angular Material components to create a fully functional client application that consumes the ASP.NET Core Web API server (or you can use any server to consume its responses). ASP.NET Core Web API Section [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":4999,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-4837","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular Material Series - Consuming .NET Core Web API<\/title>\n<meta name=\"description\" content=\"In this tutorial, we are going to go through a detailed example of how to use Angular Material components to create a fully functional client application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/code-maze.com\/angular-material-series\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Material Series - Consuming .NET Core Web API\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we are going to go through a detailed example of how to use Angular Material components to create a fully functional client application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/code-maze.com\/angular-material-series\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Maze\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-09T11:41:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"620\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@CodeMazeBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/code-maze.com\/angular-material-series\/\",\"url\":\"https:\/\/code-maze.com\/angular-material-series\/\",\"name\":\"Angular Material Series - Consuming .NET Core Web API\",\"isPartOf\":{\"@id\":\"https:\/\/code-maze.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/code-maze.com\/angular-material-series\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/angular-material-series\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material.png\",\"datePublished\":\"2018-10-22T06:00:54+00:00\",\"dateModified\":\"2021-07-09T11:41:28+00:00\",\"description\":\"In this tutorial, we are going to go through a detailed example of how to use Angular Material components to create a fully functional client application.\",\"breadcrumb\":{\"@id\":\"https:\/\/code-maze.com\/angular-material-series\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/code-maze.com\/angular-material-series\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/angular-material-series\/#primaryimage\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material.png\",\"width\":1100,\"height\":620,\"caption\":\"angular material\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/code-maze.com\/angular-material-series\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/code-maze.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Material Series\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/code-maze.com\/#website\",\"url\":\"https:\/\/code-maze.com\/\",\"name\":\"Code Maze\",\"description\":\"Learn. Code. Succeed.\",\"publisher\":{\"@id\":\"https:\/\/code-maze.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/code-maze.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/code-maze.com\/#organization\",\"name\":\"Code Maze\",\"url\":\"https:\/\/code-maze.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png\",\"width\":3511,\"height\":3510,\"caption\":\"Code Maze\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/CodeMazeBlog\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Material Series - Consuming .NET Core Web API","description":"In this tutorial, we are going to go through a detailed example of how to use Angular Material components to create a fully functional client application.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/code-maze.com\/angular-material-series\/","og_locale":"en_US","og_type":"article","og_title":"Angular Material Series - Consuming .NET Core Web API","og_description":"In this tutorial, we are going to go through a detailed example of how to use Angular Material components to create a fully functional client application.","og_url":"https:\/\/code-maze.com\/angular-material-series\/","og_site_name":"Code Maze","article_modified_time":"2021-07-09T11:41:28+00:00","og_image":[{"width":1100,"height":620,"url":"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@CodeMazeBlog","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/code-maze.com\/angular-material-series\/","url":"https:\/\/code-maze.com\/angular-material-series\/","name":"Angular Material Series - Consuming .NET Core Web API","isPartOf":{"@id":"https:\/\/code-maze.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/code-maze.com\/angular-material-series\/#primaryimage"},"image":{"@id":"https:\/\/code-maze.com\/angular-material-series\/#primaryimage"},"thumbnailUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material.png","datePublished":"2018-10-22T06:00:54+00:00","dateModified":"2021-07-09T11:41:28+00:00","description":"In this tutorial, we are going to go through a detailed example of how to use Angular Material components to create a fully functional client application.","breadcrumb":{"@id":"https:\/\/code-maze.com\/angular-material-series\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/code-maze.com\/angular-material-series\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/angular-material-series\/#primaryimage","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material.png","width":1100,"height":620,"caption":"angular material"},{"@type":"BreadcrumbList","@id":"https:\/\/code-maze.com\/angular-material-series\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/code-maze.com\/"},{"@type":"ListItem","position":2,"name":"Angular Material Series"}]},{"@type":"WebSite","@id":"https:\/\/code-maze.com\/#website","url":"https:\/\/code-maze.com\/","name":"Code Maze","description":"Learn. Code. Succeed.","publisher":{"@id":"https:\/\/code-maze.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/code-maze.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/code-maze.com\/#organization","name":"Code Maze","url":"https:\/\/code-maze.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/#\/schema\/logo\/image\/","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png","width":3511,"height":3510,"caption":"Code Maze"},"image":{"@id":"https:\/\/code-maze.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/CodeMazeBlog"]}]}},"_links":{"self":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/pages\/4837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/comments?post=4837"}],"version-history":[{"count":4,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/pages\/4837\/revisions"}],"predecessor-version":[{"id":58703,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/pages\/4837\/revisions\/58703"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media\/4999"}],"wp:attachment":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media?parent=4837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}