1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8419],{66485:function(e){e.exports=function(e){if(navigator.clipboard)return navigator.clipboard.writeText(e).catch((function(e){throw void 0!==e?e:new DOMException("The request is not allowed","NotAllowedError")}));var n=document.createElement("span");n.textContent=e,n.style.whiteSpace="pre",n.style.webkitUserSelect="auto",n.style.userSelect="all",document.body.appendChild(n);var t=window.getSelection(),a=window.document.createRange();t.removeAllRanges(),a.selectNode(n),t.addRange(a);var o=!1;try{o=window.document.execCommand("copy")}catch(r){console.log("error",r)}return t.removeAllRanges(),window.document.body.removeChild(n),o?Promise.resolve():Promise.reject(new DOMException("The request is not allowed","NotAllowedError"))}},29313:function(e,n,t){"use strict";t.r(n),t.d(n,{meta:function(){return p},default:function(){return m}});var a=t(26265),o=t(38347),r=(t(67294),t(3905)),l=t(98962);function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function u(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){(0,a.Z)(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var p={title:"Using Angular Material with Angular 6",publishedAt:"2018-07-04T05:10:49+02:00",draft:!1,icon:"angular.svg",image:"angular-6-series.webp",subTitle:"",tags:["Angular"]},d={meta:p},s=function(e){var n=e.children;return(0,r.kt)(l.Z,{meta:p},n)};function m(e){var n=e.components,t=(0,o.Z)(e,["components"]);return(0,r.kt)(s,u(u(u({},d),t),{},{components:n,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"This is the third part in an n-part ",(0,r.kt)("a",u({parentName:"p"},{href:"https://blog.wb.gy/angular-6-article-series/"}),"series")," about the JavaScript framework, ",(0,r.kt)("inlineCode",{parentName:"p"},"Angular 6"),".\nIn this part, we'll go over using ",(0,r.kt)("inlineCode",{parentName:"p"},"Angular Material")," with Angular 6 Applicatin."),(0,r.kt)("p",null,"This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know using ",(0,r.kt)("inlineCode",{parentName:"p"},"Angular Material")," and how to use it with our ",(0,r.kt)("inlineCode",{parentName:"p"},"Angular 6")," application."),(0,r.kt)("hr",null),(0,r.kt)("h2",null,"Article Series"),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("a",u({parentName:"li"},{href:"https://blog.wb.gy/angular-6-article-series/"}),"Angular 6 Article Series")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("a",u({parentName:"li"},{href:"https://blog.wb.gy/building-angular-6-application/"}),"Building Angular 6 Application")),(0,r.kt)("li",{parentName:"ol"},"Using Angular Material with Angular 6 (",(0,r.kt)("strong",{parentName:"li"},"You're here"),")"),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("a",u({parentName:"li"},{href:"https://blog.wb.gy/deploy-angular-6-application-to-netlify/"}),"Deploy Angular 6 to Netlify")),(0,r.kt)("li",{parentName:"ol"},"Deploy Angular 6 Application to Netlify (",(0,r.kt)("strong",{parentName:"li"},"Soon"),")"),(0,r.kt)("li",{parentName:"ol"},"Creating PWA with Angular 6 (",(0,r.kt)("strong",{parentName:"li"},"Soon"),")"),(0,r.kt)("li",{parentName:"ol"},"Dynamic themes in Angular 6 Material (",(0,r.kt)("strong",{parentName:"li"},"Soon"),")"),(0,r.kt)("li",{parentName:"ol"},"Angular 6 with GSAP (",(0,r.kt)("strong",{parentName:"li"},"Soon"),")"),(0,r.kt)("li",{parentName:"ol"},"Angular 6 with Firebase (",(0,r.kt)("strong",{parentName:"li"},"Soon"),")")),(0,r.kt)("hr",null),(0,r.kt)("span",{className:"first-letter"},"F"),"irst you must check the previous article in this series to create new `Angular6` Application. Now using the new `ng add` in Angular-CLI let's install the `Angular Material`. In your application root directory run:",(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-bash"}),"ng add @angular/material @angular/cdk\n")),(0,r.kt)("p",null,"It updated the ",(0,r.kt)("inlineCode",{parentName:"p"},"package.json")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"angular.json"),"\nAdded ",(0,r.kt)("inlineCode",{parentName:"p"},"BrowserAnimationsModule")," to your ",(0,r.kt)("inlineCode",{parentName:"p"},"app.module.ts")," file\nAdded ",(0,r.kt)("inlineCode",{parentName:"p"},"Material Icons,Roboto Font")," to ",(0,r.kt)("inlineCode",{parentName:"p"},"index.html")),(0,r.kt)("p",null,"You can generate a starter component including a toolbar and a side navigation.\nRun:"),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-bash"}),"ng generate @angular/material:material-nav --name=navbar\n")),(0,r.kt)("p",null,"This will generate a component named ",(0,r.kt)("inlineCode",{parentName:"p"},"navbar")," and will add some material components to ",(0,r.kt)("inlineCode",{parentName:"p"},"app.module.ts"),"."),(0,r.kt)("p",null,"Let's add our navbar to ",(0,r.kt)("inlineCode",{parentName:"p"},"app.component.html"),"\nOpen ",(0,r.kt)("inlineCode",{parentName:"p"},"/src/app/app.component.html")," and add the navbar tag, your co
1de should look like"),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-html"}),"<navbar></navbar> <router-outlet></router-outlet>\n")),(0,r.kt)("p",null,"If you're running a server for our app check your browser or run"),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-bash"}),"ng serve --open\n")),(0,r.kt)("p",null,"to see the changes we made."),(0,r.kt)("p",null,"But I think there's something wrong with our menu. I fixed it and changed the links of the menu by adding our home and posts routes.\nHere's the final code of ",(0,r.kt)("inlineCode",{parentName:"p"},"/src/app/navbar/navbar.component.html")),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-html"}),'<mat-sidenav-container className="sidenav-container">\n <mat-sidenav\n #drawer\n className="sidenav"\n fixedInViewport="true"\n [attr.role]="isHandset ? \'dialog\' : \'navigation\'"\n [mode]="(isHandset | async)!.matches ? \'over\' : \'side\'"\n [opened]="!(isHandset | async)!.matches"\n >\n <mat-toolbar color="primary">Menu</mat-toolbar>\n <mat-nav-list>\n <a mat-list-item routerLink="/">Home</a>\n <a mat-list-item routerLink="posts">Posts</a>\n </mat-nav-list>\n </mat-sidenav>\n <mat-sidenav-content>\n <mat-toolbar color="primary">\n <button\n type="button"\n aria-label="Toggle sidenav"\n mat-icon-button\n (click)="drawer.toggle()"\n >\n <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>\n </button>\n <span>Application Title</span>\n </mat-toolbar>\n </mat-sidenav-content>\n</mat-sidenav-container>\n')),(0,r.kt)("p",null,"You can also generate a starter dashboard component containing a dynamic grid list of cards.\nRun:"),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-bash"}),"ng generate @angular/material:material-dashboard --name=dash\n")),(0,r.kt)("p",null,"You can see the result by adding ",(0,r.kt)("inlineCode",{parentName:"p"},"<dash></dash>")," tag to your ",(0,r.kt)("inlineCode",{parentName:"p"},"app.component.html"),"\nYour final ",(0,r.kt)("inlineCode",{parentName:"p"},"/src/app/app.component.html")," should look like"),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-html"}),"<navbar></navbar> <dash></dash> <router-outlet></router-outlet>\n")),(0,r.kt)("p",null,(0,r.kt)("img",u({parentName:"p"},{src:"/images/angular6-material.png",alt:"angular6-material"}))),(0,r.kt)("p",null,"You can generate a starter data table component that is pre-configured with a datasource for sorting and pagination.\nRun:"),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-bash"}),"ng generate @angular/material:material-table --name=data-table\n")),(0,r.kt)("p",null,"And add it like the previous one to see the results."),(0,r.kt)("p",null,"This new features of Angular 6 are cool but I prefer to put all the ",(0,r.kt)("inlineCode",{parentName:"p"},"Material Modules")," in separated file named ",(0,r.kt)("inlineCode",{parentName:"p"},"material.module.ts")," and I prefer to import most of the modules once. I don't like importing one by one. I know that it's not the best practice\nSo Let's edit our ",(0,r.kt)("inlineCode",{parentName:"p"},"app.module.ts"),":"),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-javascript"}),'import { BrowserModule } from "@angular/platform-browser";\nimport { NgModule } from "@angular/core";\n\nimport { AppRoutingModule } from "./app-routing.module";\nimport { AppComponent } from "./app.component";\nimport { HomeComponent } from "./home/home.component";\nimport { PostsComponent } from "./posts/posts.component";\nimport { BrowserAnimationsModule } from "@angular/platform-browser/animations";\nimport { MaterialModule } from "./material.module";\n\nimport { NavbarComponent } from "./navbar/navbar.component";\nimport { LayoutModule } from "@angular/cdk/layout";\nimport { DashComponent } from "./dash/dash.component";\nimport { DataTableComponent } from "./data-table/data-table.component";\n\n@NgModule({\n declarations: [\n AppComponent,\n HomeComponent,\n PostsComponent,\n NavbarC
1omponent,\n DashComponent,\n DataTableComponent,\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n BrowserAnimationsModule,\n MaterialModule,\n LayoutModule,\n ],\n providers: [],\n bootstrap: [AppComponent],\n})\nexport class AppModule {}\n')),(0,r.kt)("p",null,"and create new file ",(0,r.kt)("inlineCode",{parentName:"p"},"/src/app/material.module.ts")," and add the following code:"),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-javascript"}),'import { NgModule } from "@angular/core";\n\nimport {\n MatButtonModule,\n MatMenuModule,\n MatToolbarModule,\n MatIconModule,\n MatCardModule,\n MatGridListModule,\n MatSidenavModule,\n MatSortModule,\n MatTableModule,\n MatInputModule,\n MatSelectModule,\n MatSliderModule,\n MatRadioModule,\n MatListModule,\n MatProgressSpinnerModule,\n MatChipsModule,\n MatTooltipModule,\n MatExpansionModule,\n MatDialogModule,\n MatAutocompleteModule,\n MatTabsModule,\n MatSlideToggleModule,\n MatPaginatorModule,\n} from "@angular/material";\n\n@NgModule({\n imports: [\n MatButtonModule,\n MatMenuModule,\n MatToolbarModule,\n MatIconModule,\n MatCardModule,\n MatGridListModule,\n MatSidenavModule,\n MatSortModule,\n MatTableModule,\n MatInputModule,\n MatSelectModule,\n MatSliderModule,\n MatRadioModule,\n MatListModule,\n MatProgressSpinnerModule,\n MatChipsModule,\n MatTooltipModule,\n MatExpansionModule,\n MatDialogModule,\n MatAutocompleteModule,\n MatTabsModule,\n MatSlideToggleModule,\n MatPaginatorModule,\n ],\n exports: [\n MatButtonModule,\n MatMenuModule,\n MatToolbarModule,\n MatIconModule,\n MatCardModule,\n MatGridListModule,\n MatSidenavModule,\n MatSortModule,\n MatTableModule,\n MatInputModule,\n MatSelectModule,\n MatSliderModule,\n MatRadioModule,\n MatListModule,\n MatProgressSpinnerModule,\n MatChipsModule,\n MatTooltipModule,\n MatExpansionModule,\n MatDialogModule,\n MatAutocompleteModule,\n MatTabsModule,\n MatSlideToggleModule,\n MatPaginatorModule,\n ],\n})\nexport class MaterialModule {}\n')),(0,r.kt)("p",null,"Now, we need to include ",(0,r.kt)("inlineCode",{parentName:"p"},"*HammerJS")," for gesture support.\nIn your terminal, type:"),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-bash"}),"npm install --save hammerjs\n")),(0,r.kt)("p",null,"We have to include it, open ",(0,r.kt)("inlineCode",{parentName:"p"},"/src/main.ts")),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-javascript"}),'import { enableProdMode } from "@angular/core";\nimport { platformBrowserDynamic } from "@angular/platform-browser-dynamic";\n\nimport { AppModule } from "./app/app.module";\nimport { environment } from "./environments/environment";\nimport "hammerjs";\n\nif (environment.production) {\n enableProdMode();\n}\n\nplatformBrowserDynamic()\n .bootstrapModule(AppModule)\n .catch((err) => console.log(err));\n')),(0,r.kt)("p",null,"Now I have to mention something as I know you might face a problem while using it.\nNow we have ",(0,r.kt)("span",{className:"highlighted"},"2 modules")," in our application ( ",(0,r.kt)("inlineCode",{parentName:"p"},"app.module.ts")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"material.module.ts"),"), so if you want to create new component or service you have to mention where do you want to add your new component.\nLet's see a practical example. If we want to create new component named ",(0,r.kt)("inlineCode",{parentName:"p"},"test"),"\nin your terminal run( make sure you're in your root directory first):"),(0,r.kt)("pre",null,(0,r.kt)("code",u({parentName:"pre"},{className:"language-bash"}),"ng g component test --module app.module.ts\n")),(0,r.kt)("p",null,"This will create new component named ",(0,r.kt)("inlineCode",{parentName:"p"},"test")," and will add it to ",(0,r.kt)("inlineCode",{parentName:"p"},"app.module.ts"),"."),(0,r.kt)("p",null,"If you forgot to add the ",(0,r.kt)("inlineCode",{parentName:"p"},"--module")," argument you'll get an error next time adding new component."),(0,r.kt)("p",null,"That's all for now"))}m.isMDXComponent=!0},29533:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/using-angular-material-with-angular-6",function(){return t(29313)}])},71385:function(e,n,t){"use strict";function a(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,a=new Array(n);t<n;t++)a[t]=e[t];return a}function o(e){return function(e){if(Array.isArray(e))return a(e)}(e)||function(e){if("undefined"!==typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,n){if(e){if("string"===typeof e)return a(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?a(e,n):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}t.d(n,{Z:function(){return o}})},16248:function(e,n,t){"use strict";var a=this&&this.__importDefault||function(e){return e&&e.__esMo
1dule?e:{default:e}};Object.defineProperty(n,"__esModule",{value:!0}),n.useClipboard=void 0;var o=a(t(66485)),r=t(67294),l=t(16778);function i(e){return e&&("TEXTAREA"===e.nodeName||"INPUT"===e.nodeName)}n.useClipboard=function(e){void 0===e&&(e={});var n=l.useTimedToggle(!1),t=n[0],a=n[1],u=r.useRef(null),p=r.useRef(e);return p.current=e,{copied:t,copy:r.useCallback((function(e){var n=p.current,t=u.current;function r(){n.onSuccess&&n.onSuccess(),n.copiedTimeout&&a(n.copiedTimeout),n.selectOnCopy&&i(t)&&t.select()}function l(){n.onError&&n.onError(),!1!==n.selectOnError&&i(t)&&t.select()}function d(e){o.default(e).then(r).catch(l)}"string"===typeof e?d(e):t&&d(t.value)}),[]),isSupported:function(){return!!navigator.clipboard||"function"===typeof document.execCommand&&"function"===typeof document.queryCommandSupported&&document.queryCommandSupported("copy")},target:u}}},16778:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.useTimedToggle=void 0;var a=t(67294);n.useTimedToggle=function(e){var n=a.useState(!1),t=n[0],o=n[1],r=a.useRef(),l=a.useRef(e);return a.useEffect((function(){return function(){return clearTimeout(r.current)}}),[]),[t,function(e){clearTimeout(r.current),o(!l.current),r.current=window.setTimeout((function(){return o(l.current)}),e)}]}}},function(e){e.O(0,[329,8962,9774,2888,179],(function(){return n=29533,e(e.s=n);var n}));var n=e.O();_N_E=n}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.