Problem with function on the Angular component

Question

I am trying to get a way to call a function inside my component only after loading, as long as the component is loaded, several times my function is called and I do not want this, here is my code:

<div class="form-group" [ngClass]="aplicaCssErro('name')">
    <label>
        NAME
    </label>
    <input class="form-control" type="text" formControlName="name" autocomplete="off">
</div>

My function:

verificaValidTouched(campo){
   return !this.formulario_cadastro.get(campo).valid  && this.formulario_cadastro.get(campo).touched;
}

aplicaCssErro(campo){
    console.log(this.verificaValidTouched(campo));

   return{
     'has-error': this.verificaValidTouched(campo),
     'has-feedback': this.verificaValidTouched(campo)
   }
}

The functions only serve to add a validation class in my data-driven form. What I want, is to just call those functions that are in my HTML after I've loaded the page or something better than this, because when loading the page the functions are called several times. Can anyone tell me a solution?

then you have to call function ones and store class in a variable.angular change detection cycle call these function over and over — Madhawa Priyashantha
– Madhawa Priyashantha, Commented May 3, 2019 at 17:33
this can be done using Subjects take a look at subjects and observables — Nickolaus
– Nickolaus, Commented May 3, 2019 at 17:34
it happens since this is how angular check bindings. Best practice is seting a variable upon your change and bind that variable. — Reza
– Reza, Commented May 3, 2019 at 17:39

Bill Gardner · Accepted Answer · 2019-05-03 17:39:46Z

1

You should utilize an Angular lifecycle hook, probably ngAfterViewInit to call function after the page has finished initializing.

https://angular.io/api/core/AfterViewInit

Lifecycle hooks are a good way of utilizing Angular's API:

https://angular.io/guide/lifecycle-hooks

answered May 3, 2019 at 17:39

Bill Gardner

1964 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Problem with function on the Angular component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related