कोणीय 2 - निर्देश

directiveएक कस्टम HTML तत्व है जिसका उपयोग HTML की शक्ति को बढ़ाने के लिए किया जाता है। कोणीय 2 में निम्नलिखित निर्देश हैं जिन्हें ब्राउज़रमॉड्यूल मॉड्यूल के भाग के रूप में कहा जाता है।

  • ngif
  • ngFor

यदि आप app.module.ts फ़ाइल देखते हैं, तो आप निम्न कोड और BrowserModule मॉड्यूल को परिभाषित देखेंगे। इस मॉड्यूल को परिभाषित करके, आपके पास 2 निर्देशों तक पहुंच होगी।

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

अब आइए प्रत्येक निर्देश को विस्तार से देखें।

ngIf

ngif एचटीएमएल कोड में तत्वों को जोड़ने के लिए तत्व का उपयोग किया जाता है यदि यह सत्य का मूल्यांकन करता है, अन्यथा यह एचटीएमएल कोड में तत्वों को नहीं जोड़ेगा।

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

*ngIf = 'expression'

यदि अभिव्यक्ति सत्य का मूल्यांकन करती है, तो संबंधित जोड़ा जाता है, अन्यथा तत्व नहीं जोड़े जाते हैं।

आइए अब एक उदाहरण देखें कि हम * एनसिफ निर्देशन का उपयोग कैसे कर सकते हैं।

Step 1- सबसे पहले appStatus नाम की क्लास में एक प्रॉपर्टी जोड़ें। यह बुलियन का प्रकार होगा। आइए इस मूल्य को सही रखें।

import { Component } from '@angular/core';  

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

Step 2 - अब app.component.html फ़ाइल में, निम्न कोड जोड़ें।

<div *ngIf = 'appStatus'>{{appTitle}} Tutorialspoint </div>

उपरोक्त कोड में, अब हमारे पास * ngIf निर्देश है। निर्देश में हम appStatus संपत्ति के मूल्य का मूल्यांकन कर रहे हैं। चूंकि संपत्ति का मूल्य सच का मूल्यांकन करना चाहिए, इसका मतलब है कि ब्राउज़र में डिव टैग प्रदर्शित होना चाहिए।

एक बार जब हम उपरोक्त कोड जोड़ लेते हैं, तो हम ब्राउज़र में निम्नलिखित आउटपुट प्राप्त करेंगे।

उत्पादन

ngFor

ngFor तत्व का उपयोग फ़ोर लूप की स्थिति के आधार पर तत्वों के लिए किया जाता है।

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

*ngFor = 'let variable of variablelist'

चर एक अस्थायी चर है जिसमें मानों को प्रदर्शित किया जाता है variablelist

आइए अब एक उदाहरण देखें कि हम * ngFor निर्देश का उपयोग कैसे कर सकते हैं।

Step 1- सबसे पहले ऐपलिस्ट नाम की क्लास में एक प्रॉपर्टी जोड़ें। यह उस प्रकार का होगा जिसका उपयोग किसी भी प्रकार के सरणियों को परिभाषित करने के लिए किया जा सकता है।

import { Component } from '@angular/core';
 
@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "Name" : "One"
   },

   {
      "ID": "2",
      "Name" : "Two"
   } ];
}

इसलिए, हम AppList को एक एरे के रूप में परिभाषित कर रहे हैं जिसमें 2 तत्व हैं। प्रत्येक तत्व में ID और नाम के रूप में 2 उप गुण होते हैं।

Step 2 - app.component.html में, निम्नलिखित कोड को परिभाषित करें।

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
   </ul> 
</div>

उपरोक्त कोड में, हम अब appList सरणी के माध्यम से पुनरावृति करने के लिए ngFor निर्देश का उपयोग कर रहे हैं। फिर हम एक सूची को परिभाषित करते हैं जहां प्रत्येक सूची आइटम सरणी का आईडी और नाम पैरामीटर है।

एक बार जब हम उपरोक्त कोड जोड़ लेते हैं, तो हम ब्राउज़र में निम्नलिखित आउटपुट प्राप्त करेंगे।

उत्पादन