PageSourceSearch

https://angular-ui.com/

html angular-ui.com collected 2026-09-25 22:27:31 UTC 34,826 bytes, 157 lines download raw bytes

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="{&quot;name&quot;:&quot;DarkThemeSwitch&quot;,&quot;value&quot;: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="{&quot;variant&quot;:[0,&quot;full&quot;]}" ssr client="load" opts="{&quot;name&quot;:&quot;DarkThemeSwitch&quot;,&quot;value&quot;: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&#39;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="{&quot;name&quot;:&quot;ArcadeEmbed&quot;,&quot;value&quot;:&quot;react&quot;}"></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">&#64;ngxpert/hot-toast</a>,
103<a href="https://ngxpert.github.io/cmdk" target="_blank">&#64;ngxpert/cmdk</a>,
104<a href="https://ngneat.github.io/falso" target="_blank">&#64;ngneat/falso</a>,
105<a href="https://ngxpert.github.io/avvvatars" target="_blank">&#64;ngxpert/avvvatars</a>,
106<a href="https://ngxpert.github.io/coolshapes" target="_blank">&#64;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">&copy; 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.