Skill Topic · Cinematic

📘 Angular — Components

Component Angular ka sabse important concept hai — har cheez jo screen pe dikhti hai, wo ek…

Overview

📘 Angular — Components — Quick Facts

📌

Hissa: File

🎯

Metadata: @Component({})

⚡

Template: .html

🔑

Class: .ts

Topic 1

📌 1. Component Kya Hai?

💡

🏠 Ek block = ghar (Home Component)

🔑

🏪 Ek block = dukaan (Shop…

⚡

🚗 Ek block = car (Car Component)

🎯

🌳 Ek block = tree (Tree Component)

Topic 2

📌 2. Component Kaise Banate Hain

💡 Method 1: CLI Se (Recommended ✅) `bash Basic command: ng generate component header…

Topic 3

📌 3. Component with Separate Files — Detailed Example

🎯 Scenario: User Profile Card `typescript // ═══ user-card.component.ts ═══ import {…

Topic 4

📌 4. Inline Template & Styles — Chhote Components Ke Liye

⭐ Jab component chhota ho (template: 5-10 lines), to alag files banana overkill hai. Inline…

Topic 5

📌 5. Standalone Components — Modern Angular (14+)

🔑 Kyun Standalone? | Purana Approach (Module-based) | Naya Approach (Standalone) |…

Topic 6

📌 6. View Encapsulation — CSS Kaise Scoped Hota Hai

✨ Ye samajhna bahut important hai: Angular me har component ki CSS sirf usi component pe…

Topic 7

📌 7. Component Selectors — Detailed

Topic 8

📌 8. Component Tree — Nesting Components

🚀 Angular me components ek dusre ke andar nest hote hain — jaise family tree: `mermaid…

Topic 9

📌 9. Component Lifecycle — Zindagi Ka Chakkar

📚 Har component ki ek lifecycle hoti hai — birth se death tak: `mermaid graph TD A["🐣…

Topic 10

📌 10. Common Mistakes — Beginners Ye Galtiyan Karte Hain

💡 | # | ❌ Galti | ✅ Solution | |---|---------|------------| | 1 | Saara code ek component…

Topic 11

✅ Is Chapter Ka Summary

🎯 📌 Yaad Rakho: - Component = Template + Class + Styles + Metadata — Angular ka building…

Topic 12

🧪 Khud Try Karo!

💡

name, email, phone properties

🔑

isVisible = true;

⚡

toggleVisibility() method

🎯

Name aur email dikao {{…

Diagram

Visual Flow

📊 Diagram visualization — details in narration

Diagram

Visual Flow

📊 Diagram visualization — details in narration

Quick Quiz

Quiz — Question 1

📘 Angular — Components ka sabse sahi definition kya hai?

Quick Quiz

Quiz — Question 2

📘 Angular — Components ka 'Metadata' kya hai?

Complete! 🎉

📘 Angular — Components Complete!

Aliens School · HIEN · Cinematic Knowledge

✅