Angular - DEV Community

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular - DEV Community</title> <meta name="last-updated" content="2025-02-26 14:15:07 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1740579307"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-0a971eb021d2dc2b145c1df786e1b97f418c6b2d066e79802fea980acb513937.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-a87669a7c932717e71153a0e9be51887fd49f60281c77873f33571fab239e9d6.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-7258612fccf5d56314a6e4ad1898b4f818f474c4bb3485e302428d489a769a17.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-ee70590bbbe9b8f9d750ea9b4b7e809c47123e9064196238ba4e65bc65caf708.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseTracking-b6bf73e5ee66633e151e7d5b7c6bbccedfa4c59e3615be97b98c4c0f543ddae7.js" defer="defer"></script> <meta name="search-script" content="https://assets.dev.to/assets/Search-1667defd820799649d6c3b2864f13786058190df703dd50ab75dce1ccb834c4b.js"> <link rel="canonical" href="https://dev.to/t/angular" /> <meta name="description" content="angular content on DEV Community"> <meta name="keywords" content="software development, engineering, angular"> <meta property="og:type" content="website" /> <meta property="og:url" content="https://dev.to/t/angular" /> <meta property="og:title" content="Angular" /> <meta property="og:description" content="Angular content on DEV Community" /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:creator" content="@Angular"> <meta name="twitter:title" content="Angular"> <meta name="twitter:description" content="Angular content on DEV Community"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:image" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta name="twitter:image:src" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <link rel="icon" type="image/x-icon" href="https://media2.dev.to/dynamic/image/width=32,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <link rel="apple-touch-icon" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://media2.dev.to/dynamic/image/width=152,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="167x167" href="https://media2.dev.to/dynamic/image/width=167,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link href="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="192x192" /> <link href="https://media2.dev.to/dynamic/image/width=128,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="128x128" /> <meta name="apple-mobile-web-app-title" content="dev.to"> <meta name="application-name" content="dev.to"> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"> <link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community" /> <meta property="forem:name" content="DEV Community" /> <meta property="forem:logo" content="https://media2.dev.to/dynamic/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <meta property="forem:domain" content="dev.to" /> </head> <body class="sans-serif-article-body default-header" data-user-status="logged-out" data-community-name="DEV Community" data-subscription-icon="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" data-locale="en" data-honeybadger-key="hbp_nqu4Y66HuEKlD6YRGssZuRQnPOjDm50J8Zkr" data-deployed-at="2025-02-21T19:09:12Z" data-latest-commit-id="af4179d22e214b234b30c1a69a3ef8f41b71a826" data-ga-tracking="UA-71991109-1" data-cookie-banner-user-context="logged_out_only" data-cookie-banner-platform-context="off" data-algolia-id="PRSOBFP46H" data-algolia-search-key="9aa7d31610cba78851c9b1f63776a9dd" data-algolia-display="true" data-dynamic-url-component="bb-2" data-ga4-tracking-id="G-TYEM8Y3JN3"> <script> if (navigator.userAgent.includes('ForemWebView/1') || window.frameElement) { document.body.classList.add("hidden-shell"); } </script> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-0a971eb021d2dc2b145c1df786e1b97f418c6b2d066e79802fea980acb513937.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.css" media="all" id="secondary-crayons-stylesheet" /> <div id="body-styles"> <style> :root { --accent-brand-lighter-rgb: 80, 99, 301; --accent-brand-rgb: 59, 73, 223; --accent-brand-darker-rgb: 47, 58, 178; } </style> </div> <div id="audiocontent" data-podcast=""> </div> <div class="navigation-progress" id="navigation-progress"></div> <header id="topbar" class="crayons-header topbar print-hidden"> <span id="route-change-target" tabindex="-1"></span> <a href="#main-content" class="skip-content-link">Skip to content</a> <div class="crayons-header__container"> <span class="inline-block m:hidden "> <button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amn84698gzbyf7u41s907gaxsqwq6vbn" class="crayons-icon"><title id="amn84698gzbyf7u41s907gaxsqwq6vbn">Navigation menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </button> </span> <a href="/" class="site-logo" aria-label="DEV Community Home"> <img class="site-logo__img" src="https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" style="aspect-ratio: 10 / 8" alt="DEV Community"> </a> <div class="crayons-header--search js-search-form" id="header-search"> <form accept-charset="UTF-8" method="get" action="/search" role="search"> <div class="crayons-fields crayons-fields--horizontal"> <div class="crayons-field flex-1 relative"> <input id="search-input" class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Search..." autocomplete="off" /> <button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px right-auto mt-0 py-0"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="atdssnbsmfak7mnmb6ztr6wd8k9pxf77" aria-hidden="true" class="crayons-icon"><title id="atdssnbsmfak7mnmb6ztr6wd8k9pxf77">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </button> <a class="crayons-header--search-brand-indicator" href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank" rel="noopener noreferrer"> Powered by <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="24" height="24" viewBox="0 0 500 500.34" role="img" aria-labelledby="a3bgzyr3a1he4kmbmt5hlsgt0jjpl68v" aria-hidden="true" class="crayons-icon"><title id="a3bgzyr3a1he4kmbmt5hlsgt0jjpl68v">Search</title> <defs></defs><path class="cls-1" d="M250,0C113.38,0,2,110.16,.03,246.32c-2,138.29,110.19,252.87,248.49,253.67,42.71,.25,83.85-10.2,120.38-30.05,3.56-1.93,4.11-6.83,1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5,10.85-53.21,16.39-81.76,16.04-111.75-1.37-202.04-94.35-200.26-206.1,1.76-110.33,92.06-199.55,202.8-199.55h202.83V407.68l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43,1.31-18.47,24.46-48.56,39.67-81.98,37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28,39.65-101.58,94.07-101.58,49.21,0,89.74,37.88,93.97,86.01,.38,4.28,2.31,8.28,5.53,11.13l29.97,26.57c3.4,3.01,8.8,1.17,9.63-3.3,2.16-11.55,2.92-23.6,2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23,58.18-150.37,137.35-2.09,77.15,61.12,143.66,138.28,145.36,32.21,.71,62.07-9.42,86.2-26.97l150.36,133.29c6.45,5.71,16.62,1.14,16.62-7.48V9.49C500,4.25,495.75,0,490.51,0H250Z"></path> </svg> Algolia </a> </div> </div> </form> </div> <div class="flex items-center h-100 ml-auto"> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="https://dev.to/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="https://dev.to/enter?state=new-user" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant> Create account </a> </div> </div> </div> </header> <div class="hamburger"> <div class="hamburger__content"> <header class="hamburger__content__header"> <h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community</h2> <button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a6vr6mcf8e4pipvftvjfp9ytxipyg7xj" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="a6vr6mcf8e4pipvftvjfp9ytxipyg7xj">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </button> </header> <div class="p-2 js-navigation-links-container" id="authentication-hamburger-actions"> </div> </div> <div class="hamburger__overlay js-hamburger-trigger"></div> </div> <div id="active-broadcast" class="broadcast-wrapper"></div> <div id="page-content" class="wrapper tagged_articles tagged_articles-index" data-current-page="tagged_articles-index"> <div id="page-content-inner" data-internal-nav="false"> <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div> <div data-tag-id="215" data-tag-name="angular" id="tag-215" class="crayons-layout js-tag-card"> <header class="crayons-card branded-4 p-4 l:p-6 spec__tag-header" style="border-top-color: #A9022A "> <div class="flex"> <img src="https://media2.dev.to/dynamic/image/width=64,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F28%2Fangular-01.png" alt="" class="mr-4" style="transform: rotate(0deg); width: 64px; height: 64px;" /> <div class="flex flex-col w-100 justify-center"> <div class="flex justify-between items-center"> <h1 class="crayons-title"> <span class="opacity-50">#</span> angular </h1> <div id="tag-buttons-215" class="mt-auto flex items-end justify-between"> <div class="flex gap-2"> <button class="c-btn c-btn--primary js-follow-tag-button" aria-label="Follow tag: angular"> Follow </button> <button class="c-btn js-hide-tag-button" aria-label="Hide tag: angular"> Hide </button> </div> </div> </div> <p class="max-w-100 m:max-w-75 pt-2 s:pt-4"> One of the world's most popular frontend JavaScript frameworks. </p> </div> </div> </header> </div> <div class="home sub-home" id="index-container" data-params="{"tag":"angular","sort_by":"hotness_score","sort_direction":"desc"}" data-which="" data-tag="angular" data-feed="base-feed" data-requires-approval="false" data-articles-since=""> <div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left"> <div class="sidebar-bg" id="sidebar-bg-left"></div> <aside class="side-bar"> <div class="widget js-policy-article-create"> <a class="crayons-btn crayons-btn--s" href="/new/angular"> Create Post </a> </div> <div class="sidebar-data"> <div> 7347 Posts Published </div> <hr /> <div class="olderposts-header">Older #angular posts</div> <div class="olderposts-links"> <span class="olderposts-pagenumber">1</span> <a href="https://dev.to/t/angular/page/2" class="olderposts-pagenumber">2</a> <a href="https://dev.to/t/angular/page/3" class="olderposts-pagenumber">3</a> <a href="https://dev.to/t/angular/page/4" class="olderposts-pagenumber">4</a> <a href="https://dev.to/t/angular/page/5" class="olderposts-pagenumber">5</a> <a href="https://dev.to/t/angular/page/6" class="olderposts-pagenumber">6</a> <a href="https://dev.to/t/angular/page/7" class="olderposts-pagenumber">7</a> <a href="https://dev.to/t/angular/page/8" class="olderposts-pagenumber">8</a> <a href="https://dev.to/t/angular/page/9" class="olderposts-pagenumber">9</a> <div> …<a href="https://dev.to/t/angular/page/75" class="olderposts-pagenumber">75</a> …<a href="https://dev.to/t/angular/page/293" class="olderposts-pagenumber">293</a> </div> </div> </div> </aside> </div> <main class="articles-list" id="main-content" data-follow-button-container="true"> <header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls"> <h1 class="screen-reader-only">Posts</h1> <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden mb-auto" id="on-page-nav-butt-left" aria-label="nav-button-left"> <div class="crayons-icon nav-icon "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aqvy29qqfx0k00radbbhxsajxfz51vin" class="crayons-icon"><title id="aqvy29qqfx0k00radbbhxsajxfz51vin">Left menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </div> </button> <div class="flex-1 flex items-center justify-between"> <div class="crayons-notice w-100" aria-live="polite">👋 <a href="/enter">Sign in</a> for the ability to sort posts by <strong>relevant</strong>, <strong>latest</strong>, or <strong>top</strong>.</div> </div> <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden mb-auto" id="on-page-nav-butt-right" aria-label="nav-button-right"> <div class="crayons-icon nav-icon "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="afsleynmn3ds8pc3wnarxrh08dschbfw" class="crayons-icon"><title id="afsleynmn3ds8pc3wnarxrh08dschbfw">Right menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </div> </button> </header> <div class="substories" id="substories"> <div class="crayons-story " data-feed-content-id="2297045" data-content-user-id="1193413"> <a href="https://dev.to/nicholajones075/angular-for-saas-building-scalable-and-secure-applications-1aid" aria-labelledby="article-link-2297045" class="crayons-story__hidden-navigation-link">Angular for SaaS: Building Scalable and Secure Applications</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/nicholajones075" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1193413%2F69681306-e89c-4912-a964-aaed2149a562.jpg" alt="nicholajones075 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/nicholajones075" class="crayons-story__secondary fw-medium m:hidden"> Nicholas Jones </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2297045" aria-controls="story-author-preview-content-2297045" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Nicholas Jones profile details"> Nicholas Jones </button> <div id="story-author-preview-content-2297045" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/nicholajones075" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1193413%2F69681306-e89c-4912-a964-aaed2149a562.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Nicholas Jones</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1193413,"className":"User","name":"Nicholas Jones"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1193413"></div> </div> </div> </div> </div> <a href="https://dev.to/nicholajones075/angular-for-saas-building-scalable-and-secure-applications-1aid" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-25T11:08:44Z">Feb 25</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740481724"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/nicholajones075/angular-for-saas-building-scalable-and-secure-applications-1aid" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fryt472juh3cyp4bqx1ik.png" id="article-link-2297045"> Angular for SaaS: Building Scalable and Secure Applications </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/angularsaas"><span class="crayons-tag__prefix">#</span>angularsaas</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/angularforsaas"><span class="crayons-tag__prefix">#</span>angularforsaas</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/saasapplications"><span class="crayons-tag__prefix">#</span>saasapplications</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/nicholajones075/angular-for-saas-building-scalable-and-secure-applications-1aid#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Angular for SaaS: Building Scalable and Secure Applications"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahn5fldbyxul1avdxoxwsurxcf2z319" class="crayons-icon"><title id="ahn5fldbyxul1avdxoxwsurxcf2z319">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2297045" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2297045" data-article-author-id="1193413" aria-label="Save post Angular for SaaS: Building Scalable and Secure Applications to reading list" title="Save post Angular for SaaS: Building Scalable and Secure Applications to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2296808" data-content-user-id="2845949"> <a href="https://dev.to/artem_turlenko/reactive-forms-vs-template-driven-forms-which-to-choose-and-why-3np7" aria-labelledby="article-link-2296808" class="crayons-story__hidden-navigation-link">📚 Reactive Forms vs Template-Driven Forms: Which to Choose and Why</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/artem_turlenko" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2845949%2F3ba98e1a-9c3b-4c0e-8af4-cf2c493652e9.png" alt="artem_turlenko profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/artem_turlenko" class="crayons-story__secondary fw-medium m:hidden"> Artem Turlenko </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2296808" aria-controls="story-author-preview-content-2296808" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Artem Turlenko profile details"> Artem Turlenko </button> <div id="story-author-preview-content-2296808" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/artem_turlenko" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2845949%2F3ba98e1a-9c3b-4c0e-8af4-cf2c493652e9.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Artem Turlenko</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2845949,"className":"User","name":"Artem Turlenko"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2845949"></div> </div> </div> </div> </div> <a href="https://dev.to/artem_turlenko/reactive-forms-vs-template-driven-forms-which-to-choose-and-why-3np7" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-25T10:03:33Z">Feb 25</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740477813"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/artem_turlenko/reactive-forms-vs-template-driven-forms-which-to-choose-and-why-3np7" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff3s9kw3ihwoqi8l7wcxu.png" id="article-link-2296808"> 📚 Reactive Forms vs Template-Driven Forms: Which to Choose and Why </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/artem_turlenko/reactive-forms-vs-template-driven-forms-which-to-choose-and-why-3np7#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 📚 Reactive Forms vs Template-Driven Forms: Which to Choose and Why"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aj4pq77ux3e9myeigniq70mucrf74uua" class="crayons-icon"><title id="aj4pq77ux3e9myeigniq70mucrf74uua">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2296808" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2296808" data-article-author-id="2845949" aria-label="Save post 📚 Reactive Forms vs Template-Driven Forms: Which to Choose and Why to reading list" title="Save post 📚 Reactive Forms vs Template-Driven Forms: Which to Choose and Why to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2296032" data-content-user-id="242747"> <a href="https://dev.to/mrgrigri/angular-konami-service-2fjc" aria-labelledby="article-link-2296032" class="crayons-story__hidden-navigation-link">Angular Konami Service</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/mrgrigri" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F242747%2Fcd2ea9b2-07c2-4ec2-b1cb-189870ade4ee.png" alt="mrgrigri profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/mrgrigri" class="crayons-story__secondary fw-medium m:hidden"> Michael Richins </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2296032" aria-controls="story-author-preview-content-2296032" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Michael Richins profile details"> Michael Richins </button> <div id="story-author-preview-content-2296032" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/mrgrigri" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F242747%2Fcd2ea9b2-07c2-4ec2-b1cb-189870ade4ee.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Michael Richins</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":242747,"className":"User","name":"Michael Richins"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="242747"></div> </div> </div> </div> </div> <a href="https://dev.to/mrgrigri/angular-konami-service-2fjc" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-24T22:08:59Z">Feb 24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740434939"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/mrgrigri/angular-konami-service-2fjc" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9w03dvdglt3hrp7r6w76.jpg" id="article-link-2296032"> Angular Konami Service </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/konami"><span class="crayons-tag__prefix">#</span>konami</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/mrgrigri/angular-konami-service-2fjc#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Angular Konami Service"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aatpz86e1k4yyklmxnj6w1dpk95hkbc6" class="crayons-icon"><title id="aatpz86e1k4yyklmxnj6w1dpk95hkbc6">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2296032" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2296032" data-article-author-id="242747" aria-label="Save post Angular Konami Service to reading list" title="Save post Angular Konami Service to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2295025" data-content-user-id="2845949"> <a href="https://dev.to/artem_turlenko/the-role-of-observables-in-angular-and-how-to-use-them-effectively-4222" aria-labelledby="article-link-2295025" class="crayons-story__hidden-navigation-link">📚 The Role of Observables in Angular and How to Use Them Effectively</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/artem_turlenko" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2845949%2F3ba98e1a-9c3b-4c0e-8af4-cf2c493652e9.png" alt="artem_turlenko profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/artem_turlenko" class="crayons-story__secondary fw-medium m:hidden"> Artem Turlenko </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2295025" aria-controls="story-author-preview-content-2295025" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Artem Turlenko profile details"> Artem Turlenko </button> <div id="story-author-preview-content-2295025" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/artem_turlenko" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2845949%2F3ba98e1a-9c3b-4c0e-8af4-cf2c493652e9.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Artem Turlenko</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2845949,"className":"User","name":"Artem Turlenko"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2845949"></div> </div> </div> </div> </div> <a href="https://dev.to/artem_turlenko/the-role-of-observables-in-angular-and-how-to-use-them-effectively-4222" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-24T09:08:59Z">Feb 24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740388139"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/artem_turlenko/the-role-of-observables-in-angular-and-how-to-use-them-effectively-4222" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftortbxsqkbsxz1s2w842.png" id="article-link-2295025"> 📚 The Role of Observables in Angular and How to Use Them Effectively </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(70, 13, 121, 0.10); --tag-prefix: #460D79; --tag-bg-hover: rgba(70, 13, 121, 0.10); --tag-prefix-hover: #460D79; " href="/t/rxjs"><span class="crayons-tag__prefix">#</span>rxjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/observables"><span class="crayons-tag__prefix">#</span>observables</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/artem_turlenko/the-role-of-observables-in-angular-and-how-to-use-them-effectively-4222#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 📚 The Role of Observables in Angular and How to Use Them Effectively"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahzv7qhdw47pdwmlwdxqd0j1nrc8dwig" class="crayons-icon"><title id="ahzv7qhdw47pdwmlwdxqd0j1nrc8dwig">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2295025" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2295025" data-article-author-id="2845949" aria-label="Save post 📚 The Role of Observables in Angular and How to Use Them Effectively to reading list" title="Save post 📚 The Role of Observables in Angular and How to Use Them Effectively to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2294981" data-content-user-id="826775"> <a href="https://dev.to/renukapatil/signals-in-angular-a-new-reactive-approach-29j9" aria-labelledby="article-link-2294981" class="crayons-story__hidden-navigation-link">Signals in Angular: A New Reactive Approach</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/renukapatil" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F826775%2F6659643e-37ae-48eb-a78c-8c138dbca295.jpg" alt="renukapatil profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/renukapatil" class="crayons-story__secondary fw-medium m:hidden"> Renuka Patil </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2294981" aria-controls="story-author-preview-content-2294981" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Renuka Patil profile details"> Renuka Patil </button> <div id="story-author-preview-content-2294981" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/renukapatil" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F826775%2F6659643e-37ae-48eb-a78c-8c138dbca295.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Renuka Patil</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":826775,"className":"User","name":"Renuka Patil"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="826775"></div> </div> </div> </div> </div> <a href="https://dev.to/renukapatil/signals-in-angular-a-new-reactive-approach-29j9" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-24T08:42:31Z">Feb 24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740386551"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/renukapatil/signals-in-angular-a-new-reactive-approach-29j9" data-preload-image="" id="article-link-2294981"> Signals in Angular: A New Reactive Approach </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/renukapatil/signals-in-angular-a-new-reactive-approach-29j9#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Signals in Angular: A New Reactive Approach"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9p72zvs3cyc111pekq9j8r5pbjjib68" class="crayons-icon"><title id="a9p72zvs3cyc111pekq9j8r5pbjjib68">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2294981" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2294981" data-article-author-id="826775" aria-label="Save post Signals in Angular: A New Reactive Approach to reading list" title="Save post Signals in Angular: A New Reactive Approach to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2291448" data-content-user-id="1738408"> <a href="https://dev.to/midhul/angular-back-button-made-easy-with-ngx-navigate-back-75e" aria-labelledby="article-link-2291448" class="crayons-story__hidden-navigation-link">Angular Back Button Made Easy with ngx-navigate-back</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/midhul" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1738408%2Fc911f7e5-e158-4185-a055-49b6949f9db4.jpg" alt="midhul profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/midhul" class="crayons-story__secondary fw-medium m:hidden"> Midhul P </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2291448" aria-controls="story-author-preview-content-2291448" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Midhul P profile details"> Midhul P </button> <div id="story-author-preview-content-2291448" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/midhul" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1738408%2Fc911f7e5-e158-4185-a055-49b6949f9db4.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Midhul P</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1738408,"className":"User","name":"Midhul P"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1738408"></div> </div> </div> </div> </div> <a href="https://dev.to/midhul/angular-back-button-made-easy-with-ngx-navigate-back-75e" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-24T05:34:50Z">Feb 24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740375290"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/midhul/angular-back-button-made-easy-with-ngx-navigate-back-75e" data-preload-image="" id="article-link-2291448"> Angular Back Button Made Easy with ngx-navigate-back </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/midhul/angular-back-button-made-easy-with-ngx-navigate-back-75e#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Angular Back Button Made Easy with ngx-navigate-back"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3zh1bnz6hqsrwrtb0db0b02lyadpppv" class="crayons-icon"><title id="a3zh1bnz6hqsrwrtb0db0b02lyadpppv">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2291448" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2291448" data-article-author-id="1738408" aria-label="Save post Angular Back Button Made Easy with ngx-navigate-back to reading list" title="Save post Angular Back Button Made Easy with ngx-navigate-back to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2293691" data-content-user-id="2895201"> <a href="https://dev.to/artstesh/getting-started-with-artsteshpostboy-simplifying-event-management-in-angular-mb3" aria-labelledby="article-link-2293691" class="crayons-story__hidden-navigation-link">Getting Started with @artstesh/postboy: Simplifying Event Management in Angular</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/artstesh" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2895201%2F7abb7a4b-789f-4c90-aecf-190a6b87227f.png" alt="artstesh profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/artstesh" class="crayons-story__secondary fw-medium m:hidden"> Art Stesh </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2293691" aria-controls="story-author-preview-content-2293691" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Art Stesh profile details"> Art Stesh </button> <div id="story-author-preview-content-2293691" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/artstesh" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2895201%2F7abb7a4b-789f-4c90-aecf-190a6b87227f.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Art Stesh</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2895201,"className":"User","name":"Art Stesh"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2895201"></div> </div> </div> </div> </div> <a href="https://dev.to/artstesh/getting-started-with-artsteshpostboy-simplifying-event-management-in-angular-mb3" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-23T07:27:59Z">Feb 23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740295679"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/artstesh/getting-started-with-artsteshpostboy-simplifying-event-management-in-angular-mb3" data-preload-image="" id="article-link-2293691"> Getting Started with @artstesh/postboy: Simplifying Event Management in Angular </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(70, 13, 121, 0.10); --tag-prefix: #460D79; --tag-bg-hover: rgba(70, 13, 121, 0.10); --tag-prefix-hover: #460D79; " href="/t/rxjs"><span class="crayons-tag__prefix">#</span>rxjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(42, 49, 57, 0.10); --tag-prefix: #2a3139; --tag-bg-hover: rgba(42, 49, 57, 0.10); --tag-prefix-hover: #2a3139; " href="/t/eventdriven"><span class="crayons-tag__prefix">#</span>eventdriven</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/artstesh/getting-started-with-artsteshpostboy-simplifying-event-management-in-angular-mb3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Getting Started with @artstesh/postboy: Simplifying Event Management in Angular"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahx6g2souaw5u0g1rogwipnimmpnqq1j" class="crayons-icon"><title id="ahx6g2souaw5u0g1rogwipnimmpnqq1j">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2293691" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2293691" data-article-author-id="2895201" aria-label="Save post Getting Started with @artstesh/postboy: Simplifying Event Management in Angular to reading list" title="Save post Getting Started with @artstesh/postboy: Simplifying Event Management in Angular to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2291566" data-content-user-id="898395"> <a href="https://dev.to/fndme/preventing-real-service-calls-in-tests-a-clean-approach-with-angular-3d8p" aria-labelledby="article-link-2291566" class="crayons-story__hidden-navigation-link">Preventing Real Service Calls in Tests: A Clean Approach with Angular</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/fndme" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F898395%2F1cbbc65c-0771-4d71-983b-b4e197306e1a.jpeg" alt="fndme profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/fndme" class="crayons-story__secondary fw-medium m:hidden"> Gabriel Luis Freitas </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2291566" aria-controls="story-author-preview-content-2291566" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Gabriel Luis Freitas profile details"> Gabriel Luis Freitas </button> <div id="story-author-preview-content-2291566" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/fndme" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F898395%2F1cbbc65c-0771-4d71-983b-b4e197306e1a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Gabriel Luis Freitas</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":898395,"className":"User","name":"Gabriel Luis Freitas"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="898395"></div> </div> </div> </div> </div> <a href="https://dev.to/fndme/preventing-real-service-calls-in-tests-a-clean-approach-with-angular-3d8p" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-21T14:34:29Z">Feb 21</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740148469"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/fndme/preventing-real-service-calls-in-tests-a-clean-approach-with-angular-3d8p" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm5ydsqtcsh0lkf2a6ut9.jpg" id="article-link-2291566"> Preventing Real Service Calls in Tests: A Clean Approach with Angular </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(151, 37, 234, 0.10); --tag-prefix: #9725ea; --tag-bg-hover: rgba(151, 37, 234, 0.10); --tag-prefix-hover: #9725ea; " href="/t/api"><span class="crayons-tag__prefix">#</span>api</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(1, 155, 101, 0.10); --tag-prefix: #019b65; --tag-bg-hover: rgba(1, 155, 101, 0.10); --tag-prefix-hover: #019b65; " href="/t/testing"><span class="crayons-tag__prefix">#</span>testing</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/fndme/preventing-real-service-calls-in-tests-a-clean-approach-with-angular-3d8p#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Preventing Real Service Calls in Tests: A Clean Approach with Angular"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5od7p21jb32azpb66wo0311eca760d4" class="crayons-icon"><title id="a5od7p21jb32azpb66wo0311eca760d4">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2291566" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2291566" data-article-author-id="898395" aria-label="Save post Preventing Real Service Calls in Tests: A Clean Approach with Angular to reading list" title="Save post Preventing Real Service Calls in Tests: A Clean Approach with Angular to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2297209" data-content-user-id="2896560"> <a href="https://dev.to/jean_lucas/handling-errors-in-typescript-why-use-unknown-in-catch-e-unknown-1aji" aria-labelledby="article-link-2297209" class="crayons-story__hidden-navigation-link">Handling Errors in TypeScript: Why Use unknown in catch (e: unknown)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/jean_lucas" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2896560%2Fd8088d9b-32fe-4097-acc7-27f1ba3d7354.jpg" alt="jean_lucas profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/jean_lucas" class="crayons-story__secondary fw-medium m:hidden"> Jean Lucas </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2297209" aria-controls="story-author-preview-content-2297209" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Jean Lucas profile details"> Jean Lucas </button> <div id="story-author-preview-content-2297209" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/jean_lucas" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2896560%2Fd8088d9b-32fe-4097-acc7-27f1ba3d7354.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Jean Lucas</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2896560,"className":"User","name":"Jean Lucas"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2896560"></div> </div> </div> </div> </div> <a href="https://dev.to/jean_lucas/handling-errors-in-typescript-why-use-unknown-in-catch-e-unknown-1aji" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-25T12:31:14Z">Feb 25</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740486674"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/jean_lucas/handling-errors-in-typescript-why-use-unknown-in-catch-e-unknown-1aji" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7vjf3uot6emwghrz2nad.png" id="article-link-2297209"> Handling Errors in TypeScript: Why Use unknown in catch (e: unknown) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(61, 136, 54, 0.10); --tag-prefix: #3d8836; --tag-bg-hover: rgba(61, 136, 54, 0.10); --tag-prefix-hover: #3d8836; " href="/t/node"><span class="crayons-tag__prefix">#</span>node</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/jean_lucas/handling-errors-in-typescript-why-use-unknown-in-catch-e-unknown-1aji" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2297209" aria-label="Add a comment to post - Handling Errors in TypeScript: Why Use unknown in catch (e: unknown)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/jean_lucas/handling-errors-in-typescript-why-use-unknown-in-catch-e-unknown-1aji#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Handling Errors in TypeScript: Why Use unknown in catch (e: unknown)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8cmip94b3acofrt1ht7i9kd8mnxbox4" class="crayons-icon"><title id="a8cmip94b3acofrt1ht7i9kd8mnxbox4">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2297209" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2297209" data-article-author-id="2896560" aria-label="Save post Handling Errors in TypeScript: Why Use unknown in catch (e: unknown) to reading list" title="Save post Handling Errors in TypeScript: Why Use unknown in catch (e: unknown) to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2288788" data-content-user-id="1174537"> <a href="https://dev.to/coding_crossbow/template-driven-and-reactive-forms-and-validations-in-angular-1ocd" aria-labelledby="article-link-2288788" class="crayons-story__hidden-navigation-link">Template-driven and Reactive forms and validations in Angular</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/coding_crossbow" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1174537%2Fecf55acb-7e8e-4227-a0fc-027c305a1c6d.png" alt="coding_crossbow profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/coding_crossbow" class="crayons-story__secondary fw-medium m:hidden"> coding crossbow </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2288788" aria-controls="story-author-preview-content-2288788" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="coding crossbow profile details"> coding crossbow </button> <div id="story-author-preview-content-2288788" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/coding_crossbow" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1174537%2Fecf55acb-7e8e-4227-a0fc-027c305a1c6d.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">coding crossbow</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1174537,"className":"User","name":"coding crossbow"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1174537"></div> </div> </div> </div> </div> <a href="https://dev.to/coding_crossbow/template-driven-and-reactive-forms-and-validations-in-angular-1ocd" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-20T04:13:29Z">Feb 20</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740024809"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/coding_crossbow/template-driven-and-reactive-forms-and-validations-in-angular-1ocd" data-preload-image="" id="article-link-2288788"> Template-driven and Reactive forms and validations in Angular </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/coding_crossbow/template-driven-and-reactive-forms-and-validations-in-angular-1ocd#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Template-driven and Reactive forms and validations in Angular"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8udkmp650jwfy0f4z2joanjzr5nxedj" class="crayons-icon"><title id="a8udkmp650jwfy0f4z2joanjzr5nxedj">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2288788" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2288788" data-article-author-id="1174537" aria-label="Save post Template-driven and Reactive forms and validations in Angular to reading list" title="Save post Template-driven and Reactive forms and validations in Angular to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2287306" data-content-user-id="2822461"> <a href="https://dev.to/rating_rai_/what-are-templates-in-angular-119i" aria-labelledby="article-link-2287306" class="crayons-story__hidden-navigation-link">What are templates in Angular?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/rating_rai_" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2822461%2Fe6ab5cca-e21d-4f88-b7db-57ef98738e63.jpg" alt="rating_rai_ profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/rating_rai_" class="crayons-story__secondary fw-medium m:hidden"> Rating Rai </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2287306" aria-controls="story-author-preview-content-2287306" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Rating Rai profile details"> Rating Rai </button> <div id="story-author-preview-content-2287306" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/rating_rai_" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2822461%2Fe6ab5cca-e21d-4f88-b7db-57ef98738e63.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Rating Rai</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2822461,"className":"User","name":"Rating Rai"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2822461"></div> </div> </div> </div> </div> <a href="https://dev.to/rating_rai_/what-are-templates-in-angular-119i" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-19T08:42:30Z">Feb 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739954550"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/rating_rai_/what-are-templates-in-angular-119i" data-preload-image="" id="article-link-2287306"> What are templates in Angular? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/development"><span class="crayons-tag__prefix">#</span>development</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/developer"><span class="crayons-tag__prefix">#</span>developer</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/rating_rai_/what-are-templates-in-angular-119i#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - What are templates in Angular?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akfv828iz18to1vpjn3q9vzh97f06ton" class="crayons-icon"><title id="akfv828iz18to1vpjn3q9vzh97f06ton">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2287306" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2287306" data-article-author-id="2822461" aria-label="Save post What are templates in Angular? to reading list" title="Save post What are templates in Angular? to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2287133" data-content-user-id="2882165"> <a href="https://dev.to/webbies/getting-started-with-keycloak-running-your-first-instance-18fd" aria-labelledby="article-link-2287133" class="crayons-story__hidden-navigation-link">Getting Started with Keycloak: Running Your First Instance</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/webbies" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2882165%2F12667327-bf71-492f-b231-576b498b2f96.png" alt="webbies profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/webbies" class="crayons-story__secondary fw-medium m:hidden"> Webbies </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2287133" aria-controls="story-author-preview-content-2287133" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Webbies profile details"> Webbies </button> <div id="story-author-preview-content-2287133" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/webbies" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2882165%2F12667327-bf71-492f-b231-576b498b2f96.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Webbies</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2882165,"className":"User","name":"Webbies"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2882165"></div> </div> </div> </div> </div> <a href="https://dev.to/webbies/getting-started-with-keycloak-running-your-first-instance-18fd" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-19T06:35:20Z">Feb 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739946920"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/webbies/getting-started-with-keycloak-running-your-first-instance-18fd" data-preload-image="" id="article-link-2287133"> Getting Started with Keycloak: Running Your First Instance </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/keycloak"><span class="crayons-tag__prefix">#</span>keycloak</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(29, 99, 237, 0.10); --tag-prefix: #1D63ED; --tag-bg-hover: rgba(29, 99, 237, 0.10); --tag-prefix-hover: #1D63ED; " href="/t/docker"><span class="crayons-tag__prefix">#</span>docker</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/springboot"><span class="crayons-tag__prefix">#</span>springboot</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/webbies/getting-started-with-keycloak-running-your-first-instance-18fd#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Getting Started with Keycloak: Running Your First Instance"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="arofgzrh7v5htqutst5dlby90h3ccfs6" class="crayons-icon"><title id="arofgzrh7v5htqutst5dlby90h3ccfs6">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2287133" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2287133" data-article-author-id="2882165" aria-label="Save post Getting Started with Keycloak: Running Your First Instance to reading list" title="Save post Getting Started with Keycloak: Running Your First Instance to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1994665" data-content-user-id="1120414"> <a href="https://dev.to/marialurdes_dehtiarenko_/tips-for-updating-your-angular-project-from-version-6-to-16-boom-224i" aria-labelledby="article-link-1994665" class="crayons-story__hidden-navigation-link">Tips for Updating Your Angular Project: From Version 6 to 16 – BOOM! 🚀🔥🎯</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/marialurdes_dehtiarenko_" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1120414%2F0781c205-132d-4ff6-bd21-c33448f6b2d0.jpg" alt="marialurdes_dehtiarenko_ profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/marialurdes_dehtiarenko_" class="crayons-story__secondary fw-medium m:hidden"> Maria-Lurdes Dehtiarenko </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1994665" aria-controls="story-author-preview-content-1994665" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Maria-Lurdes Dehtiarenko profile details"> Maria-Lurdes Dehtiarenko </button> <div id="story-author-preview-content-1994665" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/marialurdes_dehtiarenko_" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1120414%2F0781c205-132d-4ff6-bd21-c33448f6b2d0.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Maria-Lurdes Dehtiarenko</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1120414,"className":"User","name":"Maria-Lurdes Dehtiarenko"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1120414"></div> </div> </div> </div> </div> <a href="https://dev.to/marialurdes_dehtiarenko_/tips-for-updating-your-angular-project-from-version-6-to-16-boom-224i" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-18T09:10:07Z">Feb 18</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739869807"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/marialurdes_dehtiarenko_/tips-for-updating-your-angular-project-from-version-6-to-16-boom-224i" data-preload-image="" id="article-link-1994665"> Tips for Updating Your Angular Project: From Version 6 to 16 – BOOM! 🚀🔥🎯 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/marialurdes_dehtiarenko_/tips-for-updating-your-angular-project-from-version-6-to-16-boom-224i#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Tips for Updating Your Angular Project: From Version 6 to 16 – BOOM! 🚀🔥🎯"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akfhpxf0og9d61l66rctctnvmktyjkuz" class="crayons-icon"><title id="akfhpxf0og9d61l66rctctnvmktyjkuz">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-1994665" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="1994665" data-article-author-id="1120414" aria-label="Save post Tips for Updating Your Angular Project: From Version 6 to 16 – BOOM! 🚀🔥🎯 to reading list" title="Save post Tips for Updating Your Angular Project: From Version 6 to 16 – BOOM! 🚀🔥🎯 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2288613" data-content-user-id="2872491"> <a href="https://dev.to/benjamin_duroule_4a74f5f0/en-how-angular-15-marked-a-major-shift-in-the-frameworks-evolution-40a3" aria-labelledby="article-link-2288613" class="crayons-story__hidden-navigation-link">How Angular 15+ Marked a Major Shift in the Framework’s Evolution</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/benjamin_duroule_4a74f5f0" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2872491%2Fed2376e5-0e8e-4a15-bf00-f400744bd4ac.jpg" alt="benjamin_duroule_4a74f5f0 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/benjamin_duroule_4a74f5f0" class="crayons-story__secondary fw-medium m:hidden"> benjamin duroule </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2288613" aria-controls="story-author-preview-content-2288613" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="benjamin duroule profile details"> benjamin duroule </button> <div id="story-author-preview-content-2288613" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/benjamin_duroule_4a74f5f0" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2872491%2Fed2376e5-0e8e-4a15-bf00-f400744bd4ac.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">benjamin duroule</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2872491,"className":"User","name":"benjamin duroule"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2872491"></div> </div> </div> </div> </div> <a href="https://dev.to/benjamin_duroule_4a74f5f0/en-how-angular-15-marked-a-major-shift-in-the-frameworks-evolution-40a3" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-20T01:09:46Z">Feb 20</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740013786"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/benjamin_duroule_4a74f5f0/en-how-angular-15-marked-a-major-shift-in-the-frameworks-evolution-40a3" data-preload-image="" id="article-link-2288613"> How Angular 15+ Marked a Major Shift in the Framework’s Evolution </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/benjamin_duroule_4a74f5f0/en-how-angular-15-marked-a-major-shift-in-the-frameworks-evolution-40a3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How Angular 15+ Marked a Major Shift in the Framework’s Evolution"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ame04r1jhaj1d9s3v2taw2f3fcwhsu1h" class="crayons-icon"><title id="ame04r1jhaj1d9s3v2taw2f3fcwhsu1h">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2288613" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2288613" data-article-author-id="2872491" aria-label="Save post How Angular 15+ Marked a Major Shift in the Framework’s Evolution to reading list" title="Save post How Angular 15+ Marked a Major Shift in the Framework’s Evolution to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2278229" data-content-user-id="839062"> <a href="https://dev.to/nurrehman/angular-in-2024-7-high-impact-features-that-will-supercharge-your-architecture-4cap" aria-labelledby="article-link-2278229" class="crayons-story__hidden-navigation-link">Angular in 2024: 7 High-Impact Features That Will Supercharge Your Architecture</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/nurrehman" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F839062%2F91f08487-9804-40f7-ac13-b27edad2564b.jpeg" alt="nurrehman profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/nurrehman" class="crayons-story__secondary fw-medium m:hidden"> Nadeem Ur-Rehman </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2278229" aria-controls="story-author-preview-content-2278229" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Nadeem Ur-Rehman profile details"> Nadeem Ur-Rehman </button> <div id="story-author-preview-content-2278229" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/nurrehman" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F839062%2F91f08487-9804-40f7-ac13-b27edad2564b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Nadeem Ur-Rehman</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":839062,"className":"User","name":"Nadeem Ur-Rehman"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="839062"></div> </div> </div> </div> </div> <a href="https://dev.to/nurrehman/angular-in-2024-7-high-impact-features-that-will-supercharge-your-architecture-4cap" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-14T17:58:56Z">Feb 14</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739555936"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/nurrehman/angular-in-2024-7-high-impact-features-that-will-supercharge-your-architecture-4cap" data-preload-image="" id="article-link-2278229"> Angular in 2024: 7 High-Impact Features That Will Supercharge Your Architecture </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/angularfeatures"><span class="crayons-tag__prefix">#</span>angularfeatures</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(235, 223, 55, 0.10); --tag-prefix: #ebdf37; --tag-bg-hover: rgba(235, 223, 55, 0.10); --tag-prefix-hover: #ebdf37; " href="/t/architecture"><span class="crayons-tag__prefix">#</span>architecture</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/angular2024"><span class="crayons-tag__prefix">#</span>angular2024</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/nurrehman/angular-in-2024-7-high-impact-features-that-will-supercharge-your-architecture-4cap#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Angular in 2024: 7 High-Impact Features That Will Supercharge Your Architecture"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ah57m98ptvl140njk4kt5g6xrjajjeo9" class="crayons-icon"><title id="ah57m98ptvl140njk4kt5g6xrjajjeo9">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2278229" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2278229" data-article-author-id="839062" aria-label="Save post Angular in 2024: 7 High-Impact Features That Will Supercharge Your Architecture to reading list" title="Save post Angular in 2024: 7 High-Impact Features That Will Supercharge Your Architecture to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2278267" data-content-user-id="839062"> <a href="https://dev.to/nurrehman/what-is-angulars-ng-container-and-ngtemplateoutlet-bbo" aria-labelledby="article-link-2278267" class="crayons-story__hidden-navigation-link">What is Angular’s ng-container and ngTemplateOutlet?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/nurrehman" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F839062%2F91f08487-9804-40f7-ac13-b27edad2564b.jpeg" alt="nurrehman profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/nurrehman" class="crayons-story__secondary fw-medium m:hidden"> Nadeem Ur-Rehman </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2278267" aria-controls="story-author-preview-content-2278267" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Nadeem Ur-Rehman profile details"> Nadeem Ur-Rehman </button> <div id="story-author-preview-content-2278267" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/nurrehman" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F839062%2F91f08487-9804-40f7-ac13-b27edad2564b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Nadeem Ur-Rehman</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":839062,"className":"User","name":"Nadeem Ur-Rehman"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="839062"></div> </div> </div> </div> </div> <a href="https://dev.to/nurrehman/what-is-angulars-ng-container-and-ngtemplateoutlet-bbo" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-14T18:14:30Z">Feb 14</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739556870"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/nurrehman/what-is-angulars-ng-container-and-ngtemplateoutlet-bbo" data-preload-image="" id="article-link-2278267"> What is Angular’s ng-container and ngTemplateOutlet? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/ngtemplateoutlet"><span class="crayons-tag__prefix">#</span>ngtemplateoutlet</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/resuablecomponent"><span class="crayons-tag__prefix">#</span>resuablecomponent</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/containers"><span class="crayons-tag__prefix">#</span>containers</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/nurrehman/what-is-angulars-ng-container-and-ngtemplateoutlet-bbo#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - What is Angular’s ng-container and ngTemplateOutlet?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="alc8gc0hj6t89iyo3wpkm4y9bnu2itl9" class="crayons-icon"><title id="alc8gc0hj6t89iyo3wpkm4y9bnu2itl9">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2278267" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2278267" data-article-author-id="839062" aria-label="Save post What is Angular’s ng-container and ngTemplateOutlet? to reading list" title="Save post What is Angular’s ng-container and ngTemplateOutlet? to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2278253" data-content-user-id="839062"> <a href="https://dev.to/nurrehman/angular-unit-testing-things-to-avoid-5i9" aria-labelledby="article-link-2278253" class="crayons-story__hidden-navigation-link">Angular Unit Testing: Things to Avoid</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/nurrehman" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F839062%2F91f08487-9804-40f7-ac13-b27edad2564b.jpeg" alt="nurrehman profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/nurrehman" class="crayons-story__secondary fw-medium m:hidden"> Nadeem Ur-Rehman </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2278253" aria-controls="story-author-preview-content-2278253" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Nadeem Ur-Rehman profile details"> Nadeem Ur-Rehman </button> <div id="story-author-preview-content-2278253" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/nurrehman" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F839062%2F91f08487-9804-40f7-ac13-b27edad2564b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Nadeem Ur-Rehman</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":839062,"className":"User","name":"Nadeem Ur-Rehman"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="839062"></div> </div> </div> </div> </div> <a href="https://dev.to/nurrehman/angular-unit-testing-things-to-avoid-5i9" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-14T18:07:51Z">Feb 14</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739556471"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/nurrehman/angular-unit-testing-things-to-avoid-5i9" data-preload-image="" id="article-link-2278253"> Angular Unit Testing: Things to Avoid </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/unittest"><span class="crayons-tag__prefix">#</span>unittest</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/jasmine"><span class="crayons-tag__prefix">#</span>jasmine</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/testbed"><span class="crayons-tag__prefix">#</span>testbed</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/nurrehman/angular-unit-testing-things-to-avoid-5i9#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Angular Unit Testing: Things to Avoid"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ar7u2shjjy43lyh5gzdr6stqo1j3v4wa" class="crayons-icon"><title id="ar7u2shjjy43lyh5gzdr6stqo1j3v4wa">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2278253" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2278253" data-article-author-id="839062" aria-label="Save post Angular Unit Testing: Things to Avoid to reading list" title="Save post Angular Unit Testing: Things to Avoid to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2278252" data-content-user-id="839062"> <a href="https://dev.to/nurrehman/boost-your-angular-skills-with-creational-design-patterns-5e18" aria-labelledby="article-link-2278252" class="crayons-story__hidden-navigation-link">Boost Your Angular Skills with Creational Design Patterns</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/nurrehman" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F839062%2F91f08487-9804-40f7-ac13-b27edad2564b.jpeg" alt="nurrehman profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/nurrehman" class="crayons-story__secondary fw-medium m:hidden"> Nadeem Ur-Rehman </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2278252" aria-controls="story-author-preview-content-2278252" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Nadeem Ur-Rehman profile details"> Nadeem Ur-Rehman </button> <div id="story-author-preview-content-2278252" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/nurrehman" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F839062%2F91f08487-9804-40f7-ac13-b27edad2564b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Nadeem Ur-Rehman</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":839062,"className":"User","name":"Nadeem Ur-Rehman"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="839062"></div> </div> </div> </div> </div> <a href="https://dev.to/nurrehman/boost-your-angular-skills-with-creational-design-patterns-5e18" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-14T18:06:30Z">Feb 14</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739556390"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/nurrehman/boost-your-angular-skills-with-creational-design-patterns-5e18" data-preload-image="" id="article-link-2278252"> Boost Your Angular Skills with Creational Design Patterns </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/designpatterns"><span class="crayons-tag__prefix">#</span>designpatterns</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/creationaldesignpatterns"><span class="crayons-tag__prefix">#</span>creationaldesignpatterns</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/dependencyinjection"><span class="crayons-tag__prefix">#</span>dependencyinjection</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/nurrehman/boost-your-angular-skills-with-creational-design-patterns-5e18#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Boost Your Angular Skills with Creational Design Patterns"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="asgqpjfvb0qlyr923rlluwy1n9ow2u0p" class="crayons-icon"><title id="asgqpjfvb0qlyr923rlluwy1n9ow2u0p">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2278252" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2278252" data-article-author-id="839062" aria-label="Save post Boost Your Angular Skills with Creational Design Patterns to reading list" title="Save post Boost Your Angular Skills with Creational Design Patterns to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2276203" data-content-user-id="2765449"> <a href="https://dev.to/davidongora/building-an-angular-component-library-57fn" aria-labelledby="article-link-2276203" class="crayons-story__hidden-navigation-link">Building an Angular Component Library</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/davidongora" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2765449%2F2351cf5d-0546-4f71-9661-893b711f5753.jpeg" alt="davidongora profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/davidongora" class="crayons-story__secondary fw-medium m:hidden"> David Ongora </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2276203" aria-controls="story-author-preview-content-2276203" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="David Ongora profile details"> David Ongora </button> <div id="story-author-preview-content-2276203" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/davidongora" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2765449%2F2351cf5d-0546-4f71-9661-893b711f5753.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">David Ongora</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2765449,"className":"User","name":"David Ongora"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2765449"></div> </div> </div> </div> </div> <a href="https://dev.to/davidongora/building-an-angular-component-library-57fn" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-13T18:17:04Z">Feb 13</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739470624"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/davidongora/building-an-angular-component-library-57fn" data-preload-image="" id="article-link-2276203"> Building an Angular Component Library </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(38, 190, 0, 0.10); --tag-prefix: #26BE00; --tag-bg-hover: rgba(38, 190, 0, 0.10); --tag-prefix-hover: #26BE00; " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/davidongora/building-an-angular-component-library-57fn#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Building an Angular Component Library"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5wqesu04i22wvobngpvvw87prcwzcxy" class="crayons-icon"><title id="a5wqesu04i22wvobngpvvw87prcwzcxy">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2276203" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2276203" data-article-author-id="2765449" aria-label="Save post Building an Angular Component Library to reading list" title="Save post Building an Angular Component Library to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2276002" data-content-user-id="2845949"> <a href="https://dev.to/artem_turlenko/why-angular-is-still-popular-in-2025-45j7" aria-labelledby="article-link-2276002" class="crayons-story__hidden-navigation-link">🌟 Why Angular is Still Popular in 2025?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/artem_turlenko" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2845949%2F3ba98e1a-9c3b-4c0e-8af4-cf2c493652e9.png" alt="artem_turlenko profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/artem_turlenko" class="crayons-story__secondary fw-medium m:hidden"> Artem Turlenko </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2276002" aria-controls="story-author-preview-content-2276002" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Artem Turlenko profile details"> Artem Turlenko </button> <div id="story-author-preview-content-2276002" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/artem_turlenko" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2845949%2F3ba98e1a-9c3b-4c0e-8af4-cf2c493652e9.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Artem Turlenko</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2845949,"className":"User","name":"Artem Turlenko"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2845949"></div> </div> </div> </div> </div> <a href="https://dev.to/artem_turlenko/why-angular-is-still-popular-in-2025-45j7" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-13T15:03:09Z">Feb 13</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739458989"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/artem_turlenko/why-angular-is-still-popular-in-2025-45j7" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqn2zuw8nbijjt9gn8jul.png" id="article-link-2276002"> 🌟 Why Angular is Still Popular in 2025? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/artem_turlenko/why-angular-is-still-popular-in-2025-45j7#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 🌟 Why Angular is Still Popular in 2025?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="archne4jo2e56tvoiuyonefb3oghrvbh" class="crayons-icon"><title id="archne4jo2e56tvoiuyonefb3oghrvbh">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2276002" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2276002" data-article-author-id="2845949" aria-label="Save post 🌟 Why Angular is Still Popular in 2025? to reading list" title="Save post 🌟 Why Angular is Still Popular in 2025? to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2281947" data-content-user-id="178622"> <a href="https://dev.to/oz/starting-a-modern-angular-application-34h6" aria-labelledby="article-link-2281947" class="crayons-story__hidden-navigation-link">Starting a Modern Angular Application</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/oz" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F178622%2F7fad92e1-b6ee-495e-8e86-dfb231a74e0f.jpg" alt="oz profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/oz" class="crayons-story__secondary fw-medium m:hidden"> Evgeniy OZ </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2281947" aria-controls="story-author-preview-content-2281947" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Evgeniy OZ profile details"> Evgeniy OZ </button> <div id="story-author-preview-content-2281947" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/oz" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F178622%2F7fad92e1-b6ee-495e-8e86-dfb231a74e0f.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Evgeniy OZ</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":178622,"className":"User","name":"Evgeniy OZ"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="178622"></div> </div> </div> </div> </div> <a href="https://dev.to/oz/starting-a-modern-angular-application-34h6" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-16T09:20:59Z">Feb 16</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739697659"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/oz/starting-a-modern-angular-application-34h6" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzbdpt6f4c7wx1snf6l5v.jpg" id="article-link-2281947"> Starting a Modern Angular Application </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/tailwindcss"><span class="crayons-tag__prefix">#</span>tailwindcss</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/nx"><span class="crayons-tag__prefix">#</span>nx</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/ssr"><span class="crayons-tag__prefix">#</span>ssr</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/oz/starting-a-modern-angular-application-34h6" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2281947" aria-label="Add a comment to post - Starting a Modern Angular Application"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/oz/starting-a-modern-angular-application-34h6#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Starting a Modern Angular Application"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aoivyngb2xajr8hi4xe6a4rij9vfoym0" class="crayons-icon"><title id="aoivyngb2xajr8hi4xe6a4rij9vfoym0">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 10 min read </small> <button type="button" id="article-save-button-2281947" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2281947" data-article-author-id="178622" aria-label="Save post Starting a Modern Angular Application to reading list" title="Save post Starting a Modern Angular Application to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2296670" data-content-user-id="583429"> <a href="https://dev.to/manthanank/managing-environment-variables-in-angular-40k0" aria-labelledby="article-link-2296670" class="crayons-story__hidden-navigation-link">Managing Environment Variables in Angular</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/manthanank" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F583429%2Faa97b3f4-f9ee-457d-afbf-e728ecc4b491.png" alt="manthanank profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/manthanank" class="crayons-story__secondary fw-medium m:hidden"> Manthan Ankolekar </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2296670" aria-controls="story-author-preview-content-2296670" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Manthan Ankolekar profile details"> Manthan Ankolekar </button> <div id="story-author-preview-content-2296670" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/manthanank" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F583429%2Faa97b3f4-f9ee-457d-afbf-e728ecc4b491.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Manthan Ankolekar</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":583429,"className":"User","name":"Manthan Ankolekar"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="583429"></div> </div> </div> </div> </div> <a href="https://dev.to/manthanank/managing-environment-variables-in-angular-40k0" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-25T08:22:43Z">Feb 25</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740471763"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/manthanank/managing-environment-variables-in-angular-40k0" data-preload-image="" id="article-link-2296670"> Managing Environment Variables in Angular </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/manthanank/managing-environment-variables-in-angular-40k0" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2296670" aria-label="Add a comment to post - Managing Environment Variables in Angular"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/manthanank/managing-environment-variables-in-angular-40k0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Managing Environment Variables in Angular"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acx707ms9i4ec8k2v5pr4m97eq2fu1ga" class="crayons-icon"><title id="acx707ms9i4ec8k2v5pr4m97eq2fu1ga">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2296670" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2296670" data-article-author-id="583429" aria-label="Save post Managing Environment Variables in Angular to reading list" title="Save post Managing Environment Variables in Angular to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2271989" data-content-user-id="116091"> <a href="https://dev.to/jesterxl/first-ui-story-in-angular-as-a-functional-dev-1ah4" aria-labelledby="article-link-2271989" class="crayons-story__hidden-navigation-link">First UI Story in Angular as a Functional Dev</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/jesterxl" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F116091%2F18731f66-f111-4032-84e5-3fde9be8d867.jpg" alt="jesterxl profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/jesterxl" class="crayons-story__secondary fw-medium m:hidden"> Jesse Warden </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2271989" aria-controls="story-author-preview-content-2271989" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Jesse Warden profile details"> Jesse Warden </button> <div id="story-author-preview-content-2271989" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/jesterxl" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F116091%2F18731f66-f111-4032-84e5-3fde9be8d867.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Jesse Warden</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":116091,"className":"User","name":"Jesse Warden"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="116091"></div> </div> </div> </div> </div> <a href="https://dev.to/jesterxl/first-ui-story-in-angular-as-a-functional-dev-1ah4" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-11T19:01:44Z">Feb 11</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739300504"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/jesterxl/first-ui-story-in-angular-as-a-functional-dev-1ah4" data-preload-image="" id="article-link-2271989"> First UI Story in Angular as a Functional Dev </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 241, 248, 0.10); --tag-prefix: #FFF1F8; --tag-bg-hover: rgba(255, 241, 248, 0.10); --tag-prefix-hover: #FFF1F8; " href="/t/functional"><span class="crayons-tag__prefix">#</span>functional</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/jesterxl/first-ui-story-in-angular-as-a-functional-dev-1ah4#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - First UI Story in Angular as a Functional Dev"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="add4zhydyvobcsa8rvx3cu82nxbsny9i" class="crayons-icon"><title id="add4zhydyvobcsa8rvx3cu82nxbsny9i">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2271989" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2271989" data-article-author-id="116091" aria-label="Save post First UI Story in Angular as a Functional Dev to reading list" title="Save post First UI Story in Angular as a Functional Dev to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2294203" data-content-user-id="1207481"> <a href="https://dev.to/brunoredes/projecao-de-conteudo-em-angular-fmg" aria-labelledby="article-link-2294203" class="crayons-story__hidden-navigation-link">Projeção de Conteúdo em Angular: O Guia para ng-content e ngTemplateOutlet</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/brunoredes" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1207481%2Fa579f816-9556-4ace-bac0-8d663d29ed90.jpeg" alt="brunoredes profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/brunoredes" class="crayons-story__secondary fw-medium m:hidden"> Bruno Donatelli </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2294203" aria-controls="story-author-preview-content-2294203" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Bruno Donatelli profile details"> Bruno Donatelli </button> <div id="story-author-preview-content-2294203" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/brunoredes" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1207481%2Fa579f816-9556-4ace-bac0-8d663d29ed90.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Bruno Donatelli</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1207481,"className":"User","name":"Bruno Donatelli"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1207481"></div> </div> </div> </div> </div> <a href="https://dev.to/brunoredes/projecao-de-conteudo-em-angular-fmg" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-24T13:00:00Z">Feb 24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1740402000"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/brunoredes/projecao-de-conteudo-em-angular-fmg" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fftwpslh1h1yt8rolite4.png" id="article-link-2294203"> Projeção de Conteúdo em Angular: O Guia para ng-content e ngTemplateOutlet </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/brunoredes/projecao-de-conteudo-em-angular-fmg" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2294203" aria-label="Add a comment to post - Projeção de Conteúdo em Angular: O Guia para ng-content e ngTemplateOutlet"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">4<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/brunoredes/projecao-de-conteudo-em-angular-fmg#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Projeção de Conteúdo em Angular: O Guia para ng-content e ngTemplateOutlet"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="adq8wdzt2ssaprc7kgkiewtn2l67gd9m" class="crayons-icon"><title id="adq8wdzt2ssaprc7kgkiewtn2l67gd9m">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2294203" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2294203" data-article-author-id="1207481" aria-label="Save post Projeção de Conteúdo em Angular: O Guia para ng-content e ngTemplateOutlet to reading list" title="Save post Projeção de Conteúdo em Angular: O Guia para ng-content e ngTemplateOutlet to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2271190" data-content-user-id="2846229"> <a href="https://dev.to/scorlet_mia/nextjs-vs-angular-which-is-the-best-choice-for-your-business-45ic" aria-labelledby="article-link-2271190" class="crayons-story__hidden-navigation-link">Next.js vs Angular: Which is the Best Choice for Your Business?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/scorlet_mia" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2846229%2F91f7745d-1d98-4e84-ac70-87a4c36c8e17.jpg" alt="scorlet_mia profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/scorlet_mia" class="crayons-story__secondary fw-medium m:hidden"> Scorlet Mia </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2271190" aria-controls="story-author-preview-content-2271190" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Scorlet Mia profile details"> Scorlet Mia </button> <div id="story-author-preview-content-2271190" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/scorlet_mia" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2846229%2F91f7745d-1d98-4e84-ac70-87a4c36c8e17.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Scorlet Mia</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2846229,"className":"User","name":"Scorlet Mia"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2846229"></div> </div> </div> </div> </div> <a href="https://dev.to/scorlet_mia/nextjs-vs-angular-which-is-the-best-choice-for-your-business-45ic" class="crayons-story__tertiary fs-xs"><time datetime="2025-02-11T11:25:56Z">Feb 11</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1739273156"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/scorlet_mia/nextjs-vs-angular-which-is-the-best-choice-for-your-business-45ic" data-preload-image="" id="article-link-2271190"> Next.js vs Angular: Which is the Best Choice for Your Business? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(230, 255, 251, 0.10); --tag-prefix: #E6FFFB; --tag-bg-hover: rgba(230, 255, 251, 0.10); --tag-prefix-hover: #E6FFFB; " href="/t/startup"><span class="crayons-tag__prefix">#</span>startup</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 102, 237, 0.10); --tag-prefix: #ff66ed; --tag-bg-hover: rgba(255, 102, 237, 0.10); --tag-prefix-hover: #ff66ed; " href="/t/learning"><span class="crayons-tag__prefix">#</span>learning</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/scorlet_mia/nextjs-vs-angular-which-is-the-best-choice-for-your-business-45ic#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Next.js vs Angular: Which is the Best Choice for Your Business?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1c1ekman3bpkn5mojl3b0ry45xxsprb" class="crayons-icon"><title id="a1c1ekman3bpkn5mojl3b0ry45xxsprb">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2271190" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2271190" data-article-author-id="2846229" aria-label="Save post Next.js vs Angular: Which is the Best Choice for Your Business? to reading list" title="Save post Next.js vs Angular: Which is the Best Choice for Your Business? to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="placeholder-div"></div> <div class="single-article-small-pic" id="article-index-hidden-div" style="display:none"></div> </div> <div class="loading-articles" id="loading-articles"> loading... </div> </main> <div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right"> <div class="sidebar-bg" id="sidebar-bg-right"></div> <aside class="side-bar sidebar-additional showing" id="sidebar-additional"> <div class="widget"> <header> <h4>trending guides/resources</h4> </header> <div class="widget-body"> <div class="widget-link-list"> <a class="crayons-link crayons-link--contentful" href="/manthanank/setting-up-tailwind-css-40-in-angular-v191-a-step-by-step-guide-258m"> Setting Up Tailwind CSS 4.0 in Angular v19.1: A Step-by-Step Guide </a> <a class="crayons-link crayons-link--contentful" href="/this-is-angular/two-way-bind-a-signal-input-object-value-with-ngmodel-1c2a"> Two-way bind a Signal Input object value with [(ngModel)] </a> <a class="crayons-link crayons-link--contentful" href="/ayyash/upgrading-to-angular-version-19-13oc"> Upgrading to Angular version 19 </a> <a class="crayons-link crayons-link--contentful" href="/dimeloper/angular-19-updating-our-projects-and-harnessing-its-latest-features-3ppm"> Angular 19: Updating our projects and harnessing its latest features </a> <a class="crayons-link crayons-link--contentful" href="/seyedahmaddv/the-pros-and-cons-of-using-react-vs-vuejs-vs-angular-1ppk"> The Pros and Cons of Using React vs. Vue.js vs. Angular </a> <a class="crayons-link crayons-link--contentful" href="/this-is-angular/my-favorite-angular-setup-in-2025-3mbo"> My favorite Angular Setup in 2025 </a> <a class="crayons-link crayons-link--contentful" href="/renukapatil/angular-interview-questions-4i4k"> Angular interview questions </a> <a class="crayons-link crayons-link--contentful" href="/ngrx/announcing-ngrx-19-ngrx-signals-features-action-signals-and-more-2b35"> Announcing NgRx 19: NgRx Signals Features, Action Signals, and more! </a> <a class="crayons-link crayons-link--contentful" href="/0x2e_tech/7-essential-fix-it-guides-for-developers-4h3a"> 🚀 7 Essential Fix-It Guides for Developers </a> <a class="crayons-link crayons-link--contentful" href="/railsstudent/new-angular-19-feature-untagged-template-literals-in-expressions-2n7j"> New Angular 19 feature - Untagged template literals in expressions </a> <a class="crayons-link crayons-link--contentful" href="/ngmaterialdev/modify-angular-material-19-theme-with-scss-css-50gj"> Modify Angular Material 19 Theme with SCSS & CSS </a> <a class="crayons-link crayons-link--contentful" href="/endykaufman/converting-date-by-user-time-zone-in-nestjs-and-entering-and-displaying-date-in-angular-2195"> Converting date by user time zone in "NestJS", and entering and displaying date in "Angular" </a> <a class="crayons-link crayons-link--contentful" href="/nhannguyendevjs/exploring-angular-v19-resource-api-2k89"> Exploring Angular v19 Resource API </a> <a class="crayons-link crayons-link--contentful" href="/javeedishaq/hosting-options-for-a-full-stack-project-with-spring-boot-postgresql-and-angular-5bj0"> Hosting Options for a Full-Stack Project with Spring Boot, PostgreSQL, and Angular </a> <a class="crayons-link crayons-link--contentful" href="/railsstudent/build-a-language-detection-app-with-chromes-built-in-ai-in-angular-24kp"> Build a language detection app with Chrome's Language Detection API in Angular </a> <a class="crayons-link crayons-link--contentful" href="/nhannguyendevjs/deploying-your-angular-v19-site-to-vercel-1e20"> Deploying Your Angular v19 Site to Vercel </a> <a class="crayons-link crayons-link--contentful" href="/railsstudent/new-angular-19-feature-ngcomponentoutlet-componentinstance-120e"> New Angular 19 feature - ngComponentOutlet componentInstance </a> <a class="crayons-link crayons-link--contentful" href="/ngmaterialdev/updating-angular-material-18-to-19-p6l"> Updating Angular Material 18 to 19 </a> <a class="crayons-link crayons-link--contentful" href="/nhannguyendevjs/angular-19-introduces-the-experimental-resource-api-2e1k"> Angular 19 introduces the experimental Resource API </a> <a class="crayons-link crayons-link--contentful" href="/jaypansuriya/refresh-token-in-angular-143l"> Refresh Token in Angular </a> </div> </div> </div> </aside> </div> </div> <script src="https://assets.dev.to/assets/storiesList-b9c50cbd898a3a64258a3a49db1c531651b0a4a11937be35ed4651111802b5b5.js" defer="defer"></script> <script src="https://assets.dev.to/assets/followButtons-f2455d1f50a862b83fa006b1953e3a1644598781243cae25d3e75b13c04184fd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/tagFollows-25496b4e3bf8bec41c7881be6b330ac8e9aa612d1ce876863a984d934d839384.js" defer="defer"></script> <script src="https://assets.dev.to/assets/feedPreviewCards-8d16b0b656456a28c0a290f756cf6e21e19833111c4796f48c631bfea8323d51.js" defer="defer"></script> <script src="https://assets.dev.to/assets/hideBookmarkButtons-0cc08aac1c422e6b6f75e5284b5350215abf211b59fb3eb8d8a4ef85e205b607.js" defer="defer"></script> <script src="https://assets.dev.to/assets/drawerSliders-823098a874684cfb50f32368b8dd1c7854954b83a588b8b6cfaef1e8fd30d858.js" defer="defer"></script> <script src="https://assets.dev.to/assets/localizeArticleDates-70147c5c6bfe350b42e020ebb2a3dd37419d83978982b5a67b6389119bf162ac.js" defer="defer"></script> <div id="runtime-banner-container"></div> </div> </div> <footer id="footer" class="crayons-footer print-hidden"> <div id="footer-container" class="crayons-footer__container"> <style> .long-bb-body { max-height: calc(100vh - 200px); overflow: hidden; } .long-bb-bottom { height: 180px; background: linear-gradient(to top, var(--card-bg), transparent); margin-top: -180px; position:relative; z-index: 5; } </style> <div style="" data-display-unit data-id="146443" data-category-click="click" data-category-impression="impression" data-context-type="home" data-special="nothing" data-article-id="1665425" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/">Neon</a> for supporting our community. </p> </div> <p class="fs-s crayons-footer__description"> <a class="c-link c-link--branded fw-medium" aria-label="DEV Community Home" href="/">DEV Community</a> — A constructive and inclusive social network for software developers. With you every step of your journey. </p> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/"> Home </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/++"> DEV++ </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/pod"> Podcasts </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/videos"> Videos </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/tags"> Tags </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/help"> DEV Help </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="https://shop.forem.com/"> Forem Shop </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/advertise"> Advertise on DEV </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/challenges"> DEV Challenges </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/showcase"> DEV Showcase </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/about"> About </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/contact"> Contact </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/free-postgres-database-tier"> Free Postgres Database </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/software-comparisons"> Software comparisons </a> <span class="dot ml-2"></span> </li> </ul> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/code-of-conduct"> Code of Conduct </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/privacy"> Privacy Policy </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/terms"> Terms of use </a> <span class="dot ml-2"></span> </li> </ul> <div class="fs-s"> <p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p> <p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community <span title="copyright">©</span> 2016 - 2025.</p> </div> </div> </footer> <div id="snack-zone"></div> <div id="global-signup-modal" class="authentication-modal hidden"> <div class="authentication-modal__container"> <figure class="authentication-modal__image-container"> <img class="authentication-modal__image" src="https://media2.dev.to/dynamic/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" alt="DEV Community" loading="lazy" /> </figure> <div class="authentication-modal__content"> <p class="authentication-modal__description"> We're a place where coders share, stay up-to-date and grow their careers. </p> </div> <div class="authentication-modal__actions"> <a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant> Log in </a> <a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand js-global-signup-modal__create-account" aria-label="Create new account" data-no-instant> Create account </a> </div> </div> </div> <script src="https://assets.dev.to/assets/signupModalShortcuts-0b25469b985100a01e94cbd7fccaf7f0a4d776e129aac65c766aa32cb28ab29a.js" defer="defer"></script> <div id="cookie-consent"></div> <div id="i18n-translations" data-translations="{"en":{"core":{"add_comment":"Add comment","beta":"beta","comment":"Comment","copy_link":"Copy link","edit_profile":"Edit profile","follow":"Follow","follow_back":"Follow back","following":"Following","like":"Like","loading":"loading...","reaction":"Reaction","report_abuse":"Report abuse","search":"Search","success_settings":"Successfully updated settings.","counted_organization":{"one":"%{count} organization","other":"%{count} organizations"},"counted_user":{"one":"%{count} person","other":"%{count} people"},"not_following":"You're not following anyone","following_everyone":"You're following %{details} (everyone)","you_are_following":"You're following","and":"and"}}}"></div> <div id="reaction-category-resources" class="hidden" aria-hidden="true"> <img data-name="Like" data-slug="like" data-position="1" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> <img data-name="Unicorn" data-slug="unicorn" data-position="2" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> <img data-name="Exploding Head" data-slug="exploding_head" data-position="3" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> <img data-name="Raised Hands" data-slug="raised_hands" data-position="4" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> <img data-name="Fire" data-slug="fire" data-position="5" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </div> <script> var userSignedIn = false; if (document.readyState === 'complete' || document.readyState === 'interactive') { initAuth(); } else { document.addEventListener('DOMContentLoaded', initAuth); } function initAuth() { var paramToken = new URLSearchParams(window.location.search).get('jwt'); if (paramToken && !userSignedIn) { authenticateUser(paramToken); } else { var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'https://forem.com/auth_pass/iframe'; document.body.appendChild(iframe); window.addEventListener('message', function(event) { if (event.origin !== 'https://forem.com' && event.origin !== window.location.origin) { return; } var data = event.data; if (data.authenticated && !userSignedIn) { authenticateUser(data.token); } else if(data.authenticated && window.ReactNativeWebView && window.ReactNativeWebView.postMessage) { window.ReactNativeWebView.postMessage(JSON.stringify({ action: 'login', token: data.token, })); } }); } function authenticateUser(token) { fetch('/auth_pass/token_login', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getMetaContent('csrf-token'), }, body: JSON.stringify({ token: token }), }) .then(function(response) { return response.json(); }) .then(function(data) { if (data.success) { if (document.head.querySelector('meta[name="user-signed-in"][content="false"]')) { // Reload the page to update the user's state location.reload(); } } }) .catch(function(error) { console.error('Error during authentication:', error); }); } function getMetaContent(name) { var element = document.querySelector('meta[name="' + name + '"]'); return element ? element.getAttribute('content') : ''; } } </script> </body> </html>

CINXE.COM

Angular - DEV Community