Theory
एक बार लिखिए, हर जगह इस्तेमाल कीजिए
FestConnect events के लिए cards दिखाता है, actions confirm करने के लिए modals pop up करता है, और messages के लिए alerts flash करता है, कई pages के across बार-बार। हर बार वह markup fresh लिखना wasteful और inconsistent होगा। Angular का answer reusable components है: एक Card, एक Modal, एक Alert एक बार build कीजिए, और जहाँ चाहिए वहाँ drop कीजिए।
यह lesson cover करता है कैसे components को content projection से genuinely reusable बनाएँ, और smart versus dumb pattern इस्तेमाल करके इन्हें कैसे organise करें। ये habits एक growing app को consistent और maintainable रखते हैं।
Theory
Content Projection Components को Flexible बनाता है
एक reusable Card सिर्फ़ तब useful है जब हर caller अलग content इसके अंदर put कर सके। यही content projection provide करता है।
ng-content एक slot की तरह act करता है: caller आपके component के tags के अंदर जो भी markup place करता है वह template में project होता है जहाँ ng-content बैठता है। तो एक CardComponent एक event, एक profile, या एक message wrap कर सकता है, हर caller अंदर supply करता है। ng-template एक template chunk define करता है जो आपके इसे इस्तेमाल करने के लिए choose करने तक render नहीं होता (modals और conditional content के लिए handy), और ng-container एक invisible grouping element है जो कोई extra DOM add नहीं करता। साथ में ये आपको flexible, reusable UI shells build करने देते हैं।
Practical
ng-content (एक Slot) इस्तेमाल करता एक Reusable Card
@Component({
selector: 'app-card',
standalone: true,
template: `
<div class="card">
<ng-content></ng-content> <!-- caller's markup is projected here -->
</div>
`,
})
export class CardComponent {}
// Usage: whatever you put inside <app-card> appears in the slot:
// <app-card><h3>Robotics Workshop</h3><p>Sat 10am</p></app-card>Theory
Smart vs Dumb Components
एक useful pattern components को responsibility से split करता है।
एक smart (container) component data और logic के बारे में जानता है: यह एक service से events fetch करता है, state hold करता है, और actions handle करता है। एक dumb (presentational) component सिर्फ़ यह जानता है इसे जो दिया गया है वह कैसे display करें: यह data @Input के through receive करता है और user actions @Output के through report करता है, बिना यह पता हुए data कहाँ से आया।
तो एक smart EventsPage events fetch करता है और हर एक display के लिए एक dumb EventCard को pass करता है। Dumb components highly reusable हैं (ये कोई assumptions नहीं बनाते) और test करना easy है; smart components इन्हें app से wire करते हैं। distant components के बीच communication के लिए, वे एक shared service में RxJS के through state share करते हैं (current user जैसा)।
Practical
एक Dumb Component: Inputs In, Events Out
@Component({ selector: 'app-event-card', standalone: true,
template: `<div (click)="select.emit(event)">{{ event.name }}</div>` })
export class EventCardComponent {
@Input() event!: { name: string }; // data comes IN from the parent
@Output() select = new EventEmitter(); // actions go OUT to the parent
}
// It knows nothing about services or where 'event' came from: pure display.
// A smart parent supplies [event]="..." and handles (select)="...".Quiz
Smart vs dumb pattern में, एक dumb (presentational) component को क्या characterise करता है?
- यह services से अपना data fetch करता है और business logic hold करता है
- यह सिर्फ़ @Input के through received data display करता है और @Output से events emit करता है, बिना यह जाने data कहाँ से आता है
- इसे कहीं भी reuse नहीं किया जा सकता
- यह plain JavaScript में लिखा है, TypeScript नहीं
Show the answer
यह सिर्फ़ @Input के through received data display करता है और @Output से events emit करता है, बिना यह जाने data कहाँ से आता है
एक dumb (presentational) component बस वह data display करता है जो इसे @Input के through मिलता है और @Output के through user actions report करता है, बिना यह जाने data कहाँ से originate होता है, जो इसे highly reusable और test करना easy बनाता है। Option A एक SMART (container) component describe करता है, जो services से data fetch करता है और logic hold करता है। Option C truth का opposite है: dumb components सबसे ज़्यादा reusable हैं precisely क्योंकि ये data sources के बारे में कोई assumptions नहीं बनाते। Option D wrong है: सारे Angular components TypeScript हैं। Split responsibility से है: smart components data और logic handle करते हैं, dumb components display handle करते हैं।
Think first
Components को Smart और Dumb में Separate क्यों करें?
हर component को अपना data fetch करने और इसे display करने की बजाय क्यों न होने दें? Smart/dumb split आपको क्या देता है? फिर tap कीजिए।
Show the answer
यह REUSABILITY, TESTABILITY, और CLARITY देता है दो अलग concerns separate करके, data पाना और data दिखाना, जो अलग reasons से change होने की tendency रखते हैं। एक dumb component जो सिर्फ़ inputs लेता है और outputs emit करता है कहीं भी REUSE हो सकता है, क्योंकि यह services, APIs, या app state के बारे में कोई assumptions नहीं बनाता; same EventCard एक database से एक event, एक search result से, या एक test fixture से display कर सकता है, क्योंकि इसे सिर्फ़ passed in एक event object चाहिए। यह TEST करना भी trivial बनाता है: आप इसे कुछ data देते हैं और check करते हैं यह क्या render करता है, बिना services या network calls mock करने की ज़रूरत के। Smart components, इस बीच, messy parts concentrate करते हैं, fetching, state, और wiring, कुछ जगहों में, तो app का data flow follow करना easy है (data inputs के through नीचे आता है, events outputs के through bubble up होते हैं)। अगर इसके बजाय हर component अपना data fetch करता, आप UI के across API calls scatter करते, logic duplicate करते, components को reuse करना hard बनाते (हर एक एक specific data source से tied है), और testing painful बनाते (हर component को इसकी services mock करनी पड़ती)। Smart/dumb pattern really component tree पर separation of concerns का एक application है, वही principle जिससे आप पूरे रास्ते मिले हैं, और यह एक large Angular app को grow होने के साथ maintainable रखता है। कुछ smart places में fetch कीजिए, कई reusable dumb ones में display कीजिए।
Summary
Key takeaways
- Reusable components (Card, Modal, Alert) consistency के लिए एक बार लिखे जाते हैं और पूरे app में इस्तेमाल होते हैं।
- Content projection इन्हें flexible बनाता है: ng-content caller के markup के लिए एक slot है।
- ng-template इस्तेमाल होने तक render न होने वाला template define करता है; ng-container बिना DOM add किए group करता है।
- Smart (container) components data fetch करते हैं और logic hold करते हैं; dumb (presentational) components सिर्फ़ @Input से display करते हैं और @Output से emit करते हैं।
- Dumb components highly reusable हैं और test करना easy है क्योंकि ये data sources के बारे में कुछ नहीं जानते।
- Distant components एक shared service में RxJS के through changing state share करते हैं।
- Memory hook: flexibility के लिए content project कीजिए; smart components fetch करते हैं, dumb components display करते हैं।