Run method on load - Angular 4

Question

I have a user form that takes a input value that is being converted to currency using Angular's currency pipe. Please view the snippet of code below.

app.component.html

<input type="text" [(ngModel)]="value" (blur)="transformAmount($event)" (focus)="transformAmount($event)" required pattern="[0-9]+" class="form-control" id="saleAmount" formControlName="SaleAmount">

app.component.ts

export class QuoteInformationComponent implements OnInit {

formattedAmount: string = '0';
value: any;

transformAmount(element) {
    try {
        if (typeof (element.target.value) !== 'number')
            this.formattedAmount = this.currencyPipe.transform(this.value, 'USD', true, '1.2-2');
        element.target.value = this.formattedAmount;
    } catch (e) {
        console.log(e);
    }
}

}

When user is inputting the values, it does the expected behavior of changing the numeric value into a currency amount. But when I reload the project, instead of the currency value showing. It is showing as an integer.

Is there a way to run this method onload or when the input form value is populated?

I am still learning back end development and quite new to angular 4.

Any help is greatly appreciated thank you!

I would imagine neither (blur) nor (focus) fires on load. Have you considered actually using the pipe as a pipe? — BradleyDotNET, Jun 04 '18 at 21:30
@Avinash - Can you elaborate a little? Is it as simple as calling the method inside ngOnInit? — Dong Hoon Kim, Jun 04 '18 at 21:40
@BradleyDotNET - I need the blue focus as well as something that would trigger the method on load. Blur and focus is used to change the users input value into a currency. This is needed when the user is filling out a brand new form. — Dong Hoon Kim, Jun 04 '18 at 21:41
You can call it inside ngOnInit () but I see u have value: any. When you load the component first time it will be undefined and will throw an error. — Avinash, Jun 04 '18 at 21:48
Y can't you try using ur pipe directly on the input field [pipes within ngModel on input elements in Angular](https://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular) — Avinash, Jun 04 '18 at 21:49

prettyfly · Answer 1 · 2019-01-02T10:28:24.410

Run the function on init of the component by calling it inside the ngOnInit lifecycle hook. You'll need to have a reference to the element to call it from outside of the template, so make it a viewchild by adding a viewchild ref on the template,

e.g

<input #myNumberInput type="text" [(ngModel)]="value" (blur)="transformAmount($event)" (focus)="transformAmount($event)" required pattern="[0-9]+" class="form-control" id="saleAmount" formControlName="SaleAmount">

@ViewChild('myNumberInput') myNumberInput: ElementRef;

Where #myNumberInput is the reference added. Then, you can run on component load.

ngOnInit() {
    this.transformAmount(this.myNumberInput.nativeElement.value);
}

Run method on load - Angular 4

1 Answers1