{"id":14418,"date":"2026-09-01T18:23:51","date_gmt":"2026-09-01T12:53:51","guid":{"rendered":"https:\/\/www.scaler.com\/blog\/?p=14418"},"modified":"2026-09-01T18:24:27","modified_gmt":"2026-09-01T12:54:27","slug":"angular-projects-to-build","status":"publish","type":"post","link":"https:\/\/www.scaler.com\/blog\/angular-projects-to-build\/","title":{"rendered":"15 Angular Projects to Build in 2026: From First App to Portfolio Standout"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Looking for Angular projects to build? That\u2019s probably one of the best things you can do once you\u2019re done learning the basics. And honestly, it can feel a little harder to build something on your own than it did to follow along with a course or tutorial. You know the concepts, but putting them together into a working application is a different kind of challenge. That\u2019s also where the real learning starts. You understand what a concept is supposed to do, but building with it forces you to figure out where it belongs, how the pieces fit together, and what happens when things don\u2019t go as planned.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s why we\u2019ve put together 15 angular project ideas, ranked from a first app you can finish in an evening to a more substantial project you can take into an interview. For every project, you\u2019ll see the Angular concepts it puts into practice, along with the difficulty, estimated build time, interview value, and ways to take it further. We\u2019ve also kept the projects aligned with modern Angular, so you\u2019ll be working with standalone components and signals so you don\u2019t have to worry about dealing with older patterns.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to follow a structured syllabus before you start building, here\u2019s our complete <a href=\"https:\/\/www.scaler.com\/blog\/angular-roadmap-2026-complete-learning-path-from-basics-to-advanced\/\">Angular learning path from basics to advanced<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-use-this-list-tiers-build-times-and-the-one-rule\"><\/span><strong>How to Use This List: Tiers, Build Times, and the One Rule<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The best way to choose an angular project is to first analyze what you already know and practice on it. If you\u2019re still getting used to the Angular fundamentals, start with a smaller application where you can focus on how the pieces fit together. If routing, APIs, and RxJS are already familiar, you can take on something with more moving parts. And if your goal is a portfolio project, you\u2019ll want something that gives you enough space to think about testing, performance, accessibility, and the kind of structure you\u2019d use in a larger application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s why the angular projects below are grouped into three tiers:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Tier<\/strong><\/td><td><strong>Focused hours<\/strong><\/td><td><strong>Angular concepts introduced<\/strong><\/td><td><strong>What it proves<\/strong><\/td><\/tr><tr><td><strong>Tier 1: First Apps<\/strong><\/td><td>Evening to weekend<\/td><td>Components, templates, services, basic routing and forms<\/td><td>You can turn Angular fundamentals into a working app<\/td><\/tr><tr><td><strong>Tier 2: Intermediate<\/strong><\/td><td>Around 15-25 hours<\/td><td>Routing, forms, HTTP, RxJS, shared state, and API integration<\/td><td>You can build a more complete application and handle real data<\/td><\/tr><tr><td><strong>Tier 3: Portfolio Standouts<\/strong><\/td><td>Around 30-50+ hours<\/td><td>Advanced state, RxJS, performance, testing, accessibility, and enterprise patterns<\/td><td>You can think beyond features and build something closer to a production application<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We have mentioned the build tmes in terms of hours instead of days, because everyone\u2019s schedule is different and you might put 6 hours in 1 day or stretch it till 3 so its better knowing tome wise. For your first project in a tier, though, you should consider double the estimate to be on the safer side. You\u2019ll need extra time to work with unfamiliar concepts, rethink parts of the implementation, and fix problems that only show up once everything is connected.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And yes, don\u2019t worry about implementing all the projects listed here, just pick around 2 &#8211; 4 projects. Take each one all the way through the portfolio standard we cover later, including testing, error handling, accessibility, documentation, and deployment. In the end of the day, when you\u2019ll have complete projects to show, it\u2019ll be the best point of discussion in interviews and also the best way for you to get practice with the system.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For your setup, keep things simple. If you already understand Angular workspaces, you can use one workspace for multiple apps or shared libraries. Otherwise, give each project its own repository, README, and live URL. You can always move to a shared workspace later when you\u2019re comfortable with how Angular workspaces work.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re still figuring out which skills to work on, you can also see how they line up with the <a href=\"https:\/\/www.scaler.com\/blog\/front-end-developer-skills\/\">front-end developer skills employers screen for<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"before-you-start-%e2%80%93-modern-angular-in-2026-what-changed-and-why-it-matters-for-your-projects\"><\/span><strong>Before You Start &#8211; Modern Angular in 2026: What Changed and Why It Matters for Your Projects<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019ve been learning Angular through older tutorials, you may notice that some of the code you come across in this list looks different from what you\u2019ve seen before. Angular has changed quite a bit, and the current approach puts more of the framework\u2019s core features directly into the components and templates you work with every day. We are covering the current updated version which is the Angular 22 and siince Angular continues to evolve, it\u2019s worth checking the <a href=\"https:\/\/angular.io\/docs\" target=\"_blank\" rel=\"noopener\">official Angular documentation<\/a> for the version you\u2019re using before you start.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Standalone components are the default.<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You no longer need to organise a new application around an AppModule and a declarations array. Angular components are standalone by default, and the dependencies a component uses can be listed directly in its imports.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">@Component({<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;imports: [UserCard],<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;\/\/ &#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">})<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">export class Dashboard {}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a new project, this keeps the structure easier to follow: open a component, and you can see what it needs right there.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Signals give you a simpler way to handle state.<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Signals are now a central part of Angular&#8217;s reactive model. Use signal() for writable state and computed() when a value should be derived from other state. effect() is there for genuine side effects, such as synchronising with an external API or browser storage, rather than for passing state from one signal to another.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">count = signal(0);<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">doubleCount = computed(() =&gt; this.count() * 2);<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ll also see RxJS throughout the more advanced projects. The two aren&#8217;t competing approaches: signals work particularly well for application state, while RxJS remains useful for asynchronous streams and event-heavy workflows.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Built-in control flow makes templates easier to read<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">New Angular templates use @if, @for, and @switch for control flow. With @for, you should provide a track expression so Angular can efficiently associate your data with the DOM.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">@if (user) {<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&lt;p&gt;Welcome, {{ user.name }}&lt;\/p&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">@for (item of items; track item.id) {<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&lt;app-item [item]=&#8221;item&#8221; \/&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also use @defer when part of a page doesn&#8217;t need to load immediately, which is used for things such as heavy charts, maps, or comment sections.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>inject()<\/strong> <strong>fits naturally into modern Angular<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ll still see constructor injection in existing applications, but inject() is particularly useful with Angular&#8217;s functional APIs, including route guards and HTTP interceptors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\/\/ Constructor injection<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">constructor(private auth: AuthService) {}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\/\/ inject()<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">private auth = inject(AuthService);<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Concern<\/strong><\/td><td><strong>Older tutorials<\/strong><\/td><td><strong>Modern Angular<\/strong><\/td><td><strong>Where it appears<\/strong><\/td><\/tr><tr><td>Components<\/td><td>NgModules<\/td><td>Standalone components<\/td><td>All projects<\/td><\/tr><tr><td>State<\/td><td>Component properties<\/td><td>Signals<\/td><td>Interactive projects<\/td><\/tr><tr><td>Template logic<\/td><td>*ngIf, *ngFor<\/td><td>@if, @for + track<\/td><td>Dynamic UIs<\/td><\/tr><tr><td>Heavy content<\/td><td>Load immediately<\/td><td>@defer<\/td><td>Dashboards, charts, maps<\/td><\/tr><tr><td>Dependency injection<\/td><td>Constructor injection<\/td><td>inject()<\/td><td>Services, guards, interceptors<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re moving into the intermediate projects, you&#8217;ll also rely more on typed services, generics, and typed forms, so comfortable TypeScript knowledge will make that jump much easier. If that\u2019s an area you\u2019re still working on, this <a href=\"https:\/\/www.scaler.com\/blog\/typescript-roadmap\/\">TypeScript roadmap<\/a> can help you fill in the gaps before you get there.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tier-1-beginner-angular-projects-to-build-your-first-app\"><\/span><strong>Tier 1: Beginner Angular Projects to Build Your First App<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re making an angular project ideas for the first time, then projects like a single-screen app with local state and no backend, a profile card, counter, or to-do list are the best ideas to begin with. You can focus on components, bindings, and signals without having HTTP, routing, or authentication competing for your attention.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, here are some angular projects for beginners:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Personal Profile \/ Developer Card App<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Start with something small enough to finish in an evening: a developer profile card with an editable name and role, a few skills chips, and a theme toggle. You can keep the data local and use the project to practise breaking one screen into smaller, reusable pieces.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Standalone components<\/li>\n\n\n\n<li>bootstrapApplication()<\/li>\n\n\n\n<li>Property and event binding<\/li>\n\n\n\n<li>input() and output()<\/li>\n\n\n\n<li>@if and @for with track<\/li>\n\n\n\n<li>Component style encapsulation<\/li>\n\n\n\n<li>Angular CLI with ng new and ng generate component<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Beginner<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 3-4 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You can take a UI and split it into sensible components, then pass data and events between them rather than putting everything into one component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Save the selected theme and restore it when the app loads.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Signal-Powered Counter and Unit Converter<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A counter is simple, but adding a unit converter gives you somewhere to practise derived state instead of just changing values on a screen. Build a small tool that converts temperature, length, or currency as the user changes the input, with the result updating immediately.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>signal()<\/li>\n\n\n\n<li>computed()<\/li>\n\n\n\n<li>effect() for a genuine side effect such as logging or persistence<\/li>\n\n\n\n<li>Two-way binding<\/li>\n\n\n\n<li>linkedSignal() for state that should reset when its source changes<\/li>\n\n\n\n<li>Number and currency pipes<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">linkedSignal() is particularly useful when one value needs to stay writable but should reset when another value changes. It has been stable since Angular 20.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Beginner<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 3 &#8211; 5 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You know when to derive a value instead of storing another copy of it, which keeps related state from drifting out of sync.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Add a conversion history with an undo option.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. To-Do \/ Task List with Local Persistence<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, a to-do app might be a clich\u00e9 and its one of those simple angular projects for beginners. But it is still here for a reason: once you add editing, filtering, persistence, and a proper state layer, a tiny task list becomes a useful test of how you structure an Angular application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Build one where users can add tasks, edit them inline, mark them complete, filter by status, clear completed tasks, and keep everything in localStorage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Angular services<\/li>\n\n\n\n<li>inject() for dependency injection<\/li>\n\n\n\n<li>Signals inside a service<\/li>\n\n\n\n<li>Read-only signal exposure<\/li>\n\n\n\n<li>@for with a stable track key<\/li>\n\n\n\n<li>@if for empty states<\/li>\n\n\n\n<li>Local storage<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Angular&#8217;s current guidance recommends standalone components for new code, while its inject() API is stable and can be used in class field initializers and other injection contexts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Beginner<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 6-8 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You understand that state does not have to live inside the component displaying it, and you can separate application logic from presentation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Add drag-to-reorder and keyboard shortcuts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Recipe \/ Product Gallery with Custom Pipes<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Turn a local JSON file into a small catalogue with a searchable card grid. Let users filter by category, sort by rating or price, and open an individual item in a dialog.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is also a good place to learn that Angular gives you several ways to transform data, and choosing between them matters.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Custom pipes<\/li>\n\n\n\n<li>Pure vs. impure pipes<\/li>\n\n\n\n<li>computed() for derived filtering<\/li>\n\n\n\n<li>NgOptimizedImage<\/li>\n\n\n\n<li>@switch for different card variants<\/li>\n\n\n\n<li>Content projection with ng-content<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For filtering, a computed() is often a better fit when the result is application state derived from other signals; a custom pipe still makes sense for transformations that belong in the template. That distinction becomes more useful as your applications get larger.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Beginner<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 6-8 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You understand that Angular features aren&#8217;t interchangeable and can make reasonable choices about where data transformation belongs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Replace the local JSON with a public API and add a loading skeleton.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Weather Dashboard: Your First API Project<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">From here on, you\u2019ll start feeling like your projects are becoming more and more complete. Build a weather dashboard where someone can search for a city, see its current conditions and five-day forecast, switch units, and get useful feedback when the search fails or returns nothing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Don&#8217;t stop once the successful API response appears on screen. Add loading, error, and empty states too; they&#8217;re often where the difference between a demo and a usable application starts to show.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HttpClient<\/li>\n\n\n\n<li>provideHttpClient()<\/li>\n\n\n\n<li>Typed response interfaces<\/li>\n\n\n\n<li>Observables<\/li>\n\n\n\n<li>The async pipe<\/li>\n\n\n\n<li>catchError<\/li>\n\n\n\n<li>Retry handling<\/li>\n\n\n\n<li>Loading, error, and empty states<\/li>\n\n\n\n<li>Environment configuration<\/li>\n\n\n\n<li>httpResource() as a modern alternative for reactive HTTP data<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">httpResource() is stable as of Angular 22 and exposes HTTP request state and response data through Angular&#8217;s reactive APIs, so it is now a reasonable modern option to explore in this project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Beginner<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 8-10 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You can work with an external API without assuming that every request succeeds, and you know how to account for the states a real user will actually encounter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Cache previous searches and show when the weather data was last updated.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you reach this project and realise the difficult part is the JavaScript behind asynchronous operations rather than Angular itself, it may be worth brushing up on those fundamentals before moving into the next tier. A <a href=\"https:\/\/www.scaler.com\/topics\/course\/javascript-beginners\/\">JavaScript fundamentals course for beginners<\/a> can help with that.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tier-2-intermediate-angular-projects-routing-forms-and-real-data\"><\/span><strong>Tier 2: Intermediate Angular Projects: Routing, Forms, and Real Data<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In Tier 2, you\u2019ll work with multiple routes, real forms, API requests, authentication, and asynchronous data that can arrive when you least expect it in the course of doing these angular project ideas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>6. Multi-Page Blog \/ News Reader with Lazy-Loaded Routes<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Turn a public content API into a small reading application with a category-based home page, individual article pages, search, and a proper 404 route. Add page titles that change with the current route and make sure a user can move around the app without losing their place.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>provideRouter()<\/li>\n\n\n\n<li>Route configuration<\/li>\n\n\n\n<li>Route parameters and query parameters<\/li>\n\n\n\n<li>RouterLink and active-link styling<\/li>\n\n\n\n<li>Lazy loading with loadComponent() \/ loadChildren()<\/li>\n\n\n\n<li>Route resolvers for pre-fetched data<\/li>\n\n\n\n<li>TitleStrategy for document titles<\/li>\n\n\n\n<li>Scroll restoration<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Intermediate<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 10-12 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You can structure an application across multiple routes and make a deliberate performance decision by loading parts of it only when they&#8217;re needed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Add @defer around the comments section and compare the build output before and after with ng build &#8211;stats-json.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>7. Movie or Book Search with a Debounced Typeahead<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Build a search box that starts querying a public movie or book API as the user types. The useful part isn&#8217;t just getting results back; make sure a new search cancels an older request, show recent searches, handle failures, and paginate the results.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>debounceTime()<\/li>\n\n\n\n<li>distinctUntilChanged()<\/li>\n\n\n\n<li>switchMap()<\/li>\n\n\n\n<li>catchError()<\/li>\n\n\n\n<li>filter()<\/li>\n\n\n\n<li>map()<\/li>\n\n\n\n<li>toSignal()<\/li>\n\n\n\n<li>Observable-to-signal integration<\/li>\n\n\n\n<li>Request cancellation<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The interesting part happens when you type quickly enough to create overlapping requests. With switchMap(), the older request is no longer the one driving your results. Open the browser&#8217;s Network tab while testing this; seeing the cancellation happen makes the operator&#8217;s purpose much easier to understand.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Intermediate<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 8-10 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You understand how to deal with rapidly changing asynchronous input instead of firing an API request for every keystroke and hoping the responses arrive in the right order.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Add an in-memory cache with shareReplay() and an offline fallback for previous searches.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>8. Expense Tracker with Reactive Forms and Charts<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Build an expense tracker where users can add, edit, and delete expenses, assign categories, set a monthly budget, and see where their money is going through a category breakdown chart. Add CSV export once the core application works.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You need to think of form design here especially. A simple form can work perfectly well with template-driven forms, but once you have dynamic fields, cross-field validation, or rules you want to test independently, reactive forms give you much more control.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>FormGroup and FormControl<\/li>\n\n\n\n<li>Typed reactive forms<\/li>\n\n\n\n<li>FormArray for split expenses<\/li>\n\n\n\n<li>Custom validators<\/li>\n\n\n\n<li>Cross-field validation<\/li>\n\n\n\n<li>Async validators<\/li>\n\n\n\n<li>valueChanges<\/li>\n\n\n\n<li>computed() for derived totals<\/li>\n\n\n\n<li>Integrating a chart library with an Angular component<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Intermediate<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 12-15 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ll also need to make a choice about how you build the expense form. A simple form can work perfectly well with template-driven forms, but once you have dynamic fields, cross-field validation, or rules you want to test independently, reactive forms give you much more control. Here\u2019s how the two approaches compare:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><\/td><td><strong>Template-driven forms<\/strong><\/td><td><strong>Reactive forms<\/strong><\/td><\/tr><tr><td>Control creation<\/td><td>Template<\/td><td>Component class<\/td><\/tr><tr><td>Validation<\/td><td>Template-oriented<\/td><td>Programmatic<\/td><\/tr><tr><td>Dynamic fields<\/td><td>Less convenient<\/td><td>Well suited<\/td><\/tr><tr><td>Testing complex rules<\/td><td>Less direct<\/td><td>Easier to isolate<\/td><\/tr><tr><td>Good fit<\/td><td>Small, straightforward forms<\/td><td>Dynamic or complex forms<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You know that reactive forms aren&#8217;t automatically \u201cbetter\u201d; they become useful when the form has enough structure and validation logic to justify them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Add recurring expenses and notify the user when spending crosses a budget threshold.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>9. Job Application Tracker: Kanban Board<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This one can be genuinely useful while you&#8217;re building it. Create a Kanban board that moves applications through Applied &gt; Interview &gt; Offer &gt; Rejected, with notes, application dates, and a separate reminder view.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can use Angular CDK for drag-and-drop. Once the basic board works, you can also experiment with what happens when the list becomes large and whether virtual scrolling actually improves the experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Angular CDK drag-and-drop<\/li>\n\n\n\n<li>CDK virtual scrolling<\/li>\n\n\n\n<li>Service-owned state with signals<\/li>\n\n\n\n<li>Immutable state updates<\/li>\n\n\n\n<li>Optimistic UI<\/li>\n\n\n\n<li>localStorage or a lightweight backend<\/li>\n\n\n\n<li>Date pipes<\/li>\n\n\n\n<li>Timezone handling<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Intermediate<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 12-16 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You know how to reach for Angular&#8217;s own CDK primitives when the framework already provides the interaction you need, instead of adding a dependency for every feature.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Add a calendar view and export application dates to .ics.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>10. Auth-Protected Notes App with JWT, Guards, and Interceptors<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now you&#8217;re dealing with one of the patterns you&#8217;ll find across many applications: a user signs in, accesses protected data, and needs to stay authenticated while making API requests. Build registration and login, protected note CRUD, token refresh, logout on a 401, and a \u201cremember me\u201d option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keep the authentication flow explicit. A good version of this project should let you explain what happens from the moment an API request leaves the application to the moment a failed request is retried after a successful token refresh.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Functional route guards with CanActivateFn<\/li>\n\n\n\n<li>inject()<\/li>\n\n\n\n<li>Functional HTTP interceptors<\/li>\n\n\n\n<li>Bearer-token attachment<\/li>\n\n\n\n<li>Global HTTP error handling<\/li>\n\n\n\n<li>switchMap() for token refresh<\/li>\n\n\n\n<li>shareReplay() to prevent multiple simultaneous refresh requests<\/li>\n\n\n\n<li>CanDeactivate for unsaved changes<\/li>\n\n\n\n<li>Role-based route data<\/li>\n\n\n\n<li>Token-storage trade-offs<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Intermediate<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 15-20 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You can explain the full authentication flow, including what happens after a 401 and not treating login as a standalone screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ll also have to decide where to store the authentication token. localStorage is easy to use, but that doesn\u2019t make it the best option in every application. Think about how your frontend and backend handle authentication and what could happen if a token were exposed, then make your choice based on those trade-offs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Add refresh-token rotation and a session-timeout warning.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re good to go with these projects but still unsure how Angular fits alongside the rest of the frontend stack, you can also check out the <a href=\"https:\/\/www.scaler.com\/blog\/front-end-developer-roadmap\/\">front-end developer roadmap<\/a> to see what sits around it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tier-3-advanced-angular-projects-that-make-a-portfolio-stand-out\"><\/span><strong>Tier 3: Advanced Angular Projects That Make a Portfolio Stand Out<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">At this level, just adding more features won\u2019t be enough. These projects should showcase how you have put the application together<strong>:<\/strong> where are the features, how state is managed, what gets loaded when, what happens when a request fails, and how you know the application still works after a change.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>11. E-Commerce Storefront with Cart and Checkout<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Build a complete storefront with a product catalogue, filters, product details, a cart with quantity limits, and a multi-step checkout. You can use a mock payment flow and add order history so the application feels like a complete shopping journey rather than just a product grid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Feature-based folder architecture<\/li>\n\n\n\n<li>Lazy-loaded feature routes<\/li>\n\n\n\n<li>Signals or NgRx SignalStore for cart state<\/li>\n\n\n\n<li>@defer for below-the-fold content<\/li>\n\n\n\n<li>Reactive forms for address and payment details<\/li>\n\n\n\n<li>forkJoin() for independent checkout requests<\/li>\n\n\n\n<li>Optimistic cart updates with rollback<\/li>\n\n\n\n<li>NgOptimizedImage<\/li>\n\n\n\n<li>Route preloading strategies<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you use signals for the cart, explain why they are sufficient. If you use NgRx SignalStore, explain what made the extra structure useful for your application. In the end, you should be able to justify your choice.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Advanced<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 30-40 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You can organise a multi-feature application and make deliberate decisions about state, loading, and performance as the number of moving parts grows.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Add SSR for product pages and compare the Lighthouse results before and after.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>12. Admin Dashboard with Role-Based Access Control<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Build an admin dashboard for managing users, roles, and application activity. Include a users table with server-side pagination, sorting and filtering, role management, an audit log, charts, and a sidenav that changes according to the current user&#8217;s permissions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Angular Material<\/li>\n\n\n\n<li>MatTable<\/li>\n\n\n\n<li>Server-side pagination, sorting and filtering<\/li>\n\n\n\n<li>Route data and functional guards for RBAC<\/li>\n\n\n\n<li>Dynamic navigation<\/li>\n\n\n\n<li>combineLatest()<\/li>\n\n\n\n<li>shareReplay() for cached lookup data<\/li>\n\n\n\n<li>OnPush change detection<\/li>\n\n\n\n<li>Theming and dark mode<\/li>\n\n\n\n<li>CSV\/Excel export<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Advanced<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 30-40 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You can handle the less glamorous parts of an internal application: permissions, large data tables, shared lookups, and changing UI based on user roles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Add column-level permissions and let users save their preferred table views.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>13. Real-Time Chat or Collaborative Board with WebSockets<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Build a chat application or collaborative board where changes appear without the user refreshing the page. Add rooms, live messages, typing indicators, online presence, unread counts, reconnect behaviour, and paginated message history.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ll have messages arriving while users are typing, joining or leaving rooms, and reconnecting after a lost connection. Use Subject for events, BehaviorSubject when you need the latest value available to new subscribers, and ReplaySubject when previous values need to be replayed. You can use scan() to build up the message list, retry() with backoff to handle reconnections, and takeUntilDestroyed() to clean up subscriptions when components are destroyed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WebSocketSubject \/ webSocket()<\/li>\n\n\n\n<li>Subject<\/li>\n\n\n\n<li>BehaviorSubject<\/li>\n\n\n\n<li>ReplaySubject<\/li>\n\n\n\n<li>retry() with backoff<\/li>\n\n\n\n<li>scan() for accumulating message state<\/li>\n\n\n\n<li>takeUntilDestroyed()<\/li>\n\n\n\n<li>CDK virtual scrolling<\/li>\n\n\n\n<li>NgZone and zoneless considerations<\/li>\n\n\n\n<li>Subscription lifecycle management<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Advanced<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 30-35 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You understand the lifecycle of long-running streams and can think about connection failures, teardown, and continuously changing state rather than only one-off API responses.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Add optimistic message sending with retry on failure and read receipts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>14. Multi-Step Application Wizard with a Dynamic Form Engine<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You might find this Angular project especially interesting if you want to build something around a more complex, rule-driven process. Create an insurance quote, loan application, or onboarding wizard where the form itself is generated from a JSON schema. Fields can appear or disappear based on earlier answers, validation can span multiple steps, and users can save a partially completed application and return to it later.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dynamic form construction from configuration<\/li>\n\n\n\n<li>FormArray<\/li>\n\n\n\n<li>Nested FormGroups<\/li>\n\n\n\n<li>Runtime validators<\/li>\n\n\n\n<li>Conditional validation<\/li>\n\n\n\n<li>CanDeactivate<\/li>\n\n\n\n<li>Autosave with debounceTime() and exhaustMap()<\/li>\n\n\n\n<li>Keyboard and screen-reader support<\/li>\n\n\n\n<li>Internationalisation-ready labels<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When you add autosave, you need to decide what happens if the user changes the form while a save is still running. If a save is already in progress, you don&#8217;t necessarily want to start another one immediately. exhaustMap() lets the current save finish before accepting another one.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Advanced<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 25-35 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You can build a form whose structure and behaviour aren&#8217;t hard-coded into dozens of components, and you can reason about validation, persistence, and accessibility together.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Version the schemas so an application already in progress continues using the form version it started with.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>15. Production-Grade Portfolio Site with SSR, Tests, and CI\/CD<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Your portfolio is also a chance to put everything you\u2019ve learned into one project. Start with the pages you need to showcase your work, then add SSR and hydration, test the important interactions, check accessibility and performance, and set up a CI\/CD pipeline to deploy it. Once it\u2019s live, you can use the site itself to host links to the other Angular projects you\u2019ve built.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Angular concepts exercised:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Angular SSR and hydration<\/li>\n\n\n\n<li>Incremental hydration, where supported by the current Angular version<\/li>\n\n\n\n<li>@defer with viewport triggers<\/li>\n\n\n\n<li>NgOptimizedImage<\/li>\n\n\n\n<li>Priority hints for important images<\/li>\n\n\n\n<li>PWA\/service worker<\/li>\n\n\n\n<li>Unit testing with Jasmine + Karma or Jest<\/li>\n\n\n\n<li>TestBed<\/li>\n\n\n\n<li>Component harnesses<\/li>\n\n\n\n<li>Lighthouse and Core Web Vitals<\/li>\n\n\n\n<li>GitHub Actions<\/li>\n\n\n\n<li>Lint > test > build > deploy workflow<\/li>\n\n\n\n<li>Environment-based configuration<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Difficulty:<\/strong> Advanced<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focused build time:<\/strong> 25-30 hours<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What it demonstrates to an interviewer:<\/strong> You can take an Angular application beyond the local development environment and think about testing, accessibility, performance, deployment, and maintenance as part of the same project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level it up:<\/strong> Publish a small shared component library from the workspace and use it in two of your other Angular projects.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you\u2019ve built the frontend, you might want to take it a step further and connect it to a real backend. If you&#8217;re interested in building the kind of applications used in enterprise teams, Spring Boot is one option that pairs well with Angular, and you can follow this <a href=\"https:\/\/www.scaler.com\/blog\/spring-boot-roadmap-2026-step-by-step-learning-path\/\">Spring Boot learning path<\/a> to get started.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And if you&#8217;re looking for more ideas beyond Angular, take a look at these <a href=\"https:\/\/www.scaler.com\/blog\/full-stack-projects-to-upskill-build-a-job-ready-resume\/\">full-stack projects that build a job-ready resume<\/a> for projects where you can bring the frontend and backend together.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"the-rxjs-skills-each-project-teaches-and-which-operators-to-actually-learn\"><\/span><strong>The RxJS Skills Each Project Teaches (And Which Operators to Actually Learn)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">RxJS still has an important place in Angular projects in 2026. You\u2019ll use signals for state changes within your application, while RxJS handles data and events that arrive over time, such as HTTP responses, search input, and WebSocket messages. Angular also provides toSignal() and toObservable() when you need to move between signals and Observables.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Start with a small set of operators: map, filter, tap, switchMap, debounceTime, distinctUntilChanged, catchError, takeUntilDestroyed, shareReplay, and combineLatest. You\u2019ll come across the rest while building the projects, and each one will have a specific problem to solve.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Weather Dashboard, for example, gives you catchError() and retry() for failed requests. The Typeahead Search uses debounceTime() and distinctUntilChanged() to control search input, while switchMap() handles a new search arriving before the previous request has finished. The Application Wizard uses exhaustMap() for autosave, and the Chat project brings together subjects, accumulated state, reconnection, and subscription cleanup.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>The RxJS operator-to-project map<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Operator\/concept<\/strong><\/td><td><strong>What it solves<\/strong><\/td><td><strong>Project that makes you use it<\/strong><\/td><\/tr><tr><td>async pipe<\/td><td>Handles subscriptions and unsubscriptions in the template<\/td><td><strong>5. Weather Dashboard<\/strong><\/td><\/tr><tr><td>catchError, retry<\/td><td>Handles failed requests and retry scenarios<\/td><td><strong>5. Weather Dashboard<\/strong><\/td><\/tr><tr><td>debounceTime, distinctUntilChanged<\/td><td>Prevents a request from firing on every keystroke<\/td><td><strong>7. Typeahead Search<\/strong><\/td><\/tr><tr><td>switchMap<\/td><td>Cancels the previous request when a new search arrives<\/td><td><strong>7. Typeahead Search<\/strong><\/td><\/tr><tr><td>exhaustMap<\/td><td>Keeps the current operation running while ignoring new values<\/td><td><strong>14. Application Wizard<\/strong><\/td><\/tr><tr><td>concatMap, mergeMap<\/td><td>Runs operations in sequence or concurrently<\/td><td><strong>11. E-Commerce Storefront<\/strong><\/td><\/tr><tr><td>valueChanges<\/td><td>Lets you respond to changes in reactive form values<\/td><td><strong>8. Expense Tracker<\/strong><\/td><\/tr><tr><td>combineLatest, startWith<\/td><td>Combines several filter values into a single stream<\/td><td><strong>12. Admin Dashboard<\/strong><\/td><\/tr><tr><td>shareReplay<\/td><td>Shares a request and reuses its latest result<\/td><td><strong>10. Auth<\/strong>, <strong>12. Admin Dashboard<\/strong><\/td><\/tr><tr><td>Subject, BehaviorSubject<\/td><td>Handles events and maintains a current value for subscribers<\/td><td><strong>13. Chat<\/strong><\/td><\/tr><tr><td>scan<\/td><td>Builds up state as values arrive over time<\/td><td><strong>13. Chat<\/strong><\/td><\/tr><tr><td>takeUntilDestroyed<\/td><td>Cleans up subscriptions when the component or directive is destroyed<\/td><td><strong>13. Chat<\/strong>, and projects with manual subscriptions<\/td><\/tr><tr><td>toSignal, toObservable<\/td><td>Connects RxJS streams with Angular signals<\/td><td><strong>7, 11, 12<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ll also run into a few patterns that you should keep an eye on while you\u2019re building these angular projects. Nested .subscribe() calls can make asynchronous flows difficult to manage and often point toward a flattening operator. For data that only needs to appear in a template, the async pipe can handle the subscription for you. Long-running streams, such as WebSocket connections, need a clear cleanup path, which is where takeUntilDestroyed() becomes useful.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The flattening operators deserve particular attention because they answer different situations. switchMap() moves to the latest value and cancels the previous operation. mergeMap() allows several operations to run at the same time. concatMap() keeps them in sequence, and exhaustMap() continues with the current operation while ignoring new values until it finishes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These differences also come up frequently in Angular interviews:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When would you use switchMap() instead of mergeMap()?\u00a0<\/li>\n\n\n\n<li>How do you prevent memory leaks?\u00a0<\/li>\n\n\n\n<li>What is the difference between a Subject and a BehaviorSubject?\u00a0<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The projects above give you practical situations to refer to when answering those questions, rather than leaving you with definitions to memorise.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a deeper reference while working through the projects, use the <a href=\"https:\/\/rxjs.dev\/guide\/operators\" target=\"_blank\" rel=\"noopener\">official RxJS operator documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"the-portfolio-standout-checklist-what-turns-a-project-into-a-hire\"><\/span><strong>The Portfolio Standout Checklist: What Turns a Project Into a Hire<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can have a working Angular project with all the expected features and still leave a reviewer with very little to take away from it. If the repository has no tests, the README only says how to run ng serve, errors are ignored, and the app exists only on your laptop, the code has done its job as practice but has little to show beyond that.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you want a project to carry some weight on your portfolio, give the reviewer more to work with. Let them open the app, look through a clear README, see how you handled errors and accessibility, run the tests, and understand why you made the technical choices you did. The checklist below shows you what to add and what each addition tells someone looking at your project.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Practice<\/strong><\/td><td><strong>Why it matters<\/strong><\/td><td><strong>How to add it to any project on this list<\/strong><\/td><\/tr><tr><td><strong>A justified state-management choice<\/strong><\/td><td>Shows that you can choose an approach based on the project&#8217;s needs instead of following a tutorial by default.<\/td><td>Add a short README section explaining what state you have, where it lives, and why you chose a component signal, service signal, or store.<\/td><\/tr><tr><td><strong>Lazy-loaded routes<\/strong><\/td><td>Shows that you have considered how the application is loaded as it grows.<\/td><td>Use loadComponent or loadChildren for appropriate features. You can also compare the build output before and after and include the numbers in your README.<\/td><\/tr><tr><td><strong>Proper error handling<\/strong><\/td><td>A working success path is only part of the application. Real users also encounter failed requests, missing data, and slow responses.<\/td><td>Add loading, empty, and error states to data-fetching screens. Use an HTTP interceptor for shared error handling and add retry behaviour where it makes sense.<\/td><\/tr><tr><td><strong>Accessibility<\/strong><\/td><td>Makes the application usable by people who navigate with keyboards or assistive technologies, and shows that accessibility was considered during development.<\/td><td>Navigate the complete application with a keyboard, add appropriate labels and focus management, check contrast, and run an accessibility audit. Document what you checked.<\/td><\/tr><tr><td><strong>Unit tests (Jasmine\/Karma or Jest)<\/strong><\/td><td>Tests show that you have thought about how individual pieces of the application should behave when they change.<\/td><td>Start with services and other business logic, then test a critical component flow. Include the coverage number in the README if you have measured it.<\/td><\/tr><tr><td><strong>A deployed live demo<\/strong><\/td><td>Lets someone see the application without setting up the project locally.<\/td><td>Put the live URL near the top of the README and keep the deployment working. Add the same link to your r\u00e9sum\u00e9 or portfolio.<\/td><\/tr><tr><td><strong>A README that explains architecture decisions<\/strong><\/td><td>Gives a reviewer context for the code before they start opening files.<\/td><td>Include what the app does, the live link, a screenshot or GIF, folder structure, state approach, important technical decisions, and setup instructions.<\/td><\/tr><tr><td><strong>Meaningful commit history<\/strong><\/td><td>Gives some context on how the project developed and how you organise your work.<\/td><td>Break the work into logical commits with messages such as add expense form validation or implement protected routes instead of putting everything into one initial commit.<\/td><\/tr><tr><td><strong>Realistic, non-lorem content<\/strong><\/td><td>Makes the finished application feel considered and easier to evaluate.<\/td><td>Use believable sample data, check the copy, remove debugging console.log() statements, and clean up commented-out code before sharing the project.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Your README deserves more attention than it usually gets<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If someone opens your repository before looking at the code, the README is their first introduction to the project. Give them enough information to understand what they are looking at without making them dig through the repository.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Include the live demo, what the application does, the main Angular concepts you used, a screenshot, the folder structure, important architecture decisions, and instructions for running it locally. You can also mention a few decisions you&#8217;d change if you were rebuilding the project. That gives you useful material to discuss when someone asks what you would do differently.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One thing I&#8217;ve noticed when looking through junior portfolios is how often the README gets left untouched after the project is finished. If it still contains the default Angular CLI introduction, the reviewer has very little context about what you actually built. A much better sign is a README that explains a technical decision clearly, even when the reviewer might have made a different choice.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Start with the project you want people to remember<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Take your strongest Tier 3 project and work through the checklist first. Once that is in good shape, pick your best Tier 2 project and add the pieces it is missing, particularly tests, accessibility checks, a useful README, and a working deployment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The goal is to make it easy for someone to answer three questions when they open your project: What did you build? How did you build it? What did you have to think through along the way? If your repository answers those questions clearly, you have given the project much more value than another list of features ever could.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"where-angular-is-actually-hired-in-india\"><\/span><strong>Where Angular Is Actually Hired in India<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re learning Angular specifically for the Indian job market, you\u2019ll find its strongest presence in IT services, consulting, BFSI, GCCs, and established enterprise applications. These teams often maintain large applications over several years, with multiple developers working across the same codebase. Angular fits well into that environment because the framework gives teams a fairly structured way to handle routing, forms, dependency injection, HTTP, and other application-level concerns. You\u2019ll also come across Angular in government, healthcare, and ERP-related systems where applications tend to have long support cycles. If you&#8217;re targeting this part of the market, Angular + a backend such as Java\/Spring Boot or .NET is a solid combination that you should definitely explore.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But also keep in mind that Angular may not be particularly the first in demand in various sectors. Instead, React has broader adoption across frontend development overall, and startups and newer product teams often lean toward it. So if you&#8217;re choosing between the two, don&#8217;t make the decision based on which framework is \u201cbetter.\u201d Think about the kind of companies and applications you want to work on. You can get into the differences in more detail in this <a href=\"https:\/\/www.scaler.com\/blog\/angular-vs-react\/\">Angular vs React<\/a> comparison.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re coming to Angular from React, the transition is quite manageable. Your experience with components, TypeScript, forms, routing, and asynchronous data already gives you a good starting point. You&#8217;ll mainly need to get used to Angular&#8217;s dependency injection, services, templates, RxJS, and CLI-based workflow. With consistent evening practice, two to three weeks is a reasonable ramp-up period for a competent React developer to become productive with Angular, rather than treating the two ecosystems as completely separate skill sets. If you want to keep building your React knowledge alongside it, you can also follow this <a href=\"https:\/\/www.scaler.com\/blog\/react-roadmap-month-journey-to-frontend-mastery\/\">React roadmap<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re also comparing roles by earning potential, remember that your compensation will depend on more than the frontend framework you use. Experience, role, location, and the rest of your technical stack all matter, so it&#8217;s more useful to look at broader software developer salary benchmarks in India than treat Angular itself as a salary category.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You might also be wondering what this means for your salary. Your experience, location, role, and the rest of your technical stack can all affect what you earn. If you want to look at the bigger picture, you can check these <a href=\"https:\/\/www.scaler.com\/blog\/software-developer-salary\/\">software developer salary benchmarks in India<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"angular-projects-with-source-code-how-to-use-github-without-copying\"><\/span><strong>Angular Projects with Source Code: How to Use GitHub Without Copying<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re looking through Angular projects with source code, GitHub can be a great way to see how someone else has approached a problem you&#8217;re working on. You\u2019ll often come across ideas or implementation choices you hadn&#8217;t considered, especially as your projects move beyond simple tutorial applications. The useful part is learning from that code rather than simply using it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A simple way to use a reference project is:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Build your version first:<\/strong> Start with a blank ng new project and see how far you can get on your own.<\/li>\n\n\n\n<li><strong>Then open a reference implementation:<\/strong> Look at how another developer approached the same problem.<\/li>\n\n\n\n<li><strong>Find three differences:<\/strong> Maybe they organised their services differently, handled state in a different place, or used an RxJS operator you hadn&#8217;t considered.<\/li>\n\n\n\n<li><strong>Try one change yourself:<\/strong> Bring one of those ideas into your project, then write a short note in your README explaining why you decided to use it.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">That last step is important because you should be able to explain the code you submit, including the parts you adapted from somewhere else. Copying a repository, changing the name, and putting it on your GitHub doesn&#8217;t give you much to talk about when someone asks why you structured the application that way.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Where should you look for Angular reference code?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Start with Angular&#8217;s own repository, then look through GitHub&#8217;s angular-applications topic and well-maintained open-source Angular projects. You don&#8217;t need to find the biggest repository you can. Look for projects that are still being maintained and give you enough context to understand the decisions in the code for your angular projects github side.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before spending time reading a repository, check a few things:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>package.json<\/strong> &#8211; see which Angular version it uses.<\/li>\n\n\n\n<li><strong>Recent commits<\/strong> &#8211; check that the project is still maintained.<\/li>\n\n\n\n<li><strong>Standalone components<\/strong> &#8211; useful if you&#8217;re learning current Angular patterns.<\/li>\n\n\n\n<li><strong>Tests<\/strong> &#8211; a good sign that you can study more than just the UI code.<\/li>\n\n\n\n<li><strong>README<\/strong> &#8211; it should explain what the project does and how to work with it.<\/li>\n\n\n\n<li><strong>Issues and pull requests<\/strong> &#8211; some recent activity gives you a better idea of how the project is being maintained.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You should check the Angular version before using a repository as a reference. If app.module.ts is still the main entry point or the project is on Angular 12-16, the code can still be useful, but some of its patterns may not reflect how you would build the same application today. Compare the version with <a href=\"https:\/\/angular.dev\/\" target=\"_blank\" rel=\"noopener\">Angular\u2019s Website<\/a> so you know which parts are still relevant.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Contributing to open-source Angular projects<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can take this a step further by contributing to someone else&#8217;s Angular project. Even a small merged pull request can give you a different kind of experience: you&#8217;re working inside an existing codebase, following someone else&#8217;s conventions, explaining your change in a PR, and responding to review.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You don&#8217;t have to begin by fixing a complicated feature. Search for issues marked <strong>good first issue<\/strong>, reproduce the problem before changing anything, and read the project&#8217;s contribution guide before you start. For your first contribution, keeping the change small, even a documentation fix or test fix, makes it easier to understand the project&#8217;s workflow and get through review.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"common-mistakes-that-sink-angular-portfolio-projects\"><\/span><strong>Common Mistakes That Sink Angular Portfolio Projects<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A project can have plenty of features and still leave a weak impression if the basics aren&#8217;t taken care of. Before you add another feature, run through these common mistakes and fix the ones that apply to your project.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Building with an old Angular version:<\/strong> If your project came from a 2022 tutorial, check the Angular version before following its structure. Start with the current version and use the patterns documented on the official doc.<\/li>\n\n\n\n<li><strong>Starting fifteen projects and finishing none:<\/strong> A long list of unfinished repositories doesn&#8217;t tell a reviewer much. Pick projects you can actually take from the first commit to a deployed application.<\/li>\n\n\n\n<li><strong>Keeping all the logic inside components:<\/strong> When a component handles state, API calls, business rules, and UI logic together, it quickly becomes difficult to test and maintain. Move reusable state and application logic into services where it belongs.<\/li>\n\n\n\n<li><strong>Leaving subscriptions running:<\/strong> Manual subscriptions need a clear teardown strategy, especially for long-lived streams. Use takeUntilDestroyed() where appropriate instead of leaving subscriptions hanging around.<\/li>\n\n\n\n<li><strong>Adding NgRx just to make a project look advanced:<\/strong> A small application doesn&#8217;t become more impressive because it has another state-management layer. Use the simplest approach that fits the amount and type of state you&#8217;re actually managing.<\/li>\n\n\n\n<li><strong>Showing only the happy path:<\/strong> Your API will eventually be slow, fail, or return nothing. Give users proper loading, error, and empty states instead of letting the screen sit there looking broken.<\/li>\n\n\n\n<li><strong>Using<\/strong> <strong>any<\/strong> <strong>everywhere:<\/strong> Type the data coming into your services, the forms you&#8217;re working with, and the values moving through your application. If everything becomes any, you&#8217;re giving up much of the safety TypeScript is there to provide.<\/li>\n\n\n\n<li><strong>Leaving a dead demo link:<\/strong> A live project is useful only while the link works. Check your deployed applications regularly, particularly when you&#8217;re actively sharing your portfolio or applying for jobs.<\/li>\n\n\n\n<li><strong>Copying a tutorial project without making it your own:<\/strong> If someone asks why you chose a particular service, state structure, or RxJS operator, you should have an answer. Change the project, make decisions of your own, and document the reasoning behind them.<\/li>\n\n\n\n<li><strong>Leaving accessibility until the end:<\/strong> Build keyboard navigation, labels, focus management, and sensible contrast into the project as you go. It is much easier than trying to retrofit accessibility after every screen has already been built.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ve now got 15 Angular projects to work with, from small applications that help you get comfortable with Angular to larger builds that give you plenty to discuss in an interview. Along the way, you\u2019ve also seen which Angular features each project puts into practice, where RxJS fits in, and what you can add to make a project stronger when you put it in your portfolio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So pick the project that matches where you are right now, open your terminal, run ng new, and start with the first feature. Once you have something working, keep building it until you can explain the decisions behind it, not just the features it has. If you want a more structured way to build these skills, <a href=\"https:\/\/www.scaler.com\/academy\/\">Scaler&#8217;s software engineering program<\/a> includes project work, architecture, testing, and code reviews with mentor guidance.<\/p>\n\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>1. What is a good first Angular project for a beginner?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Start with something small enough to finish without getting stuck in backend or authentication work. A profile card, signal-based counter, or to-do list with localStorage is a good place to start. You\u2019ll get to practise components, bindings, services, and signals without having too many new things to deal with at once. Around 3-8 focused hours is a reasonable starting estimate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. How many Angular projects should I have on my resume?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Three strong projects can tell you much more than a long list of unfinished ones. A beginner, intermediate, and advanced project gives you room to show how your skills develop, especially when each one is deployed, tested, and properly documented. You also have more to talk about when an interviewer asks you about a project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Which Angular version should I build my projects in?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the current stable version when you start the project. For a project you&#8217;re building in 2026, you should also be familiar with standalone components, signals, and Angular&#8217;s built-in control flow. If the tutorial you&#8217;re following still revolves around NgModule, check whether its approach is still current before copying it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Is Angular still worth learning in India in 2026?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, but it helps to know where Angular is commonly used. React appears in more Indian job listings overall, while Angular has a stronger presence in IT services, BFSI, GCCs, and established enterprise teams. You\u2019ll also find Angular paired frequently with Java\/Spring Boot or .NET, so knowing the surrounding stack can matter just as much as knowing the framework itself.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Where can I find Angular projects with source code?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can start with Angular&#8217;s official repository, GitHub&#8217;s angular-applications topic, and actively maintain open-source Angular projects. Check the package.json before you start studying a repository. If it&#8217;s several Angular versions behind, some of the patterns you find may not be the ones you want to learn for a new project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>6. Can I build an Angular project without a backend?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. Your first few projects can work entirely on the frontend, using local state, localStorage, or a public API when you need external data. You can also use a backend-as-a-service for projects that need one. A custom backend makes sense when the application actually needs things like authentication, persistent user data, or real-time communication.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>7. What is the difference between AngularJS and Angular?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">AngularJS and Angular are not two versions of the same modern framework. AngularJS refers to the original 1.x JavaScript framework, which reached end of life in 2022. Angular 2 and later were rebuilt as a TypeScript-based framework with a different architecture. So if you&#8217;re looking for projects to build today, make sure the tutorial or repository is using modern Angular rather than AngularJS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>8. How long does one portfolio-quality Angular project take?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It depends on the project and how comfortable you are with the concepts involved. A small project might take 3-10 focused hours, an intermediate one around 8-20, and a larger project 25-40 hours. Give yourself some extra time for testing, accessibility, deployment, and the README too. Those details are easy to leave until the end, but they&#8217;re part of what makes the project ready to show someone.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Looking for Angular projects to build? That\u2019s probably one of the best things you can do once you\u2019re done learning the basics. And honestly, it can feel a little harder to build something on your own than it did to follow along with a course or tutorial. You know the concepts, but putting them together [&hellip;]<\/p>\n","protected":false},"author":241,"featured_media":14419,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[35],"tags":[610],"class_list":["post-14418","post","type-post","status-publish","format-standard","has-post-thumbnail","category-software-development","tag-angular-projects-to-build"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/posts\/14418","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\/241"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/comments?post=14418"}],"version-history":[{"count":1,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/posts\/14418\/revisions"}],"predecessor-version":[{"id":14420,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/posts\/14418\/revisions\/14420"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/media\/14419"}],"wp:attachment":[{"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/media?parent=14418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/categories?post=14418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scaler.com\/blog\/wp-json\/wp\/v2\/tags?post=14418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}