Directives & Pipes
Attribute Directives
Element Ka Appearance/Behavior Badalna
💡 Attribute directives ek makeup artist jaisa hai — element ki STRUCTURE (kya hai) nahi badalte, sirf uska LOOK/BEHAVIOR badalte hain (jaise color, cursor style) — element wahi rehta hai, bas "dressed up" different tarike se.
Attribute directives (structural directives ke ulat) element ki APPEARANCE ya BEHAVIOR change karte hain, DOM structure NAHI (element add/remove nahi karte). Built-in examples: ngClass (CSS classes toggle), ngStyle (inline styles set). * prefix nahi hota inke saath.
// ngClass — multiple conditional classes:
// <div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">
// ngStyle — multiple dynamic styles:
// <div [ngStyle]="{ 'color': textColor, 'font-size.px': fontSize }">
// Component:
export class StatusComponent {
isActive = true;
isDisabled = false;
textColor = 'blue';
fontSize = 16;
}🎨
Attribute directives ek makeup artist jaisa hai — element ki STRUCTURE (kya hai) nahi badalte, sirf uska LOOK/BEHAVIOR badalte hain (jaise color, cursor style) — element wahi rehta hai, bas "dressed up" different tarike se.
1 / 2
⚡ Quick Recap
- Attribute directives = appearance/behavior badalte hain, structure nahi
- ngClass/ngStyle = built-in, multiple values ek saath
- Koi * prefix nahi (structural directives se alag)
Is page mein (2 subtopics)
ngClass sirf object syntax hi nahi, ARRAY syntax bhi accept karta hai — jab classes conditionally nahi, sirf DYNAMICALLY (variable se) set karni hon.
// Array syntax:
// <div [ngClass]="['card', sizeClass, colorClass]">
export class CardComponent {
sizeClass = 'card-large';
colorClass = 'card-blue';
}
// Result: class="card card-large card-blue"Tip: Object syntax ({...}) CONDITIONAL classes ke liye better hai (true/false based), array syntax DYNAMIC-but-always-present classes ke liye — context ke hisaab se choose karo.
ngStyle mein property names ke saath UNIT suffix add kar sakte ho (jaise 'width.px', 'opacity.%') — Angular automatically unit append kar deta hai value ke saath.
// <div [ngStyle]="{ 'width.px': boxWidth, 'height.%': boxHeight }">
export class BoxComponent {
boxWidth = 200; // "200px" ban jaayega automatically
boxHeight = 50; // "50%" ban jaayega
}Tip: Ye suffix pattern [style.width.px]="boxWidth" jaisi single-property bindings mein bhi kaam karta hai — consistent Angular convention hai units specify karne ke liye.