Skill Topic · Cinematic

📘 Angular — Angular Material

Google ka official UI component library — jaise LEGO blocks se sundar structure banao, waise…

Overview

📘 Angular — Angular Material — Quick Facts

📌

Category: Components

🎯

Form Controls: Input, Select, Checkbox, Radio,…

⚡

Navigation: Toolbar, Sidenav, Menu, Tabs

🔑

Layout: Card, List, Grid, Divider

Topic 1

📌 1. Angular Material Kya Hai?

📚 🎯 Analogy — LEGO Building Blocks Angular Material = pre-built LEGO blocks. Buttons,…

Topic 2

📌 2. Setup

💡 `bash Install Angular Material ng add @angular/material ↑ Ye command: 1. Package install…

Topic 3

📌 3. Buttons

🎯 🎯 Analogy — TV Remote ke Buttons Jaise remote me har button ka alag style (power button…

Topic 4

📌 4. Form Controls

⭐ 🎯 Analogy — Government Form Filling Government form me har field ka label hota hai, hint…

Topic 5

📌 5. Navigation — Toolbar & Sidenav

🔑 🎯 Analogy — Mobile App Layout Jaise phone apps me top pe toolbar + side me sliding drawer…

Topic 6

📌 6. Cards & Lists

✨ `typescript import { MatCardModule } from '@angular/material/card'; import {…

Topic 7

📌 7. Dialog (Modal Popup)

🌟 🎯 Analogy — Confirmation Window Jaise ATM pe "Are you sure?" popup aata hai — Material…

Topic 8

📌 8. Snackbar & Tooltip

🚀 `typescript import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';…

Topic 9

📌 9. Data Table (Full Featured)

📚 🎯 Analogy — Excel Spreadsheet Material Table = mini Excel — sort, filter, paginate sab…

Topic 10

📌 10. Theming — Custom Colors

💡 🎯 Analogy — Paint Theme App ko apne brand colors dena hai — Material theming = app ko…

Topic 11

📌 11. Component Categories Quick Reference

🎯 | Category | Components | Import From | |----------|-----------|-------------| | Form…

Topic 12

📌 12. Common Mistakes — Beginners Yeh Galtiyan Karte Hain

⭐ | # | ❌ Galti | ✅ Solution | |---|--------|------------| | 1 | MatInputModule import…

Topic 13

✅ Summary

🔑 📌 Yaad Rakho: - ng add @angular/material = install + setup (theme, animations) -…

Topic 14

🧪 Khud Try Karo!

💡

Name (mat-input), Email…

🔑

Gender (radio), Terms agree…

Diagram

Visual Flow

📊 Diagram visualization — details in narration

Quick Quiz

Quiz — Question 1

📘 Angular — Angular Material ka sabse sahi definition kya hai?

Quick Quiz

Quiz — Question 2

📘 Angular — Angular Material ka 'Form Controls' kya hai?

Complete! 🎉

📘 Angular — Angular Material Complete!

Aliens School · HIEN · Cinematic Knowledge

✅