18 | ngIf Directive Angular | Structural Directives In Angular | ngIf else | Angular
ngIf डायरेक्टिव एक संरचनात्मक डायरेक्टिव है जो एंगुलर में उपयोग किया जाता है। यह डायरेक्टिव किसी डोम एलीमेंट को DOM से हटा देता है या उसे DOM में दिखाता है यदि वहां किसी शर्त का पालन किया जा रहा है।
एंगुलर में संरचनात्मक डायरेक्टिवज़ कुल तीन प्रकार की होती हैं – ngIf, ngFor और ngSwitch। इनमें से ngIf डायरेक्टिव को एक्टिवेट करने के लिए ‘आंगुलर’ तर्ज प्रयुक्त किया जाता है।
उदाहरण:
जब हम किसी एलीमेंट को उसके एंगुलर मॉडल पर आधारित रूप से दिखाना या छुपाना चाहते हैं, तो हम ngIf डायरेक्टिव का उपयोग कर सकते हैं।
<div *ngIf="isUserLoggedIn">
<p>Welcome, {{userName}}!</p>
</div>
इस उदाहरण में, एचटीएमएल एलीमेंट (‘div’) को स्थायी तौर पर DOM से हटा दिया जाएगा जब ‘isUserLoggedIn’ मॉडल true होगा।
ngIf else:
एंगुलर में ngIf के उपयोग के साथ ‘else’ भी किया जा सकता है। यह एक विकल्प होता है जो उस स्थिति के लिए उपयोग किया जाता है जब एलीमेंट छुपे न हों।
<div *ngIf="isUserLoggedIn; else showLogin">
<p>Welcome, {{userName}}!</p>
</div>
<ng-template #showLogin>
<p>Please login to continue.</p>
</ng-template>
इस उदाहरण में, ‘Welcome, {{userName}}!’ मैसेज को दिखाया जाएगा यदि ‘isUserLoggedIn’ मॉडल true है, अन्यथा ‘Please login to continue.’ मैसेज दिखाया जाएगा।
Sir please take more examples like with event, toggle button that's makes your video is more useful than others … otherwise your information is not beatable
React-Redux cover kardo bhai pls 🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
Please start react new playlist also