Angular Material is a powerful extension onto Angular for UI design. I personally fell in love with it before I ever used it. When I started using it I knew I would find things I would want to improve. Material Grid List is so handy to use and makes layouts excellent for use. However it’s not responsive.<\/p>\n\n\n\n
<mat-grid-list cols=\"2\" rowHeight=\"350px\">\n<\/mat-grid-list><\/code><\/pre>\n\n\n\nMaking it responsive was something I realized I would need for my project. Looking around I found a lot of different ways people were doing it. However, none gave the flexibility that I wanted. I decided a Directive would be best that would complete the cols value for me. I had to spend some time looking up a few things but it has certainly taught me a few new things.<\/p>\n\n\n\n
Below you will find my implementation of gridCols directive. You can pass in a value or you can use the default which will use the values for number of columns: {xs<\/strong>: 1, sm<\/strong>: 2, md<\/strong>: 4, lg<\/strong>: 6, xl<\/strong>: 8}<\/p>\n\n\n\n<mat-grid-list [gridCols] rowHeight=\"350px\">\n<\/mat-grid-list><\/code><\/pre>\n\n\n\nOr you can pass in a set of values to specify your own:<\/p>\n\n\n\n
<mat-grid-list [gridCols]=\"{xs: 1, sm: 2, md: 3, lg: 4, xl: 5}\" rowHeight=\"350px\">\n<\/mat-grid-list><\/code><\/pre>\n\n\n\nEither case you will the number of columns that your screen size dictates. Below is the implementation for gridCols:<\/p>\n\n\n\n
import {Directive, Input, OnDestroy, OnInit} from '@angular\/core';\nimport { MatGridList } from '@angular\/material';\nimport { BreakpointObserver, Breakpoints } from '@angular\/cdk\/layout';\n\nexport interface GridColumns {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n@Directive({\n selector: '[gridCols]'\n})\nexport class GridColsDirective implements OnInit {\n private gridCols: GridColumns = {xs: 1, sm: 2, md: 4, lg: 6, xl: 8};\n\n public get cols(): GridColumns {\n return this.gridCols;\n }\n\n @Input('gridCols')\n public set cols(map: GridColumns) {\n if (map && ('object' === (typeof map))) {\n this.gridCols = map;\n }\n }\n\n public constructor(private grid: MatGridList, private breakpointObserver: BreakpointObserver) {\n if(this.grid != null) {\n this.grid.cols = this.gridCols.md;\n }\n }\n\n public ngOnInit(): void {\n if(this.grid != null) {\n this.grid.cols = this.gridCols.md;\n }\n this.breakpointObserver.observe([\n Breakpoints.XSmall,\n Breakpoints.Small,\n Breakpoints.Medium,\n Breakpoints.Large,\n Breakpoints.XLarge\n ]).subscribe(result => {\n\n if (result.breakpoints[Breakpoints.XSmall]) {\n this.grid.cols = this.gridCols.xs;\n }\n if (result.breakpoints[Breakpoints.Small]) {\n this.grid.cols = this.gridCols.sm;\n }\n if (result.breakpoints[Breakpoints.Medium]) {\n this.grid.cols = this.gridCols.md;\n }\n if (result.breakpoints[Breakpoints.Large]) {\n this.grid.cols = this.gridCols.lg;\n }\n if (result.breakpoints[Breakpoints.XLarge]) {\n this.grid.cols = this.gridCols.xl;\n }\n });\n }\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Angular Material is a powerful extension onto Angular for UI design. I personally fell in love with it before I ever used it. When I started using it I knew I would find things I would want to improve. Material Grid List is so handy to use and makes layouts excellent for use. However it’s […]<\/p>\n","protected":false},"author":1,"featured_media":2658,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[281],"tags":[269],"series":[],"class_list":["post-2657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/12\/grid-684983_640.jpg?fit=640%2C480&ssl=1","jetpack-related-posts":[{"id":3004,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-calendar\/","url_meta":{"origin":2657,"position":0},"title":"Angular Material Calendar","author":"Jeffery Miller","date":"March 29, 2021","format":false,"excerpt":"Sometimes you need to have a calendar for showing information in your web application. After looking around at different implementations and finding none that work. I decided to create my own. This Calendar is not mobile optimized, For that, I created an Agenda that shows a single day at a\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2946,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-checkbox\/","url_meta":{"origin":2657,"position":1},"title":"Angular Material Checkbox","author":"Jeffery Miller","date":"January 11, 2021","format":false,"excerpt":"Create a compnent for Display\/Edit of a checkbox using Angular Material mat-form-field.","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2951,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-search-field\/","url_meta":{"origin":2657,"position":2},"title":"Angular Material Search Field","author":"Jeffery Miller","date":"January 25, 2021","format":false,"excerpt":"Angular Material Search Field component using mat-form-field to create a reusable component for searching.","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":3022,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/page-component-for-mobile-desktop\/","url_meta":{"origin":2657,"position":3},"title":"Page Component for Mobile\/Desktop","author":"Jeffery Miller","date":"April 26, 2021","format":false,"excerpt":"I was recently building a set of pages, that I needed to be able to switch what was displayed based on whether I was on a Desktop or Mobile device. On a Mobile device I would change the layout of tables or limit certain features in order to provide a\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/04\/website-1597382_640.png?fit=640%2C558&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/04\/website-1597382_640.png?fit=640%2C558&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/04\/website-1597382_640.png?fit=640%2C558&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2988,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-structural-directive-onsize\/","url_meta":{"origin":2657,"position":4},"title":"Angular Structural Directive onSize","author":"Jeffery Miller","date":"January 18, 2021","format":false,"excerpt":"Creating an angular structural directive to operate on screen resolution.","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/plan-2092499_640.jpg?fit=640%2C435&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/plan-2092499_640.jpg?fit=640%2C435&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/plan-2092499_640.jpg?fit=640%2C435&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2943,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-string-component\/","url_meta":{"origin":2657,"position":5},"title":"Angular Material String Component","author":"Jeffery Miller","date":"January 4, 2021","format":false,"excerpt":"Create a compnent for Display\/Edit\/Delete of a string using Angular Material mat-form-field.","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=525%2C300 1.5x"},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/2657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/comments?post=2657"}],"version-history":[{"count":2,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/2657\/revisions"}],"predecessor-version":[{"id":2660,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/2657\/revisions\/2660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media\/2658"}],"wp:attachment":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media?parent=2657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/categories?post=2657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/tags?post=2657"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/series?post=2657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}