Aliens School
Cinematic Knowledge Experience
0%
Aliens School
Now Playing
Aliens School ยท HIEN
โŒจ๏ธ Keyboard Shortcuts
โ†’Next slide โ†Previous slide SpacePlay / Pause MNarration on/off FFullscreen ?Show/hide this
Press any key to close
Skill Topic ยท Cinematic

๐Ÿ“˜ Angular โ€” Directives

Directives Angular ke wo tools hain jo DOM ko dynamically control karte hain โ€” elementsโ€ฆ

Overview
๐ŸŒŸ

๐Ÿ“˜ Angular โ€” Directives โ€” Quick Facts

๐Ÿ“Œ

Type: Prefix

๐ŸŽฏ

Component: (none)

โšก

Structural: * ya @

๐Ÿ”‘

Attribute: [ ]

Topic 1
โœจ

๐Ÿ“Œ 1. Directive Kya Hai?

๐Ÿ’ก

๐Ÿ”ด Red Light = "Ruko!" โ†’ Elementโ€ฆ

๐Ÿ”‘

๐ŸŸข Green Light = "Chalo!" โ†’ Elementโ€ฆ

โšก

๐ŸŸก Yellow Light = "Dhheere!" โ†’โ€ฆ

๐ŸŽฏ

๐Ÿ”„ Roundabout = "Loop me chalo!" โ†’โ€ฆ

Topic 2
โœจ

๐Ÿ“Œ 2. *ngIf โ€” Conditional Rendering (Show/Hide)

๐Ÿ’ก Kya Hai? *ngIf = Condition true ho to element dikhao, false ho to DOM se completelyโ€ฆ
Topic 3
โœจ

๐Ÿ“Œ 3. *ngFor โ€” List Rendering (Loop)

๐ŸŽฏ Kya Hai? *ngFor = Array/List me loop karo aur har item ke liye ek element banao. ๐Ÿ’กโ€ฆ
Topic 4
โญ

๐Ÿ“Œ 4. *ngSwitch โ€” Multiple Conditions

โญ Kya Hai? *ngSwitch = Ek variable ki value ke hisaab se alag-alag content dikhao โ€” jaiseโ€ฆ
Topic 5
โœจ

๐Ÿ“Œ 5. Angular 17+ โ€” Modern Control Flow (@if, @for, @switch)

๐Ÿ”‘ Kyun Naya Syntax Aaya? | Old Syntax (< Angular 17) | Problem |โ€ฆ
Topic 6
โœจ

๐Ÿ“Œ 6. ng-container & ng-template

โœจ ng-container โ€” Invisible Wrapper `html <!-- โŒ Problem: Agar wrapper div nahi chahiyeโ€ฆ
Topic 7
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

๐Ÿ“Œ 7. Custom Attribute Directive

๐ŸŒŸ Kya Hai? Custom directive = Apna khud ka directive banao jo kisi bhi element pe lag sakeโ€ฆ
Topic 8
๐Ÿš€

๐Ÿ“Œ 8. Custom Structural Directive

๐Ÿš€ Example: appUnless โ€” Opposite of ngIf `typescript // โ•โ•โ• unless.directive.ts โ•โ•โ• import {โ€ฆ
Topic 9
โœจ

๐Ÿ“Œ 9. Complete Comparison Table

๐Ÿ“š | Directive | Type | Syntax | Purpose | Import (Standalone) |โ€ฆ
Topic 10
๐Ÿ’ก ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ“Œ 10. Common Mistakes โ€” Beginners Ye Galtiyan Karte Hain

๐Ÿ’ก | # | โŒ Galti | โœ… Solution | |---|---------|------------| | 1 | Do structural directivesโ€ฆ
Topic 11
๐Ÿ”’

โœ… Is Chapter Ka Summary

๐ŸŽฏ ๐Ÿ“Œ Yaad Rakho: - 3 Types: Component, Structural (), Attribute directives - \ngIf =โ€ฆ
Topic 12
โญ

๐Ÿงช Khud Try Karo!

๐Ÿ’ก

isLoggedIn, username, roleโ€ฆ

๐Ÿ”‘

*ngIf se login/logout state handleโ€ฆ

โšก

[ngSwitch] se role ke hisaab seโ€ฆ

๐ŸŽฏ

Login/Logout buttons

Comparison
โœจ

๐Ÿ“Œ 9. Complete Comparison Table

โš–๏ธ

*ngIf: Structural

โš–๏ธ

*ngFor: Structural

โš–๏ธ

*ngSwitch: Structural

Diagram
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

Visual Flow

๐Ÿ“Š Diagram visualization โ€” details in narration
Diagram
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

Visual Flow

๐Ÿ“Š Diagram visualization โ€” details in narration
Quick Quiz
๐Ÿง  QUIZ TIME

Quiz โ€” Question 1

๐Ÿ“˜ Angular โ€” Directives ka sabse sahi definition kya hai?

Quick Quiz
๐Ÿง  QUIZ TIME

Quiz โ€” Question 2

๐Ÿ“˜ Angular โ€” Directives ka 'Component' kya hai?

Complete! ๐ŸŽ‰
COMPLETE

๐Ÿ“˜ Angular โ€” Directives Complete!

Aliens School ยท HIEN ยท Cinematic Knowledge

โœ…

๐Ÿ“˜ Angular โ€” Directives Complete

1/20
0:00
REC 00:00ESC=Cancel
Aliens School
3
Recording shuru hone wali hai...
โœ…
Recording Complete
Video process ho rahi hai...
Live Class
Slide 1 / 7
Timer
00:00
๐Ÿ“ Speaker Notes
โ€”
โญ๏ธ Up Next
โ€”
โ€”
๐Ÿ—‚๏ธ All Slides