To split and display the string value in angular

Question

I have api called customer which i am displaying in the dropdown, By choosing particular customer i am displaying that selected customer details(Properties of the selected customer object)(i,e phone,time) in the input fields like this:

The property time is an string, I want to split and display this string like this:

I am trying to splice it by splice method, But i am unable to achieve it.

DEMO

Abdul Basit · Accepted Answer · 2019-02-18 06:08:40Z

6

In your list.component.html Try to use split like this.

<mat-form-field class="timings-days">
   <input matInput  placeholder="Hours" matInput [value]="customer?.time.split(':')[0]" >
</mat-form-field>
<mat-form-field  class="timings-hrs">
   <input matInput  placeholder="Minutes" matInput [value]="customer?.time.split(':')[1]" >
</mat-form-field>
<mat-form-field  class="timings-min">
   <input matInput  placeholder="Seconds" matInput [value]="customer?.time.split(':')[2]" >
</mat-form-field>

answered Feb 18, 2019 at 6:08

Abdul Basit

1,3801 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hardik Gondalia · Accepted Answer · 2019-02-18 06:19:08Z

I think better to use custom pipe rather than keeping your login in html. it may cause the issue. Broader way is to create custom pipe and keep your logic into separate file. Here how you can create your custom pipe.

Pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'timepart'
})
export class TimePartPipe implements PipeTransform {

  transform(value: any, part: string, symbol: string): string {
    if (symbol == "" || symbol == null) {
      symbol = ":";
    }
    var i = value.split(symbol);
    if (part == "hh")
      return i[0];
    if (part == "mm")
      return i[1];
    if (part == "ss")
      return i[2];
  }

}

HTML: // pass symbol and part which you want as argument

   <input matInput  placeholder="Hours" matInput [value]="customer?.timeArray[0]" >
</mat-form-field> -->
<mat-form-field  class="timings-hrs">
   <input matInput  placeholder="Minutes" matInput [value]="customer?.time | timepart : 'mm'" >
</mat-form-field>
<mat-form-field  class="timings-min">
   <input matInput  placeholder="Seconds" matInput [value]="customer?.time | timepart : 'ss'" >

This is more proper way to manipulate your HTML output.

DEMO : https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-pvnwaf?file=src%2Fapp%2Flist%2Flist.component.html

Collectives™ on Stack Overflow

To split and display the string value in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related