fix(demo): improved the demo app

angular-material-extensions · Jan 18, 2020 · 0c236ce · 0c236ce
1 parent f1ac7c7
commit 0c236ce
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 29 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -347,12 +347,16 @@
         <circle cx="50.839" cy="50.839" data-name="Ellipse 8" fill="#dd0031" id="Ellipse_8" r="50.839"
                 transform="translate(141 696)"/>
         <g data-name="Group 47" id="Group_47" transform="translate(165.185 720.185)">
-          <path d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" data-name="Path 33"
-                fill="#fff"
-                id="Path_33" transform="translate(0.371 3.363)"/>
-          <path d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" data-name="Path 34"
-                fill="#fff"
-                id="Path_34" transform="translate(0 0.005)"/>
+          <path
+            d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z"
+            data-name="Path 33"
+            fill="#fff"
+            id="Path_33" transform="translate(0.371 3.363)"/>
+          <path
+            d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z"
+            data-name="Path 34"
+            fill="#fff"
+            id="Path_34" transform="translate(0 0.005)"/>
         </g>
       </g>
     </svg>
@@ -361,9 +365,11 @@
 
     <svg alt="Rocket Ship Smoke" height="1083.632" id="rocket-smoke" viewBox="0 0 516.119 1083.632" width="516.119"
          xmlns="http://www.w3.org/2000/svg">
-      <path d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" data-name="Path 40"
-            fill="#f5f5f5"
-            id="Path_40" transform="translate(-147.025 -140.939)"/>
+      <path
+        d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z"
+        data-name="Path 40"
+        fill="#f5f5f5"
+        id="Path_40" transform="translate(-147.025 -140.939)"/>
     </svg>
 
   </div>
@@ -428,7 +434,40 @@ <h2>Install</h2>
   <!-- Usage -->
   <h2>Usage</h2>
 
-  <mat-fab-menu [fabButtons]="fabButtons" direction="right"></mat-fab-menu>
+  <mat-card class="card-container-example">
+    <mat-card-content>
+      <p>
+        Pick an example:
+        <mat-radio-group aria-label="Select an example option">
+          <mat-radio-button value="1">Professions</mat-radio-button>
+          <mat-radio-button value="2">Countries</mat-radio-button>
+        </mat-radio-group>
+      </p>
+
+      <p>
+        Direction
+        <mat-radio-group aria-label="Select a direction" [(ngModel)]="direction" (ngModelChange)="logDirection($event)">
+          <mat-radio-button value="top">Top</mat-radio-button>
+          <mat-radio-button value="bottom">Bottom</mat-radio-button>
+          <mat-radio-button value="left">Left</mat-radio-button>
+          <mat-radio-button value="right">Right</mat-radio-button>
+        </mat-radio-group>
+      </p>
+      <div fxLayout="row" fxLayoutAlign="end end">
+        <mat-fab-menu color="primary"
+                      [direction]="direction"
+                      [fabButtons]="fabProfessions">
+        </mat-fab-menu>
+      </div>
+    </mat-card-content>
+  </mat-card>
+
+  <!--    <mat-fab-menu color="primary" [fabButtons]="fabButtons" direction="top"></mat-fab-menu>-->
+  <mat-fab-menu class="fix-bottom-right" color="primary" [fabButtons]="fabCountries" direction="top"></mat-fab-menu>
+
+  <!--  <div>Icons made by <a href="https://www.flaticon.com/authors/ddara" title="dDara">dDara</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>-->
+  <!--  <div>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>-->
+  <!--  <div>Icons made by <a href="https://www.flaticon.com/authors/roundicons" title="Roundicons">Roundicons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>-->
 
   <!--  <div fxLayoutAlign="center">-->
   <!--    <mat-fab-menu appearance="outline"-->
@@ -506,40 +545,45 @@ <h2 style="margin-top: 4rem">Next Steps</h2>
        target="_blank"
        title="Other awesome libraries">
       <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-        <path d="M12,2.5L20.84,5.65L19.5,17.35L12,21.5L4.5,17.35L3.16,5.65L12,2.5M12,4.6L6.47,17H8.53L9.64,14.22H14.34L15.45,17H17.5L12,4.6M13.62,12.5H10.39L12,8.63L13.62,12.5Z"
