Angular में पाइप्स का उपयोग करके संख्याओं को फॉर्मेट करना

DecimalPipe पाइप का उपयोग संख्याओं को फॉर्मेट करने के लिए किया जा सकता है। पाइप के पहले पैरामीटर में हम पूर्णांक भाग में अंकों की न्यूनतम संख्या निर्दिष्ट करते हैं। दूसरे पैरामीटर में हम दशमलव भाग में अंकों की न्यूनतम संख्या निर्दिष्ट करते हैं। तीसरे वैकल्पिक पैरामीटर में हम दशमलव भाग में अंकों की अधिकतम संख्या निर्दिष्ट करते हैं।

इस तथ्य के बावजूद कि हमारे पाइप का नाम DecimalPipe है, इसे कॉल करने के लिए हम इस तरह लिखते हैं: number।

आइए इसे व्यवहार में आज़माएं। कंपोनेंट क्लास में निम्नलिखित संख्या निर्धारित करें:

app/app.component.tsexport class AppComponent {
  num: number = 18;
}

उदाहरण

आइए हमारी संख्या को इस तरह प्रदर्शित करें कि इसके पूर्णांक भाग में दो अंक हों। साथ ही, दशमलव भाग में अंकों की न्यूनतम संख्या 1 होगी:

app/app.component.html<div>{{ num | number:'2.1' }}</div>

कोड निष्पादित होने का परिणाम:

html<div>18.0</div>

उदाहरण

अब आइए निर्धारित करें कि हमारी संख्या के दशमलव भाग में दो अंक प्रदर्शित हों:

app/app.component.html<div>{{ num | number:'2.2' }}</div>

कोड निष्पादित होने का परिणाम:

html<div>18.00</div>

उदाहरण

आइए एक नई संख्या निर्धारित करें:

app/app.component.tsexport class AppComponent {
  num: number = 18.67899;
}

और इसे HTML टेम्पलेट में इस तरह प्रदर्शित करें कि दशमलव भाग में अधिकतम दो अंक प्रदर्शित हों:

app/app.component.html<div>{{ num | number:'2.1-2' }}</div>

कोड निष्पादित होने का परिणाम:

html<div>18.68</div>

उदाहरण

अब हमारी संख्या को इस तरह फॉर्मेट करें कि इसके पूर्णांक भाग में तीन अंक हों। और दशमलव भाग में पांच अंक प्रदर्शित हों:

app/app.component.html<div>{{ num | number:'3.5-6' }}</div>

कोड निष्पादित होने का परिणाम:

html<div>018.67899</div>

उदाहरण

आइए दशमलव भाग में अंकों की न्यूनतम संख्या को प्रदर्शित करने का प्रयास करें, जो संख्या में दिए गए अंकों की संख्या से अधिक हो। हमारे मामले में, छह अंक प्रदर्शित करें:

app/app.component.html<div>{{ num | number:'3.6-8' }}</div>

कोड निष्पादित होने के परिणामस्वरूप, हम देखेंगे कि DecimalPipe पाइप ने दशमलव भाग में एक शून्य जोड़ दिया है:

html<div>018.678990</div>