CODEWITHSUNDEEP
angulartypescript
Sergio Villalobos
Sergio Villalobos

Reputation: 73

Passing $event value from [ngStyle] to .TS method

Trying to pass the $event variable from the html to the .ts.

Inside the (click)="pruebaSwal($event)" is working fine, but inside the [style.background-color] is where problem occurs, throwing a: "ERROR ReferenceError: $event is not defined"

html component

<tr>
  <input
    type="button"
    value="{{indice}}" 
    id="cp{{contador()}}"
    (click)="pruebaSwal($event)"  <==this one works fine
    [style.background-color]="colorStatus(item.id, $event)">  <== i catch the id, but NOT the $event
</tr>

ts component

colorStatus(_id, _event){

        let cambio =  this.allActivity[_id] //this works fine
        let ivi = _event.path[0].id         //not finding the _event var
           
         switch (_id) {
           ...some case functions
           }

Upvotes: 0

Views: 905

Answers (2)

D Pro
D Pro

Reputation: 1776

not sure if I understood correctly, but maybe it will give some ideas:

<input *ngIf="'cp' + contador() as id"
    type="button"
    value="{{indice}}" 
    [id]="id"
    (click)="pruebaSwal($event)"  <==this one works fine
    [style.background-color]="colorStatus(item.id, id)">

P.S. calling functions in template is considered a bad practice https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496

Upvotes: 0

Sara
Sara

Reputation: 71

$event is passed to component only in event binding (example: click, focus etc.) and includes information about the event. In your case you are not using event binding but property binding, there is no event, that's why you get the error: "ERROR ReferenceError: $event is not defined"

Upvotes: 5

Related Questions