-              fill="rgb(40,53,147)"/>
+        <path
+          d="M12,2.5L20.84,5.65L19.5,17.35L12,21.5L4.5,17.35L3.16,5.65L12,2.5M12,4.6L6.47,17H8.53L9.64,14.22H14.34L15.45,17H17.5L12,4.6M13.62,12.5H10.39L12,8.63L13.62,12.5Z"
+          fill="rgb(40,53,147)"/>
       </svg>
     </a>
 
     <a class="circle-link" href="https://twitter.com/ngAnthonyy" rel="noopener"
        target="_blank" title="Anthony Nahas on Twitter">
       <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-        <path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"
-              fill="#1DA1F2"/>
+        <path
+          d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"
+          fill="#1DA1F2"/>
       </svg>
     </a>
 
     <a class="circle-link" href="https://www.xing.com/profile/Anthony_Nahas2" rel="noopener"
        target="_blank" title="Anthony Nahas on Xing">
       <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-        <path d="M17.67,2C17.24,2 17.05,2.27 16.9,2.55C16.9,2.55 10.68,13.57 10.5,13.93L14.58,21.45C14.72,21.71 14.94,22 15.38,22H18.26C18.44,22 18.57,21.93 18.64,21.82C18.72,21.69 18.72,21.53 18.64,21.37L14.57,13.92L20.96,2.63C21.04,2.47 21.04,2.31 20.97,2.18C20.89,2.07 20.76,2 20.58,2M5.55,5.95C5.38,5.95 5.23,6 5.16,6.13C5.08,6.26 5.09,6.41 5.18,6.57L7.12,9.97L4.06,15.37C4,15.53 4,15.69 4.06,15.82C4.13,15.94 4.26,16 4.43,16H7.32C7.75,16 7.96,15.72 8.11,15.45C8.11,15.45 11.1,10.16 11.22,9.95L9.24,6.5C9.1,6.24 8.88,5.95 8.43,5.95"
-              fill="#026466"/>
+        <path
+          d="M17.67,2C17.24,2 17.05,2.27 16.9,2.55C16.9,2.55 10.68,13.57 10.5,13.93L14.58,21.45C14.72,21.71 14.94,22 15.38,22H18.26C18.44,22 18.57,21.93 18.64,21.82C18.72,21.69 18.72,21.53 18.64,21.37L14.57,13.92L20.96,2.63C21.04,2.47 21.04,2.31 20.97,2.18C20.89,2.07 20.76,2 20.58,2M5.55,5.95C5.38,5.95 5.23,6 5.16,6.13C5.08,6.26 5.09,6.41 5.18,6.57L7.12,9.97L4.06,15.37C4,15.53 4,15.69 4.06,15.82C4.13,15.94 4.26,16 4.43,16H7.32C7.75,16 7.96,15.72 8.11,15.45C8.11,15.45 11.1,10.16 11.22,9.95L9.24,6.5C9.1,6.24 8.88,5.95 8.43,5.95"
+          fill="#026466"/>
       </svg>
     </a>
 
     <a class="circle-link" href="https://www.reddit.com/user/anthonynahas" rel="noopener"
        target="_blank" title="Anthony Nahas on Reddit">
       <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-        <path d="M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z"
-              fill="#ff4500"/>
+        <path
+          d="M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z"
+          fill="#ff4500"/>
       </svg>
     </a>
 
     <a class="circle-link" href="https://www.linkedin.com/in/anthony-nahas-926245119/" rel="noopener" target="_blank"
        title="LinkedIn">
       <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-        <path d="M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z"
-              fill="#2867B2"/>
+        <path
+          d="M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z"
+          fill="#2867B2"/>
       </svg>
     </a>
 
@@ -599,9 +643,11 @@ <h2 style="margin-top: 4rem">Next Steps</h2>
 
   <svg alt="Gray Clouds Background" height="485.677" id="clouds" viewBox="0 0 2611.084 485.677" width="2611.084"
        xmlns="http://www.w3.org/2000/svg">
