Formatimi i numrave me përdorimin e pipe-ve në Angular

Me ndihmën e pipe-it DecimalPipe mund të formatohen numrat. Në parametrin e parë të pipe-it ne vendosim numrin minimal të shifrave në pjesën e plotë. Në parametrin e dytë përcaktojmë numrin minimal të shifrave në pjesën thyesore. Në parametrin e tretë jo të detyrueshëm vendosim numrin maksimal të shifrave në pjesën thyesore.

Edhe pse pipe-i ynë quhet DecimalPipe, për ta thirrur ne shkruajmë kështu: number.

Le të provojmë në praktikë. Në klasën e komponentit le të vendosim numrin e mëposhtëm:

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

Shembull

Le të shfaqim numrin tonë në mënyrë që në pjesën e plotë të ketë dy shifra. Në të njëjtën kohë numri minimal i shifrave në pjesën thyesore do të jetë 1:

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

Rezultati i ekzekutimit të kodit:

html<div>18.0</div>

Shembull

Tani le të përcaktojmë që në pjesën thyesore të numrit tonë të shfaqen dy shifra:

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

Rezultati i ekzekutimit të kodit:

html<div>18.00</div>

Shembull

Le të vendosim një numër të ri:

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

Dhe ta shfaqim atë në template-n HTML në mënyrë që në pjesën thyesore të shfaqen maksimalisht dy shifra:

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

Rezultati i ekzekutimit të kodit:

html<div>18.68</div>

Shembull

Tani le ta formatonim numrin tonë në mënyrë që në pjesën e plotë të ketë tre shifra. Ndërsa në pjesën thyesore të shfaqen pesë shifra:

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

Rezultati i ekzekutimit të kodit:

html<div>018.67899</div>

Shembull

Le të provojmë të shfaqim numrin minimal të shifrave në pjesën thyesore, që tejkalon numrin e caktuar në numër. Në rastin tonë le të shfaqim gjashtë shifra:

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

Si rezultat i ekzekutimit të kodit do të shohim se pipe-i DecimalPipe shtoi një zero në pjesën thyesore:

html<div>018.678990</div>