{"id":12465,"date":"2026-04-30T10:12:22","date_gmt":"2026-04-30T04:42:22","guid":{"rendered":"https:\/\/www.scaler.com\/blog\/?p=12465"},"modified":"2026-07-28T11:22:41","modified_gmt":"2026-07-28T05:52:41","slug":"angular-roadmap-2026-complete-learning-path-from-basics-to-advanced","status":"publish","type":"post","link":"https:\/\/www.scaler.com\/blog\/angular-roadmap-2026-complete-learning-path-from-basics-to-advanced\/","title":{"rendered":"Angular Roadmap 2026: Complete Learning Path from Basics to Advanced"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Many people wonder if Angular is still used today. And why?&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Well, you\u2019ll be surprised by how much Angular is useful, especially in the current scenario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Angular is used in applications where the interface has multiple sections, forms, dashboards, and different user roles. In these kinds of apps, users are constantly interacting with data, submitting information, switching views, filtering results, and working across different parts of the system. A big reason for this is that Angular gives a fixed way of building things. It already defines how components, services, routing, and files are organized, so you\u2019re not figuring out structure from scratch every time. It also includes features like routing, form handling, and API communication within the framework itself, so you don\u2019t have to rely on multiple external libraries. This makes it easier to manage code when the application grows and when more developers are working on the same project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Recent versions have also changed how Angular works internally. Angular 21 has made signals a standard way to handle data updates in the UI, so changes are more predictable and easier to track. Zoneless setup removes extra overhead, which reduces bundle size and improves response time. Testing now uses Vitest by default instead of Karma, and the template syntax has been updated with things like @if and @for for better performance. There are also updates around server-side rendering with incremental hydration, and newer tools that support AI-based workflows by giving better context about the project. These changes make development more straightforward compared to older versions while keeping the same structured approach.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Feels like a lot to take in? Don\u2019t worry, this roadmap breaks it down step by step. You\u2019ll start with basics like TypeScript and core Angular concepts, then move into routing, APIs, and reactive patterns. You can take around 12-14 weeks for this, depending on your pace, and build alongside what you\u2019re learning, so things start making sense as you go.&nbsp;&nbsp;<\/p>\n\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Scaler Carousel<\/title>\n\n<!-- Plus Jakarta Sans Font -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&amp;display=swap\" rel=\"stylesheet\">\n<!-- Swiper CSS -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\">\n\n<style>\n.scaler-carousel {\n  font-family: 'Plus Jakarta Sans', sans-serif;\n  max-width: 900px;\n  margin: 24px auto;\n  padding: 0;\n  box-sizing: border-box;\n}\n.scaler-carousel *,\n.scaler-carousel *::before,\n.scaler-carousel *::after {\n  box-sizing: border-box;\n}\n\n\/* Header *\/\n.scaler-header {\n  text-align: center;\n  margin-bottom: 20px;\n}\n.scaler-header-title {\n  font-size: 22px;\n  font-weight: 700;\n  color: #1a1a2e;\n  margin: 0 0 6px;\n  line-height: 1.2;\n}\n.scaler-header-subtitle {\n  font-size: 14px;\n  color: #6b7280;\n  margin: 0;\n  font-weight: 500;\n}\n\n\/* Swiper *\/\n.swiper.scaler-swiper {\n  padding-bottom: 48px;\n}\n.scaler-swiper .swiper-slide {\n  height: auto;\n  display: flex;\n  align-items: stretch;\n}\n\/* Navigation arrows \u2014 styled to match the topics HorizontalScroll controls *\/\n.scaler-swiper .swiper-button-next,\n.scaler-swiper .swiper-button-prev {\n  width: 46px;\n  height: 46px;\n  border-radius: 8px;\n  background: #ffffff;\n  box-shadow: 0 8px 16px 0 rgba(50, 71, 102, 0.16);\n  top: calc(50% - 24px); \/* centre on the cards, ignoring the pagination space below *\/\n  transform: translateY(-50%);\n  margin-top: 0;\n}\n.scaler-swiper .swiper-button-prev { left: 10px; }\n.scaler-swiper .swiper-button-next { right: 10px; }\n\/* hide Swiper's default font-icon arrow and draw the topics chevron via a mask *\/\n.scaler-swiper .swiper-button-next::after,\n.scaler-swiper .swiper-button-prev::after {\n  content: \"\";\n  width: 20px;\n  height: 20px;\n  background-color: #61738e;\n  -webkit-mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5.313 16l10.688-10.688 10.688 10.688-1.938 1.875-7.438-7.438v16.25h-2.625v-16.25l-7.5 7.438z'\/%3E%3C\/svg%3E\") no-repeat center \/ contain;\n  mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5.313 16l10.688-10.688 10.688 10.688-1.938 1.875-7.438-7.438v16.25h-2.625v-16.25l-7.5 7.438z'\/%3E%3C\/svg%3E\") no-repeat center \/ contain;\n}\n.scaler-swiper .swiper-button-prev::after { transform: rotate(-90deg); }\n.scaler-swiper .swiper-button-next::after { transform: rotate(90deg); }\n.scaler-swiper .swiper-button-disabled {\n  opacity: 0.35;\n  pointer-events: none;\n}\n.scaler-swiper .swiper-pagination-bullet-active {\n  background: #255aad;\n}\n\n\/* Card *\/\n.scaler-card {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  width: 100%;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 16px;\n  padding: 24px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  transition: box-shadow 0.2s ease;\n}\n.scaler-card:hover {\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);\n}\n\n\/* NSDC badge *\/\n.scaler-badge {\n  display: inline-flex;\n  align-items: center;\n  align-self: flex-start;\n  background: #f3f4f6;\n  color: #111827;\n  font-size: 12px;\n  font-weight: 600;\n  padding: 4px 10px;\n  border-radius: 20px;\n  white-space: nowrap;\n  letter-spacing: 0.1px;\n}\n\n\/* Top: icon + title + description *\/\n.scaler-card-top {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  min-height: 100px;\n}\n.scaler-icon-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 64px;\n  height: 64px;\n  border-radius: 12px;\n  background: #f3f4f6;\n  color: #374151;\n  flex-shrink: 0;\n}\n.scaler-icon-wrap svg {\n  width: 26px;\n  height: 26px;\n}\n.scaler-card-top-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n.scaler-title {\n  font-size: 16px;\n  font-weight: 700;\n  color: #111827;\n  margin: 0;\n  line-height: 1.35;\n}\n.scaler-desc {\n  font-size: 13px;\n  color: #6b7280;\n  margin: 0;\n  line-height: 1.45;\n}\n\n\/* Stats row *\/\n.scaler-stats {\n  display: flex;\n  border-top: 1px solid #e5e7eb;\n  border-bottom: 1px solid #e5e7eb;\n  padding: 12px 0;\n}\n.scaler-stat {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  flex: 1;\n  min-width: 0;\n  text-align: center;\n}\n.scaler-stat:not(:last-child) {\n  border-right: 1px solid #d1d5db;\n}\n.scaler-stat-value {\n  font-size: 14px;\n  font-weight: 700;\n  color: #111827;\n  white-space: nowrap;\n}\n.scaler-stat-label {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n\/* Company logos *\/\n.scaler-logos {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: nowrap;\n}\n.scaler-company-logo {\n  height: 20px !important;\n  width: auto !important;\n  max-width: 70px;\n  object-fit: contain;\n  display: inline-block;\n}\n.scaler-logo-more {\n  font-size: 12px;\n  color: #9ca3af;\n  white-space: nowrap;\n}\n.scaler-logo-strip {\n  display: block;\n  width: 100% !important;\n  max-width: 100%;\n  min-width: 0;\n  height: auto !important;\n  object-fit: contain;\n}\n\n\/* CTA *\/\n.scaler-card-btns {\n  margin-top: auto;\n}\n.scaler-card-btns button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  border-radius: 10px;\n  background-color: #255aad;\n  color: #ffffff;\n  font-family: 'Plus Jakarta Sans', sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  text-decoration: none;\n  transition: opacity 0.15s ease;\n}\n.scaler-card-btns button:hover,\n.scaler-card-btns button:focus {\n  opacity: 0.88;\n  color: #ffffff;\n}\n.scaler-card-btns button svg {\n  flex-shrink: 0;\n}\n\n@media (max-width: 1000px) {\n  .scaler-carousel { max-width: 96vw; }\n}\n<\/style>\n\n\n<div class=\"scaler-carousel\">\n  <div class=\"scaler-header\">\n    <h2 class=\"scaler-header-title\"><span class=\"ez-toc-section\" id=\"transform-your-career\"><\/span>Transform Your Career<span class=\"ez-toc-section-end\"><\/span><\/h2>\n    <p class=\"scaler-header-subtitle\">Choose from our industry-leading programs designed for career success<\/p>\n  <\/div>\n\n  <div class=\"swiper scaler-swiper\">\n    <div class=\"swiper-wrapper\">\n\n      <!-- CARD 1 -->\n      <div class=\"swiper-slide\">\n        <div class=\"scaler-card\">\n          <div class=\"scaler-badge\">NSDC Certified<\/div>\n          <div class=\"scaler-card-top\">\n            <div class=\"scaler-icon-wrap\">\n              <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\n            <\/div>\n            <div class=\"scaler-card-top-content\">\n              <h3 class=\"scaler-title\">Modern Software and AI Engineering Program<\/h3>\n              <p class=\"scaler-desc\">Master full-stack development with AI integration<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"scaler-stats\">\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">12 Months<\/span><span class=\"scaler-stat-label\">Duration<\/span><\/div>\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">AI-Led<\/span><span class=\"scaler-stat-label\">Curriculum<\/span><\/div>\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">Career Support<\/span><span class=\"scaler-stat-label\">Support<\/span><\/div>\n          <\/div>\n          <div class=\"scaler-logos\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2f\/Google_2015_logo.svg\" alt=\"Google\" loading=\"lazy\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a9\/Amazon_logo.svg\" alt=\"Amazon\" loading=\"lazy\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/42\/Paytm_logo.png\" alt=\"Paytm\" loading=\"lazy\">\n            <span class=\"scaler-logo-more\">+1000 more<\/span>\n          <\/div>\n          <div class=\"scaler-card-btns\">\n            <button onclick=\"window.open('https:\/\/www.scaler.com\/academy\/', '_blank')\">\n              Go to Program\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8H13M13 8L9 4M13 8L9 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- CARD 2 -->\n      <div class=\"swiper-slide\">\n        <div class=\"scaler-card\">\n          <div class=\"scaler-badge\">NSDC Certified<\/div>\n          <div class=\"scaler-card-top\">\n            <div class=\"scaler-icon-wrap\">\n              <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5\"\/><path d=\"M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3\"\/><\/svg>\n            <\/div>\n            <div class=\"scaler-card-top-content\">\n              <h3 class=\"scaler-title\">Modern Data Science and ML with specialisation in AI<\/h3>\n              <p class=\"scaler-desc\">Advanced data science techniques with AI specialization<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"scaler-stats\">\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">12 Months<\/span><span class=\"scaler-stat-label\">Duration<\/span><\/div>\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">AI-Led<\/span><span class=\"scaler-stat-label\">Curriculum<\/span><\/div>\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">Career Support<\/span><span class=\"scaler-stat-label\">Support<\/span><\/div>\n          <\/div>\n          <div class=\"scaler-logos\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2f\/Google_2015_logo.svg\" alt=\"Google\" loading=\"lazy\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a9\/Amazon_logo.svg\" alt=\"Amazon\" loading=\"lazy\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/42\/Paytm_logo.png\" alt=\"Paytm\" loading=\"lazy\">\n            <span class=\"scaler-logo-more\">+1000 more<\/span>\n          <\/div>\n          <div class=\"scaler-card-btns\">\n            <button onclick=\"window.open('https:\/\/www.scaler.com\/data-science-course\/', '_blank')\">\n              Go to Program\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8H13M13 8L9 4M13 8L9 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- CARD 3 -->\n      <div class=\"swiper-slide\">\n        <div class=\"scaler-card\">\n          <div class=\"scaler-badge\">NSDC Certified<\/div>\n          <div class=\"scaler-card-top\">\n            <div class=\"scaler-icon-wrap\">\n              <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2L13.5 8.5L20 10L13.5 11.5L12 18L10.5 11.5L4 10L10.5 8.5L12 2Z\"\/><\/svg>\n            <\/div>\n            <div class=\"scaler-card-top-content\">\n              <h3 class=\"scaler-title\">Advanced AIML with Specialisation in Agentic AI<\/h3>\n              <p class=\"scaler-desc\">Deep dive into AIML with focus on Agentic systems<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"scaler-stats\">\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">12 Months<\/span><span class=\"scaler-stat-label\">Duration<\/span><\/div>\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">AI-Led<\/span><span class=\"scaler-stat-label\">Curriculum<\/span><\/div>\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">Career Support<\/span><span class=\"scaler-stat-label\">Support<\/span><\/div>\n          <\/div>\n          <div class=\"scaler-logos\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2f\/Google_2015_logo.svg\" alt=\"Google\" loading=\"lazy\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a9\/Amazon_logo.svg\" alt=\"Amazon\" loading=\"lazy\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/42\/Paytm_logo.png\" alt=\"Paytm\" loading=\"lazy\">\n            <span class=\"scaler-logo-more\">+1000 more<\/span>\n          <\/div>\n          <div class=\"scaler-card-btns\">\n            <button onclick=\"window.open('https:\/\/www.scaler.com\/ai-machine-learning-course\/', '_blank')\">\n              Go to Program\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8H13M13 8L9 4M13 8L9 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- CARD 4 -->\n      <div class=\"swiper-slide\">\n        <div class=\"scaler-card\">\n          <div class=\"scaler-badge\">NSDC Certified<\/div>\n          <div class=\"scaler-card-top\">\n            <div class=\"scaler-icon-wrap\">\n              <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\" \/>\n                <path d=\"M9.2 15.2a3 3 0 1 0 4.24-4.24\" \/>\n              <\/svg>\n            <\/div>\n            <div class=\"scaler-card-top-content\">\n              <h3 class=\"scaler-title\">DevOps, Cloud &#038; AI Platform Engineering<\/h3>\n              <p class=\"scaler-desc\">Build and manage AI-powered cloud infrastructure<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"scaler-stats\">\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">12 Months<\/span><span class=\"scaler-stat-label\">Duration<\/span><\/div>\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">AI-Led<\/span><span class=\"scaler-stat-label\">Curriculum<\/span><\/div>\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">Career Support<\/span><span class=\"scaler-stat-label\">Support<\/span><\/div>\n          <\/div>\n          <div class=\"scaler-logos\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2f\/Google_2015_logo.svg\" alt=\"Google\" loading=\"lazy\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a9\/Amazon_logo.svg\" alt=\"Amazon\" loading=\"lazy\">\n            <img decoding=\"async\" class=\"scaler-company-logo\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/42\/Paytm_logo.png\" alt=\"Paytm\" loading=\"lazy\">\n            <span class=\"scaler-logo-more\">+1000 more<\/span>\n          <\/div>\n          <div class=\"scaler-card-btns\">\n            <button onclick=\"window.open('https:\/\/www.scaler.com\/devops-course\/', '_blank')\">\n              Go to Program\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8H13M13 8L9 4M13 8L9 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- CARD 5 -->\n      <div class=\"swiper-slide\">\n        <div class=\"scaler-card\">\n          <div class=\"scaler-badge\">NSDC Certified<\/div>\n          <div class=\"scaler-card-top\">\n            <div class=\"scaler-icon-wrap\">\n              <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <line x1=\"3\" y1=\"22\" x2=\"21\" y2=\"22\" \/>\n                <line x1=\"6\" y1=\"18\" x2=\"6\" y2=\"11\" \/>\n                <line x1=\"10\" y1=\"18\" x2=\"10\" y2=\"11\" \/>\n                <line x1=\"14\" y1=\"18\" x2=\"14\" y2=\"11\" \/>\n                <line x1=\"18\" y1=\"18\" x2=\"18\" y2=\"11\" \/>\n                <polygon points=\"12 2 20 7 4 7\" \/>\n              <\/svg>\n            <\/div>\n            <div class=\"scaler-card-top-content\">\n              <h3 class=\"scaler-title\">AI Engineering Advanced Certification by IIT-Roorkee<\/h3>\n              <p class=\"scaler-desc\">Premier AI engineering certification from IIT-Roorkee<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"scaler-stats\">\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">3 Months<\/span><span class=\"scaler-stat-label\">Duration<\/span><\/div>\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">AI-Led<\/span><span class=\"scaler-stat-label\">Curriculum<\/span><\/div>\n            <div class=\"scaler-stat\"><span class=\"scaler-stat-value\">Career Support<\/span><span class=\"scaler-stat-label\">Support<\/span><\/div>\n          <\/div>\n          <div class=\"scaler-logos\">\n            <img decoding=\"async\" class=\"scaler-logo-strip\" src=\"https:\/\/scaler-blog-prod-wp-content.s3.ap-south-1.amazonaws.com\/wp-content\/uploads\/2026\/07\/08135139\/iitr-icons-strip.png\" alt=\"Program highlights\" loading=\"lazy\">\n          <\/div>\n          <div class=\"scaler-card-btns\">\n            <button onclick=\"window.open('https:\/\/www.scaler.com\/iit-roorkee-advanced-ai-engineering-course\/', '_blank')\">\n              Go to Program\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8H13M13 8L9 4M13 8L9 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Continue for remaining cards (6\u20138) using same pattern -->\n\n    <\/div>\n    <div class=\"swiper-button-next\"><\/div>\n    <div class=\"swiper-button-prev\"><\/div>\n    <div class=\"swiper-pagination\"><\/div>\n  <\/div>\n<\/div>\n\n<!-- Swiper.js -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  const pathParts = window.location.pathname.split(\"\/\").filter(Boolean);\n  const slug = pathParts[pathParts.length - 1] || \"\";\n  const readableSlug = encodeURIComponent(slug);\n  const buttons = document.querySelectorAll(\".scaler-card-btns button\");\n\n  buttons.forEach((btn) => {\n    const baseURL = btn.getAttribute(\"onclick\").match(\/'(.*?)'\/)[1];\n    if (!baseURL.includes(\"utm_source=\")) {\n      const separator = baseURL.includes(\"?\") ? \"&\" : \"?\";\n      const updatedURL = `${baseURL}${separator}utm_source=blog&utm_medium=program_carousel&utm_content=${readableSlug}`;\n      btn.setAttribute(\"onclick\", `window.open('${updatedURL}', '_blank')`);\n    }\n  });\n\n  new Swiper(\".scaler-swiper\", {\n    slidesPerView: 1,\n    spaceBetween: 28,\n    grabCursor: true,\n    navigation: { nextEl: \".swiper-button-next\", prevEl: \".swiper-button-prev\" },\n    pagination: { el: \".swiper-pagination\", dynamicBullets: true, clickable: true },\n    breakpoints: { 1000: { slidesPerView: 2 } },\n    keyboard: { enabled: true },\n  });\n});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"prerequisites-for-the-angular-roadmap\"><\/span><strong>Prerequisites for the Angular Roadmap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before you get into Angular, it helps if you\u2019ve at least seen how the frontend works. Not in a \u201cyou must know everything\u201d way, just enough to not feel lost.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Think basic stuff. How a page is structured, how styles are applied, how things respond when you click or type. If that already makes sense to you, even loosely, Angular won\u2019t feel as overwhelming when you start.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HTML, CSS &amp; JavaScript Fundamentals<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This one doesn\u2019t have to be too hard&nbsp; &#8211; You should be able to just write basic HTML, style it using CSS, and use JavaScript for simple interactions. This includes working with the DOM, handling events, and understanding how data changes on the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you are not familiar with these topics, then worry not, these tutorials can help you get started &#8211;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.scaler.com\/topics\/html\/\">HTML<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.scaler.com\/topics\/java\/\">Java&nbsp;<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.scaler.com\/topics\/css\/\">CSS<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>TypeScript Essentials<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Angular uses TypeScript by default, and that\u2019s why it becomes important for you to learn this topic here. Focus on variables, functions, objects, classes, and basic types. You don\u2019t need advanced concepts, but you should be able to read and write TypeScript fluently.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you aren\u2019t familiar with it yet, then do check out: <a href=\"https:\/\/www.scaler.com\/topics\/typescript\/\">TypeScript Tutorial<\/a><\/p>\n\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n    <!-- Source Sans Pro (topics font) -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Sans+3:wght@400;600;700&#038;display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\">\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\n\n    <style>\n      :root {\n        \/* topics design tokens (variables.scss) *\/\n        --scaler-primary: #005bb3;          \/* primary-color-80 *\/\n        --scaler-primary-30: #8acaff;       \/* primary-color-30 *\/\n        --scaler-brand-blue: #255aad;\n        --scaler-live: #ee001d;             \/* accent-v5-60 *\/\n        --scaler-live-bg: #ffe6e9;          \/* accent-v5-10 *\/\n        --scaler-card-bg: #ffffff;          \/* neutral-scale-0 *\/\n        --scaler-surface: #f4f6f9;          \/* neutral-scale-2 *\/\n        --scaler-text-primary: #1a2c47;     \/* neutral-scale-12 *\/\n        --scaler-text-secondary: #61738e;   \/* neutral-scale-9 *\/\n        --scaler-border: #d6dee5;           \/* neutral-scale-4 *\/\n        --scaler-radius: 16px;\n        --scaler-radius-sm: 8px;\n        --scaler-shadow: 0 8px 16px 0 rgba(50, 71, 102, 0.16);\n      }\n\n      .scaler-events-carousel * { box-sizing: border-box; }\n\n      .scaler-events-carousel {\n        font-family: \"Source Sans 3\", \"Source Sans Pro\", \"Roboto\", Arial, sans-serif;\n        padding: 24px;\n        position: relative;\n        width: 100%;\n      }\n      .scaler-events-carousel__inner {\n        max-width: 1000px;\n        margin: 0 auto;\n        position: relative;\n        width: 100%;\n      }\n\n      \/* Header \u2014 calendar icon + \"Live Masterclasses\" *\/\n      .scaler-events-header {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-bottom: 8px;\n        padding: 8px 0;\n      }\n      .scaler-events-header__icon { display: inline-flex; color: var(--scaler-text-primary); }\n      .scaler-events-header__icon svg { width: 24px; height: 24px; }\n      .scaler-events-header__title {\n        font-size: 18px;\n        font-weight: 700;\n        color: var(--scaler-text-primary);\n        line-height: 1.3;\n        margin: 0;\n      }\n\n      \/* Swiper wrap (holds side arrows) *\/\n      .scaler-events-swiper-wrap { position: relative; }\n      .scaler-events-carousel .swiper { width: 100%; padding: 4px; }\n      .scaler-event-swiper .swiper-slide {\n        width: 296px;          \/* topics card_container width *\/\n        height: auto;\n        display: flex;\n      }\n\n      \/* Event Card \u2014 matches topics EventCard *\/\n      .scaler-event-card {\n        background: var(--scaler-card-bg);\n        border: 1px solid var(--scaler-border);\n        border-radius: var(--scaler-radius);\n        padding: 16px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        width: 100%;\n        cursor: pointer;\n      }\n\n      \/* Header row: headshot + title\/name *\/\n      .scaler-event-card__header { display: flex; align-items: flex-start; }\n      .scaler-event-card__image-wrapper {\n        position: relative;\n        width: 88px;\n        height: 88px;\n        min-width: 88px;\n        border-radius: var(--scaler-radius-sm);\n        overflow: hidden;\n        background: var(--scaler-primary-30);\n      }\n      .scaler-event-card__image {\n        position: absolute;\n        top: 0; left: 0;\n        width: 100%; height: 100%;\n        object-fit: cover;\n      }\n      \/* attendee-count footer (default) *\/\n      .scaler-event-card__img-footer {\n        position: absolute;\n        left: 0; right: 0; bottom: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n        padding: 1px 8px;\n        background: var(--scaler-surface);\n        color: var(--scaler-text-primary);\n        font-size: 13px;\n        line-height: 22px;\n      }\n      .scaler-event-card__img-footer svg { width: 14px; height: 14px; }\n      \/* live chip (shown when status === current) *\/\n      .scaler-event-card__live-badge {\n        position: absolute;\n        left: 0; right: 0; bottom: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 5px;\n        padding: 1px 8px;\n        background: var(--scaler-live-bg);\n        color: var(--scaler-live);\n        font-size: 12px;\n        line-height: 22px;\n        text-transform: uppercase;\n        letter-spacing: 0.18em;\n      }\n      .scaler-event-card__live-badge::before {\n        content: \"\";\n        width: 6px; height: 6px;\n        background: var(--scaler-live);\n        border-radius: 50%;\n      }\n      .scaler-event-card__text { margin-left: 16px; min-width: 0; }\n      .scaler-event-card__title {\n        font-size: 20px;\n        font-weight: 600;\n        color: var(--scaler-text-primary);\n        margin: 0;\n        line-height: 1.4;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n      .scaler-event-card__speaker {\n        margin-top: 8px;\n        font-size: 14px;\n        line-height: 1.4;\n        color: var(--scaler-text-primary);\n      }\n\n      \/* Takeaways *\/\n      .scaler-event-card__takeaways {\n        margin-top: 12px;\n        min-height: 50px;\n        max-height: 50px;\n        overflow: hidden;\n      }\n      .scaler-event-card__takeaway-item {\n        display: flex;\n        align-items: flex-start;\n        gap: 6px;\n      }\n      .scaler-event-card__dot {\n        width: 4px; height: 4px;\n        min-width: 4px;\n        border-radius: 50%;\n        background: var(--scaler-text-secondary);\n        margin-top: 11px;\n      }\n      .scaler-event-card__takeaway-text {\n        flex: 1;\n        min-width: 0;\n        font-size: 14px;\n        line-height: 24px;\n        color: var(--scaler-text-primary);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .scaler-event-card__knowmore,\n      .scaler-event-card__knowmore:link,\n      .scaler-event-card__knowmore:visited {\n        flex-shrink: 0;\n        font-size: 14px;\n        line-height: 24px;\n        color: var(--scaler-primary) !important;\n        text-decoration: none;\n        white-space: nowrap;\n      }\n      .scaler-event-card__knowmore:hover { text-decoration: underline; }\n\n      \/* Date + duration *\/\n      .scaler-event-card__meta {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-top: 20px;\n        font-size: 13px;\n        line-height: 24px;\n        color: var(--scaler-text-primary);\n      }\n      .scaler-event-card__duration {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n      .scaler-event-card__duration svg { width: 15px; height: 15px; }\n\n      .scaler-event-card__spacer { flex-grow: 1; min-height: 4px; }\n\n      \/* CTA \u2014 outlined \"Register with 1-Click\" *\/\n      .scaler-event-card__cta,\n      .scaler-event-card__cta:link,\n      .scaler-event-card__cta:visited {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        margin-top: 16px;\n        padding: 8px;\n        background: transparent;\n        color: var(--scaler-primary) !important;\n        font-family: inherit;\n        font-size: 14px;\n        font-weight: 600;\n        line-height: 24px;\n        text-decoration: none;\n        border: 1px solid var(--scaler-primary);\n        border-radius: var(--scaler-radius-sm);\n        cursor: pointer;\n        transition: background 0.2s ease, color 0.2s ease;\n      }\n      .scaler-event-card__cta:hover,\n      .scaler-event-card__cta:focus {\n        background: var(--scaler-primary);\n        color: #fff !important;\n      }\n\n      \/* Side navigation arrows *\/\n      .scaler-events-nav__btn {\n        position: absolute !important;\n        top: 50% !important;\n        transform: translateY(-50%) !important;\n        z-index: 2;\n        width: 46px !important;\n        height: 46px !important;\n        min-width: 46px;\n        display: flex !important;\n        align-items: center;\n        justify-content: center;\n        padding: 0 !important;\n        background: var(--scaler-card-bg) !important;\n        border: none !important;\n        border-radius: var(--scaler-radius-sm) !important;\n        box-shadow: var(--scaler-shadow) !important;\n        color: var(--scaler-text-secondary) !important;\n        cursor: pointer;\n        transition: opacity 0.2s ease, visibility 0.2s ease;\n      }\n      .scaler-nav-prev { left: 8px !important; }\n      .scaler-nav-next { right: 8px !important; }\n      .scaler-events-nav__btn svg {\n        width: 20px !important;\n        height: 20px !important;\n        fill: var(--scaler-text-secondary) !important;\n      }\n      .scaler-events-nav__btn.swiper-button-disabled {\n        opacity: 0;\n        visibility: hidden;\n        pointer-events: none;\n      }\n\n      \/* View All Events *\/\n      .scaler-events-viewall,\n      .scaler-events-viewall:link,\n      .scaler-events-viewall:visited {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        margin-top: 12px;\n        font-size: 14px;\n        font-weight: 600;\n        color: var(--scaler-brand-blue) !important;\n        text-decoration: none;\n      }\n      .scaler-events-viewall:hover { text-decoration: underline; }\n      .scaler-events-viewall svg { width: 16px; height: 16px; fill: var(--scaler-brand-blue); }\n\n      \/* hide swiper defaults *\/\n      .scaler-events-pagination { display: none; }\n      .scaler-events-carousel .swiper-button-prev,\n      .scaler-events-carousel .swiper-button-next { display: none; }\n\n      \/* Skeleton & Empty States *\/\n      .scaler-event-card--skeleton { pointer-events: none; }\n      .scaler-event-card--skeleton .scaler-event-card__image-wrapper,\n      .scaler-event-card--skeleton .scaler-event-card__title,\n      .scaler-event-card--skeleton .scaler-event-card__speaker,\n      .scaler-event-card--skeleton .scaler-event-card__takeaways,\n      .scaler-event-card--skeleton .scaler-event-card__meta,\n      .scaler-event-card--skeleton .scaler-event-card__cta {\n        background: linear-gradient(90deg, var(--scaler-border) 25%, var(--scaler-surface) 50%, var(--scaler-border) 75%);\n        background-size: 200% 100%;\n        animation: shimmer 1.5s infinite;\n        color: transparent !important;\n        border-color: transparent !important;\n        border-radius: 4px;\n      }\n      .scaler-event-card--skeleton .scaler-event-card__title { min-height: 44px; }\n      .scaler-event-card--skeleton .scaler-event-card__speaker { min-height: 16px; }\n      .scaler-event-card--skeleton .scaler-event-card__meta { min-height: 24px; }\n      .scaler-event-card--skeleton .scaler-event-card__cta { min-height: 40px; }\n      .scaler-event-card--skeleton .scaler-event-card__image,\n      .scaler-event-card--skeleton .scaler-event-card__img-footer,\n      .scaler-event-card--skeleton .scaler-event-card__live-badge { display: none; }\n\n      @keyframes shimmer {\n        0% { background-position: 200% 0; }\n        100% { background-position: -200% 0; }\n      }\n\n      .scaler-events-empty {\n        text-align: center;\n        padding: 40px 20px;\n        color: var(--scaler-text-secondary);\n        font-size: 15px;\n      }\n\n      @media (max-width: 768px) {\n        .scaler-events-carousel { padding: 16px; }\n        .scaler-event-swiper .swiper-slide { width: calc(100vw - 52px); }\n        .scaler-events-nav__btn { display: none; }\n      }\n    <\/style>\n\n\n\n    <div class=\"scaler-events-carousel js-scaler-carousel\">\n\n      <template class=\"js-event-card-template\">\n        <div class=\"swiper-slide\">\n          <article class=\"scaler-event-card\">\n            <div class=\"scaler-event-card__header\">\n              <div class=\"scaler-event-card__image-wrapper\">\n                <img decoding=\"async\" src=\"\" alt=\"\" class=\"scaler-event-card__image\" loading=\"lazy\">\n                <div class=\"scaler-event-card__img-footer\">\n                  <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M11.199 7.957c-3.086 0-5.588 2.502-5.588 5.588s2.502 5.588 5.588 5.588c3.086 0 5.588-2.502 5.588-5.588s-2.502-5.588-5.588-5.588zM3.611 13.545c0-4.191 3.397-7.588 7.588-7.588s7.588 3.397 7.588 7.588c0 4.191-3.397 7.588-7.588 7.588s-7.588-3.397-7.588-7.588z\"\/><path d=\"M21.090 6.369h0.003c1.989 0 3.897 0.79 5.303 2.197s2.197 3.314 2.197 5.303-0.79 3.897-2.197 5.303c-1.406 1.407-3.314 2.197-5.303 2.197-0.552 0-1-0.448-1-1s0.448-1 1-1c1.459 0 2.858-0.579 3.889-1.611s1.611-2.43 1.611-3.889c0-1.459-0.58-2.858-1.611-3.889s-2.429-1.611-3.888-1.611c-0.507 0.002-1.013 0.070-1.502 0.203-0.533 0.145-1.082-0.17-1.227-0.703s0.17-1.082 0.703-1.227c0.659-0.179 1.339-0.27 2.021-0.272z\"\/><path d=\"M10.906 21.364c-1.605 0-3.186 0.386-4.61 1.126s-2.649 1.811-3.572 3.124c-0.318 0.452-0.941 0.561-1.393 0.243s-0.561-0.941-0.243-1.393c1.107-1.576 2.577-2.862 4.286-3.749s3.606-1.351 5.532-1.351 3.823 0.463 5.532 1.351c1.709 0.888 3.179 2.174 4.286 3.749 0.318 0.452 0.209 1.076-0.243 1.393s-1.076 0.209-1.393-0.243c-0.923-1.313-2.148-2.385-3.572-3.124s-3.005-1.126-4.61-1.126z\"\/><\/svg>\n                  <span class=\"js-event-count\"><\/span>\n                <\/div>\n                <div class=\"scaler-event-card__live-badge\" style=\"display: none;\">Live<\/div>\n              <\/div>\n              <div class=\"scaler-event-card__text\">\n                <h3 class=\"scaler-event-card__title\"><\/h3>\n                <div class=\"scaler-event-card__speaker js-event-speaker\"><\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"scaler-event-card__takeaways js-event-takeaways\"><\/div>\n\n            <div class=\"scaler-event-card__spacer\"><\/div>\n\n            <div class=\"scaler-event-card__meta\">\n              <span class=\"js-event-date\"><\/span>\n              <span class=\"scaler-event-card__duration\">\n                <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M16 6.333c6.443 0 11.667 5.223 11.667 11.667s-5.223 11.667-11.667 11.667c-6.443 0-11.667-5.223-11.667-11.667v0c0.008-6.44 5.226-11.659 11.666-11.667h0.001zM16 28.333c5.707 0 10.333-4.626 10.333-10.333s-4.626-10.333-10.333-10.333c-5.707 0-10.333 4.626-10.333 10.333v0c0.007 5.704 4.629 10.326 10.333 10.333h0.001z\"\/><path d=\"M16 18.667c-0 0-0.001 0-0.001 0-0.184 0-0.35-0.074-0.471-0.195v0c-0.121-0.121-0.195-0.287-0.195-0.471s0.075-0.351 0.195-0.471l4.951-4.952c0.121-0.121 0.287-0.195 0.471-0.195s0.351 0.075 0.471 0.195v0c0.121 0.121 0.195 0.287 0.195 0.471s-0.075 0.351-0.195 0.471l-4.949 4.951c-0.121 0.121-0.288 0.196-0.472 0.196v0z\"\/><path d=\"M19 3.667h-6c-0.368 0-0.667-0.298-0.667-0.667v0c0-0.368 0.298-0.667 0.667-0.667v0h6c0.368 0 0.667 0.298 0.667 0.667v0c0 0.368-0.298 0.667-0.667 0.667v0z\"\/><\/svg>\n                <span class=\"js-event-duration\"><\/span>\n              <\/span>\n            <\/div>\n\n            <a href=\"#\" class=\"scaler-event-card__cta js-event-cta\">Register with 1-Click<\/a>\n          <\/article>\n        <\/div>\n      <\/template>\n\n      <div class=\"scaler-events-carousel__inner\">\n        <header class=\"scaler-events-header\">\n          <span class=\"scaler-events-header__icon\">\n            <svg fill=\"currentColor\" viewBox=\"0 0 33 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M6.406 6.8c-0.11 0-0.2 0.090-0.2 0.2v20c0 0.11 0.090 0.2 0.2 0.2h20c0.11 0 0.2-0.090 0.2-0.2v-20c0-0.11-0.090-0.2-0.2-0.2h-20zM4.606 7c0-0.994 0.806-1.8 1.8-1.8h20c0.994 0 1.8 0.806 1.8 1.8v20c0 0.994-0.806 1.8-1.8 1.8h-20c-0.994 0-1.8-0.806-1.8-1.8v-20z\"\/><path d=\"M22.406 3.2c0.442 0 0.8 0.358 0.8 0.8v4c0 0.442-0.358 0.8-0.8 0.8s-0.8-0.358-0.8-0.8v-4c0-0.442 0.358-0.8 0.8-0.8z\"\/><path d=\"M10.406 3.2c0.442 0 0.8 0.358 0.8 0.8v4c0 0.442-0.358 0.8-0.8 0.8s-0.8-0.358-0.8-0.8v-4c0-0.442 0.358-0.8 0.8-0.8z\"\/><path d=\"M4.606 12c0-0.442 0.358-0.8 0.8-0.8h22c0.442 0 0.8 0.358 0.8 0.8s-0.358 0.8-0.8 0.8h-22c-0.442 0-0.8-0.358-0.8-0.8z\"\/><path d=\"M21.488 16.451c0.303 0.322 0.288 0.828-0.034 1.131l-5.838 5.5c-0.309 0.291-0.791 0.29-1.099-0.002l-3.162-3c-0.321-0.304-0.334-0.81-0.030-1.131s0.81-0.334 1.131-0.030l2.614 2.48 5.287-4.981c0.322-0.303 0.828-0.288 1.131 0.034z\"\/><\/svg>\n          <\/span>\n          <h2 class=\"scaler-events-header__title\"><span class=\"ez-toc-section\" id=\"live-masterclasses\"><\/span>Live Masterclasses<span class=\"ez-toc-section-end\"><\/span><\/h2>\n        <\/header>\n\n        <div class=\"scaler-events-swiper-wrap\">\n          <div class=\"swiper scaler-event-swiper\">\n            <div class=\"swiper-wrapper scaler-events-wrapper\"><\/div>\n            <div class=\"swiper-pagination scaler-events-pagination\"><\/div>\n          <\/div>\n\n          <button class=\"scaler-events-nav__btn scaler-nav-prev\" aria-label=\"Previous slide\">\n            <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"transform: rotate(-90deg);\"><path d=\"M5.313 16l10.688-10.688 10.688 10.688-1.938 1.875-7.438-7.438v16.25h-2.625v-16.25l-7.5 7.438z\"\/><\/svg>\n          <\/button>\n          <button class=\"scaler-events-nav__btn scaler-nav-next\" aria-label=\"Next slide\">\n            <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"transform: rotate(90deg);\"><path d=\"M5.313 16l10.688-10.688 10.688 10.688-1.938 1.875-7.438-7.438v16.25h-2.625v-16.25l-7.5 7.438z\"\/><\/svg>\n          <\/button>\n        <\/div>\n\n        <a class=\"scaler-events-viewall\" href=\"https:\/\/www.scaler.com\/events\/\">\n          <span>View All Events<\/span>\n          <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"transform: rotate(90deg);\"><path d=\"M5.313 16l10.688-10.688 10.688 10.688-1.938 1.875-7.438-7.438v16.25h-2.625v-16.25l-7.5 7.438z\"\/><\/svg>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", () => {\n\n      const monthNames = [\"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"];\n\n      function formatTime(st) {\n        const t = new Date(st);\n        const date = t.getDate();\n        const month = monthNames[t.getMonth()];\n        const year = t.getFullYear();\n        const h = t.getHours();\n        const m = String(t.getMinutes()).padStart(2, \"0\");\n        let time;\n        if (h === 0) time = `12:${m} AM`;\n        else if (h === 12) time = `12:${m} PM`;\n        else if (h > 12) time = `${h - 12}:${m} PM`;\n        else time = `${h}:${m} AM`;\n        return `${date} ${month} ${year} | ${time}`;\n      }\n\n      const carouselInstances = document.querySelectorAll('.js-scaler-carousel');\n\n      carouselInstances.forEach(container => {\n\n          if(container.dataset.initialized === \"true\") return;\n          container.dataset.initialized = \"true\";\n\n          const swiperElement = container.querySelector(\".scaler-event-swiper\");\n          const swiperWrapper = container.querySelector(\".scaler-events-wrapper\");\n          const template = container.querySelector(\".js-event-card-template\");\n          const nextBtn = container.querySelector(\".scaler-nav-next\");\n          const prevBtn = container.querySelector(\".scaler-nav-prev\");\n          const paginationEl = container.querySelector(\".scaler-events-pagination\");\n\n          if (!swiperWrapper || !template) {\n             console.error(\"Scaler Carousel: Missing required elements inside container\");\n             return;\n          }\n\n          const swiper = new Swiper(swiperElement, {\n            slidesPerView: \"auto\",\n            spaceBetween: 16,\n            grabCursor: true,\n            observer: true,\n            observeParents: true,\n            pagination: {\n                el: paginationEl,\n                clickable: true,\n                dynamicBullets: true\n            },\n            navigation: {\n                nextEl: nextBtn,\n                prevEl: prevBtn\n            },\n          });\n\n          function showSkeletons(count = 4) {\n            swiperWrapper.innerHTML = \"\";\n            for (let i = 0; i < count; i++) {\n              const clone = template.content.cloneNode(true);\n              const card = clone.querySelector(\".scaler-event-card\");\n              card.classList.add(\"scaler-event-card--skeleton\");\n              swiperWrapper.appendChild(clone);\n            }\n            swiper.update();\n          }\n\n          function renderEvents(events) {\n            swiperWrapper.innerHTML = \"\";\n\n            if (events.length === 0) {\n              swiperWrapper.innerHTML = `<div class=\"scaler-events-empty\">No upcoming masterclasses found.<\/div>`;\n              return;\n            }\n\n            const pathParts = location.pathname.split(\"\/\").filter(Boolean);\n            const currentSlug = pathParts.length > 0 ? pathParts[pathParts.length - 1] : \"homepage\";\n\n            events.forEach(event => {\n              const attr = event.attributes;\n              const cd = attr.custom_data || {};\n              const clone = template.content.cloneNode(true);\n              const joinUrl = `\/event\/${attr.slug}\/?utm_source=blog&utm_medium=master_class&utm_content=${currentSlug}`;\n\n              \/\/ Instructor headshot\n              const instructor = (cd.instructors && cd.instructors[0]) || {};\n              const img = clone.querySelector(\".scaler-event-card__image\");\n              img.src = instructor.media_url || attr.image_url ||\n                \"https:\/\/images.unsplash.com\/photo-1531891437562-4301cf35b7e4?w=200&h=200&fit=crop\";\n              img.alt = instructor.name || attr.instructor_name || attr.title;\n\n              \/\/ Title + speaker\n              clone.querySelector(\".scaler-event-card__title\").textContent = attr.title;\n              clone.querySelector(\".js-event-speaker\").textContent = instructor.name || attr.instructor_name || \"\";\n\n              \/\/ Live chip vs attendee count\n              const isLive = attr.status === \"current\";\n              const footer = clone.querySelector(\".scaler-event-card__img-footer\");\n              const liveBadge = clone.querySelector(\".scaler-event-card__live-badge\");\n              if (isLive) {\n                footer.style.display = \"none\";\n                liveBadge.style.display = \"flex\";\n                liveBadge.textContent = \"Live\";\n              } else if (attr.registration_count) {\n                clone.querySelector(\".js-event-count\").textContent = attr.registration_count;\n              } else {\n                footer.style.display = \"none\";\n              }\n\n              \/\/ Takeaways (up to 2, Know More on the last)\n              const takeaways = (cd.takeaways || []).slice(0, 2);\n              const listEl = clone.querySelector(\".js-event-takeaways\");\n              listEl.innerHTML = \"\";\n              takeaways.forEach((t, idx) => {\n                const item = document.createElement(\"div\");\n                item.className = \"scaler-event-card__takeaway-item\";\n                const dot = document.createElement(\"span\");\n                dot.className = \"scaler-event-card__dot\";\n                const txt = document.createElement(\"span\");\n                txt.className = \"scaler-event-card__takeaway-text\";\n                txt.textContent = t;\n                item.appendChild(dot);\n                item.appendChild(txt);\n                if (idx === takeaways.length - 1) {\n                  const km = document.createElement(\"a\");\n                  km.className = \"scaler-event-card__knowmore\";\n                  km.textContent = \"Know More\";\n                  km.href = joinUrl;\n                  item.appendChild(km);\n                }\n                listEl.appendChild(item);\n              });\n\n              \/\/ Date + duration\n              clone.querySelector(\".js-event-date\").textContent = formatTime(attr.start_time);\n              let hrs = \"\";\n              if (attr.duration) {\n                hrs = (attr.duration \/ 60).toFixed(2);\n              } else if (attr.end_time) {\n                hrs = (Math.abs(new Date(attr.start_time) - new Date(attr.end_time)) \/ 3600000).toFixed(2);\n              }\n              clone.querySelector(\".js-event-duration\").textContent = hrs ? `${hrs} Hrs` : \"\";\n\n              \/\/ CTA\n              clone.querySelector(\".js-event-cta\").href = joinUrl;\n\n              swiperWrapper.appendChild(clone);\n            });\n\n            swiper.update();\n            swiper.slideTo(0);\n          }\n\n          async function fetchEvents() {\n            try {\n              showSkeletons();\n              const res = await fetch(\n                \"https:\/\/www.scaler.com\/api\/v4\/events?event_type[]=company&distributor=scaler&type=upcoming&serializer_mode=L2&limit=8&program[]=software_development&program[]=data_science&program[]=devops&program[]=ai_ml\"\n              );\n              const json = await res.json();\n              const events = json.data || [];\n              renderEvents(events);\n            } catch (error) {\n              console.error(\"Failed to load events:\", error);\n              if(swiperWrapper) swiperWrapper.innerHTML = `<div class=\"scaler-events-empty\">Failed to load events.<\/div>`;\n            }\n          }\n\n          fetchEvents();\n      });\n    });\n    <\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"angular-roadmap-phase-1-%e2%80%93-core-fundamentals-weeks-1-4\"><\/span><strong>Angular Roadmap: Phase 1 &#8211; Core Fundamentals (Weeks 1-4)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Angular CLI &amp; Project Structure<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It is important to begin this journey from the very beginning.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ll start by creating a project and running it locally. Once you see it in the browser, the working, the structure &#8211; it\u2019ll all start making sense to you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, install the Angular CLI and create a new project using ng new. After that, run ng serve and open it in your browser. You\u2019ll see the default app; well, it isn\u2019t anything fancy, but it\u2019ll give you something concrete to work with.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, we have seen many people making the mistake of rushing the process. This, in turn, leads you to get confused later on and to avoid that &#8211; wait, practice, and then move ahead.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Head into the src folder, then open the app folder. This is where most of your work will be done. You\u2019ll notice how Angular already sets up a basic component structure for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open main.ts and see where the application starts from. Then glance through angular.json, you don\u2019t need to understand every line, just get a rough idea of what it controls.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, let\u2019s create something of your own.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the CLI to generate a component (ng generate component). Watch where Angular adds it and how it connects everything automatically. Change something small in the template, save it, and check your browser. That instant feedback is what you want to get used to.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Edit a template, save it, and check the browser; you\u2019ll see how changes in the component show up in the UI.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By the end of this, you should be able to create a project, run it, generate components, and move around the structure without second-guessing where things are.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Components, Templates &amp; Data Binding<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Start by creating a few components using the CLI and placing them inside your app. Each component will have a TypeScript file, an HTML template, and a CSS file. The TypeScript file holds the logic, and the template is what gets rendered on the screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You should work with different ways Angular connects data to the template.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use interpolation ({{ }}) to display values<\/li>\n\n\n\n<li>property binding ([ ]) to pass data into elements<\/li>\n\n\n\n<li>event binding (( )) to handle user actions like clicks<\/li>\n\n\n\n<li>and two-way binding ([(ngModel)]) for form inputs.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Try these in small examples so you can see how changes in one place reflect in the other.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After that, pass data between components using @Input and @Output. For example, create a parent component that sends data to a child, and have the child send something back using an event. This helps you understand how components communicate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Build small pieces like a form, a list, or a counter. Add some basic logic and update the UI based on user input. At this stage, the goal is to see how data flows between the component and the template, and how user actions trigger changes in the UI.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Directives &amp; Pipes<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ll start with directives, since they directly control what shows up in the template.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Work with structural directives like *ngIf and *ngFor. They control whether elements get rendered in the DOM based on conditions or data.<\/li>\n\n\n\n<li>Use *ngIf when you want to conditionally render an element. For example, show a message only after a button click or when a value becomes true.<\/li>\n\n\n\n<li>Use *ngFor to iterate over arrays and render lists. Try looping through a small data set and watch how Angular creates elements for each item.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Once that feels clear, move to attribute directives.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use ngClass and ngStyle to change how elements look based on data. Instead of hardcoding styles, bind them to values and update them dynamically. For example, toggle a class when a condition changes or adjust styles based on user input.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now shift to pipes, which handle how data is displayed.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use built-in pipes like date, uppercase, or currency to format values directly in the template. This keeps formatting logic out of your component and closer to where it\u2019s used.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">After that, create a simple custom pipe. For example, modify how text appears, truncate it, transform it, or adjust its format. This introduces the idea of a reusable transformation layer between your data and the UI.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Services &amp; Dependency Injection<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Right now, most of your logic probably sits inside components. That works at first, but it gets messy once the same logic shows up in multiple places.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ll move that out into a service.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create one using the CLI (ng generate service) and put something simple in it, a function, some shared data, anything you\u2019d otherwise repeat. Nothing fancy here.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now use that same service in two different components. Inject it, call the same method, and you\u2019ll notice both components are pulling from the same place instead of maintaining their own copy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here, dependency injection will be used. Angular doesn\u2019t make a new service every time; you get the same instance (if it\u2019s provided at the root), so the data and logic stay consistent across components.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When more than one component depends on the same logic, keeping it inside components quickly leads to duplication and inconsistencies. Keep components focused on the UI, handling input, and rendering data. Move reusable logic, data handling, or shared state into services so you\u2019re not duplicating it everywhere.<\/p>\n\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n    <!-- Source Sans Pro (topics font) -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Sans+3:wght@400;600;700&#038;display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\">\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\n\n    <style>\n      :root {\n        --cl-primary: #005bb3;\n        --cl-brand-blue: #255aad;\n        --cl-card-bg: #ffffff;\n        --cl-surface: #f6f7f8;\n        --cl-border: #d6dee5;\n        --cl-text-primary: #1a2c47;   \/* neutral-scale-12 *\/\n        --cl-text-secondary: #61738e; \/* neutral-scale-9 *\/\n        --cl-radius: 16px;\n        --cl-radius-sm: 8px;\n        --cl-shadow: 0 8px 16px 0 rgba(50, 71, 102, 0.16);\n      }\n\n      .scaler-courses * { box-sizing: border-box; }\n\n      .scaler-courses {\n        font-family: \"Source Sans 3\", \"Source Sans Pro\", \"Roboto\", Arial, sans-serif;\n        padding: 24px;\n        width: 100%;\n      }\n      .scaler-courses__inner {\n        max-width: 1000px;\n        margin: 0 auto;\n        position: relative;\n        width: 100%;\n      }\n\n      \/* Header *\/\n      .scaler-courses__header {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-bottom: 8px;\n        padding: 8px 0;\n      }\n      .scaler-courses__header-icon { display: inline-flex; color: var(--cl-text-primary); }\n      .scaler-courses__header-icon svg { width: 24px; height: 24px; }\n      .scaler-courses__title {\n        font-size: 18px;\n        font-weight: 700;\n        color: var(--cl-text-primary);\n        line-height: 1.3;\n        margin: 0;\n      }\n\n      \/* Swiper *\/\n      .scaler-courses__swiper-wrap { position: relative; }\n      .scaler-courses .swiper { width: 100%; padding: 4px; }\n      .scaler-courses-swiper .swiper-slide {\n        width: 296px;\n        height: auto;\n        display: flex;\n      }\n\n      \/* Card *\/\n      .scaler-course-card {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%;\n        min-height: 336px;\n        background: var(--cl-card-bg);\n        border: 1px solid var(--cl-border);\n        border-radius: var(--cl-radius);\n        overflow: hidden;\n        text-decoration: none;\n        cursor: pointer;\n        transition: box-shadow 0.2s ease;\n      }\n      .scaler-course-card:hover { box-shadow: 0 2px 12px rgba(50, 71, 102, 0.12); }\n\n      .scaler-course-card__image {\n        width: 100%;\n        height: 128px;\n        min-height: 128px;\n        object-fit: cover;\n        background: var(--cl-surface);\n        display: block;\n      }\n\n      .scaler-course-card__detail {\n        display: flex;\n        flex-direction: column;\n        flex: 1 1 auto;\n        padding: 16px 16px 8px;\n      }\n      .scaler-course-card__heading,\n      .scaler-course-card__heading:link,\n      .scaler-course-card__heading:visited {\n        font-size: 20px;\n        font-weight: 600;\n        line-height: 1.4;\n        color: var(--cl-text-primary) !important;\n        margin: 0 0 8px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .scaler-course-card__instructor {\n        font-size: 14px;\n        line-height: 1.86;\n        color: var(--cl-text-primary);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .scaler-course-card__instructor b { font-weight: 700; }\n      .scaler-course-card__desc {\n        flex-grow: 1;\n        margin-top: 8px;\n        margin-bottom: 12px;\n        font-size: 16px;\n        line-height: 1.5;\n        color: var(--cl-text-secondary);\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n\n      .scaler-course-card__footer {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        width: 100%;\n      }\n      .scaler-course-card__stat {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        font-size: 14px;\n        color: var(--cl-text-primary);\n      }\n      .scaler-course-card__stat svg { width: 18px; height: 18px; flex-shrink: 0; }\n      .scaler-course-card__stat img { width: 20px; height: 20px; flex-shrink: 0; }\n\n      \/* Side arrows *\/\n      .scaler-courses__nav {\n        position: absolute !important;\n        top: 50% !important;\n        transform: translateY(-50%) !important;\n        z-index: 2;\n        width: 46px !important; height: 46px !important; min-width: 46px;\n        display: flex !important; align-items: center; justify-content: center;\n        padding: 0 !important;\n        background: var(--cl-card-bg) !important;\n        border: none !important;\n        border-radius: var(--cl-radius-sm) !important;\n        box-shadow: var(--cl-shadow) !important;\n        color: var(--cl-text-secondary) !important;\n        cursor: pointer;\n        transition: opacity 0.2s ease, visibility 0.2s ease;\n      }\n      .scaler-courses__nav--prev { left: 8px !important; }\n      .scaler-courses__nav--next { right: 8px !important; }\n      .scaler-courses__nav svg { width: 20px !important; height: 20px !important; fill: var(--cl-text-secondary) !important; }\n      .scaler-courses__nav.swiper-button-disabled { opacity: 0; visibility: hidden; pointer-events: none; }\n\n      .scaler-courses .swiper-button-prev,\n      .scaler-courses .swiper-button-next,\n      .scaler-courses .swiper-pagination { display: none; }\n\n      \/* Skeleton *\/\n      .scaler-course-card--skeleton { pointer-events: none; }\n      .scaler-course-card--skeleton .scaler-course-card__image,\n      .scaler-course-card--skeleton .scaler-course-card__heading,\n      .scaler-course-card--skeleton .scaler-course-card__instructor,\n      .scaler-course-card--skeleton .scaler-course-card__desc,\n      .scaler-course-card--skeleton .scaler-course-card__footer {\n        background: linear-gradient(90deg, var(--cl-border) 25%, var(--cl-surface) 50%, var(--cl-border) 75%);\n        background-size: 200% 100%;\n        animation: cl-shimmer 1.5s infinite;\n        color: transparent !important;\n        border-radius: 4px;\n      }\n      .scaler-course-card--skeleton .scaler-course-card__heading { height: 24px; margin: 0 0 8px; }\n      .scaler-course-card--skeleton .scaler-course-card__instructor { height: 16px; }\n      .scaler-course-card--skeleton .scaler-course-card__footer { height: 20px; }\n      @keyframes cl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }\n\n      .scaler-courses__empty { display: none; }\n\n      @media (max-width: 768px) {\n        .scaler-courses { padding: 16px; }\n        .scaler-courses-swiper .swiper-slide { width: 260px; }\n        .scaler-courses__nav { display: none !important; }\n      }\n    <\/style>\n\n\n    <div class=\"scaler-courses js-scaler-courses\">\n\n      <template class=\"js-course-card-template\">\n        <div class=\"swiper-slide\">\n          <a class=\"scaler-course-card js-course-link\" href=\"#\" target=\"_blank\" rel=\"noopener\">\n            <img decoding=\"async\" class=\"scaler-course-card__image js-course-image\" src=\"\" alt=\"\" loading=\"lazy\">\n            <div class=\"scaler-course-card__detail\">\n              <div class=\"scaler-course-card__heading js-course-title\"><\/div>\n              <div class=\"scaler-course-card__instructor js-course-instructor\"><\/div>\n              <div class=\"scaler-course-card__desc js-course-desc\"><\/div>\n              <div class=\"scaler-course-card__footer\">\n                <span class=\"scaler-course-card__stat js-course-star\">\n                  <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M14.83 2.868c0.342-0.239 0.75-0.368 1.168-0.368s0.826 0.128 1.168 0.368c0.338 0.236 0.596 0.569 0.741 0.955l2.759 6.936c0.003 0.007 0.007 0.013 0.013 0.017s0.013 0.007 0.020 0.007l7.402 0.476c0.411 0.036 0.802 0.194 1.124 0.452s0.559 0.607 0.683 1 0.127 0.815 0.011 1.211c-0.116 0.396-0.347 0.748-0.664 1.013l-5.655 4.714c-0.013 0.011-0.022 0.025-0.028 0.040s-0.006 0.032-0.002 0.047l1.821 7.163c0.107 0.395 0.094 0.812-0.037 1.2-0.133 0.391-0.38 0.734-0.71 0.983s-0.727 0.393-1.14 0.413c-0.413 0.020-0.822-0.084-1.175-0.3l-0.015-0.009-6.307-4.005c-0.004-0.003-0.009-0.004-0.014-0.004s-0.009 0.001-0.013 0.004l-5.876 3.721c-0.389 0.235-0.839 0.347-1.292 0.323s-0.889-0.184-1.251-0.459c-0.361-0.275-0.632-0.652-0.777-1.082-0.143-0.426-0.157-0.885-0.038-1.319l1.684-6.629c0.004-0.016 0.003-0.033-0.002-0.049s-0.015-0.030-0.027-0.040l-5.653-4.714c-0.317-0.264-0.548-0.617-0.664-1.013s-0.112-0.817 0.011-1.211c0.124-0.394 0.361-0.742 0.683-1s0.713-0.416 1.124-0.452l0.023-0.002 7.38-0.476c0.007-0 0.014-0.003 0.020-0.007s0.010-0.010 0.013-0.017l0.008-0.020 2.746-6.913c0.145-0.386 0.403-0.719 0.741-0.956z\"\/><\/svg>\n                  <span class=\"js-course-star-val\"><\/span>\n                <\/span>\n                <span class=\"scaler-course-card__stat\">\n                  <img decoding=\"async\" src=\"https:\/\/d19zaobb0foqu6.cloudfront.net\/topics\/images\/user-check-dark.svg\" alt=\"Enrolled\" loading=\"lazy\">\n                  <span class=\"js-course-reg\"><\/span>\n                <\/span>\n              <\/div>\n            <\/div>\n          <\/a>\n        <\/div>\n      <\/template>\n\n      <div class=\"scaler-courses__inner\">\n        <div class=\"scaler-courses__header\">\n          <span class=\"scaler-courses__header-icon\">\n            <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M26.259 23.289h-20.518c-1.193 0-2.16-0.967-2.16-2.16v0-14.588c0-1.193 0.967-2.16 2.16-2.16v0h20.518c1.193 0 2.16 0.967 2.16 2.16v0 14.588c0 1.193-0.967 2.16-2.16 2.16v0zM5.741 5.501c-0.574 0-1.040 0.466-1.040 1.040v0 14.588c0 0.574 0.466 1.040 1.040 1.040v0h20.518c0.574 0 1.040-0.466 1.040-1.040v0-14.588c0-0.574-0.466-1.040-1.040-1.040v0z\"\/><path d=\"M19.764 27.619h-7.53c-0.309 0-0.56-0.251-0.56-0.56v0c0-0.309 0.251-0.56 0.56-0.56h7.53c0.309 0 0.56 0.251 0.56 0.56v0c0 0.309-0.251 0.56-0.56 0.56v0z\"\/><path d=\"M14.023 9.322c0.116 0 0.223 0.035 0.312 0.096l-0.002-0.001 5.93 3.953c0.151 0.102 0.249 0.272 0.249 0.466s-0.098 0.364-0.247 0.465l-0.002 0.001-5.93 3.953c-0.087 0.059-0.195 0.094-0.31 0.094-0.309 0-0.56-0.25-0.56-0.559v-7.906c0-0.309 0.251-0.56 0.56-0.56v0zM18.943 13.835l-4.36-2.906v5.813z\"\/><\/svg>\n          <\/span>\n          <h2 class=\"scaler-courses__title\"><span class=\"ez-toc-section\" id=\"free-courses-by-top-scaler-instructors\"><\/span>Free Courses by top Scaler instructors<span class=\"ez-toc-section-end\"><\/span><\/h2>\n        <\/div>\n\n        <div class=\"scaler-courses__swiper-wrap\">\n          <div class=\"swiper scaler-courses-swiper\">\n            <div class=\"swiper-wrapper js-courses-wrapper\"><\/div>\n            <div class=\"swiper-pagination\"><\/div>\n          <\/div>\n\n          <button class=\"scaler-courses__nav scaler-courses__nav--prev js-courses-prev\" aria-label=\"Previous\">\n            <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"transform: rotate(-90deg);\"><path d=\"M5.313 16l10.688-10.688 10.688 10.688-1.938 1.875-7.438-7.438v16.25h-2.625v-16.25l-7.5 7.438z\"\/><\/svg>\n          <\/button>\n          <button class=\"scaler-courses__nav scaler-courses__nav--next js-courses-next\" aria-label=\"Next\">\n            <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"transform: rotate(90deg);\"><path d=\"M5.313 16l10.688-10.688 10.688 10.688-1.938 1.875-7.438-7.438v16.25h-2.625v-16.25l-7.5 7.438z\"\/><\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", () => {\n      const EXTRA_COUNT_ADDED = 1000;\n\n      \/\/ Mirrors getInstructorStar(): first token of the headline.\n      function getInstructorStar(headline) {\n        return (headline || \"\").toString().split(\" \")[0] || \"\";\n      }\n\n      document.querySelectorAll(\".js-scaler-courses\").forEach(container => {\n        if (container.dataset.initialized === \"true\") return;\n        container.dataset.initialized = \"true\";\n\n        const swiperElement = container.querySelector(\".scaler-courses-swiper\");\n        const wrapper = container.querySelector(\".js-courses-wrapper\");\n        const template = container.querySelector(\".js-course-card-template\");\n        const nextBtn = container.querySelector(\".js-courses-next\");\n        const prevBtn = container.querySelector(\".js-courses-prev\");\n\n        if (!wrapper || !template) return;\n\n        const swiper = new Swiper(swiperElement, {\n          slidesPerView: \"auto\",\n          spaceBetween: 16,\n          grabCursor: true,\n          observer: true,\n          observeParents: true,\n          navigation: { nextEl: nextBtn, prevEl: prevBtn },\n        });\n\n        const pathParts = location.pathname.split(\"\/\").filter(Boolean);\n        const currentSlug = pathParts.length > 0 ? pathParts[pathParts.length - 1] : \"homepage\";\n\n        function showSkeletons(count = 4) {\n          wrapper.innerHTML = \"\";\n          for (let i = 0; i < count; i++) {\n            const clone = template.content.cloneNode(true);\n            clone.querySelector(\".scaler-course-card\").classList.add(\"scaler-course-card--skeleton\");\n            wrapper.appendChild(clone);\n          }\n          swiper.update();\n        }\n\n        function renderCourses(courses) {\n          wrapper.innerHTML = \"\";\n          if (!courses.length) { container.style.display = \"none\"; return; }\n\n          courses.forEach(item => {\n            const a = item.attributes || {};\n            const clone = template.content.cloneNode(true);\n            const instructor = (a.instructors_data && a.instructors_data[0]) || {};\n\n            clone.querySelector(\".js-course-link\").href =\n              `https:\/\/www.scaler.com\/topics\/course\/${a.slug}\/?utm_source=blog&utm_medium=free_courses&utm_content=${currentSlug}`;\n\n            const img = clone.querySelector(\".js-course-image\");\n            img.src = a.cover_image_thumbnail || a.featured_image || \"\";\n            img.alt = a.title || \"\";\n\n            clone.querySelector(\".js-course-title\").textContent = a.title || \"\";\n\n            const instrEl = clone.querySelector(\".js-course-instructor\");\n            if (instructor.name) {\n              instrEl.innerHTML = \"A Course by <b><\/b>\";\n              instrEl.querySelector(\"b\").textContent = instructor.name;\n            } else {\n              instrEl.style.display = \"none\";\n            }\n\n            clone.querySelector(\".js-course-desc\").textContent = a.description || \"\";\n\n            \/\/ Star\n            const star = getInstructorStar(instructor.star_headline);\n            const starWrap = clone.querySelector(\".js-course-star\");\n            if (star && star !== \"0\") clone.querySelector(\".js-course-star-val\").textContent = star;\n            else starWrap.style.display = \"none\";\n\n            \/\/ Enrolled count (+1000 like topics)\n            clone.querySelector(\".js-course-reg\").textContent =\n              ((a.user_registration_count || 0) + EXTRA_COUNT_ADDED).toLocaleString(\"en-US\");\n\n            wrapper.appendChild(clone);\n          });\n\n          swiper.update();\n          swiper.slideTo(0);\n        }\n\n        async function fetchCourses() {\n          try {\n            showSkeletons();\n            \/\/ Public same-origin endpoint (topics course search). Returns 6 free courses.\n            const res = await fetch(\"\/topics\/api\/v1\/search\/courses\", {\n              method: \"POST\",\n              headers: {\n                \"Content-Type\": \"application\/json\",\n                \"Accept\": \"application\/json\",\n                \"X-Requested-With\": \"XMLHttpRequest\",\n              },\n              body: JSON.stringify({\n                filters: {\n                  q: \"\",\n                  page: { limit: 6, current_page: 1 },\n                  sort: { key: \"user_registration_count\", order: \"desc\" },\n                  filter_type: null,\n                  tags: [],\n                  program: [],\n                  level: [],\n                  category_type: [],\n                },\n              }),\n            });\n            const json = await res.json();\n            const courses = (json && json.data) || [];\n            renderCourses(courses);\n          } catch (error) {\n            console.error(\"Failed to load courses:\", error);\n            container.style.display = \"none\";\n          }\n        }\n\n        fetchCourses();\n      });\n    });\n    <\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"angular-roadmap-phase-2-%e2%80%93-intermediate-concepts-weeks-5-8\"><\/span><strong>Angular Roadmap: Phase 2 &#8211; Intermediate Concepts (Weeks 5-8)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Routing &amp; Navigation<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Set up routing using RouterModule and define a few routes to map URLs to components.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create separate components for different views, like a home page and a details page, and connect them using paths. Use &lt;router-outlet&gt; to decide where the active route gets rendered, and routerLink to move between views.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try passing route parameters next. For example, include an ID in the URL (\/product\/1) and read it inside the component to load the corresponding data.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add a guard like canActivate when a route shouldn\u2019t be accessible to everyone. For instance, restrict a dashboard route unless a user is logged in.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reactive Forms \/ Template-Driven Forms<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Build the same form twice, once with each approach. That\u2019s the easiest way to see the difference between them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try building it first using template forms, with validations defined in the HTML. Use ngModel in the template and attach validations like required or minlength directly there. Most of the form logic stays in the HTML, so changes are tied closely to the template.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now switch to reactive forms and recreate the same setup. Define the form in the component using FormGroup and FormControl, and add validators in the TypeScript file. The template just binds to this structure instead of holding the logic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try a couple of small changes, disable the submit button when the form is invalid, or show errors only after a field is touched. The behavior comes from the form state, not scattered conditions in the template.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As soon as the form grows or fields need to be added dynamically, this difference becomes more obvious. Reactive forms keep the structure in one place, which makes those updates easier to manage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>RxJS &amp; Observables<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Angular uses Observables in a lot of places, such as HTTP requests, form value changes, and route params, so there\u2019s a chance that you\u2019ll run into them early.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create a simple Observable, subscribe to it, and handle the emitted values. Pay attention to when the subscription stays active and when it needs to be cleaned up to avoid leaks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add a few operators like map, filter, or debounceTime, and see how they change the data stream before it reaches your component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A quick way to see this in action is to hook up a search input, listen to value changes, and delay the API call using debounceTime. Without it, every keystroke triggers a request. With it, the calls wait until the user pauses typing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HTTP Client &amp; API Integration<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use Angular\u2019s HttpClient to make GET and POST requests.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Connect your app to a public API and display the data in a component. Handle loading states and basic error cases.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Move API calls into a service so they\u2019re not written directly in components. At this stage, you should be able to fetch data, display it, and update the UI based on responses.<\/p>\n\n\n<style data-wp-block-html=\"css\">\n<style>\n      :root {\n        --sp-brand: #255aad;            \/* brand blue *\/\n        --sp-brand-hover: #19468c;\n        --sp-card-bg: #ffffff;          \/* neutral-scale-0 *\/\n        --sp-surface: #f4f6f9;          \/* neutral-scale-2 *\/\n        --sp-pill-bg: #f8fafc;\n        --sp-border: #d6dee5;           \/* neutral-scale-4 *\/\n        --sp-text-primary: #1a2c47;     \/* neutral-scale-12 *\/\n        --sp-text-secondary: #61738e;   \/* neutral-scale-9 *\/\n      }\n\n      .scaler-placement * { box-sizing: border-box; }\n\n      .scaler-placement {\n        font-family: \"Source Sans 3\", \"Source Sans Pro\", \"Roboto\", Arial, sans-serif;\n        width: 100%;\n        max-width: 100%;\n        margin: 24px auto;\n        display: flex;\n        flex-direction: column;\n      }\n\n      \/* ---- Placement report (OnlineCallout) ---- *\/\n      .scaler-placement__title {\n        font-size: 24px;\n        font-weight: 600;\n        line-height: 1.3;\n        color: var(--sp-text-primary);\n        margin: 0 0 16px;\n      }\n\n      .scaler-placement__card {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        background: var(--sp-card-bg);\n        border: 1px solid var(--sp-border);\n        border-radius: 20px;\n        padding: 16px;\n        box-shadow: 0 8px 32px rgba(37, 90, 173, 0.04);\n        overflow: hidden;\n        gap: 5px;\n      }\n\n      .scaler-placement__top {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        width: 100%;\n        gap: 18px;\n      }\n\n      .scaler-placement__stat-block {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        width: 30%;\n        min-width: 200px;\n        flex-shrink: 0;\n        background: var(--sp-surface);\n        border: 1px solid var(--sp-border);\n        border-radius: 16px;\n        padding: 16px 10px;\n        gap: 8px;\n      }\n      .scaler-placement__stat-number {\n        font-size: 48px;\n        font-weight: 600;\n        line-height: 1;\n        color: var(--sp-brand);\n        text-align: center;\n      }\n      .scaler-placement__stat-label {\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 14px;\n        color: rgba(37, 90, 173, 0.85);\n        text-transform: uppercase;\n        letter-spacing: 0.8px;\n      }\n\n      .scaler-placement__info {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        flex: 1;\n        gap: 10px;\n      }\n      .scaler-placement__proof-header {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 8px;\n      }\n      .scaler-placement__proof-header svg { width: 18px; height: 18px; flex-shrink: 0; }\n      .scaler-placement__proof-label {\n        font-size: 12px;\n        font-weight: 600;\n        line-height: 16px;\n        color: var(--sp-brand);\n        text-transform: uppercase;\n        letter-spacing: 1px;\n      }\n      .scaler-placement__body-text {\n        font-size: 16px;\n        font-weight: 400;\n        line-height: 24px;\n        color: var(--sp-text-primary);\n        margin: 0;\n      }\n\n      .scaler-placement__bottom {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        margin-left: calc(30% + 18px);\n        width: calc(70% - 18px);\n        gap: 12px;\n      }\n      .scaler-placement__stats-row {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 24px;\n      }\n      .scaler-placement__stat-item {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 8px;\n      }\n      .scaler-placement__stat-item > svg {\n        color: var(--sp-brand);\n        width: 18px;\n        height: 18px;\n        flex-shrink: 0;\n      }\n      .scaler-placement__stat-text {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 4px;\n      }\n      .scaler-placement__stat-value {\n        font-size: 16px;\n        font-weight: 600;\n        line-height: 24px;\n        color: var(--sp-text-primary);\n      }\n      .scaler-placement__stat-desc {\n        font-size: 14px;\n        font-weight: 400;\n        line-height: 20px;\n        color: var(--sp-text-secondary);\n      }\n\n      .scaler-placement__cta,\n      .scaler-placement__cta:link,\n      .scaler-placement__cta:visited {\n        display: inline-flex;\n        align-items: center;\n        align-self: flex-start;\n        font-size: 14px;\n        font-weight: 600;\n        line-height: 20px;\n        color: var(--sp-brand) !important;\n        gap: 6px;\n        text-decoration: none;\n        cursor: pointer;\n        margin-top: 2px;\n        transition: color 0.25s ease;\n      }\n      .scaler-placement__cta:hover,\n      .scaler-placement__cta:focus { color: var(--sp-brand-hover) !important; }\n      .scaler-placement__cta svg {\n        width: 14px;\n        height: 14px;\n        fill: currentColor;\n        transition: transform 0.25s ease;\n      }\n      .scaler-placement__cta:hover svg { transform: translateX(3px); }\n\n      \/* ---- Hiring Partners ---- *\/\n      .scaler-hiring {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n        gap: 8px 12px;\n        margin: 24px 0 8px;\n        padding-top: 16px;\n        border-top: 1px solid var(--sp-border);\n      }\n      .scaler-hiring__label {\n        font-size: 14px;\n        color: var(--sp-text-secondary);\n        white-space: nowrap;\n      }\n      .scaler-hiring__pills {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        gap: 8px;\n      }\n      .scaler-hiring__pill {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        padding: 5px 12px 5px 5px;\n        background: var(--sp-pill-bg);\n        border-radius: 999px;\n      }\n      .scaler-hiring__badge {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        background: #ffffff;\n      }\n      .scaler-hiring__logo {\n        width: 16px !important;\n        height: 16px !important;\n        object-fit: contain;\n        margin: 0 !important;\n        display: block;\n      }\n      .scaler-hiring__name {\n        font-size: 14px;\n        font-weight: 600;\n        color: var(--sp-text-primary);\n      }\n      .scaler-hiring__more {\n        font-size: 14px;\n        color: var(--sp-text-secondary);\n      }\n\n      @media (max-width: 768px) {\n        .scaler-placement__title { font-size: 18px; margin-bottom: 12px; }\n        .scaler-placement__card { gap: 16px; border-radius: 16px; }\n        .scaler-placement__top { gap: 12px; }\n        .scaler-placement__stat-block { width: 35%; min-width: 110px; padding: 12px 8px; gap: 4px; }\n        .scaler-placement__stat-number { font-size: 24px; }\n        .scaler-placement__stat-label { font-size: 10px; }\n        .scaler-placement__body-text { font-size: 14px; line-height: 20px; }\n        .scaler-placement__bottom { margin-left: 0; width: 100%; gap: 16px; }\n        .scaler-placement__stats-row { flex-wrap: wrap; gap: 10px 16px; }\n        .scaler-placement__stat-value { font-size: 14px; line-height: 20px; }\n        .scaler-placement__stat-desc { font-size: 12px; line-height: 16px; }\n      }\n<\/style>\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n    <!-- Source Sans Pro (topics font) -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Sans+3:wght@400;600;700&#038;display=swap\" rel=\"stylesheet\">\n\n<div class=\"scaler-placement\">\n      <h2 class=\"scaler-placement__title\"><span class=\"ez-toc-section\" id=\"scaler-placement-report-and-statistics\"><\/span>Scaler Placement Report and Statistics<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n      <div class=\"scaler-placement__card\">\n        <div class=\"scaler-placement__top\">\n          <div class=\"scaler-placement__stat-block\">\n            <div class=\"scaler-placement__stat-number\">\u20b923L<\/div>\n            <div class=\"scaler-placement__stat-label\">AVG CTC<\/div>\n          <\/div>\n          <div class=\"scaler-placement__info\">\n            <div class=\"scaler-placement__proof-header\">\n              <svg viewBox=\"0 0 21 21\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M8.64 0 0 8.683V21h12.257l8.64-8.683V0H8.64zm-.11 17.257H3.725v-4.828H8.53v4.828zm7.901-1.88-4.174 4.194V8.684H1.447l4.076-4.14h10.914l-.006 10.83v.004z\" fill=\"#255aad\"><\/path><\/svg>\n              <span class=\"scaler-placement__proof-label\">SCALER PLACEMENT PROOF<\/span>\n            <\/div>\n            <p class=\"scaler-placement__body-text\">\n              Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching \u20b923L.\n            <\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"scaler-placement__bottom\">\n          <div class=\"scaler-placement__stats-row\">\n            <div class=\"scaler-placement__stat-item\">\n              <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M11.199 7.957c-3.086 0-5.588 2.502-5.588 5.588s2.502 5.588 5.588 5.588c3.086 0 5.588-2.502 5.588-5.588s-2.502-5.588-5.588-5.588zM3.611 13.545c0-4.191 3.397-7.588 7.588-7.588s7.588 3.397 7.588 7.588c0 4.191-3.397 7.588-7.588 7.588s-7.588-3.397-7.588-7.588z\"><\/path><path d=\"M21.090 6.369h0.003c1.989 0 3.897 0.79 5.303 2.197s2.197 3.314 2.197 5.303-0.79 3.897-2.197 5.303c-1.406 1.407-3.314 2.197-5.303 2.197-0.552 0-1-0.448-1-1s0.448-1 1-1c1.459 0 2.858-0.579 3.889-1.611s1.611-2.43 1.611-3.889c0-1.459-0.58-2.858-1.611-3.889s-2.429-1.611-3.888-1.611c-0.507 0.002-1.013 0.070-1.502 0.203-0.533 0.145-1.082-0.17-1.227-0.703s0.17-1.082 0.703-1.227c0.659-0.179 1.339-0.27 2.021-0.272z\"><\/path><path d=\"M10.906 21.364c-1.605 0-3.186 0.386-4.61 1.126s-2.649 1.811-3.572 3.124c-0.318 0.452-0.941 0.561-1.393 0.243s-0.561-0.941-0.243-1.393c1.107-1.576 2.577-2.862 4.286-3.749s3.606-1.351 5.532-1.351 3.823 0.463 5.532 1.351c1.709 0.888 3.179 2.174 4.286 3.749 0.318 0.452 0.209 1.076-0.243 1.393s-1.076 0.209-1.393-0.243c-0.923-1.313-2.148-2.385-3.572-3.124s-3.005-1.126-4.61-1.126z\"><\/path><path d=\"M25.704 22.493c-1.424-0.74-3.005-1.125-4.61-1.124-0.552 0-1-0.447-1.001-0.999s0.447-1 0.999-1.001c1.926-0.001 3.824 0.462 5.533 1.349s3.179 2.174 4.286 3.751c0.317 0.452 0.208 1.076-0.244 1.393s-1.076 0.208-1.393-0.244c-0.922-1.313-2.147-2.385-3.571-3.125z\"><\/path><\/svg>\n              <div class=\"scaler-placement__stat-text\">\n                <span class=\"scaler-placement__stat-value\">11,000+<\/span>\n                <span class=\"scaler-placement__stat-desc\">placements<\/span>\n              <\/div>\n            <\/div>\n            <div class=\"scaler-placement__stat-item\">\n              <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M1.2 27.5c0-0.442 0.358-0.8 0.8-0.8h28c0.442 0 0.8 0.358 0.8 0.8s-0.358 0.8-0.8 0.8h-28c-0.442 0-0.8-0.358-0.8-0.8z\"><\/path><path d=\"M3.727 4.227c0.338-0.338 0.795-0.527 1.273-0.527h12c0.477 0 0.935 0.19 1.273 0.527s0.527 0.795 0.527 1.273v22c0 0.442-0.358 0.8-0.8 0.8s-0.8-0.358-0.8-0.8v-22c0-0.053-0.021-0.104-0.059-0.141s-0.088-0.059-0.141-0.059h-12c-0.053 0-0.104 0.021-0.141 0.059s-0.059 0.088-0.059 0.141v22c0 0.442-0.358 0.8-0.8 0.8s-0.8-0.358-0.8-0.8v-22c0-0.477 0.19-0.935 0.527-1.273z\"><\/path><path d=\"M17.2 12.5c0-0.442 0.358-0.8 0.8-0.8h9c0.477 0 0.935 0.19 1.273 0.527s0.527 0.795 0.527 1.273v14c0 0.442-0.358 0.8-0.8 0.8s-0.8-0.358-0.8-0.8v-14c0-0.053-0.021-0.104-0.059-0.141s-0.088-0.059-0.141-0.059h-9c-0.442 0-0.8-0.358-0.8-0.8z\"><\/path><path d=\"M7.2 9.5c0-0.442 0.358-0.8 0.8-0.8h4c0.442 0 0.8 0.358 0.8 0.8s-0.358 0.8-0.8 0.8h-4c-0.442 0-0.8-0.358-0.8-0.8z\"><\/path><path d=\"M9.2 17.5c0-0.442 0.358-0.8 0.8-0.8h4c0.442 0 0.8 0.358 0.8 0.8s-0.358 0.8-0.8 0.8h-4c-0.442 0-0.8-0.358-0.8-0.8z\"><\/path><path d=\"M7.2 22.5c0-0.442 0.358-0.8 0.8-0.8h4c0.442 0 0.8 0.358 0.8 0.8s-0.358 0.8-0.8 0.8h-4c-0.442 0-0.8-0.358-0.8-0.8z\"><\/path><path d=\"M21.2 22.5c0-0.442 0.358-0.8 0.8-0.8h2c0.442 0 0.8 0.358 0.8 0.8s-0.358 0.8-0.8 0.8h-2c-0.442 0-0.8-0.358-0.8-0.8z\"><\/path><path d=\"M21.2 17.5c0-0.442 0.358-0.8 0.8-0.8h2c0.442 0 0.8 0.358 0.8 0.8s-0.358 0.8-0.8 0.8h-2c-0.442 0-0.8-0.358-0.8-0.8z\"><\/path><\/svg>\n              <div class=\"scaler-placement__stat-text\">\n                <span class=\"scaler-placement__stat-value\">650+<\/span>\n                <span class=\"scaler-placement__stat-desc\">companies<\/span>\n              <\/div>\n            <\/div>\n            <div class=\"scaler-placement__stat-item\">\n              <svg viewBox=\"0 0 25 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M5.60938 18.8906C4.74688 18.0281 5.31875 16.2188 4.87813 15.1594C4.4375 14.1 2.75 13.1719 2.75 12C2.75 10.8281 4.41875 9.9375 4.87813 8.84063C5.3375 7.74375 4.74688 5.97187 5.60938 5.10938C6.47187 4.24688 8.28125 4.81875 9.34063 4.37813C10.4 3.9375 11.3281 2.25 12.5 2.25C13.6719 2.25 14.5625 3.91875 15.6594 4.37813C16.7562 4.8375 18.5281 4.24688 19.3906 5.10938C20.2531 5.97187 19.6812 7.78125 20.1219 8.84063C20.5625 9.9 22.25 10.8281 22.25 12C22.25 13.1719 20.5813 14.0625 20.1219 15.1594C19.6625 16.2562 20.2531 18.0281 19.3906 18.8906C18.5281 19.7531 16.7188 19.1812 15.6594 19.6219C14.6 20.0625 13.6719 21.75 12.5 21.75C11.3281 21.75 10.4375 20.0813 9.34063 19.6219C8.24375 19.1625 6.47187 19.7531 5.60938 18.8906Z\" fill=\"#ffffff\" stroke=\"#255aad\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><path d=\"M16.625 9.75L11.1219 15L8.375 12.375\" stroke=\"#255aad\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n              <span class=\"scaler-placement__stat-desc\">Verified data<\/span>\n            <\/div>\n          <\/div>\n\n          <a class=\"scaler-placement__cta\" href=\"https:\/\/d2beiqkhq929f0.cloudfront.net\/public_assets\/assets\/000\/195\/869\/original\/Scaler_Career_Report.pdf?1778499863\" target=\"_blank\" rel=\"noopener\">\n            See full placement report\n            <svg viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"transform: rotate(90deg);\"><path d=\"M5.313 16l10.688-10.688 10.688 10.688-1.938 1.875-7.438-7.438v16.25h-2.625v-16.25l-7.5 7.438z\"><\/path><\/svg>\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"scaler-hiring\">\n        <span class=\"scaler-hiring__label\">Hiring Partners:<\/span>\n        <div class=\"scaler-hiring__pills\">\n          <span class=\"scaler-hiring__pill\">\n            <span class=\"scaler-hiring__badge\"><img decoding=\"async\" class=\"scaler-hiring__logo\" src=\"https:\/\/d19zaobb0foqu6.cloudfront.net\/topics\/images\/googleicon_.svg\" alt=\"Google\" loading=\"lazy\"><\/span>\n            <span class=\"scaler-hiring__name\">Google<\/span>\n          <\/span>\n          <span class=\"scaler-hiring__pill\">\n            <span class=\"scaler-hiring__badge\"><img decoding=\"async\" class=\"scaler-hiring__logo\" src=\"https:\/\/d19zaobb0foqu6.cloudfront.net\/topics\/images\/amazonicon_.svg\" alt=\"Amazon\" loading=\"lazy\"><\/span>\n            <span class=\"scaler-hiring__name\">Amazon<\/span>\n          <\/span>\n          <span class=\"scaler-hiring__pill\">\n            <span class=\"scaler-hiring__badge\"><img decoding=\"async\" class=\"scaler-hiring__logo\" src=\"https:\/\/d19zaobb0foqu6.cloudfront.net\/topics\/images\/microsoft.svg\" alt=\"Microsoft\" loading=\"lazy\"><\/span>\n            <span class=\"scaler-hiring__name\">Microsoft<\/span>\n          <\/span>\n          <span class=\"scaler-hiring__pill\">\n            <span class=\"scaler-hiring__badge\"><img decoding=\"async\" class=\"scaler-hiring__logo\" src=\"https:\/\/d19zaobb0foqu6.cloudfront.net\/topics\/images\/flipkarticon_.svg\" alt=\"Flipkart\" loading=\"lazy\"><\/span>\n            <span class=\"scaler-hiring__name\">Flipkart<\/span>\n          <\/span>\n          <span class=\"scaler-hiring__pill\">\n            <span class=\"scaler-hiring__badge\"><img decoding=\"async\" class=\"scaler-hiring__logo\" src=\"https:\/\/d19zaobb0foqu6.cloudfront.net\/topics\/images\/adobeicon_.svg\" alt=\"Adobe\" loading=\"lazy\"><\/span>\n            <span class=\"scaler-hiring__name\">Adobe<\/span>\n          <\/span>\n          <span class=\"scaler-hiring__more\">1200+ more<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"angular-roadmap-phase-3-advanced-topics-weeks-9-14\"><\/span><strong>Angular Roadmap: Phase 3 - Advanced Topics (Weeks 9-14)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>State Management with NgRx<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">As your app grows, passing data between components starts getting messy. This is where NgRx comes in. Set up a simple store and understand how data flows through actions &gt; reducers &gt; selectors. Instead of updating the state directly in components, dispatch actions and let reducers handle updates. Try managing something like a cart, user data, or a list through the store. Also, look at the effects of handling async operations like API calls. It takes a bit of time to get used to the pattern, but once it clicks, it becomes easier to track where data is coming from and how it\u2019s changing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Angular Signals &amp; Standalone Components (v17+)<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Angular has moved toward signals for handling state updates more directly. Create a small example using signal, computed, and effect to see how values update in the UI without relying on older patterns. You\u2019ll notice it feels more predictable compared to previous approaches.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At the same time, work with standalone components instead of modules. Create components with standalone: true, import dependencies directly, and build a small feature without using NgModules. This reflects how newer Angular apps are structured now.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>SSR with Angular Universal<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Set up Angular Universal and run your app with server-side rendering. Check what changes in the initial load; HTML is rendered before the app becomes interactive. Try a simple page and compare load behavior with and without SSR. Also, look at cases where SSR helps, like faster initial rendering and better SEO for content-heavy pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Unit Testing: Jasmine &amp; Karma<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Write tests for both components and services. For components, check if they render correctly and respond to user actions. For services, test functions, and data handling. Use Jasmine to write test cases and Karma to run them. Try changing the code to see tests fail, then fix them. Also,o look at mocking dependencies so you\u2019re testing only what\u2019s needed instead of the entire app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Performance Optimization &amp; Lazy Loading<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Split your app using lazy-loaded routes so parts of the application load only when needed. This reduces the initial bundle size. Try creating separate modules or routes and loading them on the navigation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, look at change detection and how often components re-render. Reduce unnecessary updates by structuring components properly or using more controlled patterns like signals. Keep an eye on bundle size and remove unused dependencies where possible. Running a build and checking output size gives a clearer idea of what\u2019s affecting performance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"angular-vs-react-which-should-you-learn\"><\/span><strong>Angular vs React: Which Should You Learn?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Choosing between Angular and React can get confusing. Both can be used to build the same kind of applications, so the difference isn\u2019t obvious at first. It usually shows up once you start working with them, how the project is structured, how routing is handled, and how features are added. Putting them side by side makes that easier to see.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Angular<\/strong><\/td><td><strong>React<\/strong><\/td><\/tr><tr><td>Angular is a full framework, so it already includes routing, forms, dependency injection, and project structure.<\/td><td>React is a library, so you need to choose additional tools for routing, state management, and overall structure.<\/td><\/tr><tr><td>The project structure is predefined, which makes it easier to manage larger applications with multiple developers.<\/td><td>The structure is flexible, which gives you freedom but also requires you to decide how to organize your project.<\/td><\/tr><tr><td>Angular uses TypeScript by default, so the code is more structured from the start.<\/td><td>React primarily uses JavaScript, but TypeScript can be added if needed.<\/td><\/tr><tr><td>It takes more time to get comfortable with Angular because there are more concepts involved early on.<\/td><td>React is usually quicker to start with, since you can begin with just components and expand gradually.<\/td><\/tr><tr><td>Angular is commonly used in applications with multiple sections, forms, and complex data handling.<\/td><td>React is commonly used in applications where the UI changes frequently and needs flexibility.<\/td><\/tr><tr><td>Updates in Angular (like signals and standalone components) aim to simplify structure while keeping consistency.<\/td><td>React continues to evolve through its ecosystem, with tools and patterns changing over time.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">React is used more widely overall, with a larger number of job openings and community support. Angular, on the other hand, continues to be used in projects where a fixed structure and consistency across teams are important. The choice usually depends on how you prefer working, whether you want flexibility and faster entry with React, or a more structured setup with Angular that stays consistent as the project grows.<\/p>\n\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n    <!-- Source Sans Pro (topics font) -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Sans+3:wght@400;600;700&amp;display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\">\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\n\n    <style>\n      :root {\n        --ss-primary: #005bb3;        \/* primary-color-80 *\/\n        --ss-card-bg: #ffffff;\n        --ss-border: #e6e6e6;\n        --ss-quote-bg: #f6f6f6;\n        --ss-text-dark: #1c1c1c;\n        --ss-text-mid: #6b6b6b;\n        --ss-text-muted: #9a9a9a;\n        --ss-radius: 12px;\n        --ss-radius-sm: 8px;\n        --ss-shadow: 0 8px 16px 0 rgba(50, 71, 102, 0.16);\n      }\n\n      .scaler-ss * { box-sizing: border-box; }\n\n      .scaler-ss {\n        font-family: \"Source Sans 3\", \"Source Sans Pro\", \"Roboto\", Arial, sans-serif;\n        padding: 24px;\n        width: 100%;\n      }\n      .scaler-ss__inner {\n        max-width: 1000px;\n        margin: 0 auto;\n        position: relative;\n        width: 100%;\n      }\n\n      \/* Heading *\/\n      .scaler-ss__heading {\n        font-size: 26px;\n        line-height: 34px;\n        font-weight: 700;\n        margin: 0 0 16px;\n        text-align: center;\n        color: var(--ss-text-dark);\n      }\n\n      \/* Swiper *\/\n      .scaler-ss__swiper-wrap { position: relative; }\n      .scaler-ss .swiper { width: 100%; padding: 4px; }\n      .scaler-ss-swiper .swiper-slide {\n        width: 300px;          \/* topics card width *\/\n        height: auto;\n        display: flex;\n      }\n\n      \/* Card *\/\n      .scaler-ss-card {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        border: 1px solid var(--ss-border);\n        border-radius: var(--ss-radius);\n        overflow: hidden;\n        background: var(--ss-card-bg);\n      }\n\n      .scaler-ss-card__hike {\n        padding: 8px 12px;\n        background: var(--ss-primary);\n        color: #ffffff;\n        font-size: 14px;\n        font-weight: 700;\n        text-align: center;\n        letter-spacing: 0.4px;\n      }\n\n      .scaler-ss-card__body {\n        display: flex;\n        flex: 1 1 auto;\n        flex-direction: column;\n        gap: 12px;\n        padding: 16px;\n      }\n\n      \/* Person *\/\n      .scaler-ss-card__person {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n      .scaler-ss-card__avatar {\n        width: 44px;\n        height: 44px;\n        min-width: 44px;\n        border-radius: 50%;\n        object-fit: cover;\n        background: var(--ss-quote-bg);\n      }\n      .scaler-ss-card__name {\n        font-size: 16px;\n        font-weight: 700;\n        line-height: 20px;\n        color: var(--ss-text-dark);\n      }\n      .scaler-ss-card__city {\n        font-size: 13px;\n        line-height: 18px;\n        color: var(--ss-text-mid);\n      }\n\n      \/* Before \/ Now transition *\/\n      .scaler-ss-card__transition {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n      }\n      .scaler-ss-card__col {\n        flex: 1;\n        min-width: 0;\n      }\n      .scaler-ss-card__col-label {\n        font-size: 11px;\n        font-weight: 600;\n        letter-spacing: 0.4px;\n        color: var(--ss-text-muted);\n        margin-bottom: 2px;\n      }\n      .scaler-ss-card__col-role {\n        font-size: 13px;\n        line-height: 18px;\n        color: var(--ss-text-mid);\n      }\n      .scaler-ss-card__col-company {\n        font-size: 14px;\n        font-weight: 700;\n        line-height: 20px;\n        color: var(--ss-text-dark);\n      }\n      .scaler-ss-card__company-logo {\n        margin-top: 2px;\n        max-width: 64px;\n        max-height: 20px;\n        width: auto;\n        height: auto;\n        object-fit: contain;\n        display: block;\n      }\n      .scaler-ss-card__arrow {\n        flex-shrink: 0;\n        width: 28px;\n        height: 8px;\n        color: var(--ss-text-mid);\n        fill: currentColor;\n      }\n\n      \/* Quote *\/\n      .scaler-ss-card__quote {\n        font-size: 13px;\n        font-style: italic;\n        line-height: 19px;\n        color: var(--ss-text-mid);\n        background: var(--ss-quote-bg);\n        border-radius: var(--ss-radius-sm);\n        padding: 8px 10px;\n      }\n\n      \/* View Profile *\/\n      .scaler-ss-card__cta,\n      .scaler-ss-card__cta:link,\n      .scaler-ss-card__cta:visited {\n        display: block;\n        margin-top: auto;\n        text-align: center;\n        font-size: 14px;\n        font-weight: 600;\n        color: var(--ss-primary) !important;\n        text-decoration: none;\n        border: 1px solid var(--ss-primary);\n        border-radius: var(--ss-radius-sm);\n        padding: 9px 12px;\n        cursor: pointer;\n        transition: background 0.2s ease, color 0.2s ease;\n      }\n      .scaler-ss-card__cta:hover,\n      .scaler-ss-card__cta:focus {\n        background: var(--ss-primary);\n        color: #ffffff !important;\n      }\n\n      \/* Side navigation arrows *\/\n      .scaler-ss__nav {\n        position: absolute !important;\n        top: 50% !important;\n        transform: translateY(-50%) !important;\n        z-index: 2;\n        width: 46px !important;\n        height: 46px !important;\n        min-width: 46px;\n        display: flex !important;\n        align-items: center;\n        justify-content: center;\n        padding: 0 !important;\n        background: var(--ss-card-bg) !important;\n        border: none !important;\n        border-radius: var(--ss-radius-sm) !important;\n        box-shadow: var(--ss-shadow) !important;\n        color: #61738e !important;\n        cursor: pointer;\n        transition: opacity 0.2s ease, visibility 0.2s ease;\n      }\n      .scaler-ss__nav--prev { left: 8px !important; }\n      .scaler-ss__nav--next { right: 8px !important; }\n      .scaler-ss__nav svg {\n        width: 20px !important;\n        height: 20px !important;\n        fill: #61738e !important;\n      }\n      .scaler-ss__nav.swiper-button-disabled {\n        opacity: 0;\n        visibility: hidden;\n        pointer-events: none;\n      }\n\n      .scaler-ss .swiper-button-prev,\n      .scaler-ss .swiper-button-next,\n      .scaler-ss .swiper-pagination { display: none; }\n\n      \/* Skeleton *\/\n      .scaler-ss-card--skeleton { pointer-events: none; }\n      .scaler-ss-card--skeleton .scaler-ss-card__hike,\n      .scaler-ss-card--skeleton .scaler-ss-card__avatar,\n      .scaler-ss-card--skeleton .scaler-ss-card__person-text,\n      .scaler-ss-card--skeleton .scaler-ss-card__transition,\n      .scaler-ss-card--skeleton .scaler-ss-card__quote,\n      .scaler-ss-card--skeleton .scaler-ss-card__cta {\n        background: linear-gradient(90deg, var(--ss-border) 25%, var(--ss-quote-bg) 50%, var(--ss-border) 75%);\n        background-size: 200% 100%;\n        animation: ss-shimmer 1.5s infinite;\n        color: transparent !important;\n        border-color: transparent !important;\n        border-radius: 4px;\n      }\n      .scaler-ss-card--skeleton .scaler-ss-card__person-text { flex: 1; height: 32px; }\n      .scaler-ss-card--skeleton .scaler-ss-card__transition { height: 56px; }\n      .scaler-ss-card--skeleton .scaler-ss-card__quote { height: 48px; }\n      .scaler-ss-card--skeleton .scaler-ss-card__cta { height: 38px; }\n\n      @keyframes ss-shimmer {\n        0% { background-position: 200% 0; }\n        100% { background-position: -200% 0; }\n      }\n\n      @media (max-width: 768px) {\n        .scaler-ss { padding: 16px; }\n        .scaler-ss__heading { font-size: 22px; line-height: 30px; }\n        .scaler-ss-swiper .swiper-slide { width: 270px; }\n        .scaler-ss__nav { display: none !important; }\n      }\n    <\/style>\n\n\n\n    <div class=\"scaler-ss js-scaler-ss\">\n\n      <template class=\"js-ss-card-template\">\n        <div class=\"swiper-slide\">\n          <article class=\"scaler-ss-card\">\n            <div class=\"scaler-ss-card__hike js-ss-hike\"><\/div>\n            <div class=\"scaler-ss-card__body\">\n              <div class=\"scaler-ss-card__person\">\n                <img decoding=\"async\" class=\"scaler-ss-card__avatar js-ss-avatar\" src=\"\" alt=\"\" loading=\"lazy\">\n                <div class=\"scaler-ss-card__person-text\">\n                  <div class=\"scaler-ss-card__name js-ss-name\"><\/div>\n                  <div class=\"scaler-ss-card__city js-ss-city\"><\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"scaler-ss-card__transition\">\n                <div class=\"scaler-ss-card__col\">\n                  <div class=\"scaler-ss-card__col-label\">BEFORE:<\/div>\n                  <div class=\"scaler-ss-card__col-role js-ss-before-role\"><\/div>\n                  <div class=\"scaler-ss-card__col-company js-ss-before-company\"><\/div>\n                <\/div>\n                <svg class=\"scaler-ss-card__arrow\" viewBox=\"0 0 32 8\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M31.3882 4.35355C31.5835 4.15829 31.5835 3.84171 31.3882 3.64645L28.2062 0.464466C28.011 0.269204 27.6944 0.269204 27.4991 0.464466C27.3039 0.659728 27.3039 0.976311 27.4991 1.17157L30.3276 4L27.4991 6.82843C27.3039 7.02369 27.3039 7.34027 27.4991 7.53553C27.6944 7.7308 28.011 7.7308 28.2062 7.53553L31.3882 4.35355ZM0.034668 4.5H31.0347V3.5H0.034668V4.5Z\"><\/path><\/svg>\n                <div class=\"scaler-ss-card__col\">\n                  <div class=\"scaler-ss-card__col-label\">NOW:<\/div>\n                  <div class=\"scaler-ss-card__col-role js-ss-now-role\"><\/div>\n                  <div class=\"js-ss-now-company\"><\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"scaler-ss-card__quote js-ss-quote\"><\/div>\n\n              <a class=\"scaler-ss-card__cta js-ss-cta\" href=\"#\" target=\"_blank\" rel=\"noopener\">View Profile<\/a>\n            <\/div>\n          <\/article>\n        <\/div>\n      <\/template>\n\n      <div class=\"scaler-ss__inner\">\n        <h2 class=\"scaler-ss__heading\"><span class=\"ez-toc-section\" id=\"scaler-alumni-and-their-success-stories\"><\/span>Scaler Alumni and Their Success Stories<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n        <div class=\"scaler-ss__swiper-wrap\">\n          <div class=\"swiper scaler-ss-swiper\">\n            <div class=\"swiper-wrapper js-ss-wrapper\"><\/div>\n          <\/div>\n\n          <button class=\"scaler-ss__nav scaler-ss__nav--prev js-ss-prev\" aria-label=\"Previous\">\n            <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"transform: rotate(-90deg);\"><path d=\"M5.313 16l10.688-10.688 10.688 10.688-1.938 1.875-7.438-7.438v16.25h-2.625v-16.25l-7.5 7.438z\"><\/path><\/svg>\n          <\/button>\n          <button class=\"scaler-ss__nav scaler-ss__nav--next js-ss-next\" aria-label=\"Next\">\n            <svg fill=\"currentColor\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"transform: rotate(90deg);\"><path d=\"M5.313 16l10.688-10.688 10.688 10.688-1.938 1.875-7.438-7.438v16.25h-2.625v-16.25l-7.5 7.438z\"><\/path><\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", () => {\n\n      const ASSET_CDN = \"https:\/\/d2beiqkhq929f0.cloudfront.net\/public_assets\/assets\";\n      const AVATAR_FALLBACK =\n        \"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill='%23e6e6e6'\/%3E%3Ccircle cx='22' cy='17' r='7' fill='%23b9b9b9'\/%3E%3Cpath d='M8 40c0-8 6.3-13 14-13s14 5 14 13' fill='%23b9b9b9'\/%3E%3C\/svg%3E\";\n\n      \/\/ Mirrors buildAssetUrl(): pass through absolute urls, else build the CDN url.\n      function buildAssetUrl(raw) {\n        if (!raw) return \"\";\n        if (String(raw).startsWith(\"http\")) return raw;\n        return `${ASSET_CDN}\/${raw}\/original`;\n      }\n\n      const instances = document.querySelectorAll(\".js-scaler-ss\");\n\n      instances.forEach(container => {\n        if (container.dataset.initialized === \"true\") return;\n        container.dataset.initialized = \"true\";\n\n        const swiperElement = container.querySelector(\".scaler-ss-swiper\");\n        const wrapper = container.querySelector(\".js-ss-wrapper\");\n        const template = container.querySelector(\".js-ss-card-template\");\n        const nextBtn = container.querySelector(\".js-ss-next\");\n        const prevBtn = container.querySelector(\".js-ss-prev\");\n\n        if (!wrapper || !template) {\n          console.error(\"Scaler Success Stories: missing required elements\");\n          return;\n        }\n\n        const swiper = new Swiper(swiperElement, {\n          slidesPerView: \"auto\",\n          spaceBetween: 16,\n          grabCursor: true,\n          observer: true,\n          observeParents: true,\n          navigation: { nextEl: nextBtn, prevEl: prevBtn },\n        });\n\n        const pathParts = location.pathname.split(\"\/\").filter(Boolean);\n        const currentSlug = pathParts.length > 0 ? pathParts[pathParts.length - 1] : \"homepage\";\n        const profileUrl =\n          `https:\/\/www.scaler.com\/review\/?utm_source=blog&utm_medium=success_stories&utm_content=${currentSlug}`;\n\n        function showSkeletons(count = 4) {\n          wrapper.innerHTML = \"\";\n          for (let i = 0; i < count; i++) {\n            const clone = template.content.cloneNode(true);\n            clone.querySelector(\".scaler-ss-card\").classList.add(\"scaler-ss-card--skeleton\");\n            wrapper.appendChild(clone);\n          }\n          swiper.update();\n        }\n\n        function renderStories(stories) {\n          wrapper.innerHTML = \"\";\n          if (!stories.length) {\n            container.style.display = \"none\";   \/\/ match topics: render nothing when empty\n            return;\n          }\n\n          stories.forEach(story => {\n            const a = story.attributes || {};\n            const clone = template.content.cloneNode(true);\n\n            const hike = String(a.growth || \"\").replace(\"%\", \"\").trim() || \"150\";\n            clone.querySelector(\".js-ss-hike\").textContent = `${hike}% HIKE`;\n\n            \/\/ Avatar\n            const avatar = buildAssetUrl(a.image_url) || a.generated_thumbnail_url || \"\";\n            const img = clone.querySelector(\".js-ss-avatar\");\n            img.src = avatar || AVATAR_FALLBACK;\n            img.alt = a.name || \"Scaler alumnus\";\n            img.onerror = function () { this.onerror = null; this.src = AVATAR_FALLBACK; };\n\n            clone.querySelector(\".js-ss-name\").textContent = a.name || \"\";\n            const cityEl = clone.querySelector(\".js-ss-city\");\n            if (a.city) cityEl.textContent = a.city; else cityEl.style.display = \"none\";\n\n            \/\/ BEFORE\n            clone.querySelector(\".js-ss-before-role\").textContent = a.pre_scaler_role || a.pre_academy_company || \"\";\n            const beforeCompany = clone.querySelector(\".js-ss-before-company\");\n            if (a.pre_academy_company) beforeCompany.textContent = a.pre_academy_company;\n            else beforeCompany.style.display = \"none\";\n\n            \/\/ NOW\n            clone.querySelector(\".js-ss-now-role\").textContent = a.role || \"\";\n            const nowCompanyBox = clone.querySelector(\".js-ss-now-company\");\n            const companyLogo = buildAssetUrl(a.company_logo_url);\n            if (companyLogo) {\n              const logo = document.createElement(\"img\");\n              logo.className = \"scaler-ss-card__company-logo\";\n              logo.src = companyLogo;\n              logo.alt = a.post_academy_company || \"company\";\n              logo.loading = \"lazy\";\n              logo.onerror = function () {\n                this.onerror = null;\n                this.replaceWith(Object.assign(document.createElement(\"div\"), {\n                  className: \"scaler-ss-card__col-company\",\n                  textContent: a.post_academy_company || \"\",\n                }));\n              };\n              nowCompanyBox.appendChild(logo);\n            } else if (a.post_academy_company) {\n              nowCompanyBox.className = \"scaler-ss-card__col-company\";\n              nowCompanyBox.textContent = a.post_academy_company;\n            }\n\n            \/\/ Quote (clip to 110 chars like topics)\n            const quoteEl = clone.querySelector(\".js-ss-quote\");\n            quoteEl.textContent = `\u201c${String(a.content).slice(0, 110)}\u2026\u201d`;\n\n            \/\/ View Profile\n            clone.querySelector(\".js-ss-cta\").href = profileUrl;\n\n            wrapper.appendChild(clone);\n          });\n\n          swiper.update();\n          swiper.slideTo(0);\n        }\n\n        async function fetchStories() {\n          try {\n            showSkeletons();\n            \/\/ Same-origin POST on www.scaler.com (the blog canonical host).\n            \/\/ The endpoint only returns JSON when the Referer is a \/topics\/ page\n            \/\/ (a soft anti-hotlinking gate); a \/blog\/ referer gets a Turbolinks\n            \/\/ redirect. Since blog + topics are the same origin, we set the\n            \/\/ fetch referrer to a topics URL so the server serves the data.\n            const res = await fetch(\"\/success-stories\/testimonials\", {\n              method: \"POST\",\n              credentials: \"include\",\n              referrer: \"https:\/\/www.scaler.com\/topics\/\",\n              referrerPolicy: \"unsafe-url\",\n              headers: {\n                \"Content-Type\": \"application\/json\",\n                \"Accept\": \"application\/json\",\n                \"X-Requested-With\": \"XMLHttpRequest\",\n              },\n              \/\/ q:{} => all programs (no program filter)\n              body: JSON.stringify({\n                page_number: 1,\n                per_page: 12,\n                sort_by: \"eligible_for_qna\",\n                new_quick_filters: true,\n                quick_filter: [],\n                q: {},\n              }),\n            });\n            const json = await res.json();\n            const all = (json && json.data && json.data.data) || [];\n            \/\/ Only show stories that carry a testimonial quote (matches topics).\n            const withQuote = all.filter(s => s.attributes && s.attributes.content);\n            renderStories(withQuote);\n          } catch (error) {\n            console.error(\"Failed to load success stories:\", error);\n            container.style.display = \"none\";\n          }\n        }\n\n        fetchStories();\n      });\n    });\n    <\/script>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"faqs\"><\/span><strong>FAQs<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q1. How long does it take to learn Angular?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It usually takes around 10-14 weeks to get comfortable with the basics and start building small applications. This depends on how consistently you practice and whether you\u2019re building alongside learning.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q2. Is Angular still worth learning in 2026?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, Angular is still actively used, especially in applications that involve multiple sections, forms, and structured workflows. Recent updates have also made it easier to work with compared to older versions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q3. Should I learn React or Angular first?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re just starting, React is usually easier to pick up because it has fewer concepts upfront. Angular takes more time initially, but it provides a structured way of building applications once you get used to it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q4. Do I need TypeScript to learn Angular?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, Angular uses TypeScript by default. You don\u2019t need advanced knowledge, but you should be comfortable with basics like variables, functions, classes, and types.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q5. What is the latest version of Angular?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The latest major version is Angular 21, released in late 2025, which includes updates like signals, zoneless setup, and improved tooling.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Many people wonder if Angular is still used today. And why?&nbsp; Well, you\u2019ll be surprised by how much Angular is useful, especially in the current scenario. Angular is used in applications where the interface has multiple sections, forms, dashboards, and different user roles. In these kinds of apps, users are constantly interacting with data, submitting [&hellip;]<\/p>\n","protected":false},"author":210,"featured_media":12469,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[333,35],"tags":[248],"class_list":["post-12465","post","type-post","status-publish","format-standard","has-post-thumbnail","category-roadmap","category-software-development","tag-software-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/posts\/12465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/users\/210"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/comments?post=12465"}],"version-history":[{"count":2,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/posts\/12465\/revisions"}],"predecessor-version":[{"id":13850,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/posts\/12465\/revisions\/13850"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/media\/12469"}],"wp:attachment":[{"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/media?parent=12465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/categories?post=12465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/tags?post=12465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}