Can you format an async variable?

Question

I have a 12 digit account number for example => 979963840303

My goal is to format the number like this => 979-9638403-03

In the online.component.html file I have this:

<span *ngIf="(currentPortfolio$ | async)" class="title">
   <!-- Account -->
   <span class="t1">
      {{ ((currentPortfolio$ | async)?.DEPO) }}
   </span>
</span>

In the online.component.ts, I really don't have much.

export class OnlineComponent implements OnInit {

  @Select(ProfileState.currentPortfolio) currentPortfolio$!: Observable<Portfolio>;

  constructor(
    private store: Store,
    private sandbox: OnlineSandbox) { }

  ngOnInit() {
   
  }

}

portfolio.ts

export class Portfolio {
    NO_PTF: string;       /* REFERENCE */
    INT_PTF: string;      /* INTITULE  */
    GES_SERVICE: number;  /* SERVICE   */
    COIN: number;         /* COIN      */
    ACT_PTF: number;      /* ACTIF     */
    COD_SRV: number;      /* SURV      */
    COD_TIT_LIB: string;  /* COIN LABEL*/
    ACTIF_LABEL: string;  /* ACTIF LABEL */
    SERVICE_LABEL: string;/* SERVICE LABEL */ 
    DEPO: number;         /* DEPO */
    
    constructor() {
        this.NO_PTF = '';       /* REFERENCE */
        this.INT_PTF = '';      /* INTITULE  */
        this.GES_SERVICE = 0;   /* SERVICE   */
        this.COIN = 0;          /* COIN      */
        this.ACT_PTF = 0;       /* ACTIF     */
        this.COD_SRV = 0;       /* SURV      */
        this.COD_TIT_LIB = '';  /* COIN LABEL*/
        this.ACTIF_LABEL = '';  /* ACTIF_LABEL*/
        this.SERVICE_LABEL = ''; /* SERVICE_LABEL*/
        this.DEPO = 0;           /* DEPO */
    }
}

How I could retrieve the DEPO variable in the online.component.ts file?

Thank you

Answer 1

Simplest to add a function:

formatMe(depo: string) {
    if(!depo) return; 
    // code to format
}
// In Html
formatMe( {{ (currentPortfolio$ | async)?.DEPO }})

Best to create a pipe:

{{ ((currentPortfolio$ | async)?.DEPO | formatPipe) }}