1<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-jbgwe6ml-1"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.2.3"><meta name="description" content="Master UI development with Angular and build professional applications."><meta name="og:title" content="Angular UI - Master UI Development | angular-ui.com"><meta name="og:description" content="Master UI development with Angular and build professional applications."><meta name="og:image" content="https://angular-ui.com/images/meta-cover.png"><meta name="twitter:title" content="Angular UI - Master UI Development | angular-ui.com"><meta name="twitter:description" content="Master UI development with Angular and build professional applications."><meta name="twitter:image" content="https://angular-ui.com/images/meta-cover.png"><title>Angular UI - Master UI Development | angular-ui.com</title> <link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"> <meta name="description" content="Master UI development with Angular and build professional applications."> <meta name="color-scheme" content="dark"><!-- Google tag (gtag.js) -->
vendor: 63 bytes, line 1
1<script async src="https://www.googletagmanager.com/gtag/js?id=
1GT-NN6SGTX9
vendor: 12 bytes, line 1
1"></script>
1<script type="module">(function(e,n,r,t,m){e[t]=e[t]||[],e[t].push({"gtm.start":new Date().getTime(),event:"gtm.js"});var g=n.getElementsByTagName(r)[0],a=n.createElement(r),s="";a.async=!0,a.src="https://www.googletagmanager.com/gtm.js?id="+m+s,g.parentNode.insertBefore(a,g)})(window,document,"script","dataLayer","GTM-PJH3PLX9");</script>
1 <!-- Google Tag Manager -->
1<script type="module">window.dataLayer=window.dataLayer||[];function a(){dataLayer.push(arguments)}a("js",new Date);a("config","GT-NN6SGTX9");</script>
1 <!-- End Google Tag Manager --><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate">
1<script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.rasoniT7.js"></script>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"Angular UI","url":"https://angular-ui.com","description":"Master UI development with Angular and build professional applications.","image":"https://angular-ui.com/images/meta-cover.png","screenshot":"https://angular-ui.com/images/meta-cover.png","applicationCategory":"Articles and Courses","operatingSystem":"Android, Chrome OS, iOS, iPadOS, macOS, OS X, Linux, Windows","author":[{"@type":"Person","name":"Dharmen Shah","url":"https://shhdharmen.me"}],"publisher":[{"@type":"Organization","name":"Nexcellentia","url":"https://nexcellentia.in"}]}</script>
1<script> 2 function setAppTheme(document) { 3 let theme = localStorage.getItem("app_theme"); 4 5 if (!theme) { 6 theme = window.matchMedia("(prefers-color-scheme: dark)").matches 7 ? "dark" 8 : "light"; 9 } 10 11 document.querySelector("html")?.setAttribute("data-theme", theme); 12 } 13 14 setAppTheme(document); 15 </script>
15<script type="module" src="/_astro/MainLayout.astro_astro_type_script_index_0_lang.BByiFxJq.js"></script>
15<link rel="stylesheet" href="/_astro/account.BGxnD1MD.css"> 16<link rel="stylesheet" href="/_astro/privacy.CDkC0Ehe.css"><style>[data-astro-transition-scope="astro-jbgwe6ml-1"] { view-transition-name: astro-jbgwe6ml-1; }@layer astro { ::view-transition-old(astro-jbgwe6ml-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-jbgwe6ml-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-jbgwe6ml-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-jbgwe6ml-1"], 17 [data-astro-transition-fallback="old"][data-astro-transition-scope="astro-jbgwe6ml-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-jbgwe6ml-1"], 18 [data-astro-transition-fallback="new"][data-astro-transition-scope="astro-jbgwe6ml-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-tch7y22v-6"] { view-transition-name: astro-tch7y22v-6; }@layer astro { ::view-transition-old(astro-tch7y22v-6) { 19 animation-duration: 180ms; 20 animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); 21 animation-fill-mode: both; 22 animation-name: astroFadeOut; }::view-transition-new(astro-tch7y22v-6) { 23 animation-duration: 180ms; 24 animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); 25 animation-fill-mode: both; 26 animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-tch7y22v-6) { 27 animation-duration: 180ms; 28 animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); 29 animation-fill-mode: both; 30 animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-tch7y22v-6) { 31 animation-duration: 180ms; 32 animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); 33 animation-fill-mode: both; 34 animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-tch7y22v-6"], 35 [data-astro-transition-fallback="old"][data-astro-transition-scope="astro-tch7y22v-6"] { 36 animation-duration: 180ms; 37 animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); 38 animation-fill-mode: both; 39 animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-tch7y22v-6"], 40 [data-astro-transition-fallback="new"][data-astro-transition-scope="astro-tch7y22v-6"] { 41 animation-duration: 180ms; 42 animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); 43 animation-fill-mode: both; 44 animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-tch7y22v-6"], 45 [data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-tch7y22v-6"] { 46 animation-duration: 180ms; 47 animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); 48 animation-fill-mode: both; 49 animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-tch7y22v-6"], 50 [data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-tch7y22v-6"] { 51 animation-duration: 180ms; 52 animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); 53 animation-fill-mode: both; 54 animation-name: astroFadeIn; }</style></head> <body class="min-h-screen"> <!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, line 54
54 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
54GTM-PJH3PLX9
vendor: 83 bytes, line 54
54" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
54<!-- End Google Tag Manager (noscript) --> <header> <div class="md:hidden"> <nav class="bg-surface-container-lowest flex w-full items-center px-3 min-h-[56px] fixed top-0 z-50"> <md-icon-button id="side-nav-toggle"> <md-icon>menu</md-icon> </md-icon-button> <div class="flex flex-1 items-center gap-2"> <a href="/" class="text-tk-elements-topBar-logo-color hover:text-tk-elements-topBar-logo-colorHover"> <img class="dark:hidden" src="/logo.svg" style="height: 2.25rem; width: auto"> <img class="hidden dark:inline-block" src="/logo.svg" style="height: 2.25rem; width: auto"> </a> <div class="md-typescale-headline-small font-semibold">Angular UI</div> </div> </nav>
54<script type="module" src="/_astro/TopMarketingBar.astro_astro_type_script_index_0_lang.CU3iQXYY.js"></script>
54 </div> <div class="app-sidenav"> <div class="app-sidenav__rail hidden md:block"> <div class="nav-rail-container"> <div class="home-link"> <a href="/" class="text-tk-elements-topBar-logo-color hover:text-tk-elements-topBar-logo-colorHover"> <img class="dark:hidden" src="/logo.svg" style="height: 42px; width: 42px"> <img class="hidden dark:inline-block" src="/logo.svg" style="height: 42px; width: 42px"> </a> </div> <nav class="nav-rail-content"> <a href="/courses/angular-material-theming" class="section-link relative" id="courses"> <md-icon class="pointer-events-none">school</md-icon> <div class="label pointer-events-none">Courses</div> </a><a href="/faq" class="section-link relative" id="faq"> <md-icon class="pointer-events-none">help</md-icon> <div class="label pointer-events-none">FAQ</div> </a> </nav> <div class="dark-mode-switch-container mt-auto"> <div class="switch-container compact"> <a class="switch" href="/login" data-astro-prefetch="false" id="login-anchor" data-astro-transition-persist="astro-4z4muuzf-9"> <span aria-hidden="true" class="material-symbols-outlined"> login </span> </a> <button id="user-menu-anchor" class="switch important:hidden" data-astro-transition-persist="astro-iaccjfqj-13"> <span aria-hidden="true" class="material-symbols-outlined"> person </span> </button> <md-menu positioning="fixed" id="user-menu" anchor="user-menu-anchor"> <md-menu-item disabled> <div slot="headline" id="user-menu-headline"></div> </md-menu-item> <md-menu-item href="/account"> <div slot="headline">Account</div> <md-icon slot="end">settings</md-icon> </md-menu-item> <md-menu-item href="/progress"> <div slot="headline">Progress</div> <md-icon slot="end">trending_up</md-icon> </md-menu-item> <md-divider role="separator" tabindex="-1"></md-divider> <md-menu-item id="logout-menu-item"> <div slot="headline">Logout</div> <md-icon slot="end">logout</md-icon> </md-menu-item> </md-menu>
54<script type="module" src="/_astro/UserMenu.astro_astro_type_script_index_0_lang.BMczOTt4.js"></script>
54
54<script type="module" src="/_astro/UserMenu.astro_astro_type_script_index_1_lang.Cj3d0UTY.js"></script>
54 </div>
54<script type="module" src="/_astro/LoginSwitch.astro_astro_type_script_index_0_lang.Dcvho92X.js"></script>
54 <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
54<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script>
54<astro-island uid="rUapd" prefix="r0" component-url="/_astro/DarkThemeSwitch.DP65IIAA.js" component-export="DarkThemeSwitch" renderer-url="/_astro/client.BFNwmmhL.js" props="{}" ssr client="load" opts="{"name":"DarkThemeSwitch","value":true}" await-children><div class="switch-container compact"><div class="track "><div class="switch" role="button"><span aria-hidden="true" class="material-symbols-outlined">dark_mode</span></div><div class="switch" role="button"><span aria-hidden="true" class="material-symbols-outlined">light_mode</span></div></div></div><!--astro:end--></astro-island> </div> </div>
54<script type="module" src="/_astro/index.astro_astro_type_script_index_0_lang.g6V8PLkL.js"></script>
54 </div> <div class="app-sidenav__drawer block md:hidden"> <div class="nav-drawer-container" id="nav-drawer-container"> <md-icon-button id="nav-drawer-close-button" class="absolute top-0 right-0 rtl:left-0 rtl:right-auto"> <md-icon>close</md-icon> </md-icon-button> <div class="section-link home-link"> <a href="/" class="text-tk-elements-topBar-logo-color hover:text-tk-elements-topBar-logo-colorHover"> <img class="dark:hidden" src="/logo.svg" style="height: 42px; width: 42px"> <img class="hidden dark:inline-block" src="/logo.svg" style="height: 42px; width: 42px"> </a> </div> <nav class="nav-drawer-content"> <md-list> <md-list-item type="link" href="/courses/angular-material-theming" id="courses"> <md-icon slot="start" class="pointer-events-none"> school </md-icon> <div slot="headline" class="pointer-events-none"> Courses </div> </md-list-item><md-list-item type="link" href="/faq" id="faq"> <md-icon slot="start" class="pointer-events-none"> help </md-icon> <div slot="headline" class="pointer-events-none"> FAQ </div> </md-list-item> </md-list> </nav> <div class="dark-mode-switch-container mt-auto flex flex-col items-center mb-3"> <div class="switch-container full"> <a class="switch" href="/login" data-astro-prefetch="false" id="login-anchor" data-astro-transition-persist="astro-4z4muuzf-11"> <span aria-hidden="true" class="material-symbols-outlined"> login </span> Login </a> <button id="user-menu-anchor" class="switch important:hidden" data-astro-transition-persist="astro-iaccjfqj-14"> <span aria-hidden="true" class="material-symbols-outlined"> person </span> Account </button> <md-menu positioning="fixed" id="user-menu" anchor="user-menu-anchor"> <md-menu-item disabled> <div slot="headline" id="user-menu-headline"></div> </md-menu-item> <md-menu-item href="/account"> <div slot="headline">Account</div> <md-icon slot="end">settings</md-icon> </md-menu-item> <md-menu-item href="/progress"> <div slot="headline">Progress</div> <md-icon slot="end">trending_up</md-icon> </md-menu-item> <md-divider role="separator" tabindex="-1"></md-divider> <md-menu-item id="logout-menu-item"> <div slot="headline">Logout</div> <md-icon slot="end">logout</md-icon> </md-menu-item> </md-menu> </div> <div class="my-2"></div> <astro-island uid="Z2ujijL" prefix="r1" component-url="/_astro/DarkThemeSwitch.DP65IIAA.js" component-export="DarkThemeSwitch" renderer-url="/_astro/client.BFNwmmhL.js" props="{"variant":[0,"full"]}" ssr client="load" opts="{"name":"DarkThemeSwitch","value":true}" await-children><div class="switch-container full"><div class="track "><div class="switch" role="button"><span aria-hidden="true" class="material-symbols-outlined">dark_mode</span>Switch to dark mode</div><div class="switch" role="button"><span aria-hidden="true" class="material-symbols-outlined">light_mode</span>Switch to light mode</div></div></div><!--astro:end--></astro-island> </div> </div>
54<script type="module" src="/_astro/index.astro_astro_type_script_index_0_lang.Bj9ONpO3.js"></script>
54 </div> <div class="sidenav-scrim" role="presentation" id="sidenav-scrim"></div> </div> </header> <main class="mt-[56px] md:mt-0 md:ps-[96px]" data-astro-transition-scope="astro-tch7y22v-6"> <div class="p-3 md:p-6"> <div class="cover cover-bg p-5 md:p-10 rounded-5 mb-6 h-[90dvh] md:h-[94dvh] flex flex-col justify-center relative overflow-hidden"> <!-- <div class="absolute top-0 left-0 right-1/2 h-full pointer-events-none bg-gradient-to-bl from-transparent via-transparent to-[rgba(144,226,199,1)] dark:to-[rgba(0,76,106,1)] from-30% to-65%"></div> --> <div class="max-w-7xl md:my-24 relative z-10"> <h1 class="text-4xl md:text-6xl font-bold mb-6 md:mb-12"> 55Build modern web interfaces as you learn from the ground up 56</h1> <p class="text-lg md:text-2xl mb-6 md:mb-12"> 57Get ready to build your next web application using Angular with our 58 interactive courses and exercises 59</p> <div class="flex gap-2 items-center flex-col md:flex-row"> <md-filled-button href="/courses/angular-material-theming"> <md-icon slot="icon">arrow_forward</md-icon> 60Browse our course 61</md-filled-button> </div> </div> </div> <div class="max-w-7xl mx-auto"> <div class="p-5 md:p-10 mb-12 text-center"> <h2 class="md-typescale-headline-large font-bold mb-6"> 62Explore core fundamentals 63</h2> <p class="md-typescale-body-large"> 64We teach beyond simple copy-paste coding. Learn the reasoning and 65 principles behind each solution, empowering you to build applications 66 with the expertise of a professional developer. 67</p> </div> <div class="cover overflow-hidden relative p-5 md:p-10 rounded-5 mb-5 mb-6 md:mb-12 border border-outline"><div class="absolute inset-0 dark:bg-slate-950 bg-slate-50 dark:bg-opacity-[0.50] bg-opacity-[0.25] "></div><div class="pointer-events-none absolute inset-0" style="opacity: 1; background: radial-gradient(650px at 200px 0px, color-mix(in srgb, var(--md-sys-color-primary-container), transparent), transparent 150%);"></div><div class="relative"><p class="md-typescale-body-large font-semibold text-tertiary mb-6"><md-icon class="icon-filled align-middle">campaign</md-icon> 68Latest Course 69</p><h1 class="md-typescale-headline-large font-bold mb-6">Angular Material Theming System</h1><p class="md-typescale-headline-small mb-6 text-secondary">Master Angular Material's theming system for Material 3 design system</p><p class="mb-6">Angular Material has become a cornerstone in the Angular ecosystem, offering a comprehensive suite of UI components that seamlessly integrate with Angular applications. With its robust theming capabilities, Angular Material allows developers to create visually stunning and highly customizable user interfaces.<br /><br /> In this course, you'll dive deep into Angular Material's theming system, learning how to build and customize themes that perfectly align with your application's design requirements. You'll explore the intricacies of Angular Material's theming API by creating and modifying themes. By the end of this course, you'll have the skills to create, modify and extend themes for your Material, not only for whole application but also for individual components.</p><p class="md-typescale-body-medium mb-3 text-slate-500">Tech Stack:</p><div class="flex gap-4 mb-8 flex-wrap"><span class="text-sm px-3 py-2 rounded-full flex items-center gap-1"><svg width="0.95em" height="1em" class="h-6 w-6" data-icon="angular"> <symbol id="ai:local:angular" viewBox="130 109.8 699.2 740"><path fill="currentColor" d="m562.6 109.8 241.5 519.7 25.1-396.4zm62.3 546.1H334.3l-37.1 89.9 182.4 104 182.4-104zM384.1 539.3h191.1L479.6 307zm12.5-429.5L130 233.1l25.1 396.4z"/></symbol><use href="#ai:local:angular"></use> </svg>Angular v19/20</span><span class="text-sm px-3 py-2 rounded-full flex items-center gap-1"><svg width="0.95em" height="1em" class="h-6 w-6" data-icon="angular-material"> <symbol id="ai:local:angular-material" viewBox="130 109.8 699.2 740"><path fill="currentColor" d="m562.6 109.8 241.5 519.7 25.1-396.4zm62.3 546.1H334.3l-37.1 89.9 182.4 104 182.4-104zM384.1 539.3h191.1L479.6 307zm12.5-429.5L130 233.1l25.1 396.4z"/></symbol><use href="#ai:local:angular-material"></use> </svg>Angular Material v19/20</span><span class="text-sm px-3 py-2 rounded-full flex items-center gap-1"><svg width="1em" height="1em" class="h-6 w-6" data-icon="scss">
69 <symbol id="ai:local:scss" viewBox="0 0 32 32"><path fill="currentColor" d="M18 17.3c-1.1.7-2.4 1.5-3.5 2.2.4.9.4 1.8.1 2.7-.5 1.6-1.7 2.5-3.2 2.7-.4.1-.8 0-1.1-.1-.4-.1-.6-.4-.7-.7q-.6-1.35.3-2.4c.4-.4.8-.9 1.3-1.2.5-.4 1.2-.7 1.8-1.1.1-.1.2-.1.4-.2-.3-.2-.4-.4-.6-.4-.8-.5-1.6-1.1-2.3-1.8-.4-.4-.8-.8-1.1-1.3-.9-.7-1-1.7-.5-2.6.4-1 1.1-1.8 1.8-2.5 1.6-1.4 3.4-2.4 5.4-3.1 1.4-.5 2.8-.7 4.2-.5.4.2 1 .3 1.4.5 1.5.6 2.1 1.8 1.6 3.4-.4 1.3-1.2 2.4-2.4 3.1-1.6 1-3.2 1.4-5.1 1.1-.6-.1-1.1-.4-1.6-.9-.1-.2-.2-.4-.3-.5 0 0 0-.1.1-.2 0 0 .1 0 .2.1.8.8 1.7.9 2.6.7 1.7-.3 3.2-.9 4.3-2.2.4-.5.8-1.1 1-1.8.2-.8-.2-1.4-.9-1.8-.8-.4-1.6-.4-2.4-.3-2 .3-3.8 1.1-5.4 2.1-.9.5-1.7 1.1-2.3 1.9-.3.4-.5.8-.7 1.2-.3.8-.2 1.6.4 2.2.4.4.8.8 1.2 1.1.6.5 1.3 1.1 1.9 1.6.1 0 .2.1.3 0 .3-.2.5-.3.8-.4.9-.5 1.8-.9 2.8-1.1 0 .4.1.4.2.5q0-.15 0 0m-4.3 2.5c-.9.5-1.6 1-2.3 1.7-.4.4-.6.8-.7 1.3-.1.6.3.9.9.8.8-.2 1.4-.7 1.8-1.3.5-.8.5-1.5.3-2.5"/></symbol><use href="#ai:local:scss"></use> </svg>SCSS</span></div><p class="md-typescale-body-medium mb-3 text-slate-500"> 70Other Versions Available: 71</p><div class="flex gap-4 mb-8 flex-wrap"><a class="text-sm px-3 py-2 rounded-full flex items-center gap-1 hover:underline" href="/courses/angular-material-theming-18">Version 18</a></div><div class="flex gap-4 md:gap-6 items-center mt-24 flex-wrap"><md-filled-button href="/courses/angular-material-theming"><md-icon slot="icon">arrow_forward</md-icon> 72Start Course 73</md-filled-button><div class="flex gap-2 items-center ms-auto w-full md:w-auto my-6 md:my-0"><img src="/images/authors/dharmen.jpg" alt="Author" class="w-12 h-12 rounded-full shadow"><div><p class="text-xs text-on-surface-variant">Taught by</p><p class="font-semibold">Dharmen Shah</p></div></div><div class="flex gap-2 items-center"><md-icon class="w-12 h-12 rounded-full bg-surface-container"> 74book 75</md-icon><div><p class="text-xs text-on-surface-variant">Content</p><p class="font-semibold">46 Lessons</p></div></div><div class="flex gap-2 items-center"><md-icon class="w-12 h-12 rounded-full bg-surface-container"> 76schedule 77</md-icon><div><p class="text-xs text-on-surface-variant">Duration</p><p class="font-semibold">04:17:49</p></div></div></div></div></div> <div class="my-12 md:my-44"> <h2 class="md-typescale-headline-large font-bold px-5 md:px-10 mb-8"> 78Platform Tour 79</h2>
79<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script>
79<astro-island uid="1o7mU0" component-url="/_astro/ArcadeEmbed.CUuTY189.js" component-export="ArcadeEmbed" renderer-url="/_astro/client.BFNwmmhL.js" props="{}" ssr client="only" opts="{"name":"ArcadeEmbed","value":"react"}"></astro-island> <!-- <VideoPlayer 80 client:only="react" 81 title="Angular UI - Intro" 82 playbackId="XszjcVlVlUJg7UxpadIbJ4Dw00Y00HdAk00ovugjAKvruM" 83 aspectRatio="16/9" 84 /> --> </div> <h2 class="md-typescale-headline-large font-bold px-5 md:px-10 mb-8"> 85Meet your author 86</h2> <div class="feature-card-container no-hover mb-24"> <div class="feature-card no-hover"> <div class="grid grid-cols-1 md:grid-cols-4"> <div class="col-span-1"> <div class="img-container h-full"> <img src="/images/profile-bg.png" class="rounded-3 h-full max-h-[200px] md:max-h-full object-fit-cover w-full"> <img src="/_astro/dharmen_portrait.C7j54N9R_2q54QY.webp" alt="Dharmen Shah" width="397" height="397" loading="lazy" decoding="async" class="rounded-full indicator-img shadow-sm"> </div> </div> <div class="col-span-1 md:col-span-3 mb-3 md:mb-0 p-3 flex flex-col h-100"> <h3 class="md-typescale-headline-medium mb-3"> 87Hello ð, I am Dharmen Shah 88</h3> <p class="mb-6"> 89I have around 10+ years of experience in IT industry. I have got 90 opportunity to work at different companies with different 91 technologies, mostly focused on Front-end, like Angular, React, 92 Next, vanilla web stack (HTML, CSS, JavaScript). 93</p> <p class="hidden md:block mb-3"> 94With professional work, I also got opportunity to write 95 technical articles mainly focused on Angular. You can read my 96 blogs at 97<a href="http://blog.shhdharmen.me" target="_blank" rel="noopener noreferrer">blog.shhdharmen.me</a> & <a href="https://angular-material.dev" target="_blank">angular-material.dev</a>. 98</p> <p class="hidden md:block mb-3"> 99I was a writer at 100<a href="http://indepth.dev" target="_blank" rel="noopener noreferrer">indepth.dev</a>. With writing, I also contribute to open-source mainly focused 101 on Angular. 102<a href="https://ngxpert.github.io/hot-toast" target="_blank">@ngxpert/hot-toast</a>, 103<a href="https://ngxpert.github.io/cmdk" target="_blank">@ngxpert/cmdk</a>, 104<a href="https://ngneat.github.io/falso" target="_blank">@ngneat/falso</a>, 105<a href="https://ngxpert.github.io/avvvatars" target="_blank">@ngxpert/avvvatars</a>, 106<a href="https://ngxpert.github.io/coolshapes" target="_blank">@ngxpert/coolshapes</a> 107are some of the open-source libraries which I have majorly contributed 108 to. 109</p> <div class="flex gap-4 flex-wrap justify-end mt-auto"> <md-text-button href="http://youtube.com/@shhdharmen" target="_blank" rel="noopener noreferrer">Youtube</md-text-button> <md-text-button href="http://twitter.com/shhdharmen" target="_blank" rel="noopener noreferrer">Twitter</md-text-button> <md-text-button href="https://www.linkedin.com/in/shhdharmen/" target="_blank" rel="noopener noreferrer">Linkedin</md-text-button> <md-text-button href="http://github.com/shhdharmen" target="_blank" rel="noopener noreferrer">Github</md-text-button> </div> </div> </div> </div> </div> <div class="p-5 md:p-10 mb-12 grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="col-span-1 md:col-span-2"> <h2 class="md-typescale-headline-large font-bold mb-3"> 110Lifetime access 111</h2> <p class="md-typescale-body-large mb-6"> 112When you buy the access, you gain access to everything included on 113 this platform. This includes all current courses, and any future 114 additions we make. There are no recurring subscriptions, and you 115 won't be charged for updates. 116</p> <h3 class="md-typescale-headline-small font-semibold mb-3 text-primary"> 117Simple, one-time payment 118</h3> <p class="md-typescale-body-large"> 119You make a one-time payment and enjoy perpetual access to all our 120 premium course content. 121</p> </div> <div class="rounded-5 col-span-1"> <div class="relative"> <img src="/images/pricing/pro.png" class="w-full h-[200px] object-cover rounded-t-5"> <div class="absolute inset-0 backdrop-blur-sm dark:bg-slate-950 bg-slate-50 dark:bg-opacity-[0.25] bg-opacity-[0.45] rounded-t-5"></div> <div class="absolute inset-0 flex flex-col items-center justify-center"> <div class="md-typescale-title-large text-center"> 122Get everything, forever. 123</div> <div class="flex justify-center gap-2"> <div class="md-typescale-display-large text-center my-3"> 12454.6$ 125</div> <div class="md-typescale-title-large text-center my-3 line-through"> 78$ 126</div> </div> <div class="md-typescale-body-large text-center"> <md-icon class="align-middle icon-filled">person</md-icon> 127Personal, for individuals 128</div> </div> </div> <div class="p-3 rounded-b-5 bg-surface-container flex flex-col items-center justify-center"> <p class="mb-3 text-center"> <small> <b>one-time payment</b>, 129<span class="text-muted">plus local taxes</span> </small> </p> <md-filled-button class="mb-3" href="/buy-now"> 130Get access 131</md-filled-button> </div> </div> </div> </div> </div> </main> <footer class="py-16 md:pl-[96px]"> <div class="squiggle mb-12 md:mb-24"> <svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"> <pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse"> <g clip-path="url(#clip0_2426_11367)"> <path d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0" stroke="#E1E3E1" stroke-linecap="square"></path> </g> </pattern> <rect width="100%" height="100%" fill="url(#a)"></rect> </svg> </div> <div class="max-w-7xl mx-auto"> <div class="px-5 max-w-7xl mx-auto"> <div class="feature-card-container no-hover mb-24" id="subscribe"> <div class="feature-card no-hover"> <div class="grid grid-cols-1 md:grid-cols-4"> <div class="col-span-1"> <div class="img-container h-full"> <img src="/images/mail-bg.png" class="rounded-3 h-full max-h-[200px] md:max-h-full object-fit-cover w-full"> <img src="/images/mail.png" class="rounded-full indicator-img shadow-sm" alt="Envelop"> </div> </div> <div class="col-span-1 md:col-span-3 mb-3 mb-md-0 p-3 flex flex-col justify-center"> <div class="hidden" id="subscribe-success"> <h3 class="md-typescale-headline-medium mb-3"> <span class="material-symbols-outlined icon-filled align-middle"> 132check_circle 133</span> 134Thank you for subscribing. 135</h3> <p> 136You will receive an email whenever we send out a new newsletter. 137</p> </div> <div id="subscribe-initial"> <div class="md-typescale-body-medium">Don't miss any update</div> <h3 class="md-typescale-headline-medium mb-3">Stay up to date</h3> <p>
138Subscribe to the newsletter to stay up to date with videos, courses 139 and much more! 140</p> <form id="subscribe-form"> <div class="mt-3 md:mt-6"></div> <md-outlined-text-field label="Email" name="email" required type="email" class="w-full md:w-3/4 mb-6" id="subscribe-email"></md-outlined-text-field> <div class="mt-3"> <md-filled-button type="submit" id="subscribe-btn" disabled> 141Subscribe 142</md-filled-button> </div> <p class="text-danger hidden" id="subscribe-error"> <small>Please try again after some time.</small> </p> </form> </div> </div> </div> </div> </div>
142<script type="module" src="/_astro/container.astro_astro_type_script_index_0_lang.DkcLTFw8.js"></script>
142 </div> <div class="px-5 grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="col-span-1 md:col-span-2"> <div class="flex gap-2 items-center mb-6"> <a href="/" class="text-tk-elements-topBar-logo-color hover:text-tk-elements-topBar-logo-colorHover"> <img class="dark:hidden" src="/logo.svg" style="height: 2.5rem; width: auto"> <img class="hidden dark:inline-block" src="/logo.svg" style="height: 2.5rem; width: auto"> </a> <div class="md-typescale-headline-small font-semibold"> 143Angular UI 144</div> </div> <p class="text-on-surface-variant"> 145Master UI development with Angular and build professional 146 applications. 147</p> </div> <div class="grid grid-cols-1 grid-cols-2 gap-8"> <div> <h4 class="font-bold mb-4">Resources</h4> <ul class="space-y-2"> <li> <a href="/courses" class="text-on-surface-variant hover:text-primary"> 148Courses 149</a> </li> <li> <a href="/faq" class="text-on-surface-variant hover:text-primary"> 150FAQ 151</a> </li> </ul> </div> <div> <h4 class="font-bold mb-4">Connect</h4> <ul class="space-y-2"> <li> <a href="/support" class="text-on-surface-variant hover:text-primary"> 152Support 153</a> </li> <li> <a href="https://twitter.com/@_angular_ui" class="text-on-surface-variant hover:text-primary" target="_blank"> 154Twitter 155</a> </li> <li> <a href="https://www.linkedin.com/company/angular-ui" class="text-on-surface-variant hover:text-primary" target="_blank"> 156LinkedIn 157</a> </li> </ul> </div> </div> </div> <div class="px-5 mt-6 md:mt-12 flex flex-col md:flex-row border-t border-t-outline-variant justify-between pt-6 text-on-surface-variant md-typescale-body-medium"> <div class="my-3">© 2026 Angular UI</div> <div class="my-3"> <div class="flex flex-col md:flex-row gap-4"> <a class="text-decoration-none hover-text-decoration-underline mb-2" href="/tnc">Terms & Conditions</a> <a class="text-decoration-none hover-text-decoration-underline mb-2" href="/privacy">Privacy Policy</a> <a class="text-decoration-none hover-text-decoration-underline mb-2" href="/refund">Refund Policy</a> </div> </div> </div> </div> </footer>
157<script type="module">document.addEventListener("astro:before-swap",e=>{setAppTheme(e.newDocument)});</script>
157 </body> </html>
157<script type="module" src="/_astro/index.astro_astro_type_script_index_0_lang.CyI9k5hs.js"></script>
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.