← 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
12 min→○3.2Property Binding [ ][src], [disabled], [class.active] — connect properties from JS
14 min→○3.3Event Binding ( ) and $event(click), (input), (submit) and $event object — catch user actions
14 min→○3.4Two-Way Binding [(ngModel)] and model()From input field to component — banana kingfisher style binding
14 min→○3.5Template Reference Variables (#var)#myInput to access DOM elements inside template
12 min→○3.6Built-in Attributes (@class, @style, @attr)Dynamic classes and styles — flexible styling
14 min→○3.7Structural Directives (@if @for @switch @defer)New control flow syntax — @for @if @switch @defer
18 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
16 min→○4.2Custom Structural Directives*appPermission, *appRole — your own *-based directives
18 min→○4.3Built-in Pipes (Date, Currency, Async, etc.)date, currency, percent, json, async, keyvalue — all built-in pipes
14 min→○4.4Custom Pipes — Pure vs ImpurePipeTransform interface, pure vs impure — create custom pipes
16 min→○4.5Old Syntax (*ngIf *ngFor) vs New (@if @for) MigrationMigration guide — *ngIf to @if, side by side comparison
14 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
14 min→○5.2Dependency Injection — How Angular ResolvesInjector tree, hierarchical DI — how Angular resolves dependencies
16 min→○5.3inject() vs Constructor InjectionNew inject() function vs old constructor injection — when to use what
14 min→○5.4Providers — root, component, module levelprovidedIn: "root" vs "component" vs "any" — scope understood
16 min→○5.5Environment Config & Multi-provider TokensInjectionToken, multi: true, environment config pattern — advanced DI
16 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
16 min→○6.2Route Parameters (path params, query params):id params, query params, fragment — extracting data from URLs
16 min→○6.3Child Routes & Nested Navigationchildren array, nested outlets — build complex layouts
16 min→○6.4Lazy Loading (loadComponent)loadComponent for lazy loading — reduce app size
14 min→○6.5Route Guards (canActivate, canDeactivate, canMatch)canActivate, canDeactivate, canMatch, canLoad — security guards
18 min→○6.6Resolvers — Pre-fetch Data Before RouteResolveFn, pre-fetch API data before route activates — smooth UX
16 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
16 min→○7.2POST, PUT, DELETE with TypeScript ModelsTyped HTTP requests — CRUD operations with interfaces
18 min→○7.3Interceptors — Auth Header, Logging, ErrorHttpInterceptor to add auth token, logs, error handling
18 min→○7.4Error Handling (catchError, throwError)catchError operator, retry, error notifications — smart error handling
14 min→○7.5Uploading Files & Progress EventsFormData, file upload, progress bar — HttpEvent, HttpProgressEvent
16 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
16 min→○8.2FormControl, FormGroup, FormArrayIndividual controls, groups, and dynamic arrays
16 min→○8.3FormBuilder — Clean Form CreationFormBuilder.service for clean form creation — less boilerplate
14 min→○8.4Built-in Validators (required, email, minLength etc.)Validators.required, Validators.email, Validators.pattern — all built-in
14 min→○8.5Custom Validators — Sync & AsyncCustom validator functions, async validators (check with API)
18 min→○8.6Template-Driven Forms (ngModel approach)ngModel, ngModelGroup, #formVar — simple form approach
14 min→○8.7Dynamic Forms — Add/Remove Controls at RuntimeFormArray.push/remove, dynamic control generation — runtime forms
18 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
14 min→○9.2Creating Observables (of, from, interval, throwError)of, from, interval, timer, fromEvent — create observables
14 min→○9.3Subscriptions & Unsubscription (takeUntil, async pipe)Prevent memory leaks — takeUntil, async pipe, Subscription management
16 min→○9.4Operators — map, filter, tap, switchMap, mergeMapOperators in pipe — map, filter, tap, switchMap, mergeMap, debounceTime
20 min→○9.5Subjects (Subject, BehaviorSubject, ReplaySubject)Subject, BehaviorSubject, ReplaySubject, AsyncSubject — multicast magic
18 min→○9.6Error Handling in RxJS (catchError, retry)catchError, retry, retryWhen, throwError — error handling in RxJS
16 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
14 min→○10.2Computed Signals — computed()computed() for derived state — reactive calculations
14 min→○10.3Effect — Side Effects with effect()effect() for side effects — localStorage save, API calls, logging
16 min→○10.4Model Signals — model() for Two-Way Bindingmodel() signals — [(model)] modern two-way binding
14 min→○10.5Signals vs BehaviorSubject — When to Use WhatSignals vs RxJS — when to use signal, when subject, real comparison
16 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
16 min→○11.2ViewChild and ContentChild@ViewChild, @ContentChild, @ViewChildren — access from template
16 min→○11.3Service-based Communication (Shared Service Pattern)Shared service for unrelated components to communicate
14 min→○11.4Signal-based Communication (Modern Way)Signals + services for modern component communication
14 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
18 min→○12.2Zone.js Explained & Zoneless Angular FutureNgZone, how zone.js works, the future of Zoneless Angular
16 min→○12.3Internationalization (i18n) — Multi-language Support$localize, i18n directives, translations — language support
18 min→○12.4Animations — Transitions, Triggers, Keyframes@angular/animations — trigger, state, transition, keyframes, animate
18 min→○12.5Security — XSS Prevention, Sanitization, CSRFDomSanitizer, bypassSecurityTrust — Angular security best practices
14 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
16 min→○13.2Unit Testing ComponentsComponent fixture, debugElement, detectChanges — writing component tests
18 min→○13.3Unit Testing Services & HTTP (HttpClientTestingModule)HttpTestingController, flush, expectOne — testing HTTP calls
18 min→○13.4Component Harness & Integration TestingComponentHarness, Material test harnesses, integration tests
18 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
18 min→○14.2SEO — Meta Tags, Open Graph, SitemapTitle, Meta service, Open Graph tags, sitemap.xml generation
16 min→○14.3PWA — Service Workers & Offline Support@angular/service-worker, ngsw-config, offline support
18 min→○14.4Deploy to Vercel, Netlify, Firebase — Step by StepVercel, Netlify, Firebase Hosting — deploy step by step
16 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
28 min→○15.2Hyderabad Job Board — Routing, Filters, PaginationJobs list, filter by location, pagination, search — Indeed Hyd style
26 min→○15.3Weather Dashboard — Live APIs, Charts, SignalsOpenWeather API, charts with Signals, realtime updates
24 min→○15.4Portfolio Website — Animations, Lazy Loading, SEOPersonal portfolio, animations, lazy load sections, SEO meta tags
22 min→○15.5Mini E-Commerce — Cart, Auth, Checkout FlowProducts, cart with signals, auth guard, checkout flow — full app
30 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.