CINXE.COM

<!DOCTYPE html><html lang="en" class="docs-dark-mode docs-light-mode" data-beasties-container><head> <script> // This logic must execute early, so that we set the necessary // CSS classes to the document node and avoid unstyled content // from appearing on the page. const THEME_PREFERENCE_LOCAL_STORAGE_KEY = 'themePreference'; const DARK_MODE_CLASS_NAME = 'docs-dark-mode'; const LIGHT_MODE_CLASS_NAME = 'docs-light-mode'; const PREFERS_COLOR_SCHEME_DARK = '(prefers-color-scheme: dark)'; const theme = localStorage.getItem(THEME_PREFERENCE_LOCAL_STORAGE_KEY) ?? 'auto'; const prefersDark = window.matchMedia && window.matchMedia(PREFERS_COLOR_SCHEME_DARK).matches; const documentClassList = this.document.documentElement.classList; // clearing classes before setting them. this.document.documentElement.className = ''; if (theme === 'dark' || (theme === 'auto' && prefersDark)) { documentClassList.add(DARK_MODE_CLASS_NAME); } else { documentClassList.add(LIGHT_MODE_CLASS_NAME); } if(location.search.includes('uwu')) { documentClassList.add('uwu'); } </script> <style> .uwu-logo { display: none; } html.uwu .angular-logo { display: none; } html.uwu .uwu-logo { display: block !important; } </style> <meta charset="utf-8"> <title>Press Kit • Angular</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="title" content="Angular"> <meta name="description" content="The web development framework for building modern apps.">  <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="48x48" href="/assets/icons/favicon-48x48.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png"> <link rel="manifest" href="/assets/icons/site.webmanifest"> <link rel="mask-icon" href="/assets/icons/safari-pinned-tab.svg" color="#e90464"> <link rel="shortcut icon" href="/assets/icons/favicon.ico"> <link rel="canonical" href="https://angular.dev/press-kit"> <meta name="apple-mobile-web-app-title" content="Angular"> <meta name="application-name" content="Angular"> <meta name="msapplication-TileColor" content="#e90464"> <meta name="msapplication-config" content="/assets/icons/browserconfig.xml"> <meta name="theme-color" content="#ffffff">  <meta property="og:type" content="website"> <meta property="og:url" content="https://angular.dev/"> <meta property="og:title" content="Angular"> <meta property="og:description" content="The web development framework for building modern apps."> <meta property="og:image" content="https://angular.dev/assets/images/ng-image.jpg">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://angular.dev/"> <meta property="twitter:title" content="Angular"> <meta property="twitter:description" content="The web development framework for building modern apps."> <meta property="twitter:image" content="https://angular.dev/assets/images/ng-image.jpg">  <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600&family=Inter:wght@400;500;600&family=DM+Mono:ital@0;1&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet"> <link rel="preload" href="/assets/textures/gradient.jpg" as="image"> <style>@charset "UTF-8";.docs-light-mode{background-color:#fff;--bright-blue: oklch(51.01% .274 263.83);--indigo-blue: oklch(51.64% .229 281.65);--electric-violet: oklch(53.18% .28 296.97);--french-violet: oklch(47.66% .246 305.88);--vivid-pink: oklch(69.02% .277 332.77);--hot-pink: oklch(59.91% .239 8.14);--hot-red: oklch(61.42% .238 15.34);--orange-red: oklch(63.32% .24 31.68);--super-green: oklch(79.12% .257 155.13);--subtle-purple: color-mix(in srgb, var(--bright-blue) 5%, white 10%);--light-blue: color-mix(in srgb, var(--bright-blue), white 50%);--light-violet: color-mix(in srgb, var(--electric-violet), white 65%);--light-orange: color-mix(in srgb, var(--orange-red), white 50%);--light-pink: color-mix(in srgb, var(--vivid-pink) 10%, white 80%);--symbolic-purple: oklch(42.86% .29 266.4);--symbolic-gray: oklch(66.98% 0 0);--symbolic-blue: oklch(42.45% .223 263.38);--symbolic-pink: oklch(63.67% .254 13.47);--symbolic-orange: oklch(64.73% .23769984683784018 33.18328352127882);--symbolic-yellow: oklch(78.09% .163 65.69);--symbolic-green: oklch(67.83% .229 142.73);--symbolic-cyan: oklch(67.05% .1205924489987394 181.34025902203868);--symbolic-magenta: oklch(51.74% .25453048882711515 315.26261625862725);--symbolic-teal: oklch(57.59% .083 230.58);--symbolic-brown: oklch(49.06% .128 46.41);--symbolic-lime: oklch(70.33% .2078857836035299 135.66843631046476);--gray-1000: oklch(16.93% .004 285.95);--gray-900: oklch(19.37% .006 300.98);--gray-800: oklch(25.16% .008 308.11);--gray-700: oklch(36.98% .014 302.71);--gray-600: oklch(44% .019 306.08);--gray-500: oklch(54.84% .023 304.99);--gray-400: oklch(70.9% .015 304.04);--gray-300: oklch(84.01% .009 308.34);--gray-200: oklch(91.75% .004 301.42);--gray-100: oklch(97.12% .002 325.59);--gray-50: oklch(98.81% 0 0);--red-to-pink-horizontal-gradient: linear-gradient( 90deg, var(--hot-pink) 11.42%, var(--hot-red) 34.83%, var(--vivid-pink) 60.69% );--red-to-pink-to-purple-horizontal-gradient: linear-gradient( 90deg, var(--orange-red) 0%, var(--vivid-pink) 50%, var(--electric-violet) 100% );--pink-to-highlight-to-purple-to-blue-horizontal-gradient: linear-gradient( 140deg, var(--vivid-pink) 0%, var(--vivid-pink) 15%, color-mix(in srgb, var(--vivid-pink), var(--electric-violet) 50%) 25%, color-mix(in srgb, var(--vivid-pink), var(--electric-violet) 10%) 35%, color-mix(in srgb, var(--vivid-pink), var(--orange-red) 50%) 42%, color-mix(in srgb, var(--vivid-pink), var(--orange-red) 50%) 44%, color-mix(in srgb, var(--vivid-pink), var(--page-background) 70%) 47%, var(--electric-violet) 48%, var(--bright-blue) 60% );--purple-to-blue-horizontal-gradient: linear-gradient( 90deg, var(--electric-violet) 0%, var(--bright-blue) 100% );--purple-to-blue-vertical-gradient: linear-gradient( 0deg, var(--electric-violet) 0%, var(--bright-blue) 100% );--red-to-orange-horizontal-gradient: linear-gradient( 90deg, var(--hot-pink) 0%, var(--orange-red) 100% );--red-to-orange-vertical-gradient: linear-gradient( 0deg, var(--hot-pink) 0%, var(--orange-red) 100% );--pink-to-purple-horizontal-gradient: linear-gradient( 90deg, var(--vivid-pink) 0%, var(--electric-violet) 100% );--pink-to-purple-vertical-gradient: linear-gradient( 0deg, var(--electric-violet) 0%, var(--vivid-pink) 100% );--purple-to-light-purple-vertical-gradient: linear-gradient( 0deg, var(--french-violet) 0%, var(--light-violet) 100% );--green-to-cyan-vertical-gradient: linear-gradient( 0deg, var(--symbolic-cyan) 0%, var(--super-green) 100% );--blue-to-teal-vertical-gradient: linear-gradient( 0deg, var(--bright-blue) 0%, var(--light-blue) 100% );--blue-to-cyan-vertical-gradient: linear-gradient( 0deg, var(--bright-blue) 0%, var(--symbolic-cyan) 100% );--black-to-gray-vertical-gradient: linear-gradient( 0deg, var(--primary-contrast) 0%, var(--gray-400) 100% );--red-to-pink-vertical-gradient: linear-gradient(0deg, var(--hot-red) 0%, var(--vivid-pink) 100%);--orange-to-pink-vertical-gradient: linear-gradient( 0deg, var(--vivid-pink) 0%, var(--light-orange) 100% );--page-bg-radial-gradient: radial-gradient(circle, white 0%, white 100%);--soft-pink-radial-gradient: radial-gradient( circle at center bottom, var(--light-pink) 0%, white 80% );--full-contrast: black;--primary-contrast: var(--gray-900);--secondary-contrast: var(--gray-800);--tertiary-contrast: var(--gray-700);--quaternary-contrast: var(--gray-500);--quinary-contrast: var(--gray-300);--senary-contrast: var(--gray-200);--septenary-contrast: var(--gray-100);--octonary-contrast: var(--gray-50);--page-background: white;--gray-unfilled: var(--gray-400);--webgl-page-background: #ffffff;--webgl-gray-unfilled: #a39fa9;--mdc-snackbar-container-shape: .25rem;--mdc-snackbar-container-color: var(--page-background);--mdc-snackbar-supporting-text-color: var(--primary-contrast)}.docs-dark-mode{background-color:#0f0f11;--bright-blue: oklch(51.01% .274 263.83);--indigo-blue: oklch(51.64% .229 281.65);--electric-violet: oklch(53.18% .28 296.97);--french-violet: oklch(47.66% .246 305.88);--vivid-pink: oklch(69.02% .277 332.77);--hot-pink: oklch(59.91% .239 8.14);--hot-red: oklch(61.42% .238 15.34);--orange-red: oklch(63.32% .24 31.68);--super-green: oklch(79.12% .257 155.13);--subtle-purple: color-mix(in srgb, var(--bright-blue) 5%, white 10%);--light-blue: color-mix(in srgb, var(--bright-blue), white 50%);--light-violet: color-mix(in srgb, var(--electric-violet), white 65%);--light-orange: color-mix(in srgb, var(--orange-red), white 50%);--light-pink: color-mix(in srgb, var(--vivid-pink) 10%, white 80%);--symbolic-purple: oklch(42.86% .29 266.4);--symbolic-gray: oklch(66.98% 0 0);--symbolic-blue: oklch(42.45% .223 263.38);--symbolic-pink: oklch(63.67% .254 13.47);--symbolic-orange: oklch(64.73% .23769984683784018 33.18328352127882);--symbolic-yellow: oklch(78.09% .163 65.69);--symbolic-green: oklch(67.83% .229 142.73);--symbolic-cyan: oklch(67.05% .1205924489987394 181.34025902203868);--symbolic-magenta: oklch(51.74% .25453048882711515 315.26261625862725);--symbolic-teal: oklch(57.59% .083 230.58);--symbolic-brown: oklch(49.06% .128 46.41);--symbolic-lime: oklch(70.33% .2078857836035299 135.66843631046476);--gray-1000: oklch(16.93% .004 285.95);--gray-900: oklch(19.37% .006 300.98);--gray-800: oklch(25.16% .008 308.11);--gray-700: oklch(36.98% .014 302.71);--gray-600: oklch(44% .019 306.08);--gray-500: oklch(54.84% .023 304.99);--gray-400: oklch(70.9% .015 304.04);--gray-300: oklch(84.01% .009 308.34);--gray-200: oklch(91.75% .004 301.42);--gray-100: oklch(97.12% .002 325.59);--gray-50: oklch(98.81% 0 0);--red-to-pink-horizontal-gradient: linear-gradient( 90deg, var(--hot-pink) 11.42%, var(--hot-red) 34.83%, var(--vivid-pink) 60.69% );--red-to-pink-to-purple-horizontal-gradient: linear-gradient( 90deg, var(--orange-red) 0%, var(--vivid-pink) 50%, var(--electric-violet) 100% );--pink-to-highlight-to-purple-to-blue-horizontal-gradient: linear-gradient( 140deg, var(--vivid-pink) 0%, var(--vivid-pink) 15%, color-mix(in srgb, var(--vivid-pink), var(--electric-violet) 50%) 25%, color-mix(in srgb, var(--vivid-pink), var(--electric-violet) 10%) 35%, color-mix(in srgb, var(--vivid-pink), var(--orange-red) 50%) 42%, color-mix(in srgb, var(--vivid-pink), var(--orange-red) 50%) 44%, color-mix(in srgb, var(--vivid-pink), var(--page-background) 70%) 47%, var(--electric-violet) 48%, var(--bright-blue) 60% );--purple-to-blue-horizontal-gradient: linear-gradient( 90deg, var(--electric-violet) 0%, var(--bright-blue) 100% );--purple-to-blue-vertical-gradient: linear-gradient( 0deg, var(--electric-violet) 0%, var(--bright-blue) 100% );--red-to-orange-horizontal-gradient: linear-gradient( 90deg, var(--hot-pink) 0%, var(--orange-red) 100% );--red-to-orange-vertical-gradient: linear-gradient( 0deg, var(--hot-pink) 0%, var(--orange-red) 100% );--pink-to-purple-horizontal-gradient: linear-gradient( 90deg, var(--vivid-pink) 0%, var(--electric-violet) 100% );--pink-to-purple-vertical-gradient: linear-gradient( 0deg, var(--electric-violet) 0%, var(--vivid-pink) 100% );--purple-to-light-purple-vertical-gradient: linear-gradient( 0deg, var(--french-violet) 0%, var(--light-violet) 100% );--green-to-cyan-vertical-gradient: linear-gradient( 0deg, var(--symbolic-cyan) 0%, var(--super-green) 100% );--blue-to-teal-vertical-gradient: linear-gradient( 0deg, var(--bright-blue) 0%, var(--light-blue) 100% );--blue-to-cyan-vertical-gradient: linear-gradient( 0deg, var(--bright-blue) 0%, var(--symbolic-cyan) 100% );--black-to-gray-vertical-gradient: linear-gradient( 0deg, var(--primary-contrast) 0%, var(--gray-400) 100% );--red-to-pink-vertical-gradient: linear-gradient(0deg, var(--hot-red) 0%, var(--vivid-pink) 100%);--orange-to-pink-vertical-gradient: linear-gradient( 0deg, var(--vivid-pink) 0%, var(--light-orange) 100% );--page-bg-radial-gradient: radial-gradient(circle, white 0%, white 100%);--soft-pink-radial-gradient: radial-gradient( circle at center bottom, var(--light-pink) 0%, white 80% );--full-contrast: black;--primary-contrast: var(--gray-900);--secondary-contrast: var(--gray-800);--tertiary-contrast: var(--gray-700);--quaternary-contrast: var(--gray-500);--quinary-contrast: var(--gray-300);--senary-contrast: var(--gray-200);--septenary-contrast: var(--gray-100);--octonary-contrast: var(--gray-50);--page-background: white;--gray-unfilled: var(--gray-400);--webgl-page-background: #ffffff;--webgl-gray-unfilled: #a39fa9;--full-contrast: white;--primary-contrast: var(--gray-50);--secondary-contrast: var(--gray-300);--tertiary-contrast: var(--gray-300);--quaternary-contrast: var(--gray-400);--quinary-contrast: var(--gray-500);--senary-contrast: var(--gray-700);--septenary-contrast: var(--gray-800);--octonary-contrast: var(--gray-900);--page-background: var(--gray-1000);--bright-blue: color-mix(in srgb, oklch(51.01% .274 263.83), var(--full-contrast) 60%);--indigo-blue: color-mix(in srgb, oklch(51.64% .229 281.65), var(--full-contrast) 70%);--electric-violet: color-mix(in srgb, oklch(53.18% .28 296.97), var(--full-contrast) 70%);--french-violet: color-mix(in srgb, oklch(47.66% .246 305.88), var(--full-contrast) 70%);--vivid-pink: color-mix(in srgb, oklch(69.02% .277 332.77), var(--full-contrast) 70%);--hot-pink: color-mix(in srgb, oklch(59.91% .239 8.14), var(--full-contrast) 70%);--hot-red: color-mix(in srgb, oklch(61.42% .238 15.34), var(--full-contrast) 70%);--orange-red: color-mix(in srgb, oklch(63.32% .24 31.68), var(--full-contrast) 60%);--super-green: color-mix(in srgb, oklch(79.12% .257 155.13), var(--full-contrast) 70%);--light-pink: color-mix(in srgb, var(--vivid-pink) 5%, var(--page-background) 75%);--symbolic-purple: color-mix(in srgb, oklch(42.86% .29 266.4), var(--full-contrast) 65%);--symbolic-gray: color-mix(in srgb, oklch(66.98% 0 0), var(--full-contrast) 65%);--symbolic-blue: color-mix(in srgb, oklch(42.45% .223 263.38), var(--full-contrast) 65%);--symbolic-pink: color-mix(in srgb, oklch(63.67% .254 13.47), var(--full-contrast) 65%);--symbolic-orange: color-mix( in srgb, oklch(64.73% .23769984683784018 33.18328352127882), var(--full-contrast) 65% );--symbolic-yellow: color-mix(in srgb, oklch(78.09% .163 65.69), var(--full-contrast) 65%);--symbolic-green: color-mix(in srgb, oklch(67.83% .229 142.73), var(--full-contrast) 65%);--symbolic-cyan: color-mix( in srgb, oklch(67.05% .1205924489987394 181.34025902203868), var(--full-contrast) 65% );--symbolic-magenta: color-mix( in srgb, oklch(51.74% .25453048882711515 315.26261625862725), var(--full-contrast) 65% );--symbolic-teal: color-mix(in srgb, oklch(57.59% .083 230.58), var(--full-contrast) 65%);--symbolic-brown: color-mix(in srgb, oklch(49.06% .128 46.41), var(--full-contrast) 65%);--symbolic-lime: color-mix( in srgb, oklch(70.33% .2078857836035299 135.66843631046476), var(--full-contrast) 65% );--page-bg-radial-gradient: radial-gradient(circle, black 0%, black 100%);--soft-pink-radial-gradient: radial-gradient( circle at center bottom, var(--light-pink) 0%, color-mix(in srgb, black, transparent 15%) 80% );--gray-unfilled: var(--gray-700);--webgl-page-background: #0f0f11;--webgl-gray-unfilled: #413e46;--mdc-snackbar-container-shape: .25rem;--mdc-snackbar-container-color: var(--page-background);--mdc-snackbar-supporting-text-color: var(--primary-contrast)}:root{--z-index-mini-menu: 200;--z-index-top-level-banner: 150;--z-index-nav: 100;--z-index-cookie-consent: 60;--z-index-content: 50;--z-index-icon: 10}:root{--fallback-font-stack: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--page-width: 80ch;--layout-padding: 3.12rem;--primary-nav-width: 110px;--secondary-nav-width: 16.25rem;--fixed-content-height: calc(100vh - var(--layout-padding) * 2)}@media (max-width: 900px){:root{--layout-padding: 2rem}}@media (max-width: 700px){:root{--layout-padding: 1rem}}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--inter-font);font-size:16px;background-color:var(--page-background);color:var(--primary-contrast);transition:color .3s ease,background-color .3s ease;scroll-behavior:smooth}@media (prefers-reduced-motion){html{scroll-behavior:auto}}body{margin:0;overflow-y:auto;overflow-x:hidden}html,body{height:100vh;min-height:100vh}@supports (height: 100svh){html,body{height:100svh}}button{cursor:pointer}img{width:100%;border-radius:.25rem;overflow:hidden;margin:1rem 0}img[src$="#small"]{max-width:250px}img[src$="#medium"]{max-width:450px}:root{--code-font: "DM Mono", monospace;--inter-font: "Inter", var(--fallback-font-stack);--inter-tight-font: "Inter Tight", var(--fallback-font-stack);--icons: "Material Symbols Outlined";--selection-background: var(--vivid-pink);--selection-color: var(--vivid-pink)}:nth-child(6n+1){--selection-color: var(--vivid-pink)}:nth-child(6n+2){--selection-background: var(--hot-pink);--selection-color: var(--hot-pink)}:nth-child(6n+3){--selection-background: var(--electric-violet);--selection-color: var(--electric-violet)}:nth-child(6n+4){--selection-background: var(--french-violet);--selection-color: var(--french-violet)}:nth-child(6n+5){--selection-background: var(--indigo-blue);--selection-color: var(--indigo-blue)}:nth-child(6n+6){--selection-background: var(--bright-blue);--selection-color: var(--bright-blue)}h1,h2,h3{font-family:var(--inter-tight-font);font-weight:500;text-wrap:balance}p{font-size:.875rem;line-height:1.4rem;font-weight:400;letter-spacing:-.00875rem}p~ol{margin-block-start:0}ul,ol{font-size:.875rem;line-height:1.4rem;font-weight:400;letter-spacing:-.01rem}a{text-decoration:none;font-weight:500;transition:color .3s ease}p>a,div>a:not(.docs-card),li:not(.docs-faceted-list *) a{color:var(--bright-blue)}p>a:hover,div>a:not(.docs-card):hover,li:not(.docs-faceted-list *) a:hover{color:var(--vivid-pink)}p>a:active,div>a:not(.docs-card):active,li:not(.docs-faceted-list *) a:active{color:var(--hot-red)}p>a{margin-block:0;text-decoration:underline}.docs-scroll-hide::-webkit-scrollbar-track{background:#0000}.docs-scroll-hide::-webkit-scrollbar{width:0}.docs-scroll-track-transparent-large::-webkit-scrollbar-track{background:#0000;cursor:pointer}.docs-scroll-track-transparent-large::-webkit-scrollbar{width:8px;height:8px}.docs-scroll-track-transparent-large::-webkit-scrollbar-thumb{background-color:var(--quinary-contrast);border-radius:10px;transition:background-color .3s ease}.docs-scroll-track-transparent-large::-webkit-scrollbar-thumb:hover{background-color:var(--quaternary-contrast)}button{font-family:var(--inter-font);background:transparent;-webkit-appearance:none;border:0;font-weight:600}button::-moz-focus-inner{border:0;padding:0}button:disabled{cursor:not-allowed}@property --angle{syntax: "<angle>"; initial-value: 90deg; inherits: false;}kbd:not(:has(kbd)){position:relative;color:var(---tertiary-contrast);border:1px solid var(--quinary-contrast);box-shadow:0 1px #0003,0 0 0 2px var(--octonary-contrast) inset;text-shadow:0 1px 0 var(--octonary-contrast);border-radius:3px;display:inline-block;font-family:sans-serif;line-height:1.5;margin:0 .1em;padding:1px .4em;min-width:14px;min-height:20px;vertical-align:middle;text-align:center}@media (prefers-reduced-motion: no-preference){*:hover>kbd:not(:has(kbd)){box-shadow:0 .5px #0003,0 0 0 2px var(--octonary-contrast) inset;top:1px}}.docs-faceted-list{--faceted-list-border-width: 2px;list-style:none;padding:0;margin:0;border-inline-start:calc(var(--faceted-list-border-width) - 1px) solid var(--senary-contrast)}.docs-faceted-list-item a{position:relative;background-color:var(--quaternary-contrast);background-clip:text;-webkit-background-clip:text;color:transparent;transition:background-color .3s ease;line-height:1.1rem}.docs-faceted-list-item a:before{content:"";position:absolute;top:0;left:calc(var(--faceted-list-border-width) * -1);width:var(--faceted-list-border-width);height:100%;background:var(--primary-contrast);opacity:0;transform:scaleY(.7);transition:transform .3s ease,opacity .3s ease}.docs-faceted-list-item a:hover{background-color:var(--primary-contrast)}.docs-faceted-list-item a:hover:before{opacity:.3}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}html{--mdc-secondary-navigation-tab-container-height: 48px}html{--mdc-tab-indicator-active-indicator-height: 2px;--mdc-tab-indicator-active-indicator-shape: 0}html{--mat-tab-header-divider-color: transparent;--mat-tab-header-divider-height: 0}html{--mat-legacy-button-toggle-height: 36px;--mat-legacy-button-toggle-shape: 2px;--mat-legacy-button-toggle-focus-state-layer-opacity: 1}html{--mat-standard-button-toggle-shape: 4px;--mat-standard-button-toggle-hover-state-layer-opacity: .04;--mat-standard-button-toggle-focus-state-layer-opacity: .12}html{--mat-legacy-button-toggle-text-color: rgba(0, 0, 0, .38);--mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, .12);--mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, .54);--mat-legacy-button-toggle-selected-state-background-color: #e0e0e0;--mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-legacy-button-toggle-disabled-state-background-color: #eeeeee;--mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd}html{--mat-standard-button-toggle-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-background-color: white;--mat-standard-button-toggle-state-layer-color: black;--mat-standard-button-toggle-selected-state-background-color: #e0e0e0;--mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-standard-button-toggle-disabled-state-background-color: white;--mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;--mat-standard-button-toggle-divider-color: rgb(224.4, 224.4, 224.4)}html{--mat-standard-button-toggle-height: 48px}html{--mat-legacy-button-toggle-label-text-font: Roboto, sans-serif;--mat-legacy-button-toggle-label-text-line-height: 24px;--mat-legacy-button-toggle-label-text-size: 16px;--mat-legacy-button-toggle-label-text-tracking: .03125em;--mat-legacy-button-toggle-label-text-weight: 400}html{--mat-standard-button-toggle-label-text-font: Roboto, sans-serif;--mat-standard-button-toggle-label-text-line-height: 24px;--mat-standard-button-toggle-label-text-size: 16px;--mat-standard-button-toggle-label-text-tracking: .03125em;--mat-standard-button-toggle-label-text-weight: 400}html{--mdc-plain-tooltip-container-shape: 4px;--mdc-plain-tooltip-supporting-text-line-height: 16px}html{--mdc-plain-tooltip-container-color: #616161;--mdc-plain-tooltip-supporting-text-color: #fff}html{--mdc-plain-tooltip-supporting-text-font: Roboto, sans-serif;--mdc-plain-tooltip-supporting-text-size: 12px;--mdc-plain-tooltip-supporting-text-weight: 400;--mdc-plain-tooltip-supporting-text-tracking: .0333333333em}.docs-card-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1.25rem;margin-block:1rem}@container docs-content (max-width: 450px){.docs-card-grid{grid-template-columns:1fr}}.docs-card{display:flex;flex-direction:column;justify-content:space-between;color:var(--primary-contrast);padding:1.5rem;border:1px solid var(--senary-contrast);border-radius:.25rem;overflow:hidden;transition:border-color .3s ease,background-color .3s ease}.docs-card p:first-of-type{margin-block-start:1.5rem}.docs-card p:last-of-type{margin-block-end:1.5rem}.docs-card span{font-size:.875rem;font-weight:500;margin-block:0;position:relative}.docs-card *+*:not(a):not(code):not(span){margin-block:1.5rem}a.docs-card{display:flex;flex-direction:column;justify-content:space-between}a.docs-card span{background:var(--pink-to-highlight-to-purple-to-blue-horizontal-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:.875rem;margin-block:0;transition:background-position 1.8s ease-out;background-size:200% 100%;background-position:100% 0%;position:relative}a.docs-card:hover{background:var(--subtle-purple)}a.docs-card:hover span{background-position:0% 0%}.docs-viewer .docs-card h3{margin-block-start:0;font-size:1rem}.docs-steps{--gutter: 4rem;padding-inline-start:var(--gutter);counter-reset:code-steps-list;list-style-type:none}.docs-steps li{position:relative}.docs-steps li h3{font-size:1.75rem;margin-block-start:0;margin-block-end:.5rem;line-height:2.5rem}.docs-step-number{counter-increment:code-steps-list;display:block;pointer-events:none;position:absolute;left:calc(var(--gutter) * -1);top:2.7rem;bottom:0}.docs-step-number:before{display:flex;align-items:center;justify-content:center;width:2rem;content:counter(code-steps-list);border-radius:50%;aspect-ratio:1/1;border:1px solid transparent;background-image:linear-gradient(var(--page-background),var(--page-background)),var(--pink-to-purple-horizontal-gradient);background-origin:border-box;background-clip:content-box,border-box;position:sticky;top:2rem}@media (max-width: 900px){.docs-step-number:before{top:calc(1rem + 75px)}}@media (max-width: 700px){.docs-step-number:before{top:calc(1rem + 55px)}} </style><link rel="stylesheet" href="styles-QCYPH57K.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-QCYPH57K.css"></noscript><style ng-app-id="ng">[_nghost-ng-c3997628623]{max-width:2560px;margin-inline:auto;display:flex;flex-direction:row;align-items:flex-start;min-height:100vh}@media (min-width: 700px) and (max-width: 900px){[_nghost-ng-c3997628623] docs-top-level-banner[_ngcontent-ng-c3997628623]{top:4.6875rem}}@media (max-width: 700px){[_nghost-ng-c3997628623] docs-top-level-banner[_ngcontent-ng-c3997628623]{top:3.75rem;transform:translateY(0);transition:transform .3s ease-out .6s}}@media (max-width: 900px){[_nghost-ng-c3997628623] docs-top-level-banner[_ngcontent-ng-c3997628623]{z-index:calc(var(--z-index-nav) - 1)}}@media (min-width: 700px) and (max-width: 900px){[_nghost-ng-c3997628623]:has(adev-secondary-navigation) docs-top-level-banner[_ngcontent-ng-c3997628623]{top:8.125rem}}@media (max-width: 700px){[_nghost-ng-c3997628623]:has(.adev-nav-primary--open) docs-top-level-banner[_ngcontent-ng-c3997628623]{transform:translateY(-3.75rem);transition:transform .3s ease-in}}@media (max-width: 900px){[_nghost-ng-c3997628623]{flex-direction:column}}[_nghost-ng-c3997628623]:has(.docs-nav-secondary--open) .docs-app-main-content[_ngcontent-ng-c3997628623]:after, [_nghost-ng-c3997628623]:has(.adev-nav-primary--open) .docs-app-main-content[_ngcontent-ng-c3997628623]:after{visibility:visible;opacity:1}[_nghost-ng-c3997628623]:has(.adev-home) .adev-nav[_ngcontent-ng-c3997628623]{width:0;height:0}@media (min-width: 900px){[_nghost-ng-c3997628623]:has(.adev-home) footer[_ngcontent-ng-c3997628623]{margin-left:var(--primary-nav-width)}}.adev-skip[_ngcontent-ng-c3997628623]{position:absolute;top:.5rem;left:.5rem;z-index:1000;background:var(--primary-contrast);color:var(--page-background);border:1px solid var(--vivid-pink);border-radius:.25rem;padding:.5rem;font-size:.875rem;transform:translateY(-150%);transition:transform .3s ease-out}.adev-skip[_ngcontent-ng-c3997628623]:focus{transform:translateY(0)}.docs-app-main-content[_ngcontent-ng-c3997628623]{display:flex;flex-direction:column;min-height:100vh;width:100%}.docs-app-main-content[_ngcontent-ng-c3997628623] [_ngcontent-ng-c3997628623]:after{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:color-mix(in srgb,var(--gray-1000) 5%,transparent);z-index:50;visibility:hidden;opacity:0;transition:opacity .3s ease}@media (min-width: 700px) and (max-width: 900px){.docs-app-main-content[_ngcontent-ng-c3997628623]{width:100%}}footer[_ngcontent-ng-c3997628623]{margin-top:auto}</style><style ng-app-id="ng">[_nghost-ng-c249881476]{display:flex;position:sticky;top:0;z-index:var(--z-index-nav)}[_nghost-ng-c249881476] .adev-mobile-nav-button[_ngcontent-ng-c249881476]{display:flex;align-items:center;gap:.75rem}@media (min-width: 700px) and (max-width: 900px){[_nghost-ng-c249881476]:has(.adev-nav-primary--open){z-index:50}}.adev-mobile-nav-bar[_ngcontent-ng-c249881476]{display:none;gap:.75rem;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background-color:color-mix(in srgb,var(--page-background) 70%,transparent);position:relative;width:100vw;padding-block:.75rem;padding-inline:var(--layout-padding);border-block-end:1px solid var(--septenary-contrast);box-sizing:border-box;transform:translateY(0);transition:transform .3s ease-out .6s}@media (max-width: 700px){.adev-mobile-nav-bar[_ngcontent-ng-c249881476]{display:flex}}.adev-mobile-nav-bar[_ngcontent-ng-c249881476]:has(+.adev-nav-primary--open){transform:translateY(-100%);transition:transform .3s ease-in}.adev-mobile-nav-bar[_ngcontent-ng-c249881476] docs-icon[_ngcontent-ng-c249881476]{color:var(--primary-contrast)}.adev-nav-primary[_ngcontent-ng-c249881476]{display:flex;flex-direction:column;justify-content:space-between;max-height:100vh;overflow:auto;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background-color:color-mix(in srgb,var(--page-background) 70%,transparent);z-index:250;position:relative;transition:background-color .3s ease,border-color .3s ease;height:100dvh;padding-block-start:1rem;padding-block-end:2rem;box-sizing:border-box;border-block-end:1px solid var(--septenary-contrast)}.adev-nav-primary.adev-nav-primary--next[_ngcontent-ng-c249881476], .adev-nav-primary.adev-nav-primary--rc[_ngcontent-ng-c249881476]{background:linear-gradient(140deg,color-mix(in srgb,var(--orange-red),transparent 60%),color-mix(in srgb,var(--vivid-pink),transparent 40%) 15%,color-mix(in srgb,var(--electric-violet),transparent 70%) 25%,color-mix(in srgb,var(--bright-blue),transparent 60%) 90%)}.adev-nav-primary.adev-nav-primary--deprecated[_ngcontent-ng-c249881476]{background-color:color-mix(in srgb,var(--symbolic-gray),transparent 30%)}.adev-nav-primary[_ngcontent-ng-c249881476] > div[_ngcontent-ng-c249881476]{display:flex;flex-direction:column;align-items:center;justify-content:center}@media (max-width: 700px){.adev-nav-primary[_ngcontent-ng-c249881476]{position:absolute;top:0;background-color:var(--page-background);box-shadow:10px 4px 3px #0000;transform:translate(-100%);transition:transform .3s ease-in .38s}.adev-nav-primary.adev-nav-primary--open[_ngcontent-ng-c249881476]{transform:translate(0);transition:transform .3s ease-out .1s}}@media (max-width: 700px) and (prefers-reduced-motion: reduce-motion){.adev-nav-primary[_ngcontent-ng-c249881476]{transition:none}}@media (min-width: 700px) and (max-width: 900px){.adev-nav-primary[_ngcontent-ng-c249881476]{flex-direction:row;width:100vw;padding-inline:calc(var(--layout-padding) - 1.25rem);height:auto;padding-block:0}}@media (min-width: 775px){.adev-nav-primary[_ngcontent-ng-c249881476]{border-inline-end:1px solid var(--septenary-contrast)}}@media (max-width: 700px){.adev-nav-primary[_ngcontent-ng-c249881476]{border-inline-end:1px solid var(--septenary-contrast)}}.adev-nav__top[_ngcontent-ng-c249881476]{padding:0;margin:0;list-style:none;display:flex;flex-direction:column}@media (min-width: 700px) and (max-width: 900px){.adev-nav__top[_ngcontent-ng-c249881476]{flex-direction:row}}.adev-nav__top[_ngcontent-ng-c249881476] .adev-version-button[_ngcontent-ng-c249881476]{border:1px solid var(--senary-contrast);border-radius:.25rem;width:fit-content;margin:0 auto;display:flex;justify-content:space-between;gap:.25rem;color:var(--quaternary-contrast);fill:var(--quaternary-contrast);transition:color .3s ease;font-size:.8rem;font-weight:500}.adev-nav__top[_ngcontent-ng-c249881476] .adev-version-button[_ngcontent-ng-c249881476]:hover{color:var(--primary-contrast)}.adev-nav__top[_ngcontent-ng-c249881476] .adev-version-button[_ngcontent-ng-c249881476] docs-icon[_ngcontent-ng-c249881476]{font-size:inherit;line-height:inherit;transition:transform .2s ease}@media (max-width: 700px){.adev-nav__top[_ngcontent-ng-c249881476] .adev-version-button.adev-mini-menu-open[_ngcontent-ng-c249881476]:after{transform:rotate(-90deg)}}@media (min-width: 900px){.adev-nav__top[_ngcontent-ng-c249881476] .adev-version-button.adev-mini-menu-open[_ngcontent-ng-c249881476]:after{transform:rotate(-90deg)}}@media (min-width: 700px) and (max-width: 900px){.adev-nav__top[_ngcontent-ng-c249881476] > li[_ngcontent-ng-c249881476]:first-of-type{padding-inline-start:1.25rem}.adev-nav__top[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476]{padding-inline:1rem}}.adev-nav__bottom[_ngcontent-ng-c249881476]{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}@media (min-width: 700px) and (max-width: 900px){.adev-nav__bottom[_ngcontent-ng-c249881476]{flex-direction:row;margin-inline-end:1.25rem}}.adev-nav__bottom[_ngcontent-ng-c249881476] .adev-nav-item--active[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476] docs-icon[_ngcontent-ng-c249881476]{color:var(--primary-contrast)}.adev-nav__bottom[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476]{border:none;background-color:transparent;cursor:pointer;width:100%;padding-inline:1rem}@media (min-width: 700px) and (max-width: 900px){.adev-nav__bottom[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476]{padding-inline:.5rem}}.adev-nav__bottom[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476] docs-icon[_ngcontent-ng-c249881476]{color:var(--quaternary-contrast);font-size:1.5rem}@media (max-width: 900px){.adev-nav__bottom[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476] docs-icon[_ngcontent-ng-c249881476]{font-size:1.25rem}}.adev-nav__bottom[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476]:hover docs-icon[_ngcontent-ng-c249881476]{color:var(--primary-contrast)}.adev-nav-item--logo[_ngcontent-ng-c249881476] a[_ngcontent-ng-c249881476]{height:34px}.adev-close-nav[_ngcontent-ng-c249881476]{display:none;color:var(--primary-contrast)}@media (max-width: 700px){.adev-close-nav[_ngcontent-ng-c249881476]{display:block}}.adev-search-desktop[_ngcontent-ng-c249881476]{height:1.375rem;text-transform:capitalize}@media (max-width: 900px){.adev-search-desktop[_ngcontent-ng-c249881476]{display:none}}.adev-sub-navigation-hidden[_ngcontent-ng-c249881476]{display:none}.adev-secondary-tablet-bar[_ngcontent-ng-c249881476]{font-size:.875rem;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background-color:color-mix(in srgb,var(--page-background) 70%,transparent);border-block-end:1px solid var(--septenary-contrast);padding-block:1rem;padding-inline:var(--layout-padding);transition:background-color .3s ease,border-color .3s ease}.adev-secondary-tablet-bar[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476]{display:flex;gap:.5rem;align-items:center;color:var(--primary-contrast);padding:0;font-weight:500}@media (min-width: 900px){.adev-secondary-tablet-bar[_ngcontent-ng-c249881476]{display:none}}@media (max-width: 700px){.adev-secondary-tablet-bar[_ngcontent-ng-c249881476]{display:none}}</style><style ng-app-id="ng">.adev-mini-menu[_ngcontent-ng-c249881476]{padding:0;color:var(--primary-contrast);background-color:var(--page-background);border:1px solid var(--senary-contrast);border-radius:.25rem;z-index:var(--z-index-mini-menu);box-shadow:10px 4px 40px #00000013}@media (min-width: 700px) and (max-width: 900px){.adev-mini-menu[_ngcontent-ng-c249881476]{top:75px;left:5px}}.adev-mini-menu[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476]{list-style:none}.adev-mini-menu[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476]{padding:1rem;min-width:75px;min-height:75px;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.adev-mini-menu[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476] docs-icon[_ngcontent-ng-c249881476]{font-size:1.5rem;color:var(--quaternary-contrast);transition:color .3s ease}.adev-mini-menu[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476]:hover{background-color:var(--senary-contrast)}.adev-mini-menu[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476]:hover span[_ngcontent-ng-c249881476], .adev-mini-menu[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476] button[_ngcontent-ng-c249881476]:hover docs-icon[_ngcontent-ng-c249881476]{color:var(--primary-contrast)}.adev-mini-menu[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476] a[_ngcontent-ng-c249881476]{display:flex;justify-content:center;align-items:center;padding:1rem;min-width:50px}.adev-mini-menu[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476] a[_ngcontent-ng-c249881476] svg[_ngcontent-ng-c249881476]{fill:var(--quaternary-contrast);transition:fill .3s ease}.adev-mini-menu[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476] a[_ngcontent-ng-c249881476]:hover{background-color:var(--senary-contrast)}.adev-mini-menu[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476] a[_ngcontent-ng-c249881476]:hover svg[_ngcontent-ng-c249881476]{fill:var(--primary-contrast)}.adev-mini-menu[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476] span[_ngcontent-ng-c249881476]{color:var(--quaternary-contrast);transition:color .3s ease}.adev-mini-menu-open[_ngcontent-ng-c249881476]{display:block}.adev-version-picker[_ngcontent-ng-c249881476]{overflow-y:auto;max-height:90vh;top:30px;left:10px;position:absolute;bottom:auto}.adev-version-picker[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476]{padding-inline:0}.adev-version-picker[_ngcontent-ng-c249881476] li[_ngcontent-ng-c249881476] a[_ngcontent-ng-c249881476]{line-height:1em}@media (min-width: 700px) and (max-width: 900px){.adev-version-picker[_ngcontent-ng-c249881476]{top:30px;left:auto;bottom:auto}}</style><style ng-app-id="ng">.adev-nav-item[_ngcontent-ng-c249881476]{color:var(--quaternary-contrast);position:relative;width:6.875rem}@media (max-width: 700px){.adev-nav-item[_ngcontent-ng-c249881476]{width:5.05rem}}@media (min-width: 700px) and (max-width: 900px){.adev-nav-item[_ngcontent-ng-c249881476]{display:flex;align-items:center;justify-content:center;width:auto}}.adev-nav-item[_ngcontent-ng-c249881476]:before{content:"";position:absolute;bottom:0;top:0;left:0;width:2px;background-color:var(--primary-contrast);opacity:0;transform:scale(.9);transform-origin:center;transition:opacity .3s ease,transform .3s ease}@media (min-width: 700px) and (max-width: 900px){.adev-nav-item[_ngcontent-ng-c249881476]:before{width:auto;top:auto;right:0;height:2px}}@media (min-width: 700px) and (max-width: 900px){.adev-nav-item[_ngcontent-ng-c249881476]:not(.adev-nav-item--logo) a[_ngcontent-ng-c249881476], .adev-nav-item[_ngcontent-ng-c249881476]:not(.adev-nav-item--logo) .adev-nav-button[_ngcontent-ng-c249881476]{gap:.25rem}}.adev-nav-item[_ngcontent-ng-c249881476] .adev-nav-button[_ngcontent-ng-c249881476]{width:100%;font-weight:500}.adev-nav-item[_ngcontent-ng-c249881476] a[_ngcontent-ng-c249881476], .adev-nav-item[_ngcontent-ng-c249881476] .adev-nav-button[_ngcontent-ng-c249881476]{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding-block:1.25rem;text-decoration:none;fill:var(--quaternary-contrast);color:inherit;cursor:pointer;transition:fill .3s ease}@media (min-width: 700px) and (max-width: 900px){.adev-nav-item[_ngcontent-ng-c249881476] a[_ngcontent-ng-c249881476], .adev-nav-item[_ngcontent-ng-c249881476] .adev-nav-button[_ngcontent-ng-c249881476]{flex-direction:row}}.adev-nav-item__label[_ngcontent-ng-c249881476]{margin:0;font-size:.813;color:inherit}.adev-nav-item__label[_ngcontent-ng-c249881476] abbr[_ngcontent-ng-c249881476]{font-size:.688}.adev-nav-item[_ngcontent-ng-c249881476] i[_ngcontent-ng-c249881476]{color:var(--quaternary-contrast);transition:color .3s ease}.adev-nav-item[_ngcontent-ng-c249881476] span[_ngcontent-ng-c249881476], .adev-nav-item[_ngcontent-ng-c249881476] abbr[_ngcontent-ng-c249881476]{transition:color .3s ease}.adev-nav-item[_ngcontent-ng-c249881476]:hover a[_ngcontent-ng-c249881476], .adev-nav-item[_ngcontent-ng-c249881476]:hover .adev-nav-button[_ngcontent-ng-c249881476]{fill:var(--primary-contrast)}.adev-nav-item[_ngcontent-ng-c249881476]:hover span[_ngcontent-ng-c249881476], .adev-nav-item[_ngcontent-ng-c249881476]:hover abbr[_ngcontent-ng-c249881476], .adev-nav-item[_ngcontent-ng-c249881476]:hover i[_ngcontent-ng-c249881476]{color:var(--primary-contrast)}.adev-nav-item--active[_ngcontent-ng-c249881476]:before{opacity:1;transform:scaleY(1)}.adev-nav-item--active[_ngcontent-ng-c249881476]:not(.adev-nav-item--logo) path[_ngcontent-ng-c249881476]{fill:var(--primary-contrast)}.adev-nav-item--active[_ngcontent-ng-c249881476] span[_ngcontent-ng-c249881476], .adev-nav-item--active[_ngcontent-ng-c249881476] abbr[_ngcontent-ng-c249881476], .adev-nav-item--active[_ngcontent-ng-c249881476] i[_ngcontent-ng-c249881476]{color:var(--primary-contrast)}</style><style ng-app-id="ng">.docs-icon_high-contrast[_ngcontent-ng-c1974536348]{color:var(--primary-contrast)}/*# sourceMappingURL=icon.component.css.map */</style><style ng-app-id="ng">[_nghost-ng-c1478734370] .docs-viewer.docs-animate-content[_ngcontent-ng-c1478734370]{animation:_ngcontent-ng-c1478734370_fade-in .5s}@keyframes _ngcontent-ng-c1478734370_fade-in{0%{opacity:0}to{opacity:1}}</style><style ng-app-id="ng">.adev-footer-columns[_ngcontent-ng-c3585373939]{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}@container footer (max-width: 600px){.adev-footer-columns[_ngcontent-ng-c3585373939]{grid-template-columns:repeat(2,1fr)!important}}.adev-footer-container[_ngcontent-ng-c3585373939]{container:footer/inline-size;position:relative;justify-content:center;padding:var(--layout-padding);padding-inline-end:1rem;background-color:var(--page-background);transition:background-color .3s ease}@media only screen and (min-width: 1430px){.adev-footer-container[_ngcontent-ng-c3585373939]{width:calc(100% - 195px - var(--layout-padding) * 3)}}.adev-footer-container[_ngcontent-ng-c3585373939] h2[_ngcontent-ng-c3585373939]{font-size:.875rem;font-weight:600;margin-block-end:1.75rem;letter-spacing:-.00875rem}.adev-footer-container[_ngcontent-ng-c3585373939] ul[_ngcontent-ng-c3585373939]{list-style:none;padding:0;display:flex;flex-direction:column;gap:.95rem}.adev-footer-container[_ngcontent-ng-c3585373939] ul[_ngcontent-ng-c3585373939] li[_ngcontent-ng-c3585373939]{font-size:.8125rem}.adev-footer-container[_ngcontent-ng-c3585373939] a[_ngcontent-ng-c3585373939]{color:var(--quaternary-contrast);font-weight:300;transition:color .3s ease}.adev-footer-container[_ngcontent-ng-c3585373939] a[_ngcontent-ng-c3585373939]:hover{color:var(--primary-contrast)}.adev-footer-container[_ngcontent-ng-c3585373939] p.docs-license[_ngcontent-ng-c3585373939]{transition:color .3s ease;color:var(--quaternary-contrast);font-weight:300;grid-column:span 4;font-size:.75rem;margin-block-start:2rem}</style><style ng-app-id="ng">:host{--translate-y: clamp(5px, 0.25em, 7px)}.docs-viewer{display:flex;flex-direction:column;padding:var(--layout-padding);max-width:var(--page-width);width:100%;box-sizing:border-box}@media only screen and (max-width: 1430px){.docs-viewer{container:docs-content/inline-size}}@media only screen and (min-width: 1430px)and (max-width: 1550px){docs-docs .docs-viewer{width:calc(100% - 195px - var(--layout-padding));max-width:var(--page-width)}}.docs-viewer pre{margin-block:0}.docs-viewer h1 .docs-anchor,.docs-viewer h2 .docs-anchor,.docs-viewer h3 .docs-anchor,.docs-viewer h4 .docs-anchor,.docs-viewer h5 .docs-anchor,.docs-viewer h6 .docs-anchor{margin-block-start:.75rem;display:inline-block;color:inherit}.docs-viewer h1 .docs-anchor::after,.docs-viewer h2 .docs-anchor::after,.docs-viewer h3 .docs-anchor::after,.docs-viewer h4 .docs-anchor::after,.docs-viewer h5 .docs-anchor::after,.docs-viewer h6 .docs-anchor::after{content:"";font-family:"Material Symbols Outlined";opacity:0;margin-left:8px;vertical-align:middle;color:var(--quaternary-contrast);font-size:clamp(18px,1.25em,30px);transition:opacity .3s ease}.docs-viewer h1 .docs-anchor:hover::after,.docs-viewer h2 .docs-anchor:hover::after,.docs-viewer h3 .docs-anchor:hover::after,.docs-viewer h4 .docs-anchor:hover::after,.docs-viewer h5 .docs-anchor:hover::after,.docs-viewer h6 .docs-anchor:hover::after{opacity:1}.docs-viewer h1{font-size:2.5rem;margin-block-end:0}.docs-viewer h2{font-size:2rem;margin-block-end:.5rem}.docs-viewer h3{font-size:1.5rem;margin-block-end:.5rem}.docs-viewer h4{font-size:1.25rem;margin-block-end:.5rem}.docs-viewer h5{font-size:1rem;margin-block-end:0}.docs-viewer h6{font-size:.875rem;margin-block-end:0}.docs-viewer>:last-child{margin-block-end:0}.docs-viewer a:not(.docs-github-links):not(.docs-card):not(.docs-pill):not(.docs-example-github-link)[href^="http:"]::after,.docs-viewer a:not(.docs-github-links):not(.docs-card):not(.docs-pill):not(.docs-example-github-link)[href^="https:"]::after{display:inline-block;content:"";font-family:"Material Symbols Outlined";margin-left:.2rem;vertical-align:middle}.docs-viewer-scroll-margin-large h2,.docs-viewer-scroll-margin-large h3{scroll-margin:5em}.docs-header{margin-block-end:1rem}.docs-header>p:first-child{color:var(--quaternary-contrast);font-weight:500;margin:0}.docs-page-title{display:flex;justify-content:space-between}.docs-page-title h1{margin-block:0;font-size:2.25rem}.docs-page-title a{color:var(--primary-contrast);height:fit-content}.docs-page-title a docs-icon{color:var(--gray-400);transition:color .3s ease}.docs-page-title a:hover docs-icon{color:var(--primary-contrast)}/*# sourceMappingURL=docs-viewer.component.css.map */ </style><style ng-app-id="ng">[_nghost-ng-c101977500]{display:flex;flex-direction:column;position:fixed;right:16px;top:0;height:fit-content;width:14rem;padding-inline:1rem;max-height:100vh;overflow-y:scroll}[_nghost-ng-c101977500] aside[_ngcontent-ng-c101977500]{margin-bottom:2rem}[_nghost-ng-c101977500] [_ngcontent-ng-c101977500]:has(ul li:only-child){display:none}@media only screen and (max-width: 1430px){[_nghost-ng-c101977500]{position:relative;right:0;max-height:min-content;width:100%}}[_nghost-ng-c101977500] .docs-title[_ngcontent-ng-c101977500]{font-size:1.25rem;margin-block-start:var(--layout-padding)}[_nghost-ng-c101977500]::-webkit-scrollbar-track{background:rgba(0,0,0,0);cursor:pointer}[_nghost-ng-c101977500]::-webkit-scrollbar{width:6px;height:6px}[_nghost-ng-c101977500]::-webkit-scrollbar-thumb{background-color:var(--septenary-contrast);border-radius:10px;transition:background-color .3s ease}[_nghost-ng-c101977500]::-webkit-scrollbar-thumb:hover{background-color:var(--quinary-contrast)}[_nghost-ng-c101977500] .docs-faceted-list-item[_ngcontent-ng-c101977500]{font-size:.875rem}[_nghost-ng-c101977500] .docs-faceted-list-item[_ngcontent-ng-c101977500] a[_ngcontent-ng-c101977500]{display:block;padding:.5rem .5rem .5rem 1rem;font-weight:500}[_nghost-ng-c101977500] .docs-faceted-list-item.docs-toc-item-h3[_ngcontent-ng-c101977500] a[_ngcontent-ng-c101977500]{padding-inline-start:2rem}button[_ngcontent-ng-c101977500]{background:rgba(0,0,0,0);border:none;font-size:.875rem;font-family:var(--inter-font);display:flex;align-items:center;margin:.5rem 0;color:var(--tertiary-contrast);transition:color .3s ease;cursor:pointer}button[_ngcontent-ng-c101977500] docs-icon[_ngcontent-ng-c101977500]{margin-inline-end:.35rem;opacity:.6;transition:opacity .3s ease}button[_ngcontent-ng-c101977500]:hover docs-icon[_ngcontent-ng-c101977500]{opacity:1}@media only screen and (max-width: 1430px){button[_ngcontent-ng-c101977500]{display:none}}/*# sourceMappingURL=table-of-contents.component.css.map */</style></head> <body class="mat-typography docs-scroll-track-transparent-large"> <adev-root _nghost-ng-c3997628623 ng-version="19.0.1" ngh="3" ng-server-context="ssg"><button _ngcontent-ng-c3997628623 class="adev-skip">Skip to main content</button><div _ngcontent-ng-c3997628623 class="adev-nav" _nghost-ng-c249881476 ngh="1"><div _ngcontent-ng-c249881476 id="primaryNav"><div _ngcontent-ng-c249881476 class="adev-mobile-nav-bar"><button _ngcontent-ng-c249881476 type="button" aria-label="Toggle mobile navigation" class="adev-mobile-nav-button"><svg _ngcontent-ng-c249881476="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="32"><g _ngcontent-ng-c249881476="" clip-path="url(#2a)"><path _ngcontent-ng-c249881476="" fill="url(#2b)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"/><path _ngcontent-ng-c249881476="" fill="url(#2c)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"/></g><defs _ngcontent-ng-c249881476=""><linearGradient _ngcontent-ng-c249881476="" id="2b" x1="49.009" x2="225.829" y1="213.75" y2="129.722" gradientUnits="userSpaceOnUse"><stop _ngcontent-ng-c249881476="" stop-color="#E40035"/><stop _ngcontent-ng-c249881476="" offset=".24" stop-color="#F60A48"/><stop _ngcontent-ng-c249881476="" offset=".352" stop-color="#F20755"/><stop _ngcontent-ng-c249881476="" offset=".494" stop-color="#DC087D"/><stop _ngcontent-ng-c249881476="" offset=".745" stop-color="#9717E7"/><stop _ngcontent-ng-c249881476="" offset="1" stop-color="#6C00F5"/></linearGradient><linearGradient _ngcontent-ng-c249881476="" id="2c" x1="41.025" x2="156.741" y1="28.344" y2="160.344" gradientUnits="userSpaceOnUse"><stop _ngcontent-ng-c249881476="" stop-color="#FF31D9"/><stop _ngcontent-ng-c249881476="" offset="1" stop-color="#FF5BE1" stop-opacity="0"/></linearGradient><clipPath _ngcontent-ng-c249881476="" id="2a"><path _ngcontent-ng-c249881476="" fill="#fff" d="M0 0h223v236H0z"/></clipPath></defs></svg><docs-icon _ngcontent-ng-c249881476 aria-hidden="true" translate="no" role="presentation" _nghost-ng-c1974536348 class="material-symbols-outlined" style="font-size: 0px;" ngh="0">menu</docs-icon></button></div><nav _ngcontent-ng-c249881476 class="adev-nav-primary docs-scroll-hide"><button _ngcontent-ng-c249881476 type="button" aria-label="Close navigation" class="adev-close-nav"><docs-icon _ngcontent-ng-c249881476 aria-hidden="true" translate="no" role="presentation" _nghost-ng-c1974536348 class="material-symbols-outlined" style="font-size: 0px;" ngh="0">close</docs-icon></button><ul _ngcontent-ng-c249881476 class="adev-nav__top"><li _ngcontent-ng-c249881476 class="adev-nav-item adev-nav-item--logo"><a _ngcontent-ng-c249881476 aria-label="Angular homepage" routerlink="/" href="/"><svg _ngcontent-ng-c249881476="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="32" class="angular-logo"><g _ngcontent-ng-c249881476="" clip-path="url(#a)"><path _ngcontent-ng-c249881476="" fill="url(#b)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"/><path _ngcontent-ng-c249881476="" fill="url(#c)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"/></g><defs _ngcontent-ng-c249881476=""><linearGradient _ngcontent-ng-c249881476="" id="b" x1="49.009" x2="225.829" y1="213.75" y2="129.722" gradientUnits="userSpaceOnUse"><stop _ngcontent-ng-c249881476="" stop-color="#E40035"/><stop _ngcontent-ng-c249881476="" offset=".24" stop-color="#F60A48"/><stop _ngcontent-ng-c249881476="" offset=".352" stop-color="#F20755"/><stop _ngcontent-ng-c249881476="" offset=".494" stop-color="#DC087D"/><stop _ngcontent-ng-c249881476="" offset=".745" stop-color="#9717E7"/><stop _ngcontent-ng-c249881476="" offset="1" stop-color="#6C00F5"/></linearGradient><linearGradient _ngcontent-ng-c249881476="" id="c" x1="41.025" x2="156.741" y1="28.344" y2="160.344" gradientUnits="userSpaceOnUse"><stop _ngcontent-ng-c249881476="" stop-color="#FF31D9"/><stop _ngcontent-ng-c249881476="" offset="1" stop-color="#FF5BE1" stop-opacity="0"/></linearGradient><clipPath _ngcontent-ng-c249881476="" id="a"><path _ngcontent-ng-c249881476="" fill="#fff" d="M0 0h223v236H0z"/></clipPath></defs></svg></a><div _ngcontent-ng-c249881476 class="adev-nav-item"><button _ngcontent-ng-c249881476 type="button" aria-label="Select Angular version" role="button" class="cdk-menu-trigger adev-version-button" data-cdk-menu-stack-id="cdk-menu-stack-1156" aria-haspopup="menu" aria-expanded="false"> v19 <svg _ngcontent-ng-c249881476="" xmlns="http://www.w3.org/2000/svg" height="15" viewBox="0 -960 960 960" width="15" fill="inherit"><path _ngcontent-ng-c249881476="" d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"/></svg></button></div></li><li _ngcontent-ng-c249881476 class="adev-nav-item"><button _ngcontent-ng-c249881476 type="button" title="Search docs" class="adev-nav-button"><svg _ngcontent-ng-c249881476="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="inherit"><path _ngcontent-ng-c249881476="" d="M14.583 15.48 9.104 10a4.591 4.591 0 0 1-1.458.844 5.156 5.156 0 0 1-1.771.302c-1.5 0-2.77-.52-3.813-1.563C1.022 8.542.5 7.285.5 5.813c0-1.473.52-2.73 1.563-3.771C3.103 1 4.367.479 5.854.479 7.326.48 8.58 1 9.614 2.042c1.035 1.041 1.553 2.298 1.553 3.77 0 .598-.098 1.174-.292 1.73A5.287 5.287 0 0 1 10 9.104l5.5 5.459-.917.916ZM5.854 9.895c1.125 0 2.083-.4 2.875-1.198a3.95 3.95 0 0 0 1.188-2.885 3.95 3.95 0 0 0-1.188-2.886C7.938 2.13 6.98 1.73 5.854 1.73c-1.139 0-2.107.4-2.906 1.198-.799.799-1.198 1.76-1.198 2.886 0 1.125.4 2.086 1.198 2.885.799.799 1.767 1.198 2.906 1.198Z"/></svg><span _ngcontent-ng-c249881476 class="adev-nav-item__label adev-search-desktop" aria-label="Open search dialog with "><kbd _ngcontent-ng-c249881476></kbd><kbd _ngcontent-ng-c249881476>K</kbd></span></button></li><li _ngcontent-ng-c249881476 class="adev-nav-item"><a _ngcontent-ng-c249881476 href="/docs"><svg _ngcontent-ng-c249881476="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="18" fill="inherit"><path _ngcontent-ng-c249881476="" d="M3.645 13.792h6.708v-1.25H3.645v1.25Zm0-3.542h6.708V9H3.645v1.25Zm-2.063 7.083a1.2 1.2 0 0 1-.875-.375 1.2 1.2 0 0 1-.375-.875V1.917a1.2 1.2 0 0 1 .375-.875 1.2 1.2 0 0 1 .875-.375h7.52l4.563 4.562v10.854a1.2 1.2 0 0 1-.375.875 1.2 1.2 0 0 1-.875.375H1.582ZM8.478 5.792V1.917H1.582v14.166h10.833V5.792H8.478Z"/></svg><span _ngcontent-ng-c249881476 class="adev-nav-item__label">Docs</span></a></li><li _ngcontent-ng-c249881476 class="adev-nav-item"><a _ngcontent-ng-c249881476 href="/tutorials"><svg _ngcontent-ng-c249881476="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="10" fill="inherit"><path _ngcontent-ng-c249881476="" d="m5.668 10-5-5 5-5 1.187 1.188L3.022 5.02l3.813 3.812L5.668 10Zm6.667 0-1.188-1.188L14.98 4.98l-3.812-3.812L12.335 0l5 5-5 5Z"/></svg><span _ngcontent-ng-c249881476 class="adev-nav-item__label">Tutorials</span></a></li><li _ngcontent-ng-c249881476 class="adev-nav-item"><a _ngcontent-ng-c249881476 href="/playground"><svg _ngcontent-ng-c249881476="" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path _ngcontent-ng-c249881476="" d="M450.001-611.691v-32.386q-39.385-9.923-64.692-41.897-25.308-31.975-25.308-74.025 0-49.922 35.038-84.96 35.039-35.038 84.961-35.038t84.961 35.038q35.038 35.038 35.038 84.96 0 42.05-25.308 74.025-25.307 31.974-64.692 41.897v32.386l273.846 157.538q17.173 9.912 26.663 26.582 9.491 16.671 9.491 36.495v62.152q0 19.824-9.491 36.495-9.49 16.67-26.663 26.582L516.154-111.771q-17.203 9.846-36.217 9.846t-36.091-9.846L176.155-265.847q-17.173-9.912-26.663-26.582-9.491-16.671-9.491-36.495v-62.152q0-19.824 9.491-36.495 9.49-16.67 26.663-26.582l273.846-157.538Zm-6.155 364.537L200-387.461v58.537q0 3.078 1.539 5.962 1.538 2.885 4.615 4.808l267.692 154.692q3.077 1.923 6.154 1.923t6.154-1.923l267.692-154.692q3.077-1.923 4.615-4.808 1.539-2.884 1.539-5.962v-58.537L516.154-247.154q-17.203 9.847-36.217 9.847t-36.091-9.847Zm6.155-162.847V-542.77L250.46-427.691l223.386 128.846q3.077 1.924 6.154 1.924t6.154-1.924l223.001-128.846L509.999-542.77v132.769h-59.998ZM480-699.999q25 0 42.5-17.5t17.5-42.5q0-25-17.5-42.5t-42.5-17.5q-25 0-42.5 17.5t-17.5 42.5q0 25 17.5 42.5t42.5 17.5Zm-2.308 538.46Z"/></svg><span _ngcontent-ng-c249881476 class="adev-nav-item__label">Playground</span></a></li><li _ngcontent-ng-c249881476 class="adev-nav-item"><a _ngcontent-ng-c249881476 href="/reference"><svg _ngcontent-ng-c249881476="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="18" fill="inherit"><path _ngcontent-ng-c249881476="" d="M3.645 13.792h6.708v-1.25H3.645v1.25Zm0-3.542h6.708V9H3.645v1.25Zm-2.063 7.083a1.2 1.2 0 0 1-.875-.375 1.2 1.2 0 0 1-.375-.875V1.917a1.2 1.2 0 0 1 .375-.875 1.2 1.2 0 0 1 .875-.375h7.52l4.563 4.562v10.854a1.2 1.2 0 0 1-.375.875 1.2 1.2 0 0 1-.875.375H1.582ZM8.478 5.792V1.917H1.582v14.166h10.833V5.792H8.478Z"/></svg><span _ngcontent-ng-c249881476 class="adev-nav-item__label">Reference</span></a></li></ul><div _ngcontent-ng-c249881476 class="adev-nav__bottom"><div _ngcontent-ng-c249881476 class="adev-nav-item"><button _ngcontent-ng-c249881476 type="button" aria-label="Open social media links" class="cdk-menu-trigger" role="button" data-cdk-menu-stack-id="cdk-menu-stack-1157" aria-haspopup="menu" aria-expanded="false"><docs-icon _ngcontent-ng-c249881476 aria-hidden="true" translate="no" role="presentation" _nghost-ng-c1974536348 class="material-symbols-outlined" style="font-size: 0px;" ngh="0">more_horiz</docs-icon></button></div><div _ngcontent-ng-c249881476 class="adev-nav-item"><button _ngcontent-ng-c249881476 type="button" aria-label="Open theme picker" class="cdk-menu-trigger" role="button" data-cdk-menu-stack-id="cdk-menu-stack-1158" aria-haspopup="menu" aria-expanded="false"><docs-icon _ngcontent-ng-c249881476 aria-hidden="true" translate="no" role="presentation" _nghost-ng-c1974536348 class="material-symbols-outlined" style="font-size: 0px;" ngh="0"></docs-icon></button></div></div></nav></div></div><div _ngcontent-ng-c3997628623 class="docs-app-main-content"><router-outlet _ngcontent-ng-c3997628623></router-outlet><docs-docs _nghost-ng-c1478734370 ngh="2"><docs-viewer _ngcontent-ng-c1478734370 class="docs-viewer" ngh="0"> <header class="docs-header"> <docs-breadcrumb></docs-breadcrumb>  <div class="docs-page-title"> <h1 tabindex="-1">Angular Press Kit</h1> <a class="docs-github-links" target="_blank" href="https://github.com/angular/angular/edit/main/adev/src/content/reference/press-kit.md" title="Edit this page" aria-label="Edit this page">  <docs-icon role="presentation" aria-hidden="true" translate="no" _nghost-ng-c1974536348 ng-version="19.0.1" class="material-symbols-outlined" style="font-size: 0px;" ngh="0"></docs-icon> </a> </div> </header> <p>The logo graphics available for download on this page are provided under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>.</p> <div class="docs-card-grid"> <a href="https://drive.google.com/drive/folders/1IgcAwLDVZUz8ycnFa7T4_H6B4V4LhYUQ?usp=sharing" target="_blank" class="docs-card"> <div> <h3>Angular logos</h3> <p> <img src="assets/images/press-kit/angular_wordmark_gradient.png" alt="Angular wordmark gradient logo" title="Angular wordmark gradient logo" class="docs-image"> <img src="assets/images/press-kit/angular_wordmark_white.png" alt="Angular wordmark white logo" title="Angular wordmark white logo" class="docs-image"> <img src="assets/images/press-kit/angular_wordmark_black.png" alt="Angular wordmark black logo" title="Angular wordmark black logo" class="docs-image"> Black and white are the default color variations and should be used in most circumstances. A gradient version of the icon and lockup is available in both static and animated formats and can be used in cases where a color icon is required.</p> </div> <span>Download from Google Drive</span> </a> <a href="https://drive.google.com/drive/folders/1gD5-kamfribnib6TH4-aqVZxjYaDZlCg?usp=drive_link" target="_blank" class="docs-card"> <div> <h3>Brand guidelines</h3> <p> <img src="assets/images/press-kit/angular_icon_gradient.gif" alt="Angular animated gradient logo" title="Angular animated gradient logo" class="docs-image"> Our brand guidelines folders contain the design files, guidance and community examples for how the brand can be adapted. Read more about adapting the logo in the section below.</p> </div> <span>Download from Google Drive</span> </a> </div> <docs-table-of-contents toc-skip-content="true" _nghost-ng-c101977500 ng-version="19.0.1" ngh="4"><aside _ngcontent-ng-c101977500><nav _ngcontent-ng-c101977500><header _ngcontent-ng-c101977500><h2 _ngcontent-ng-c101977500 class="docs-title">On this page</h2></header><ul _ngcontent-ng-c101977500 class="docs-faceted-list"><li _ngcontent-ng-c101977500 class="docs-faceted-list-item docs-toc-item-h2"><a _ngcontent-ng-c101977500 routerlink="." class href="/press-kit#press-and-media"> Press and Media </a></li><li _ngcontent-ng-c101977500 class="docs-faceted-list-item docs-toc-item-h2"><a _ngcontent-ng-c101977500 routerlink="." class href="/press-kit#adapting-the-logo"> Adapting the logo </a></li><li _ngcontent-ng-c101977500 class="docs-faceted-list-item docs-toc-item-h3"><a _ngcontent-ng-c101977500 routerlink="." class href="/press-kit#adapt-the-logo-colors-as-your-own"> Adapt the logo colors as your own </a></li><li _ngcontent-ng-c101977500 class="docs-faceted-list-item docs-toc-item-h3"><a _ngcontent-ng-c101977500 routerlink="." class href="/press-kit#adapt-the-logo-shape-as-your-own"> Adapt the logo shape as your own </a></li><li _ngcontent-ng-c101977500 class="docs-faceted-list-item docs-toc-item-h3"><a _ngcontent-ng-c101977500 routerlink="." class href="/press-kit#dos-and-donts-of-using-angulars-brand"> Do’s and don’ts of using Angular's brand </a></li><li _ngcontent-ng-c101977500 class="docs-faceted-list-item docs-toc-item-h2"><a _ngcontent-ng-c101977500 routerlink="." class href="/press-kit#deprecated-logos"> Deprecated logos </a></li><li _ngcontent-ng-c101977500 class="docs-faceted-list-item docs-toc-item-h3"><a _ngcontent-ng-c101977500 routerlink="." class href="/press-kit#2016-angular-v3-v16"> 2016 Angular (v3-v16) </a></li><li _ngcontent-ng-c101977500 class="docs-faceted-list-item docs-toc-item-h3"><a _ngcontent-ng-c101977500 routerlink="." class href="/press-kit#angularjs"> AngularJS </a></li></ul></nav></aside></docs-table-of-contents><h2 id="press-and-media"> <a href="#press-and-media" class="docs-anchor" tabindex="-1" aria-label="Link to Press and Media">Press and Media</a> </h2> <p>For inquiries regarding press and media please contact us at <a href="mailto:press@angular.io">press@angular.io</a>. For developer inquiries contact <a href="mailto:devrel@angular.io">devrel@angular.io</a>.</p> <h2 id="adapting-the-logo"> <a href="#adapting-the-logo" class="docs-anchor" tabindex="-1" aria-label="Link to Adapting the logo">Adapting the logo</a> </h2> <p>Angular’s success is deeply connected to our community. We know many communities, meetups, conferences, blogs, websites, YouTube channels and developers have built their brand on top of ours. This logo is for us and our community, and it’s important that you can join us in updating your brand as well.</p> <p>Angular has long valued creative expression through customized shield icons. The new Angular icon allows customization in several ways. The icon shape can be used as a container for simple colors and patterns. Alternatively, a custom backplate can be used for more intricate designs. We recommend keeping your compositions simple and clear, since busy and complex patterns can be difficult to read. We appreciate your cooperation in keeping our community a safe and welcoming space. Please keep designs respectful and be mindful of our community guidelines when creating your icons.</p> <p>We have provided a template to get you started.</p> <p>If you have any questions on adapting the new logo, or updating your own, please email <a href="mailto:devrel@angular.io">devrel@angular.io</a> for additional help – we can’t wait to see what you create!</p> <ol class="docs-steps"> <li> <span class="docs-step-number" aria-hidden="true"></span> <h3 id="adapt-the-logo-colors-as-your-own"> <a href="#adapt-the-logo-colors-as-your-own" class="docs-anchor" tabindex="-1" aria-label="Link to Adapt the logo colors as your own">Adapt the logo colors as your own</a> </h3> <p>Lean into the shape of Angular’s new logo by changing the logo colors to match your brand colors, flag, cause, etc.</p> <p>In this example, we’ve adapted the colors to create an Angular Pride logo variation: <img src="assets/images/press-kit/angular_pride.png#small" alt="Angular pride logo" title="Angular pride logo" class="docs-image"> </p> </li> <li> <span class="docs-step-number" aria-hidden="true"></span> <h3 id="adapt-the-logo-shape-as-your-own"> <a href="#adapt-the-logo-shape-as-your-own" class="docs-anchor" tabindex="-1" aria-label="Link to Adapt the logo shape as your own">Adapt the logo shape as your own</a> </h3> <p>Lean into the shape of Angular’s new logo by adapting the shield to match your own brand.</p> <p>In this example, we’ve adapted the shield to create an Angular Signals logo variation: <img src="assets/images/press-kit/angular_signals.png#medium" alt="Angular Signals logo" title="Angular Signals logo" class="docs-image"> </p> </li> <li> <span class="docs-step-number" aria-hidden="true"></span> <h3 id="dos-and-donts-of-using-angulars-brand"> <a href="#dos-and-donts-of-using-angulars-brand" class="docs-anchor" tabindex="-1" aria-label="Link to Do’s and don’ts of using Angular's brand">Do’s and don’ts of using Angular's brand</a> </h3> <p>If you are creating your own logo, we encourage differentiating your logo from ours to not cause confusion. When adapting the logo, you are free to change and adapt the colors and shape to make it your own.</p> <p>When representing Angular with the original logo, please follow these guidelines: <img src="assets/images/press-kit/do_and_dont.png" alt="Rhubarb the small cat" title="Rhubarb the small cat" class="docs-image"> </p> </li> </ol> <h2 id="deprecated-logos"> <a href="#deprecated-logos" class="docs-anchor" tabindex="-1" aria-label="Link to Deprecated logos">Deprecated logos</a> </h2> <h3 id="2016-angular-v3-v16"> <a href="#2016-angular-v3-v16" class="docs-anchor" tabindex="-1" aria-label="Link to 2016 Angular (v3-v16)">2016 Angular (v3-v16)</a> </h3> <p>In 2023 , we announced a modernized logo with v17. We advise against using the former Angular logo to prevent confusion. You can view the old press kit on our <a href="https://angular.io/presskit" target="_blank">old docs site</a>.</p> <h3 id="angularjs"> <a href="#angularjs" class="docs-anchor" tabindex="-1" aria-label="Link to AngularJS">AngularJS</a> </h3> <p>AngularJS is the v1.x predecessor of modern Angular. We advise against using this logo to prevent confusion. Read more about the discontinued LTS (Long Term Support) for AngularJS on our <a href="https://blog.angular.dev/discontinued-long-term-support-for-angularjs-cc066b82e65a" target="_blank">blog</a>.</p> </docs-viewer></docs-docs><footer _ngcontent-ng-c3997628623 adev-footer _nghost-ng-c3585373939 ngh="0"><div _ngcontent-ng-c3585373939 class="adev-footer-container"><div _ngcontent-ng-c3585373939 class="adev-footer-columns"><div _ngcontent-ng-c3585373939><h2 _ngcontent-ng-c3585373939>Social Media</h2><ul _ngcontent-ng-c3585373939><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 title="Angular blog" href="https://blog.angular.dev">Blog</a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 title="X (formerly Twitter)" href="https://x.com/angular">X (formerly Twitter)</a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 title="YouTube" href="https://www.youtube.com/angular">YouTube</a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://discord.gg/angular" title="Join the discussions at Angular Community Discord server."> Discord </a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 title="GitHub" href="https://github.com/angular/angular">GitHub</a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: where the community answers your technical Angular questions."> Stack Overflow </a></li></ul></div><div _ngcontent-ng-c3585373939><h2 _ngcontent-ng-c3585373939>Community</h2><ul _ngcontent-ng-c3585373939><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://github.com/angular/angular/blob/main/CONTRIBUTING.md" title="Contribute to Angular"> Contribute </a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://github.com/angular/code-of-conduct/blob/main/CODE_OF_CONDUCT.md" title="Treating each other with respect."> Code of Conduct </a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://github.com/angular/angular/issues" title="Post issues and suggestions on github."> Report Issues </a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://devlibrary.withgoogle.com/products/angular?sort=updated" title="Google's DevLibrary"> Google's DevLibrary </a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://developers.google.com/community/experts/directory?specialization=angular" title="Angular Google Developer Experts"> Angular Google Developer Experts </a></li></ul></div><div _ngcontent-ng-c3585373939><h2 _ngcontent-ng-c3585373939>Resources</h2><ul _ngcontent-ng-c3585373939><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 routerlink="/press-kit" title="Press contacts, logos, and branding." href="/press-kit">Press Kit</a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 routerlink="/roadmap" title="Roadmap" href="/roadmap">Roadmap</a></li></ul></div><div _ngcontent-ng-c3585373939><h2 _ngcontent-ng-c3585373939>Languages</h2><ul _ngcontent-ng-c3585373939><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://angular.cn/" title="简体中文版">简体中文版</a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://angular.jp/" title="日本語版">日本語版</a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://angular.kr/" title="한국어">한국어</a></li><li _ngcontent-ng-c3585373939><a _ngcontent-ng-c3585373939 href="https://angular-gr.web.app" title="Ελληνικά"> Ελληνικά </a></li></ul></div></div><p _ngcontent-ng-c3585373939 class="docs-license"> Super-powered by Google ©2010-2024. Code licensed under an <a _ngcontent-ng-c3585373939 routerlink="/license" title="License text" href="/license">MIT-style License</a> . Documentation licensed under <a _ngcontent-ng-c3585373939 href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> . </p></div></footer></div></adev-root> <script src="main-YZ3JPTHH.js" type="module"></script> <div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite" id="cdk-live-announcer-385"></div><script id="ng-state" type="application/json">{"1385951555":{"b":"\n \u003Cheader class=\"docs-header\">\n \u003Cdocs-breadcrumb>\u003C/docs-breadcrumb>\n\n \n \u003C!-- Page title -->\n \u003Cdiv class=\"docs-page-title\">\n \u003Ch1 tabindex=\"-1\">Angular Press Kit\u003C/h1>\n \u003Ca class=\"docs-github-links\" target=\"_blank\" href=\"https://github.com/angular/angular/edit/main/adev/src/content/reference/press-kit.md\" title=\"Edit this page\" aria-label=\"Edit this page\">\n \u003C!-- Pencil -->\n \u003Cdocs-icon role=\"presentation\">edit\u003C/docs-icon>\n \u003C/a>\n \u003C/div>\n \u003C/header>\n \u003Cp>The logo graphics available for download on this page are provided under \u003Ca href=\"https://creativecommons.org/licenses/by/4.0/\" target=\"_blank\">CC BY 4.0\u003C/a>.\u003C/p>\n\n \u003Cdiv class=\"docs-card-grid\">\n \n \u003Ca href=\"https://drive.google.com/drive/folders/1IgcAwLDVZUz8ycnFa7T4_H6B4V4LhYUQ?usp=sharing\" target=\"_blank\" class=\"docs-card\">\n \u003Cdiv>\n \u003Ch3>Angular logos\u003C/h3>\n \u003Cp>\n \u003Cimg src=\"assets/images/press-kit/angular_wordmark_gradient.png\" alt=\"Angular wordmark gradient logo\" title=\"Angular wordmark gradient logo\" class=\"docs-image\">\n \n \n \u003Cimg src=\"assets/images/press-kit/angular_wordmark_white.png\" alt=\"Angular wordmark white logo\" title=\"Angular wordmark white logo\" class=\"docs-image\">\n \n \n \u003Cimg src=\"assets/images/press-kit/angular_wordmark_black.png\" alt=\"Angular wordmark black logo\" title=\"Angular wordmark black logo\" class=\"docs-image\">\n \n Black and white are the default color variations and should be used in most circumstances. A gradient version of the icon and lockup is available in both static and animated formats and can be used in cases where a color icon is required.\u003C/p>\n\n \u003C/div>\n \u003Cspan>Download from Google Drive\u003C/span>\n \u003C/a>\n \n \u003Ca href=\"https://drive.google.com/drive/folders/1gD5-kamfribnib6TH4-aqVZxjYaDZlCg?usp=drive_link\" target=\"_blank\" class=\"docs-card\">\n \u003Cdiv>\n \u003Ch3>Brand guidelines\u003C/h3>\n \u003Cp>\n \u003Cimg src=\"assets/images/press-kit/angular_icon_gradient.gif\" alt=\"Angular animated gradient logo\" title=\"Angular animated gradient logo\" class=\"docs-image\">\n \n Our brand guidelines folders contain the design files, guidance and community examples for how the brand can be adapted.\n Read more about adapting the logo in the section below.\u003C/p>\n\n \u003C/div>\n \u003Cspan>Download from Google Drive\u003C/span>\n \u003C/a>\n \n \u003C/div>\n \n \u003Ch2 id=\"press-and-media\">\n \u003Ca href=\"#press-and-media\" class=\"docs-anchor\" tabindex=\"-1\" aria-label=\"Link to Press and Media\">Press and Media\u003C/a>\n \u003C/h2>\n \u003Cp>For inquiries regarding press and media please contact us at \u003Ca href=\"mailto:press@angular.io\">press@angular.io\u003C/a>. For developer inquiries contact \u003Ca href=\"mailto:devrel@angular.io\">devrel@angular.io\u003C/a>.\u003C/p>\n\n \u003Ch2 id=\"adapting-the-logo\">\n \u003Ca href=\"#adapting-the-logo\" class=\"docs-anchor\" tabindex=\"-1\" aria-label=\"Link to Adapting the logo\">Adapting the logo\u003C/a>\n \u003C/h2>\n \u003Cp>Angular’s success is deeply connected to our community. We know many communities, meetups, conferences, blogs, websites, YouTube channels and developers have built their brand on top of ours. This logo is for us and our community, and it’s important that you can join us in updating your brand as well.\u003C/p>\n\u003Cp>Angular has long valued creative expression through customized shield icons. The new Angular icon allows customization in several ways. The icon shape can be used as a container for simple colors and patterns. Alternatively, a custom backplate can be used for more intricate designs. We recommend keeping your compositions simple and clear, since busy and complex patterns can be difficult to read. We appreciate your cooperation in keeping our community a safe and welcoming space. Please keep designs respectful and be mindful of our community guidelines when creating your icons.\u003C/p>\n\u003Cp>We have provided a template to get you started.\u003C/p>\n\u003Cp>If you have any questions on adapting the new logo, or updating your own, please email \u003Ca href=\"mailto:devrel@angular.io\">devrel@angular.io\u003C/a> for additional help – we can’t wait to see what you create!\u003C/p>\n\n \u003Col class=\"docs-steps\">\n \n \u003Cli>\n \u003Cspan class=\"docs-step-number\" aria-hidden=\"true\">\u003C/span>\n \n \u003Ch3 id=\"adapt-the-logo-colors-as-your-own\">\n \u003Ca href=\"#adapt-the-logo-colors-as-your-own\" class=\"docs-anchor\" tabindex=\"-1\" aria-label=\"Link to Adapt the logo colors as your own\">Adapt the logo colors as your own\u003C/a>\n \u003C/h3>\n \n \u003Cp>Lean into the shape of Angular’s new logo by changing the logo colors to match your brand colors, flag, cause, etc.\u003C/p>\n\u003Cp>In this example, we’ve adapted the colors to create an Angular Pride logo variation:\n\n \u003Cimg src=\"assets/images/press-kit/angular_pride.png#small\" alt=\"Angular pride logo\" title=\"Angular pride logo\" class=\"docs-image\">\n \u003C/p>\n\n \u003C/li>\n \n \u003Cli>\n \u003Cspan class=\"docs-step-number\" aria-hidden=\"true\">\u003C/span>\n \n \u003Ch3 id=\"adapt-the-logo-shape-as-your-own\">\n \u003Ca href=\"#adapt-the-logo-shape-as-your-own\" class=\"docs-anchor\" tabindex=\"-1\" aria-label=\"Link to Adapt the logo shape as your own\">Adapt the logo shape as your own\u003C/a>\n \u003C/h3>\n \n \u003Cp>Lean into the shape of Angular’s new logo by adapting the shield to match your own brand.\u003C/p>\n\u003Cp>In this example, we’ve adapted the shield to create an Angular Signals logo variation:\n\n \u003Cimg src=\"assets/images/press-kit/angular_signals.png#medium\" alt=\"Angular Signals logo\" title=\"Angular Signals logo\" class=\"docs-image\">\n \u003C/p>\n\n \u003C/li>\n \n \u003Cli>\n \u003Cspan class=\"docs-step-number\" aria-hidden=\"true\">\u003C/span>\n \n \u003Ch3 id=\"dos-and-donts-of-using-angulars-brand\">\n \u003Ca href=\"#dos-and-donts-of-using-angulars-brand\" class=\"docs-anchor\" tabindex=\"-1\" aria-label=\"Link to Do’s and don’ts of using Angular's brand\">Do’s and don’ts of using Angular's brand\u003C/a>\n \u003C/h3>\n \n \u003Cp>If you are creating your own logo, we encourage differentiating your logo from ours to not cause confusion. When adapting the logo, you are free to change and adapt the colors and shape to make it your own.\u003C/p>\n\u003Cp>When representing Angular with the original logo, please follow these guidelines:\n\n \u003Cimg src=\"assets/images/press-kit/do_and_dont.png\" alt=\"Rhubarb the small cat\" title=\"Rhubarb the small cat\" class=\"docs-image\">\n \u003C/p>\n\n \u003C/li>\n \n \u003C/ol>\n \n \u003Ch2 id=\"deprecated-logos\">\n \u003Ca href=\"#deprecated-logos\" class=\"docs-anchor\" tabindex=\"-1\" aria-label=\"Link to Deprecated logos\">Deprecated logos\u003C/a>\n \u003C/h2>\n \n \u003Ch3 id=\"2016-angular-v3-v16\">\n \u003Ca href=\"#2016-angular-v3-v16\" class=\"docs-anchor\" tabindex=\"-1\" aria-label=\"Link to 2016 Angular (v3-v16)\">2016 Angular (v3-v16)\u003C/a>\n \u003C/h3>\n \u003Cp>In 2023 , we announced a modernized logo with v17. We advise against using the former Angular logo to prevent confusion. You can view the old press kit on our \u003Ca href=\"https://angular.io/presskit\" target=\"_blank\">old docs site\u003C/a>.\u003C/p>\n\n \u003Ch3 id=\"angularjs\">\n \u003Ca href=\"#angularjs\" class=\"docs-anchor\" tabindex=\"-1\" aria-label=\"Link to AngularJS\">AngularJS\u003C/a>\n \u003C/h3>\n \u003Cp>AngularJS is the v1.x predecessor of modern Angular. We advise against using this logo to prevent confusion.\nRead more about the discontinued LTS (Long Term Support) for AngularJS on our \u003Ca href=\"https://blog.angular.dev/discontinued-long-term-support-for-angularjs-cc066b82e65a\" target=\"_blank\">blog\u003C/a>.\u003C/p>\n","h":{},"s":200,"st":"OK","u":"assets/content/reference/press-kit.md.html","rt":"text"},"__nghData__":[{},{"n":{"21":"20f","25":"24f","75":"74f","81":"80f"},"t":{"29":"t2","30":"t3","36":"t4","76":"t5","81":"t6","82":"t7","83":"t8","84":"t9","86":"t10"},"c":{"29":[{"i":"t2","r":1}],"30":[],"32":[],"36":[],"73":[],"76":[],"79":[],"81":[],"82":[],"83":[],"84":[],"86":[]}},{"n":{"1":"hf"},"t":{"1":"t14"},"c":{"1":[{"i":"t14","r":2,"c":{"0":[]}}]}},{"t":{"0":"t0","1":"t1","6":"t11","8":"t12","9":"t13","12":"t15"},"c":{"0":[],"1":[],"6":[],"8":[],"9":[],"11":[{"i":"c1478734370","r":1}],"12":[{"i":"t15","r":1}]}},{"t":{"7":"t48","8":"t49"},"c":{"7":[{"i":"t48","r":1,"x":8}],"8":[]}}]}</script></body></html>