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>