{"tag":{"id":"57c3ba45cb80370904fc5b48","name":"angular material","logo":null,"slug":"angular-material","tagline":null,"__typename":"Tag"},"publication":{"__typename":"Publication","id":"5f44b0eb1b2ea309b752954d","url":"https://blog.shhdharmen.me","canonicalURL":"https://blog.shhdharmen.me","urlPattern":"SIMPLE","title":"Dharmen Shah's Blog","displayTitle":"Dharmen Shah's Blog","hasBadges":true,"descriptionSEO":"Hey, I am Dharmen Shah. I write about Angular, JavaScript, CSS and Web Development. Do checkout my blog to know more!","about":{"html":"

Hey, I am Dharmen Shah. I write about Angular, JavaScript, CSS and Web Development. Do checkout my blog to know more!

\n","text":"Hey, I am Dharmen Shah. I write about Angular, JavaScript, CSS and Web Development. Do checkout my blog to know more!\n","__typename":"Content"},"features":{"newsletter":{"isEnabled":true,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":false,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":true,"__typename":"ReadTimeFeature"},"textSelectionSharer":{"isEnabled":false,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":false,"published":null,"draft":null,"__typename":"CustomCSSFeature"},"gptBotCrawling":{"__typename":"GPTBotCrawlingFeature","isEnabled":false},"__typename":"PublicationFeatures"},"metaTags":"","ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1626363202908/0BqKEtZE6.jpeg","__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"5f449303e5215909d82ede84","name":"Dharmen Shah","username":"shhdharmen","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1626344961745/IrjaeadfO.jpeg"},"preferences":{"__typename":"Preferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1599653204261/XgBfRYd07.png","darkMode":{"__typename":"DarkModePreferences","logo":null,"enabled":null},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"604632c7d0457f4d5c583535","label":"About Me","url":"https://blog.shhdharmen.me/about","type":"page","series":null,"page":{"__typename":"StaticPage","id":"5f58cd88ffbb8f35dd030cab"}},{"__typename":"PublicationNavbarItem","id":"604632c7d0457f4d5c583536","label":"Join Hashnode","url":"https://blog.shhdharmen.me/join-hashnode","type":"page","series":null,"page":{"__typename":"StaticPage","id":"5f5cf90fddc3fe5f4f24d381"}},{"__typename":"PublicationNavbarItem","id":"61b34f353e16b66b1b1e50a3","label":"Support Me","url":"https://blog.shhdharmen.me/sponsor","type":"link","series":null,"page":null}],"enabledPages":{"__typename":"PagesPreferences","badges":true,"newsletter":true,"members":null},"layout":"grid","disableFooterBranding":false,"isSubscriptionModalDisabled":false},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1599653206210/GJhy7N39X.png","headerColor":"#0d47a1","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"G-H867QGT8H8","gTagManagerID":null,"plausibleAnalyticsEnabled":null,"wmPaymentPointer":"$ilp.uphold.com/PQaLWB8w7pzH","__typename":"PublicationIntegrations"},"imprintV2":null,"postsCount":{"totalDocuments":51,"__typename":"PublicationPostConnection"},"isTeam":false,"links":{"twitter":"https://twitter.com/shhdharmen","instagram":null,"github":"https://github.com/shhdharmen","website":"https://shhdharmen.me","hashnode":"https://hashnode.com/@shhdharmen","youtube":"","dailydev":"https://app.daily.dev/shhdharmen","linkedin":"https://www.linkedin.com/in/shhdharmen/","mastodon":null,"facebook":null,"__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"shhdharmen","domain":{"__typename":"DomainStatus","host":"blog.shhdharmen.me","ready":true},"wwwPrefixedDomain":null},"redirectionRules":[],"totalRecommendedPublications":0,"sponsorship":{"content":{"html":"

Hi 👋 everyone,

I am a Front-end Developer. I like to work on Web stuff (HTML, CSS, JS), Angular, React, Bootstrap, and SCSS. I also love to contribute to Open-Source Projects and sometimes write articles.

Over the past 6 years,

I've worked in different companies on different roles, ranging from support to developer to team-lead.

Right now, I am working as Sr. Full Stack Developer, crafting a suit of products for a global customer-base to provide fast, reliable and robust solutions. Mainly I am working with React, SASS and AWS.

Work and links

You can check my projects on Github. You can also find me on twitter, linkedin, stackoverflow, dev.to, medium, and codepen

🤝 Why do I need your Support?

First of all, Thank You very much 🙏 for reading, liking, commenting on my articles. The biggest motivation behind consistent content creation is YOU, my readers.

As you know, writing quality articles takes time and effort. Therefore, if you have enjoyed my articles or it was helpful to you, please consider showing your thanks by sponsoring me. It will surely motivate me further to write excellent content in the future 😊.

You Can click on the Sponsor Author button at the top of the page.

$\"Buy$

🙏 Thank You

Thanks for sponsoring & supporting!

$\"Thank$

\n","markdown":"# Hi 👋 everyone,\n\nI am a Front-end Developer. I like to work on Web stuff (HTML, CSS, JS), Angular, React, Bootstrap, and SCSS. I also love to contribute to Open-Source Projects and sometimes write articles.\n\n## Over the past 6 years,\n\nI've worked in different companies on different roles, ranging from support to developer to team-lead.\n\nRight now, I am working as Sr. Full Stack Developer, crafting a suit of products for a global customer-base to provide fast, reliable and robust solutions. Mainly I am working with React, SASS and AWS.\n\n## Work and links\n\nYou can check my projects on [Github](https://github.com/shhdharmen/shhdharmen). You can also find me on [twitter](https://twitter.com/shhdharmen), [linkedin](https://www.linkedin.com/in/shhdharmen/), [stackoverflow](https://stackoverflow.com/users/3339907/shhdharmen), [dev.to](https://dev.to/shhdharmen), [medium](https://medium.com/@shhdharmen), and [codepen](https://codepen.io/shhdharmen)\n\n## 🤝 Why do I need your Support?\n\nFirst of all, Thank You very much 🙏 for reading, liking, commenting on my articles. The biggest motivation behind consistent content creation is YOU, my readers.\n\nAs you know, writing quality articles takes time and effort. Therefore, if you have enjoyed my articles or it was helpful to you, please consider showing your thanks by sponsoring me. It will surely motivate me further to write excellent content in the future 😊.\n\nYou Can click on the Sponsor Author button at the top of the page.\n\n[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/arial-red.png)](https://www.buymeacoffee.com/shhdharmen)\n\n## 🙏 Thank You\nThanks for sponsoring & supporting!\n\n![Thank you](https://c.tenor.com/AEq_MsuoaXsAAAAC/leonardo-dicaprio-thank-you.gif)","__typename":"Content"},"stripe":{"connected":true,"accountId":"acct_1JeHbzSCrMGu9sUi","country":"IN","__typename":"StripeConfiguration"},"__typename":"PublicationSponsorship"},"pro":null,"allowContributorEdits":true,"posts":{"edges":[{"node":{"__typename":"Post","id":"666ef45c1302148575787cc4","title":"Typography in Angular Material 18","slug":"typography-in-angular-material-18","publishedAt":"2024-06-16T14:19:08.909Z","cuid":"clxhmu7e500010al4dkvo009r","url":"https://blog.shhdharmen.me/typography-in-angular-material-18","subtitle":"In this quick guide, we will learn the usage of typography and modifications with CSS variables for Angular Material 18","brief":"Angular Material 18 Project\nWe will simply use the project from my earlier article Angular Material Theming with CSS Variables. You can clone it from GitHub.\nThe typography-hierarchy mixin\ntypography-hierarchy mixin includes CSS classes for styling y...","readTimeInMinutes":4,"views":186,"author":{"__typename":"User","id":"5f449303e5215909d82ede84","username":"shhdharmen","name":"Dharmen Shah","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1626344961745/IrjaeadfO.jpeg","followersCount":121},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1718547357139/ce7d5399-afde-45ca-96a0-2e4d143a45e7.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjY2ZWY0NWMxMzAyMTQ4NTc1Nzg3Y2M0XzIwMjQtMDYtMTZUMTQ6MTk6MDguOTA5Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"66694a2c8e04fb6132a7c1a3","title":"Exploring Angular CDK: Creating Context Menu & Text Popover","slug":"exploring-angular-cdk-creating-context-menu-text-popover","publishedAt":"2024-06-12T07:11:40.408Z","cuid":"clxbht27s00010al1eayz98zh","url":"https://blog.shhdharmen.me/exploring-angular-cdk-creating-context-menu-text-popover","subtitle":"In this article, I will showcase context-menu & text-popover built using Angular CDK Overlay.","brief":"This is cross posted from original location https://angular-material.dev/articles/exploring-cdk-context-menu-text-popover. This article contains live playable demos, I recommend that you read it on it's original location.\n\nAngular CDK\n@angular/cdk, a...","readTimeInMinutes":4,"views":38,"author":{"__typename":"User","id":"5f449303e5215909d82ede84","username":"shhdharmen","name":"Dharmen Shah","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1626344961745/IrjaeadfO.jpeg","followersCount":121},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1718176241230/1bab3741-ad52-4672-9dc1-152aaa877b72.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjY2OTRhMmM4ZTA0ZmI2MTMyYTdjMWEzXzIwMjQtMDYtMTJUMDc6MTE6NDAuNDA4Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"6651eb5b0e80408c607eee9e","title":"Updating to Angular Material 18","slug":"updating-to-angular-material-18","publishedAt":"2024-05-25T13:44:59.426Z","cuid":"clwm5xjc2000009ju5jf24em9","url":"https://blog.shhdharmen.me/updating-to-angular-material-18","subtitle":"In this article, we will update Angular Material 17 to 18, keeping Support for Material 2 and Adding Support for Material 3","brief":"In this quick guide, we will update an Angular project with Angular Material 17 to 18. And we will also learn how to keep support for M2 and add support for M3.\n\nExisting Project\nFor this guide, I am going to use the project course-md-ng-my-app from ...","readTimeInMinutes":7,"views":40,"author":{"__typename":"User","id":"5f449303e5215909d82ede84","username":"shhdharmen","name":"Dharmen Shah","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1626344961745/IrjaeadfO.jpeg","followersCount":121},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1716644515515/26ee680b-181f-4f7e-8bcb-70b773f27d46.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjY1MWViNWIwZTgwNDA4YzYwN2VlZTllXzIwMjQtMDUtMjVUMTM6NDQ6NTkuNDI2Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"662bbbac8a976d35e773e48d","title":"Exploring Material 3 Design With Angular Material","slug":"exploring-material-3-design-with-angular-material","publishedAt":"2024-04-26T14:35:24.785Z","cuid":"clvgryodt000k09l2dtmy24uf","url":"https://blog.shhdharmen.me/exploring-material-3-design-with-angular-material","subtitle":"In this article, we will explore Material 3 design integration with Angular Material.","brief":"Angular Material team is soon going to roll out the stable usage of it's Material 3 (M3) integration. This integration is already part of it's next major release.\nIn this article, we are going to use the yet to be released 18 (or next) version of Ang...","readTimeInMinutes":6,"views":52,"author":{"__typename":"User","id":"5f449303e5215909d82ede84","username":"shhdharmen","name":"Dharmen Shah","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1626344961745/IrjaeadfO.jpeg","followersCount":121},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1714141142915/0acdd067-aff3-4194-96dd-bc1ac4310fd5.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjYyYmJiYWM4YTk3NmQzNWU3NzNlNDhkXzIwMjQtMDQtMjZUMTQ6MzU6MjQuNzg1Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"6607ec4eecc1bf38f8639957","title":"Angular Material Update Guide","slug":"angular-material-update-guide","publishedAt":"2024-03-30T10:41:18.186Z","cuid":"cludyplyi000g08l2fbr59r3q","url":"https://blog.shhdharmen.me/angular-material-update-guide","subtitle":null,"brief":"🚀New Chapter Added!\nA complete update guide for Angular Material from v10 to v17\nAre you struggling with updating Angular Material to latest version?\nThen this chapter is just for you.\nIf your current project uses Angular Material version older than...","readTimeInMinutes":1,"views":35,"author":{"__typename":"User","id":"5f449303e5215909d82ede84","username":"shhdharmen","name":"Dharmen Shah","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1626344961745/IrjaeadfO.jpeg","followersCount":121},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1711795123191/2a2c8908-333e-4c5a-9ce6-7b0ddb20f6b3.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjYwN2VjNGVlY2MxYmYzOGY4NjM5OTU3XzIwMjQtMDMtMzBUMTA6NDE6MTguMTg2Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"65b4cc07c6b7ae2eb13da71c","title":"How to implement toggle all option in Angular Material Select","slug":"how-to-implement-toggle-all-option-in-angular-material-select","publishedAt":"2024-01-27T09:25:26.998Z","cuid":"clrvv9e8m000608jvbwki1trr","url":"https://blog.shhdharmen.me/how-to-implement-toggle-all-option-in-angular-material-select","subtitle":"In this quick tutorial, we will learn how to implement a toggle all option in mat-select","brief":"In this tutorial, we will learn how to implement toggle all functionality in mat-select using a directive.\nmat-select\n is a form control for selecting a value from a set of options, similar to the native