{"id":4850,"date":"2018-10-22T08:01:56","date_gmt":"2018-10-22T07:01:56","guid":{"rendered":"https:\/\/code-maze.com\/?p=4850"},"modified":"2021-01-20T12:20:06","modified_gmt":"2021-01-20T11:20:06","slug":"get-started-angular-material","status":"publish","type":"post","link":"https:\/\/code-maze.com\/get-started-angular-material\/","title":{"rendered":"Getting Started With Angular Material"},"content":{"rendered":"<p>In this article, we are going to show you how to prepare our Angular project and how to install Angular Material in a few simple steps. But first things first. Before we start with the Angular Material features, we need to create the project first.<\/p>\n<p>So let\u2019s dive right into it.<\/p>\n<ul id=\"series_parts\" style=\"display: none;\">\n<li>Getting started with Angular Material (Current article)<\/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<\/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<\/a><\/li>\n<\/ul>\n<div class=\"wrap-collabsible\">\r\n    <input id=\"collapsible\" class=\"toggle\" type=\"checkbox\">\r\n    <label for=\"collapsible\" class=\"lbl-toggle\" onclick=\"writeContent()\">This article is part of the series<\/label>\r\n    <div class=\"collapsible-content\">\r\n      <div class=\"content-inner\">\r\n        <p class=\"innerContent\" id=\"innerContent\"><\/p>\r\n        <script>\r\n           function writeContent(){\r\n               var links= document.getElementById(\"series_parts\").innerHTML;\r\n               document.getElementById(\"innerContent\").innerHTML = links;\r\n           }\r\n       <\/script>\r\n      <\/div>\r\n    <\/div>\r\n<\/div>\r\n\n<p>For the complete navigation and all the basic instructions of the Angular Material series, check out: <a href=\"https:\/\/code-maze.com\/angular-material-series\/\" target=\"_blank\" rel=\"noopener noreferrer\">Introduction of the Angular Material series.<\/a><\/p>\n<p>The source code\u00a0is available\u00a0at GitHub\u00a0<a href=\"https:\/\/github.com\/CodeMazeBlog\/angular-material-series\/tree\/getting-started\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Getting Started With Angular Material &#8211; Source Code<\/a><\/p>\n<p>We are going to divide this post into several sections:<\/p>\n<ul>\n<li><a href=\"#projectcreation\">Project Creation<\/a><\/li>\n<li><a href=\"#angularmaterialinstallation\">Angular Material Installation<\/a><\/li>\n<li><a href=\"#creatingmaterialmodule\">Creating Material Module<\/a><\/li>\n<li><a href=\"#creatinglayoutcomponent\">Creating the Layout Component<\/a>\n<ul>\n<li><a href=\"#angularflexlayout\">Angular Flex Layout<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#materialtabs\">Creating Home Component and Using Material Tabs<\/a><\/li>\n<li><a href=\"#features\">Additional Mat-Tab Features<\/a><\/li>\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n<h2 id=\"projectcreation\"><span lang=\"EN-US\">Project Creation<\/span><\/h2>\n<p>We are going to use <code>Angular CLI<\/code> through the entire project (and we strongly advise you to do the same), thus creating our project is no exception to that. So, let\u2019s open a command prompt window and create our Angular project:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"\">ng new ang-material-owneraccount<\/pre><br \/>\nWe don&#8217;t want Angular to create the routing and we are going to select the CSS for the stylesheet format.<\/p>\n<p>Once the creation is done, we are going to start the Visual Studio Code editor and open our project.<\/p>\n<h2 id=\"angularmaterialinstallation\"><span lang=\"EN-US\">Angular Material Installation<\/span><\/h2>\n<p>We are going to use the <code>ng add<\/code> command to install the required packages. Besides installing Angular Material, we need to have CDK and Animations as well.<\/p>\n<p>So, let\u2019s open the Terminal window in VS Code and execute the command:<\/p>\n<pre class=\"\"><code class=\"language-bash\">ng add @angular\/material<\/code><\/pre>\n<p>To continue, let\u2019s include the prebuild theme for Angular Material. The theme is required and we can choose one of the available pre-built themes:<\/p>\n<ul>\n<li>deeppurple-amber.css<\/li>\n<li>indigo-pink.css<\/li>\n<li>pink-blugrey.css<\/li>\n<li>purple-green.css<\/li>\n<\/ul>\n<p>We are going to select the Indigo\/Pink. Additionally, we are not going to use global AngularMaterial typography styles and we are going to use the Angular Material Animations.<\/p>\n<p>After the installation finishes, we should see this result:<\/p>\n<p><a href=\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/05\/01-Angular-Material-installation.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-52312 size-full\" src=\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/05\/01-Angular-Material-installation-e1588765590536.png\" alt=\"Angular Material installation\" width=\"1470\" height=\"260\" srcset=\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/05\/01-Angular-Material-installation-e1588765590536.png 1470w, https:\/\/code-maze.com\/wp-content\/uploads\/2020\/05\/01-Angular-Material-installation-e1588765590536-300x53.png 300w, https:\/\/code-maze.com\/wp-content\/uploads\/2020\/05\/01-Angular-Material-installation-e1588765590536-1024x181.png 1024w, https:\/\/code-maze.com\/wp-content\/uploads\/2020\/05\/01-Angular-Material-installation-e1588765590536-768x136.png 768w, https:\/\/code-maze.com\/wp-content\/uploads\/2020\/05\/01-Angular-Material-installation-e1588765590536-1080x191.png 1080w\" sizes=\"auto, (max-width: 1470px) 100vw, 1470px\" \/><\/a><\/p>\n<p>Now, we can inspect the app.module.ts file and verify that the <code>BrowserAnimationsModule<\/code> is imported there:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-highlight=\"3,13\" data-enlighter-title=\"\">import { BrowserModule } from &#039;@angular\/platform-browser&#039;;\r\nimport { NgModule } from &#039;@angular\/core&#039;;\r\nimport {BrowserAnimationsModule} from &#039;@angular\/platform-browser\/animations&#039;;\r\n\r\nimport { AppComponent } from &#039;.\/app.component&#039;;\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    BrowserAnimationsModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre><br \/>\nThe next step is to install the <code>hammerjs<\/code> library for gesture support. In order to have a full feature of some components, we need to install it:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"\">npm install --save hammerjs<\/pre><br \/>\n<a href=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/03-Hammerjs-installed.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4843 size-full\" src=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/03-Hammerjs-installed.png\" alt=\"hammerjs - angular material installation\" width=\"726\" height=\"122\" srcset=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/03-Hammerjs-installed.png 726w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/03-Hammerjs-installed-600x101.png 600w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/03-Hammerjs-installed-300x50.png 300w\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" \/><\/a><\/p>\n<p>After the installation, we are going to import it as a first-line in the <code>maint.ts<\/code> file:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"\">import &#039;hammerjs&#039;;<\/pre><br \/>\nWe are going to use Material Icons in our project and we can check the index.html file, to verify it is imported during the installation:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xhtml\" data-enlighter-highlight=\"10\" data-enlighter-title=\"\">&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=&quot;utf-8&quot;&gt;\r\n  &lt;title&gt;AngMaterialOwnerAccount&lt;\/title&gt;\r\n  &lt;base href=&quot;\/&quot;&gt;\r\n\r\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\r\n  &lt;link rel=&quot;icon&quot; type=&quot;image\/x-icon&quot; href=&quot;favicon.ico&quot;&gt;\r\n  &lt;link href=&quot;https:\/\/fonts.googleapis.com\/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot;&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;app-root&gt;&lt;\/app-root&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre><\/p>\n<h2 id=\"creatingmaterialmodule\"><span lang=\"EN-US\">Creating Material Module<\/span><\/h2>\n<p>Even though we can import all the required components into the <code>app.module.ts<\/code> file, this is not recommended. A better solution is to create a separate module with all the required material imports and then import that module into the <code>app.module.ts<\/code> file. That being said, let&#8217;s do it:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"\">ng g module material --module app<\/pre><br \/>\nThis command will create a new folder material with the <code>material.module.ts<\/code> file inside. But this file is missing one thing and that\u2019s the exports array. So, let\u2019s add it:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-highlight=\"8-10\" data-enlighter-title=\"\">import { NgModule } from &#039;@angular\/core&#039;;\r\nimport { CommonModule } from &#039;@angular\/common&#039;;\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule\r\n  ],\r\n  exports: [\r\n    \r\n  ],\r\n  declarations: []\r\n})\r\nexport class MaterialModule { }\r\n<\/pre><br \/>\nFinally, we can check that this module is imported in the <code>app.module.ts<\/code> file:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"Import statement\">import { MaterialModule } from &#039;.\/material\/material.module&#039;;<\/pre><br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-highlight=\"4\" data-enlighter-title=\"\">imports: [\r\n    BrowserModule,\r\n    BrowserAnimationsModule,\r\n    MaterialModule\r\n  ],\r\n<\/pre><br \/>\nThat is it. We have prepared everything we need to use the Material components. Without further ado, we are going to start using them.<\/p>\n<h2 id=\"creatinglayoutcomponent\"><span lang=\"EN-US\">Creating the Layout Component<\/span><\/h2>\n<p>This component is going to be an entry point for our entire application, so let\u2019s create it and import its selector inside the <code>app.component.ts<\/code> file:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"\">ng g component layout --skipTests<\/pre><br \/>\n&nbsp;<\/p>\n<p>This command will create our component files and import them into the <code>app.module.ts<\/code> file.<\/p>\n<h3 id=\"angularflexlayout\"><span lang=\"EN-US\">Angular Flex Layout<\/span><\/h3>\n<p>Before we modify the HTML component file, we need to install one more library:\u00a0<code>@angular\/flex-layout<\/code>. This library will help us create a responsive application.\u00a0So, let\u2019s install it:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"\">npm install @angular\/flex-layout --save<\/pre><br \/>\n<a href=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/05-FlexLayout.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4845 size-full\" src=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/05-FlexLayout-e1588766279719.png\" alt=\"angular flex - angular material installation\" width=\"793\" height=\"65\" srcset=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/05-FlexLayout-e1588766279719.png 793w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/05-FlexLayout-e1588766279719-300x25.png 300w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/05-FlexLayout-e1588766279719-768x63.png 768w\" sizes=\"auto, (max-width: 793px) 100vw, 793px\" \/><\/a><\/p>\n<p>And we need to register it inside the <code>app.module.ts<\/code> file:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-highlight=\"1,7\" data-enlighter-title=\"\">import {FlexLayoutModule} from &#039;@angular\/flex-layout&#039;;\r\n\r\nimports: [\r\n    BrowserModule,\r\n    BrowserAnimationsModule,\r\n    MaterialModule,\r\n    FlexLayoutModule\r\n  ],\r\n<\/pre><br \/>\nNow, we can modify our <code>layout.component.html<\/code> file:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"\">&lt;div fxLayout=&quot;row wrap&quot; fxLayoutAlign=&quot;center center&quot; class=&quot;layout-wrapper&quot;&gt;\r\n  &lt;div fxFlex=&quot;80%&quot; fxFlex.lt-md=&quot;100%&quot; class=&quot;flex-wrapper&quot;&gt;\r\n      &lt;ng-content&gt;&lt;\/ng-content&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre><br \/>\nAs you can see, we use some angular\/flex directives to create a responsive wrapper around our content. With the <code>fxLayout<\/code> element, we define the flow order of the child elements inside the container. The <code>fxLayoutAlign<\/code> will position children according to both the main-axis and the cross-axis.<\/p>\n<p>The <code>fxFlex<\/code> element resizes the child element to 80% of its parent, and if the screen goes below the medium than the child will take 100% of its parent. If you want to read more about flex-layout, <span style=\"color: #ff6600;\"><span style=\"color: #000000;\">you<\/span> <\/span>can find plenty of material here: <a href=\"https:\/\/github.com\/angular\/flex-layout\/wiki\/API-Documentation\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Flex-Layout-Documentation.<\/a><\/p>\n<p>With the <code>&lt;ng-content&gt;<\/code> element, we are using angular content projection.<\/p>\n<p>We have two more classes: <code>layout-wrapper<\/code> and <code>flex-wrapper<\/code>, so let\u2019s implement them inside the <code>layout.component.css<\/code> file:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-title=\"\">.layout-wrapper{\r\n    height: 100%;\r\n}\r\n\r\n.flex-wrapper{\r\n    height: 100%;\r\n}\r\n<\/pre><br \/>\nExcellent.<\/p>\n<p>All we have to do is to remove all the content from the <code>app.component.html<\/code> file and introduce this component by using its selector:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"\">&lt;app-layout&gt;\r\n  Application works.\r\n&lt;\/app-layout&gt;\r\n<\/pre><br \/>\nWe can start our application by typing <code>ng serve<\/code> and see that the application actually works.<\/p>\n<h2 id=\"materialtabs\"><span lang=\"EN-US\">Creating Home Component and Using Material Tabs<\/span><\/h2>\n<p>Let\u2019s create the Home component file structure first:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"\">ng g component home --skipTests<\/pre><br \/>\n&nbsp;<\/p>\n<p>Now, let\u2019s modify the <code>home.component.html<\/code> file:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xhtml\" data-enlighter-title=\"\">&lt;section fxLayout=&quot;column&quot; fxFlexAlign=&quot;stretch&quot;&gt;\r\n  &lt;div fxFlexAlign=&quot;center&quot;&gt;\r\n    &lt;p&gt;Welcome to the Material Angular OwnerAccount Application&lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n\r\n  &lt;p&gt;In this application we are going to work with:&lt;\/p&gt;\r\n&lt;\/section&gt;\r\n<\/pre><br \/>\nWe need to modify the <code>app.component.html<\/code> file:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xhtml\" data-enlighter-title=\"\">&lt;app-layout&gt;\r\n  &lt;app-home&gt;&lt;\/app-home&gt;\r\n&lt;\/app-layout&gt;\r\n<\/pre><br \/>\nAnd we need to modify the <code>home.component.css<\/code> file as well:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-title=\"\">section div p{\r\n    color: #3f51b5;\r\n    font-size: 30px;\r\n    text-shadow: 2px 3px 5px grey;\r\n    margin: 30px 0;\r\n}\r\n\r\nsection div + p{\r\n    color: #3f51b5;\r\n    font-weight: bold;\r\n    font-size: 20px;\r\n    padding-bottom: 20px;\r\n}\r\n<\/pre><br \/>\nTo use our first material component, the <code>mat-tab<\/code> component, we need to register it inside the <code>material.module.ts<\/code> file:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-highlight=\"3,8,11\" data-enlighter-title=\"\">import { NgModule } from &#039;@angular\/core&#039;;\r\nimport { CommonModule } from &#039;@angular\/common&#039;;\r\nimport { MatTabsModule } from &#039;@angular\/material\/tabs&#039;;\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatTabsModule\r\n  ],\r\n  exports: [\r\n    MatTabsModule\r\n  ],\r\n  declarations: []\r\n})\r\nexport class MaterialModule { }\r\n<\/pre><br \/>\nAnd then to modify the <code>home.component.html<\/code> file:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xhtml\" data-enlighter-highlight=\"8-20\" data-enlighter-title=\"\">&lt;section fxLayout=&quot;column&quot; fxFlexAlign=&quot;stretch&quot;&gt;\r\n  &lt;div fxFlexAlign=&quot;center&quot;&gt;\r\n    &lt;p&gt;Welcome to the Material Angular OwnerAccount Application&lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n\r\n  &lt;p&gt;In this application we are going to work with:&lt;\/p&gt;\r\n\r\n  &lt;mat-tab-group&gt;\r\n    &lt;mat-tab label=&quot;Material Components&quot;&gt; \r\n      &lt;p&gt;We are going to use different material components to create nice looking angular app.&lt;\/p&gt; \r\n    &lt;\/mat-tab&gt;\r\n    &lt;mat-tab label=&quot;Consume .NET Core Web API&quot;&gt;\r\n       &lt;p&gt;We will consume our .NET Core application. Basically, we will create complete CRUD client app.&lt;\/p&gt;\r\n      &lt;\/mat-tab&gt;\r\n    &lt;mat-tab label=&quot;Fully responsive navigation menu&quot;&gt;\r\n       &lt;p&gt;By using material components, we are going to create fully responsive navigation menu, with its side-bar as well.&lt;\/p&gt;\r\n      &lt;\/mat-tab&gt;\r\n  &lt;\/mat-tab-group&gt;\r\n&lt;\/section&gt;\r\n<\/pre><br \/>\nNow, we can inspect our result:<\/p>\n<p><a href=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/07-Home-Component-finished.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4847 size-full\" src=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/07-Home-Component-finished.gif\" alt=\"home component\" width=\"1307\" height=\"384\" \/><\/a><\/p>\n<h2 id=\"features\"><span lang=\"EN-US\">Additional Mat-Tab Features<\/span><\/h2>\n<p>First of all, let\u2019s style our tab content a little bit more, to center our text inside every tab:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-title=\"\">mat-tab-group {\r\n    text-align: center;\r\n}\r\n\r\nmat-tab-group p {\r\n    padding-top: 20px;\r\n}\r\n<\/pre><br \/>\n<a href=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/08-Tab-Center-Content.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4848\" src=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/08-Tab-Center-Content-1024x287.png\" alt=\"tab center content\" width=\"1024\" height=\"287\" srcset=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/08-Tab-Center-Content-1024x287.png 1024w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/08-Tab-Center-Content-600x168.png 600w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/08-Tab-Center-Content-300x84.png 300w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/08-Tab-Center-Content-768x215.png 768w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/08-Tab-Center-Content-1080x303.png 1080w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/08-Tab-Center-Content.png 1269w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>This control has its own events. The <code>selectedTabChange<\/code> event is emitted when the active tab changes. The <code>focusChange<\/code> event is emitted when the user navigates through tabs with keyboard navigation.<\/p>\n<p>So, let\u2019s use the <code>selectedTabChange<\/code> event:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"\">&lt;mat-tab-group (selectedTabChange)=&quot;executeSelectedChange($event)&quot;&gt;<\/pre><br \/>\nAnd we need to modify the<code> home.component.ts<\/code> file:<br \/>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"\">public executeSelectedChange = (event) =&gt; {\r\n    console.log(event);\r\n  }\r\n<\/pre><br \/>\nRight now, as soon as we switch our tabs, we will see the event object logged into the console window:<\/p>\n<p><a href=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/09-TabChangeEventLogged.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4849\" src=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/09-TabChangeEventLogged-1024x281.png\" alt=\"log change event tab\" width=\"1024\" height=\"281\" srcset=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/09-TabChangeEventLogged-1024x281.png 1024w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/09-TabChangeEventLogged-600x165.png 600w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/09-TabChangeEventLogged-300x82.png 300w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/09-TabChangeEventLogged-768x211.png 768w, https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/09-TabChangeEventLogged.png 1061w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<h2 id=\"conclusion\"><span lang=\"EN-US\">Conclusion<\/span><\/h2>\n<p>Everything looks great. We have our first material component and in the following articles, we are going to\u00a0work with other material components as well.<\/p>\n<p>In this article we have learned:<\/p>\n<ul>\n<li>How to prepare the Angular project,<\/li>\n<li>How to install Angular Material, CDK, and Animations<\/li>\n<li>The way to install and use the @angular\/flex-layout library<\/li>\n<li>How to work with the Tab Material component<\/li>\n<\/ul>\n<p>In the next article, we are going to learn more about <a href=\"https:\/\/code-maze.com\/angular-material-navigation\/\" target=\"_blank\" rel=\"noopener noreferrer\">creating a navigation menu and menu side-bar with Angular routing.<\/a><\/p>\n<!-- Shortcode [subscribe] does not exist -->\n","protected":false},"excerpt":{"rendered":"<p>In this article, we are going to show you how to prepare our Angular project and how to install Angular Material in a few simple steps. But first things first. Before we start with the Angular Material features, we need to create the project first. So let\u2019s dive right into it. Getting started with Angular [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":54336,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[495],"tags":[23,388,391,390,389,393,392],"class_list":["post-4850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-material","tag-angular","tag-angular-material","tag-cdk","tag-hammerjs","tag-mat-tab","tag-material-installation","tag-material-module","et-has-post-format-content","et_post_format-et-post-format-standard"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Getting Started With Angular Material - Code Maze<\/title>\n<meta name=\"description\" content=\"In this article, you will learn how to deal with angular material installation and how to prepare project with all the required packages.\" \/>\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\/get-started-angular-material\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started With Angular Material - Code Maze\" \/>\n<meta property=\"og:description\" content=\"In this article, you will learn how to deal with angular material installation and how to prepare project with all the required packages.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/code-maze.com\/get-started-angular-material\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Maze\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-22T07:01:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-20T11:20:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material-getting-started-1.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=\"author\" content=\"Marinko Spasojevi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/CodeMazeBlog\" \/>\n<meta name=\"twitter:site\" content=\"@CodeMazeBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marinko Spasojevi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/code-maze.com\/get-started-angular-material\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/code-maze.com\/get-started-angular-material\/\"},\"author\":{\"name\":\"Marinko Spasojevi\u0107\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/d6fa06e66820968d19b39fb63cff2533\"},\"headline\":\"Getting Started With Angular Material\",\"datePublished\":\"2018-10-22T07:01:56+00:00\",\"dateModified\":\"2021-01-20T11:20:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/code-maze.com\/get-started-angular-material\/\"},\"wordCount\":1049,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\/\/code-maze.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/get-started-angular-material\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material-getting-started-1.png\",\"keywords\":[\"Angular\",\"angular material\",\"cdk\",\"hammerjs\",\"mat-tab\",\"material installation\",\"material module\"],\"articleSection\":[\"Angular Material\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/code-maze.com\/get-started-angular-material\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/code-maze.com\/get-started-angular-material\/\",\"url\":\"https:\/\/code-maze.com\/get-started-angular-material\/\",\"name\":\"Getting Started With Angular Material - Code Maze\",\"isPartOf\":{\"@id\":\"https:\/\/code-maze.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/code-maze.com\/get-started-angular-material\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/get-started-angular-material\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material-getting-started-1.png\",\"datePublished\":\"2018-10-22T07:01:56+00:00\",\"dateModified\":\"2021-01-20T11:20:06+00:00\",\"description\":\"In this article, you will learn how to deal with angular material installation and how to prepare project with all the required packages.\",\"breadcrumb\":{\"@id\":\"https:\/\/code-maze.com\/get-started-angular-material\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/code-maze.com\/get-started-angular-material\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/get-started-angular-material\/#primaryimage\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material-getting-started-1.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material-getting-started-1.png\",\"width\":1100,\"height\":620,\"caption\":\"angular material getting started\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/code-maze.com\/get-started-angular-material\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/code-maze.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started With Angular Material\"}]},{\"@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\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/d6fa06e66820968d19b39fb63cff2533\",\"name\":\"Marinko Spasojevi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/marinko-1x1-3-150x150.jpg\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/marinko-1x1-3-150x150.jpg\",\"caption\":\"Marinko Spasojevi\u0107\"},\"description\":\"Hi, my name is Marinko Spasojevic. Currently, I work as a full-time .NET developer and my passion is web application development. Just getting something to work is not enough for me. To make it just how I like it, it must be readable, reusable, and easy to maintain. Prior to being an author on the CodeMaze blog, I had been working as a professor of Computer Science for several years. So, sharing knowledge while working as a full-time developer comes naturally to me.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marinko-spasojevic\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/CodeMazeBlog\"],\"url\":\"https:\/\/code-maze.com\/author\/marinko\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Getting Started With Angular Material - Code Maze","description":"In this article, you will learn how to deal with angular material installation and how to prepare project with all the required packages.","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\/get-started-angular-material\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started With Angular Material - Code Maze","og_description":"In this article, you will learn how to deal with angular material installation and how to prepare project with all the required packages.","og_url":"https:\/\/code-maze.com\/get-started-angular-material\/","og_site_name":"Code Maze","article_published_time":"2018-10-22T07:01:56+00:00","article_modified_time":"2021-01-20T11:20:06+00:00","og_image":[{"width":1100,"height":620,"url":"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material-getting-started-1.png","type":"image\/png"}],"author":"Marinko Spasojevi\u0107","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/CodeMazeBlog","twitter_site":"@CodeMazeBlog","twitter_misc":{"Written by":"Marinko Spasojevi\u0107","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/code-maze.com\/get-started-angular-material\/#article","isPartOf":{"@id":"https:\/\/code-maze.com\/get-started-angular-material\/"},"author":{"name":"Marinko Spasojevi\u0107","@id":"https:\/\/code-maze.com\/#\/schema\/person\/d6fa06e66820968d19b39fb63cff2533"},"headline":"Getting Started With Angular Material","datePublished":"2018-10-22T07:01:56+00:00","dateModified":"2021-01-20T11:20:06+00:00","mainEntityOfPage":{"@id":"https:\/\/code-maze.com\/get-started-angular-material\/"},"wordCount":1049,"commentCount":12,"publisher":{"@id":"https:\/\/code-maze.com\/#organization"},"image":{"@id":"https:\/\/code-maze.com\/get-started-angular-material\/#primaryimage"},"thumbnailUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material-getting-started-1.png","keywords":["Angular","angular material","cdk","hammerjs","mat-tab","material installation","material module"],"articleSection":["Angular Material"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/code-maze.com\/get-started-angular-material\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/code-maze.com\/get-started-angular-material\/","url":"https:\/\/code-maze.com\/get-started-angular-material\/","name":"Getting Started With Angular Material - Code Maze","isPartOf":{"@id":"https:\/\/code-maze.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/code-maze.com\/get-started-angular-material\/#primaryimage"},"image":{"@id":"https:\/\/code-maze.com\/get-started-angular-material\/#primaryimage"},"thumbnailUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material-getting-started-1.png","datePublished":"2018-10-22T07:01:56+00:00","dateModified":"2021-01-20T11:20:06+00:00","description":"In this article, you will learn how to deal with angular material installation and how to prepare project with all the required packages.","breadcrumb":{"@id":"https:\/\/code-maze.com\/get-started-angular-material\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/code-maze.com\/get-started-angular-material\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/get-started-angular-material\/#primaryimage","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material-getting-started-1.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2018\/10\/angular-material-getting-started-1.png","width":1100,"height":620,"caption":"angular material getting started"},{"@type":"BreadcrumbList","@id":"https:\/\/code-maze.com\/get-started-angular-material\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/code-maze.com\/"},{"@type":"ListItem","position":2,"name":"Getting Started With Angular Material"}]},{"@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"]},{"@type":"Person","@id":"https:\/\/code-maze.com\/#\/schema\/person\/d6fa06e66820968d19b39fb63cff2533","name":"Marinko Spasojevi\u0107","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/#\/schema\/person\/image\/","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/marinko-1x1-3-150x150.jpg","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/marinko-1x1-3-150x150.jpg","caption":"Marinko Spasojevi\u0107"},"description":"Hi, my name is Marinko Spasojevic. Currently, I work as a full-time .NET developer and my passion is web application development. Just getting something to work is not enough for me. To make it just how I like it, it must be readable, reusable, and easy to maintain. Prior to being an author on the CodeMaze blog, I had been working as a professor of Computer Science for several years. So, sharing knowledge while working as a full-time developer comes naturally to me.","sameAs":["https:\/\/www.linkedin.com\/in\/marinko-spasojevic\/","https:\/\/x.com\/https:\/\/twitter.com\/CodeMazeBlog"],"url":"https:\/\/code-maze.com\/author\/marinko\/"}]}},"_links":{"self":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/4850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/types\/post"}],"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=4850"}],"version-history":[{"count":0,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/4850\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media\/54336"}],"wp:attachment":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media?parent=4850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/categories?post=4850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/tags?post=4850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}