Angular 2
Ngif का उपयोग कैसे करें

परिचय

वाक्य - विन्यास

• <div * ngIf = "false"> परीक्षण </ div> <! - गलत का मूल्यांकन करता है ->
• <div * ngIf = "अपरिभाषित"> परीक्षण </ div> <! - असत्य का मूल्यांकन करता है ->
• <div * ngIf = "null"> परीक्षण </ div> <! - असत्य का मूल्यांकन करता है ->
• <div * ngIf = "0"> परीक्षण </ div> <! - गलत का मूल्यांकन करता है ->
• <div * ngIf = "NaN"> परीक्षण </ div> <! - असत्य का मूल्यांकन करता है ->
• <div * ngIf = ""> परीक्षण </ div> <! - असत्य का मूल्यांकन करता है ->
• अन्य सभी मूल्य सत्य का मूल्यांकन करते हैं।

लोडिंग संदेश प्रदर्शित करें

यदि हमारा घटक तैयार नहीं है और सर्वर से डेटा की प्रतीक्षा कर रहा है, तो हम * ngIf का उपयोग करके लोडर को जोड़ सकते हैं। कदम:

पहले एक बूलियन घोषित करें:

loading: boolean = false;

इसके बाद, अपने घटक में ngOnInit नामक एक जीवनचक्र हुक जोड़ें

ngOnInit() {
   this.loading = true;
}

और जब आप सर्वर से पूरा डेटा प्राप्त करते हैं, तो आप बूलियन को झूठी लोड कर रहे हैं।

 this.loading=false; 

अपने html टेम्पलेट में loading प्रॉपर्टी के साथ * ngIf का उपयोग करें:

<div *ngIf="loading" class="progress">
   <div class="progress-bar info" style="width: 125%;"></div>
</div>

एक शर्त पर अलर्ट संदेश दिखाएं

<p class="alert alert-success" *ngIf="names.length > 2">Currently there are more than 2 names!</p>

* NgIf का उपयोग करके * ngFor लूप की शुरुआत या अंत में एक फ़ंक्शन चलाने के लिए

NgFor कुछ मान प्रदान करता है जिन्हें स्थानीय चरों में परिवर्तित किया जा सकता है

• सूचकांक - (चर) 0 से शुरू होने वाले चलने योग्य में वर्तमान आइटम की स्थिति
• पहला - (बूलियन) सही है अगर चालू आइटम चलने योग्य में पहला आइटम है
• अंतिम - (बूलियन) सही अगर चालू आइटम चलने योग्य में अंतिम आइटम है
• यहां तक कि - (बूलियन) सही अगर वर्तमान सूचकांक एक समान संख्या है
• विषम - (बूलियन) सही यदि वर्तमान सूचकांक एक विषम संख्या है

<div *ngFor="let note of csvdata; let i=index; let lastcall=last">
      <h3>{{i}}</h3> <-- to show index position
      <h3>{{note}}</h3>
      <span *ngIf="lastcall">{{anyfunction()}} </span><-- this lastcall boolean value will be true only if this is last in loop
      // anyfunction() will run at the end of loop same way we can do at start
    </div>

* NgFor के साथ * ngIf का उपयोग करें

आप का उपयोग करने की अनुमति नहीं कर रहे हैं *ngIf और *ngFor आप घोंसला सकते हैं (यह क्रम में एक त्रुटि देता होगा) एक ही div में *ngIf में *ngFor वांछित व्यवहार मिलता है।

उदाहरण 1: सामान्य वाक्यविन्यास

<div *ngFor="let item of items; let i = index">
  <div *ngIf="<your condition here>">

   <!-- Execute code here if statement true -->

  </div>
</div>

उदाहरण 2: प्रदर्शन तत्वों को भी इंडेक्स के साथ

<div *ngFor="let item of items; let i = index">
  <div *ngIf="i % 2 == 0">
    {{ item }}
  </div>
</div>

नकारात्मक पक्ष यह है कि अतिरिक्त बाहरी div तत्व को जोड़ने की आवश्यकता है।

लेकिन इस उपयोग के मामले पर विचार करें, जहां एक div एलिमेंट को iterated (* ngFor) का उपयोग करने की आवश्यकता है और इसमें एक चेक भी शामिल है कि तत्व को निकालने की आवश्यकता है या नहीं (* ngIf का उपयोग करके), लेकिन एक अतिरिक्त div जोड़ना पसंद नहीं है। इस स्थिति में आप * ngFor के लिए template टैग का उपयोग कर सकते हैं:

<template ngFor let-item [ngForOf]="items">
    <div *ngIf="item.price > 100">
    </div>
</template>

इस तरह से एक अतिरिक्त बाहरी div जोड़ने की जरूरत नहीं है और इसके अलावा <template> तत्व DOM में नहीं जोड़ा जाएगा। उपरोक्त उदाहरण से DOM में जोड़े गए एकमात्र तत्व iterated div तत्व हैं।

नोट: में कोणीय v4 <template> के पक्ष में पदावनत किया गया है <ng-template> और v5 में निकाल दिया जाएगा। कोणीय v2.x रिलीज में <template> अभी भी मान्य है।