Theory
Components जिन्हें बात करनी है
FestConnect की event LIST (parent) को हर event का data DOWN एक event CARD (child) को pass करना पड़ता है, और जब user एक card click करता है, child को parent को UP बताना पड़ता है कौन सा event selected था।
यह two-way conversation, data down, events up, component communication है, और Angular के पास इसके लिए tools की एक precise pair है: @Input और @Output। यह lesson इन्हें cover करता है, plus directives: वे special template instructions (*ngFor, *ngIf, ngClass) जो elements को repeat, conditionally show, और style करते हैं। अगर यह React के props-down/callbacks-up plus map/conditionals जैसा लगता है, वह recognition आपका shortcut है।
Theory
@Input Down, @Output Up
Angular का communication एक matched pair है:
- @Input() एक property mark करता है जो एक PARENT data INTO pass कर सकता है: data DOWN flow करता है, exactly React props की तरह।
@Input() event: Event; - @Output() एक EventEmitter के साथ एक CHILD को एक event अपने parent को UP भेजने देता है। Child
this.selected.emit(this.event)करता है, और parent(selected)="onSelect($event)"से listen करता है
तो rule symmetrical है: data down के लिए @Input, events up के लिए @Output। Child कभी parent में नहीं पहुँचता; यह EMIT करता है, और parent decide करता है क्या करना है। यह one-way-each-direction flow data को predictable रखता है, वही discipline जो React props और callbacks से enforce करता है।
Practical
Parent-Child Communication
// CHILD component: receives data via @Input, emits up via @Output
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-event-card',
template: `
<div (click)="select()">{{ event.name }}</div>
`
})
export class EventCardComponent {
@Input() event: any; // data DOWN from parent
@Output() chosen = new EventEmitter<any>(); // event UP to parent
select() {
this.chosen.emit(this.event); // notify the parent
}
}
// PARENT template uses it: passes data in, listens for the event out
// <app-event-card [event]="ev" (chosen)="onChosen($event)"></app-event-card>
Theory
Directives: Structural बनाम Attribute
Directives instructions हैं जो आप templates में डालते हैं। दो kinds:
Structural directives DOM STRUCTURE बदलते हैं (elements add या remove करते हैं), और * से prefixed होते हैं:
*ngIf="seats > 0": element सिर्फ़ तभी render कीजिए जब condition true हो*ngFor="let ev of events": list में हर item के लिए element REPEAT कीजिए*ngSwitch: कई cases में से choose कीजिए
Attribute directives एक element की APPEARANCE या behaviour बदलते हैं इसे add/remove किए बिना:
[ngClass]="{ soldout: seats === 0 }": conditionally एक CSS class add/remove कीजिए[ngStyle]="{ color: seats > 0 ? 'green' : 'red' }": inline styles set कीजिए
Distinction: structural (*) बदलता है WHAT elements exist करते हैं; attribute बदलता है existing वाले कैसे LOOK करते हैं।
Quiz
Angular में, एक CHILD component अपने PARENT को data या एक event कैसे UP भेजता है?
- @Input() से
- @Output() और एक EventEmitter से: child emit करता है, और parent (event)="handler($event)" से listen करता है
- Directly parent की properties modify करके
- यह नहीं कर सकता; data सिर्फ़ नीचे flow करता है
Show the answer
@Output() और एक EventEmitter से: child emit करता है, और parent (event)="handler($event)" से listen करता है
एक child events UP भेजता है @Output() के साथ एक EventEmitter इस्तेमाल करके: यह @Output() chosen = new EventEmitter() declare करता है, कुछ होने पर this.chosen.emit(value) call करता है, और parent template में इससे (chosen)="onChosen($event)" से bind करता है। @Input() (option A) OPPOSITE direction है: parent से child तक data DOWN flow करना। Option C Angular के design को violate करता है: एक child कभी directly अपने parent में नहीं पहुँचता; यह emit करता है और parent को respond करने देता है (data flow predictable रखते हुए)। Option D @Input के बारे में आधा सही है पर @Output ignore करता है, जो exactly events up भेजने के लिए exist करता है। Pair: @Input down, @Output up: React के props-down, callbacks-up को mirror करता है।
Think first
Angular Directives को React Patterns से Match कीजिए
React (Unit 2) में आपने lists के लिए {items.map(...)} और conditionals के लिए {cond && <X/>} इस्तेमाल किए। Angular equivalents क्या हैं, और यह आपको क्या बताता है? फिर tap कीजिए।
Show the answer
React का {items.map(item => <X/>)} एक LIST render करने के लिए Angular का ngFor="let item of items" है। React का {condition && <X/>} (या एक ternary) CONDITIONAL rendering के लिए Angular का ngIf="condition" है। और React का className/style logic Angular के [ngClass] और [ngStyle] से map होता है। Tell यह है: दोनों frameworks SAME तीन template problems solve करते हैं, एक list repeat करना, कुछ conditionally दिखाना, conditionally style करना, बस अलग syntax के साथ (JSX में JavaScript expressions बनाम Angular templates में directives)। तो Angular के directives सीखना ज़्यादातर उन patterns के लिए नए NAMES सीखना है जो आप already React से own करते हैं। यही वजह है दूसरा framework पहले से faster सीखना है: CONCEPTS transfer होते हैं, सिर्फ़ spelling बदलती है।
Watch out
Communication और Directive Traps
ग़लत Direction: @Input DOWN है (parent से child), @Output/EventEmitter UP है (child से parent); swap मत कीजिए।
*Structural Directives पर भूलना*: यह ngIf और *ngFor है (star matter करता है); [ngClass]/[ngStyle] brackets इस्तेमाल करते हैं, stars नहीं।
Child Directly Parent को Modify करना: इसकी बजाय एक event emit कीजिए; data flow को one-directional रखिए।
ngFor में 'let' Missing होना: यह ngFor="let ev of events" है, ngFor="ev of events" नहीं।
Structural और Attribute Confuse करना: structural (*) elements add/remove करते हैं; attribute (ngClass/ngStyle) existing वालों को restyle करते हैं।
Theory
Directives इस्तेमाल हुए; अब Custom वाले और Binding
आप components को साथ wire कर सकते हैं और templates shape करने के लिए Angular के built-in directives इस्तेमाल कर सकते हैं। अगला: CUSTOM directives (अपने खुद वाले लिखना) और DATA BINDING की पूरी picture, interpolation, property binding, event binding, और famous TWO-WAY binding ngModel के साथ जो एक form field और एक variable को perfect sync में रखता है। Binding वह तरीका है जिससे Angular templates और TypeScript एक-दूसरे से बात करते हैं।
Summary
Key takeaways
- Component communication: @Input() data DOWN pass करता है (parent से child, props की तरह); EventEmitter वाला @Output() events UP भेजता है (child से parent)।
- Child emit करता है (this.event.emit(value)); parent (event)="handler($event)" से listen करता है।
- Directives template instructions हैं; दो kinds: structural और attribute।
- Structural directives ( से prefixed) DOM structure बदलते हैं: ngIf (conditional), ngFor='let x of list' (repeat), ngSwitch।
- Attribute directives elements add/remove किए बिना appearance बदलते हैं: ngClass (classes), ngStyle (inline styles)।
- ये React से map होते हैं: ngFor=map, ngIf=conditional, ngClass/ngStyle=className/style।
- Memory hook: @Input down, @Output up; star directives add/remove करते हैं, attribute directives restyle करते हैं।