-    <path d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" data-name="Path 39"
-          fill="#eee"
-          id="Path_39" transform="translate(142.69 -634.312)"/>
+    <path
+      d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z"
+      data-name="Path 39"
+      fill="#eee"
+      id="Path_39" transform="translate(142.69 -634.312)"/>
   </svg>
 
 </div>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -0,0 +1,16 @@
+mat-fab-menu.fix-bottom-right {
+  position: fixed;
+  bottom: 15px;
+  right: 15px;
+  z-index: 100;
+}
+
+
+.card-container-example {
+  height: 500px;
+  width: 80%;
+}
+
+.mat-radio-button ~ .mat-radio-button {
+  margin-left: 16px;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatFabMenu} from '@angular-material-extensions/fab-menu';
+import {MatFabMenu, MatFabMenuDirection} from '@angular-material-extensions/fab-menu';
 
 @Component({
   selector: 'app-root',
@@ -9,22 +9,85 @@ import {MatFabMenu} from '@angular-material-extensions/fab-menu';
 export class AppComponent {
   title = 'fab-menu';
 
+  direction: MatFabMenuDirection = 'top';
+
   fabButtons: MatFabMenu[] = [
     {
       id: 1,
-      icon: 'home'
+      icon: 'create'
+    },
+    {
+      id: 2,
+      icon: 'mail'
+    },
+    {
+      id: 3,
+      icon: 'file_copy'
+    },
+    {
+      id: 4,
+      icon: 'phone'
+    },
+  ];
+
+  fabProfessions: MatFabMenu[] = [
+    {
+      id: 1,
+      imgUrl: 'assets/professions/svg/001-accountant.svg'
+    },
+    {
+      id: 2,
+      imgUrl: 'assets/professions/svg/005-accountant.svg'
+    },
+    {
+      id: 3,
+      imgUrl: 'assets/professions/svg/013-biochemist.svg'
+    },
+    {
+      id: 4,
+      imgUrl: 'assets/professions/svg/017-engineer.svg'
+    },
+  ];
+
+  fabCountries: MatFabMenu[] = [
+    {
+      id: 1,
+      imgUrl: 'assets/countrys-flags/svg/canada.svg'
+    },
+    {
+      id: 2,
+      imgUrl: 'assets/countrys-flags/svg/germany.svg'
+    },
+    {
+      id: 3,
+      imgUrl: 'assets/countrys-flags/svg/france.svg'
+    },
+    {
+      id: 4,
+      imgUrl: 'assets/countrys-flags/svg/lebanon.svg'
+    },
+  ];
+
+  fabNumbers: MatFabMenu[] = [
+    {
+      id: 1,
+      imgUrl: 'assets/countrys-flags/svg/canada.svg'
     },
     {
       id: 2,
-      icon: 'location'
+      imgUrl: 'assets/countrys-flags/svg/germany.svg'
     },
     {
       id: 3,
-      icon: 'person'
+      imgUrl: 'assets/countrys-flags/svg/france.svg'
     },
     {
       id: 4,
-      icon: 'wifi'
+      imgUrl: 'assets/countrys-flags/svg/lebanon.svg'
     },
   ];
+
+  logDirection($event: any) {
+    console.log('direction changed', this.direction, $event);
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -8,6 +8,8 @@ import {MarkdownModule} from 'ngx-markdown';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {HttpClientModule} from '@angular/common/http';
 import {MatFabMenuModule} from '@angular-material-extensions/fab-menu';
+import {MatCardModule, MatRadioModule} from '@angular/material';
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -17,10 +19,13 @@ import {MatFabMenuModule} from '@angular-material-extensions/fab-menu';
     BrowserModule.withServerTransition({appId: 'serverApp'}),
     BrowserAnimationsModule,
     HttpClientModule,
+    FormsModule,
     FlexLayoutModule,
     Angulartics2Module.forRoot(),
     MarkdownModule.forRoot(),
-    MatFabMenuModule
+    MatFabMenuModule,
+    MatCardModule,
+    MatRadioModule
   ],
   providers: [],
   bootstrap: [AppComponent]