कोणीय 2 - ट्रांसफॉर्मिंग डेटा

कोणीय 2 में बहुत सारे फिल्टर और पाइप हैं जिनका उपयोग डेटा को बदलने के लिए किया जा सकता है।

लोअरकेस

इसका उपयोग इनपुट को सभी लोअरकेस में बदलने के लिए किया जाता है।

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

Propertyvalue | lowercase

पैरामीटर

कोई नहीं

परिणाम

संपत्ति के मूल्य को लोअरकेस में बदल दिया जाएगा।

उदाहरण

पहले सुनिश्चित करें कि निम्न कोड app.component.ts फ़ाइल में मौजूद है।

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

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

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

अगला, सुनिश्चित करें कि निम्नलिखित कोड ऐप / app.component.html फ़ाइल में मौजूद है।

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | lowercase}}<br> 
   The second Topic is {{appList[1] | lowercase}}<br> 
   The third Topic is {{appList[2]| lowercase}}<br> 
</div>

उत्पादन

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

अपरकेस

इसका उपयोग इनपुट को सभी अपरकेस में परिवर्तित करने के लिए किया जाता है।

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

Propertyvalue | uppercase

पैरामीटर

कोई नहीं।

परिणाम

संपत्ति का मूल्य अपरकेस में परिवर्तित हो जाएगा।

उदाहरण

पहले सुनिश्चित करें कि निम्न कोड app.component.ts फ़ाइल में मौजूद है।

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

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

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

अगला, सुनिश्चित करें कि निम्नलिखित कोड ऐप / app.component.html फ़ाइल में मौजूद है।

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | uppercase }}<br> 
   The second Topic is {{appList[1] | uppercase }}<br> 
   The third Topic is {{appList[2]| uppercase }}<br> 
</div>

उत्पादन

टुकड़ा

यह इनपुट स्ट्रिंग से डेटा का एक टुकड़ा टुकड़ा करने के लिए उपयोग किया जाता है।

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

Propertyvalue | slice:start:end

पैरामीटर

start - यह शुरुआती स्थिति है जहां से टुकड़ा शुरू होना चाहिए।
end - यह शुरुआती स्थिति है जहां से टुकड़ा समाप्त होना चाहिए।

परिणाम

प्रॉपर्टी वैल्यू को स्टार्ट और एंड पोजिशन के आधार पर कटा हुआ होगा।

उदाहरण

पहले सुनिश्चित करें कि निम्न कोड app.component.ts फ़ाइल में मौजूद है

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

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

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

अगला, सुनिश्चित करें कि निम्नलिखित कोड ऐप / app.component.html फ़ाइल में मौजूद है।

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | slice:1:2}}<br> 
   The second Topic is {{appList[1] | slice:1:3}}<br> 
   The third Topic is {{appList[2]| slice:2:3}}<br> 
</div>

उत्पादन

दिनांक

इसका उपयोग इनपुट स्ट्रिंग को दिनांक स्वरूप में परिवर्तित करने के लिए किया जाता है।

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

Propertyvalue | date:”dateformat”

पैरामीटर

dateformat - यह वह तारीख प्रारूप है जिसमें इनपुट स्ट्रिंग को परिवर्तित किया जाना चाहिए।

परिणाम

प्रॉपर्टी की वैल्यू डेट फॉर्मेट में बदल जाएगी।

उदाहरण

पहले सुनिश्चित करें कि निम्न कोड app.component.ts फ़ाइल में मौजूद है।

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

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

export class AppComponent { 
   newdate = new Date(2016, 3, 15); 
}

अगला, सुनिश्चित करें कि निम्नलिखित कोड ऐप / app.component.html फ़ाइल में मौजूद है।

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>  
</div>

उत्पादन

मुद्रा

इसका उपयोग इनपुट स्ट्रिंग को मुद्रा प्रारूप में बदलने के लिए किया जाता है।

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

Propertyvalue | currency

पैरामीटर

कोई नहीं।

परिणाम

संपत्ति मूल्य मुद्रा प्रारूप में परिवर्तित हो जाएगा।

उदाहरण

पहले सुनिश्चित करें कि निम्न कोड app.component.ts फ़ाइल में मौजूद है।

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

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

export class AppComponent { 
   newValue: number = 123; 
}

अगला, सुनिश्चित करें कि निम्नलिखित कोड ऐप / app.component.html फ़ाइल में मौजूद है।

<div> 
   The currency of this Tutorial is {{newValue | currency}}<br>      
</div>

उत्पादन

प्रतिशत

इसका उपयोग इनपुट स्ट्रिंग को प्रतिशत प्रारूप में बदलने के लिए किया जाता है।

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

Propertyvalue | percent

पैरामीटर

कोई नहीं

परिणाम

संपत्ति मूल्य प्रतिशत प्रारूप में परिवर्तित हो जाएगा।

उदाहरण

पहले सुनिश्चित करें कि निम्न कोड app.component.ts फ़ाइल में मौजूद है।

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

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

export class AppComponent { 
   newValue: number = 30; 
}

अगला, सुनिश्चित करें कि निम्नलिखित कोड ऐप / app.component.html फ़ाइल में मौजूद है।

<div>
   The percentage is {{newValue | percent}}<br> 
</div>

उत्पादन

प्रतिशत पाइप की एक और विविधता निम्नानुसार है।

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

Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’

पैरामीटर

minIntegerDigits - यह पूर्णांक अंकों की न्यूनतम संख्या है।
minFractionDigits - यह अंश अंकों की न्यूनतम संख्या है।
maxFractionDigits - यह अंश अंकों की अधिकतम संख्या है।

परिणाम

संपत्ति मूल्य प्रतिशत प्रारूप में परिवर्तित हो जाएगा

उदाहरण

पहले सुनिश्चित करें कि निम्न कोड app.component.ts फ़ाइल में मौजूद है।

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

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

export class AppComponent { 
   newValue: number = 0.3; 
}

अगला, सुनिश्चित करें कि निम्नलिखित कोड ऐप / app.component.html फ़ाइल में मौजूद है।

<div> 
   The percentage is {{newValue | percent:'2.2-5'}}<br>  
</div>

उत्पादन