← All CoursesStart Learning — Chapter 1.1 →
Angular Course · Free · Beginner → Advanced
Angular Hyderabad Style
From Zero to Angular Developer — 80 Chapters, 5 Real Projects
Signals, RxJS, Routing, Forms, Testing, SSR, Deploy — Everything Hyderabad IT expects
Learn Angular — Hyderabad IT companies' favorite framework.
80 chapters + 15 stages. Signals, RxJS, SSR, Real Projects — all Hyderabadi style.
80Chapters
5Projects
15Stages
FreeForever
Stage 1
Irani Chai Level
Setup & Basics — Getting Started○1.1
What is Angular and Why?Not just a framework, a complete system — like TSRTC
14 min→○1.2Setting Up — Node, npm, ng new, VS CodeInstall Angular CLI, create project, first step
16 min→○1.3Project Structure Explained (src folder walkthrough)app.config.ts, main.ts, index.html — understand everything
14 min→○1.4First Component — Hello HyderabadCreate your first component that says hello
14 min→○1.5Angular CLI Commands (generate, build, serve, test)ng generate, ng build, ng serve — CLI is your best friend
12 min→○1.6Angular vs React vs Vue — Honest ComparisonWhich is best? Framework comparison — real talk
16 min→Angular Chai DevFirst step into Angular! Setup done, first component built!
Stage 2
Biryani Box Level
Components — Inside the Biryani Box○2.1
@Component Decorator CompleteFull component configuration — selector, templateUrl, styleUrl everything
16 min→○2.2Templates — Inline vs Externaltemplate vs templateUrl — when to inline, when separate
12 min→○2.3Styles — Component Scoped vs GlobalView Encapsulation and global styles — styles.scss vs component styles
14 min→○2.4View Encapsulation (ShadowDOM, None, Emulated)Emulated vs ShadowDom vs None — how styles apply
16 min→○2.5Content Projection (ng-content, ng-template)ng-content for reusable components — tabs, cards, modals
16 min→○2.6Lifecycle Hooks (ngOnInit, OnDestroy, OnChanges etc.)Component from birth to death — ngOnInit, ngOnDestroy, ngOnChanges
18 min→Biryani Component BuilderComplete understanding of components! Decorator, templates, styles, lifecycle — all clear!
Stage 3
Necklace Road Level
Templates, Binding & Directives🔒3.1
Interpolation {{ }} and Expressions{{ variable }} to show data in template — most basic binding
Login to unlock12 min→🔒3.2Property Binding [ ][src], [disabled], [class.active] — connect properties from JS
Login to unlock14 min→🔒3.3Event Binding ( ) and $event(click), (input), (submit) and $event object — catch user actions
Login to unlock14 min→🔒3.4Two-Way Binding [(ngModel)] and model()From input field to component — banana kingfisher style binding
Login to unlock14 min→🔒3.5Template Reference Variables (#var)#myInput to access DOM elements inside template
Login to unlock12 min→🔒3.6Built-in Attributes (@class, @style, @attr)Dynamic classes and styles — flexible styling
Login to unlock14 min→🔒3.7Structural Directives (@if @for @switch @defer)New control flow syntax — @for @if @switch @defer
Login to unlock18 min→Binding MasterInterpolation, property binding, event binding — data flow understood!
Stage 4
Tank Bund Level
Custom Directives & Pipes🔒4.1
Custom Attribute DirectivesElementRef, Renderer2 for custom directive — highlight, tooltip, mask
Login to unlock16 min→🔒4.2Custom Structural Directives*appPermission, *appRole — your own *-based directives
Login to unlock18 min→🔒4.3Built-in Pipes (Date, Currency, Async, etc.)date, currency, percent, json, async, keyvalue — all built-in pipes
Login to unlock14 min→🔒4.4Custom Pipes — Pure vs ImpurePipeTransform interface, pure vs impure — create custom pipes
Login to unlock16 min→🔒4.5Old Syntax (*ngIf *ngFor) vs New (@if @for) MigrationMigration guide — *ngIf to @if, side by side comparison
Login to unlock14 min→Tank Bund TransformerCustom directives and pipes created! DOM transformation understood!
Stage 5
Paradise Biryani Level
Services & Dependency Injection🔒5.1
Creating Services (@Injectable explained)@Injectable({providedIn: "root"}) — how to create services
Login to unlock14 min→🔒5.2Dependency Injection — How Angular ResolvesInjector tree, hierarchical DI — how Angular resolves dependencies
Login to unlock16 min→🔒5.3inject() vs Constructor InjectionNew inject() function vs old constructor injection — when to use what
Login to unlock14 min→🔒5.4Providers — root, component, module levelprovidedIn: "root" vs "component" vs "any" — scope understood
Login to unlock16 min→🔒5.5Environment Config & Multi-provider TokensInjectionToken, multi: true, environment config pattern — advanced DI
Login to unlock16 min→DI Paradise ChefDI understood! Creating services and injecting them — all clear!
Stage 6
Hitech City Level
Routing & Navigation🔒6.1
Basic Routing Setup (Routes, RouterOutlet)Routes array, RouterOutlet, RouterLink — basic routing setup
Login to unlock16 min→🔒6.2Route Parameters (path params, query params):id params, query params, fragment — extracting data from URLs
Login to unlock16 min→🔒6.3Child Routes & Nested Navigationchildren array, nested outlets — build complex layouts
Login to unlock16 min→🔒6.4Lazy Loading (loadComponent)loadComponent for lazy loading — reduce app size
Login to unlock14 min→🔒6.5Route Guards (canActivate, canDeactivate, canMatch)canActivate, canDeactivate, canMatch, canLoad — security guards
Login to unlock18 min→🔒6.6Resolvers — Pre-fetch Data Before RouteResolveFn, pre-fetch API data before route activates — smooth UX
Login to unlock16 min→Hitech Route MasterRouting mastered! Lazy loading, guards, resolvers — all understood!
Stage 7
Swiggy Level
HTTP & APIs — Backend Data🔒7.1
HttpClient Setup & GET RequestsprovideHttpClient, http.get() — fetch data from APIs
Login to unlock16 min→🔒7.2POST, PUT, DELETE with TypeScript ModelsTyped HTTP requests — CRUD operations with interfaces
Login to unlock18 min→🔒7.3Interceptors — Auth Header, Logging, ErrorHttpInterceptor to add auth token, logs, error handling
Login to unlock18 min→🔒7.4Error Handling (catchError, throwError)catchError operator, retry, error notifications — smart error handling
Login to unlock14 min→🔒7.5Uploading Files & Progress EventsFormData, file upload, progress bar — HttpEvent, HttpProgressEvent
Login to unlock16 min→API Swiggy DevHTTP Client mastered! GET POST PUT DELETE, interceptors, error handling — all set!
Stage 8
Bawarchi Level
Forms Complete — Bawarchi Style🔒8.1
Reactive Forms IntroductionFormGroup, FormControl, formControlName — starting reactive approach
Login to unlock16 min→🔒8.2FormControl, FormGroup, FormArrayIndividual controls, groups, and dynamic arrays
Login to unlock16 min→🔒8.3FormBuilder — Clean Form CreationFormBuilder.service for clean form creation — less boilerplate
Login to unlock14 min→🔒8.4Built-in Validators (required, email, minLength etc.)Validators.required, Validators.email, Validators.pattern — all built-in
Login to unlock14 min→🔒8.5Custom Validators — Sync & AsyncCustom validator functions, async validators (check with API)
Login to unlock18 min→🔒8.6Template-Driven Forms (ngModel approach)ngModel, ngModelGroup, #formVar — simple form approach
Login to unlock14 min→🔒8.7Dynamic Forms — Add/Remove Controls at RuntimeFormArray.push/remove, dynamic control generation — runtime forms
Login to unlock18 min→Bawarchi Form WalaReactive forms, custom validators, dynamic forms — all learned!
Stage 9
Gachibowli Level
RxJS & Observables — IT Corridor🔒9.1
Observable vs Promise — When to Use WhatUnicast vs multicast, cancel vs pending — when to use what
Login to unlock14 min→🔒9.2Creating Observables (of, from, interval, throwError)of, from, interval, timer, fromEvent — create observables
Login to unlock14 min→🔒9.3Subscriptions & Unsubscription (takeUntil, async pipe)Prevent memory leaks — takeUntil, async pipe, Subscription management
Login to unlock16 min→🔒9.4Operators — map, filter, tap, switchMap, mergeMapOperators in pipe — map, filter, tap, switchMap, mergeMap, debounceTime
Login to unlock20 min→🔒9.5Subjects (Subject, BehaviorSubject, ReplaySubject)Subject, BehaviorSubject, ReplaySubject, AsyncSubject — multicast magic
Login to unlock18 min→🔒9.6Error Handling in RxJS (catchError, retry)catchError, retry, retryWhen, throwError — error handling in RxJS
Login to unlock16 min→Gachibowli RxJS ProRxJS understood! Observables, operators, subjects — all set!
Stage 10
Madhapur Level
Signals & Modern Angular🔒10.1
Writable Signals — signal() and .set() .update()WritableSignal — .set(), .update(), .asReadonly() for state management
Login to unlock14 min→🔒10.2Computed Signals — computed()computed() for derived state — reactive calculations
Login to unlock14 min→🔒10.3Effect — Side Effects with effect()effect() for side effects — localStorage save, API calls, logging
Login to unlock16 min→🔒10.4Model Signals — model() for Two-Way Bindingmodel() signals — [(model)] modern two-way binding
Login to unlock14 min→🔒10.5Signals vs BehaviorSubject — When to Use WhatSignals vs RxJS — when to use signal, when subject, real comparison
Login to unlock16 min→Madhapur Signal ExpertSignals understood! signal(), computed(), effect(), model() — modern Angular!
Stage 11
Kondapur Level
Component Communication🔒11.1
@Input and @Output — Parent Child Data Flow@Input() data in, @Output() event out — standard pattern
Login to unlock16 min→🔒11.2ViewChild and ContentChild@ViewChild, @ContentChild, @ViewChildren — access from template
Login to unlock16 min→🔒11.3Service-based Communication (Shared Service Pattern)Shared service for unrelated components to communicate
Login to unlock14 min→🔒11.4Signal-based Communication (Modern Way)Signals + services for modern component communication
Login to unlock14 min→Kondapur MessengerComponents communicating! @Input, @Output, services, signals — all learned!
Stage 12
Jubilee Hills Level
Advanced — Change Detection, i18n, Animations🔒12.1
Change Detection — Default vs OnPushOnPush strategy, change detection cycle, markForCheck, detectChanges
Login to unlock18 min→🔒12.2Zone.js Explained & Zoneless Angular FutureNgZone, how zone.js works, the future of Zoneless Angular
Login to unlock16 min→🔒12.3Internationalization (i18n) — Multi-language Support$localize, i18n directives, translations — language support
Login to unlock18 min→🔒12.4Animations — Transitions, Triggers, Keyframes@angular/animations — trigger, state, transition, keyframes, animate
Login to unlock18 min→🔒12.5Security — XSS Prevention, Sanitization, CSRFDomSanitizer, bypassSecurityTrust — Angular security best practices
Login to unlock14 min→Jubilee Hills ExpertChange detection, i18n, animations, security — advanced topics mastered!
Stage 13
Falaknuma Level
Testing — Jasmine, Karma, TestBed🔒13.1
Testing Setup — Jasmine, Karma, TestBedTestBed.configureTestingModule, Jasmine syntax, Karma runner setup
Login to unlock16 min→🔒13.2Unit Testing ComponentsComponent fixture, debugElement, detectChanges — writing component tests
Login to unlock18 min→🔒13.3Unit Testing Services & HTTP (HttpClientTestingModule)HttpTestingController, flush, expectOne — testing HTTP calls
Login to unlock18 min→🔒13.4Component Harness & Integration TestingComponentHarness, Material test harnesses, integration tests
Login to unlock18 min→Falaknuma TesterTesting learned! Components, services, HTTP all tested!
Stage 14
Charminar Level
SSR, PWA & Deploy — Production Ready🔒14.1
Server-Side Rendering (SSR) with Angular@angular/ssr, provideClientHydration, server.ts setup
Login to unlock18 min→🔒14.2SEO — Meta Tags, Open Graph, SitemapTitle, Meta service, Open Graph tags, sitemap.xml generation
Login to unlock16 min→🔒14.3PWA — Service Workers & Offline Support@angular/service-worker, ngsw-config, offline support
Login to unlock18 min→🔒14.4Deploy to Vercel, Netlify, Firebase — Step by StepVercel, Netlify, Firebase Hosting — deploy step by step
Login to unlock16 min→Charminar DevopsSSR, SEO, PWA, deploy — production ready Angular app deployed!
Stage 15
Golconda Level
Real Projects — Inside Golconda Fort🔒15.1
Biryani Shop App — Full CRUD with FormsAdd/edit/delete items — reactive forms, HTTP, routing all learned
Login to unlock28 min→🔒15.2Hyderabad Job Board — Routing, Filters, PaginationJobs list, filter by location, pagination, search — Indeed Hyd style
Login to unlock26 min→🔒15.3Weather Dashboard — Live APIs, Charts, SignalsOpenWeather API, charts with Signals, realtime updates
Login to unlock24 min→🔒15.4Portfolio Website — Animations, Lazy Loading, SEOPersonal portfolio, animations, lazy load sections, SEO meta tags
Login to unlock22 min→🔒15.5Mini E-Commerce — Cart, Auth, Checkout FlowProducts, cart with signals, auth guard, checkout flow — full app
Login to unlock30 min→Golconda Full StackComplete course done! Built 5 real projects — Angular master now!
Components — Lego Blocks
In Angular, everything is a component. A button is a component, a page is a component. Reusable, testable, and scalable — just like Lego blocks.
DI & Services — Public Bus System
Dependency Injection is like Hyderabad's TSRTC — register once, use anywhere. Share services, sync data without any tension.
Signals — Angular ka Naya Reaction
signal(), computed(), effect() — Angular 17+ modern state management. Say bye to Zone.js and enjoy granular reactivity.