Как получить международный формат валюты для текстового поля в Angular (TypeScript) по умолчанию при загрузке страницы

Question

Я получаю формат валюты для текстового поля, если я что-то изменяю на своей странице, а также щелкаю где-то на странице, но мне нужно получить этот формат по умолчанию при загрузке страницы (я пытался написать в ngOnInit, что он не работает).

Я попробовал все методы, но ничего не работает, и я попытался в js тоже не работает. Я очень плохо знаком с Angular и TypeScript.

Это HTML code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <div class="center">
<div class="container">
    <div class="col-sm-4 col-sm-offset-3 well offset4 form-v-middle">
<div class="form-group">
    <label for="text">What's Your Client's totel Budget?</label> <br>
    <input type="text" class="form-control "class="border-bottom" id="field1" 
    [(ngModel)]="budget">
  </div>
    <div class="form-group">
<label for="text">How would you like to allocate your Budget?</label> <br>
<div class="row">
    <div class="col">
      <label for="text" >Linear </label>
    </div>
      <div class="col">

        <input type="text" class="form-control" class="border-bottom"value="Linearpercentage" 
        [(ngModel)]="Linearpercentage" (blur)="onBlurMethod($event)" />%
      </div>
      <div class="col">
        <input type="text" class="form-control" class="border-bottom" [(ngModel)]="Linearbudget" 
        (change)="somethingChanged($event)"(blur)="onBlurMethod($event)" >
      </div>
    </div>

  <div class="row">
    <div class="col">
      <label for="number" >Digital</label>
    </div>
      <div class="col">
        <input type="text" class="form-control" class="border-bottom" value="Digitalpercentage" 
        [(ngModel)]="Digitalpercentage" (blur)="onBlurMethod($event)" />%
      </div>
      <div class="col">
        <input type="text" class="form-control" class="border-bottom" [(ngModel)]="Digitalbudget" 
        (change)="somethingChanged($event)" (blur)="onBlurMethod($event)">
      </div>
    </div>
    <div class="row ">
        <div class="col">
          <label for="number" >H/V</label>
        </div>
          <div class="col">
            <input type="text" class="form-control" class="border-bottom" value="subtractedValue" 
            [(ngModel)]="subtractedValue" (blur)="onBlurMethod($event)"  [disabled]="true"/>%
          </div>
          <div class="col">
            <input type="text" class="form-control" class="border-bottom" [(ngModel)]="percentageSub" [disabled]="true"
            (change)="somethingChanged($event)" (blur)="onBlurMethod($event)">
          </div>
        </div>
  </div>
  </div>
  </div>
  </div>

Это мой код TypeScript

import { Component, OnInit } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  budget:any;
  Linearbudget:any;
  Digitalbudget:any;
  subtractedValue:any;
  percentageSub:any;
  Linearpercentage:any;
  Digitalpercentage:any;
  constructor(private currencypipe:CurrencyPipe){
  }
  onBlurMethod(element)
  {
    this.Linearpercentage=Math.round(this.Linearpercentage);
    this.Digitalpercentage=Math.round(this.Digitalpercentage);
    this.Linearbudget=Math.round(this.Linearbudget);
    this.Digitalbudget=Math.round(this.Digitalbudget);
    this.percentageSub=Math.round(this.percentageSub);
    this.subtractedValue=Math.round(this.subtractedValue);
    var sum=this.Linearpercentage+this.Digitalpercentage;
    this.Linearbudget=((this.Linearpercentage/100)*this.budget);
    this.Digitalbudget=((this.Digitalpercentage/100)*this.budget);
    if(sum==100)
    {
      this.subtractedValue=0;
    }
    else{
      this.subtractedValue=100-(this.Digitalpercentage+this.Linearpercentage);
      this.percentageSub=this.budget-(this.Linearbudget+this.Digitalbudget);
      this.Linearpercentage=Math.round(this.Linearpercentage);
      this.Digitalpercentage=Math.round(this.Digitalpercentage);
      this.percentageSub=Math.round(this.percentageSub);
      this.subtractedValue=Math.round(this.subtractedValue);
      if(this.percentageSub<0 || this.subtractedValue<0) 
      {
        alert('please enter the valid input');
        this.percentageSub=0;
        this.subtractedValue=0;
      }
    }
    this.Linearbudget=this.currencypipe.transform(this.Linearbudget,'$');
    element.target.value=this.Linearbudget;
    this.Digitalbudget=this.currencypipe.transform(this.Digitalbudget,'$');
    element.target.value=this.Digitalbudget;
    this.budget=this.currencypipe.transform(this.budget,'$');
    element.target.value=this.budget;
    this.subtractedValue=this.currencypipe.transform(this.subtractedValue,'$');
    element.target.value=this.subtractedValue
  }
  somethingChanged(element)
  {
    this.Linearpercentage=Math.round(this.Linearpercentage);
    this.Digitalpercentage=Math.round(this.Digitalpercentage);
    this.Linearbudget=Math.round(this.Linearbudget);
    this.Digitalbudget=Math.round(this.Digitalbudget);
    this.percentageSub=Math.round(this.percentageSub);
    this.subtractedValue=Math.round(this.subtractedValue);
    this.Linearpercentage=(this.Linearbudget/this.budget)*100;
    this.Digitalpercentage=(this.Digitalbudget/this.budget)*100;
    var sum1=this.Linearbudget+this.Digitalbudget;
    if(sum1==this.budget)
    {
      this.percentageSub=0;
    }
    else{
      this.subtractedValue=100-(this.Digitalpercentage+this.Linearpercentage);
      this.percentageSub=(this.subtractedValue/100)*this.budget;
      this.Linearpercentage=Math.round(this.Linearpercentage);
    this.Digitalpercentage=Math.round(this.Digitalpercentage);
      this.percentageSub=Math.round(this.percentageSub);
    this.subtractedValue=Math.round(this.subtractedValue);
      if(this.percentageSub<0 || this.subtractedValue<0) 
      {
        alert('please enter the valid input');
        this.percentageSub=0;
        this.subtractedValue=0;
      }
  this.Linearbudget=this.currencypipe.transform(this.Linearbudget,'$');
  element.target.value=this.Linearbudget;
  this.Digitalbudget=this.currencypipe.transform(this.Digitalbudget,'$');
  element.target.value=this.Digitalbudget;
  this.budget=this.currencypipe.transform(this.budget,'$');
    element.target.value=this.budget;
    this.subtractedValue=this.currencypipe.transform(this.subtractedValue,'$');
    element.target.value=this.subtractedValue
    }
  }

  ngOnInit(element){
    this.Linearpercentage = 30;
    this.Digitalpercentage = 70;
    this.budget=10000;
    this.subtractedValue=0;
    this.Linearbudget=3000;
    this.Digitalbudget=7000 ;
    this.percentageSub=0;
    this.Linearbudget=this.currencypipe.transform(this.Linearbudget,'$');
    element.target.value=this.Linearbudget;
    this.Digitalbudget=this.currencypipe.transform(this.Digitalbudget,'$');
    element.target.value=this.Digitalbudget;
    this.budget=this.currencypipe.transform(this.budget,'$');
      element.target.value=this.budget;
      this.subtractedValue=this.currencypipe.transform(this.subtractedValue,'$');
      element.target.value=this.subtractedValue
  }
}