Sending the $event variable from [ngStyle] to a method in TypeScript file

Struggling to transfer the $event variable from the HTML file to the .ts file.

The part with (click)="pruebaSwal($event)" is functioning correctly, but the issue arises when trying to pass it inside [style.background-color], resulting in an error message: "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
           }

Answer №1

The component receives $event only through event binding, such as click or focus, providing information about the event itself. Since you are using property binding in this scenario, there is no event involved, leading to the error: "ERROR ReferenceError: $event is not defined".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing a particular field in a JSON object as the data origin while employing ng2-completer

As a newcomer to Angular and ng2 completer, I am working with an array of objects structured like this: var concepts = [ { id:, code:, concept:, display: } ............ ] The goal is to have the data source for auto suggest feature as the di ...

Angular Material 2 Stepper Controls for Angular applications

I successfully implemented a linear stepper using the Angular Material 2 Stepper component. My project consists of forms in various components (component-a, component-b, component-c). I need the linear stepper in my main container component (container-com ...

Creating an HTML template in an Angular service and utilizing it as an HTMLTemplateRef

I'm currently working on a major project that has a specific requirement. As part of this project, I am utilizing a library which allows me to open dialog (modal) popups. In order to do so, I need to configure some options for the modal opening proce ...

Updating an existing Observable asynchronously using the pipe method

My scenario involves working with an Observable that is subscribed to via the async-pipe. <ng-container *ngIf="invitations$ | async as invitations"> I initialize this Observable in the ngOnInit function: this.invitations$ = this.getInvitat ...

Achieving shadow effects within a see-through window using Electron

As a beginner in Electron development, I recently encountered an issue when creating a transparent window. The shadow effect that appeared was not what I expected: ...

Jhipster Jenkins is throwing an error related to different modules, causing Webpack to have trouble distinguishing the context and failing to load

I need assistance with setting up a Jhipster project in Jenkins. Everything works fine locally, but when running 'yarn nun webpack:build' in Jenkins, I encounter the following error: ERROR in NaNbut they point to different modules "(<jenk ...

Angular and the wonder of GitHub

After downloading an Angular project from GitHub and attempting to run it in Visual Studio Code, I encountered issues with it only running in the browser. The login, signup, and other functions are not functioning correctly. Is there a way to modify an e ...

Managing the back button in Nativescript-Angular to toggle visibility

Struggling to toggle the visibility of an element in response to the back button event. <ActionItem icon="~/images/menu_3_dots.png" ios.position="right" android.position="right" *ngIf="isActionItemVisible"></ActionItem> construc ...

Is it possible to design a Typescript type that only contains one property from a defined set and is indexable by that set as well?

I have the different types listed below: type OrBranch = { or: Branch[] } type AndBranch = { and: Branch[] } I need a type called Branch that can either be an OrBranch or an AndBranch. I initially attempted this: type Branch = AndBrand | OrBranch ...

Having trouble with Angular routing when attempting to directly access a specific URL path?

Seeking help with my routing setup in Angular. Using v12 of Angular. Encountering a 404 Not Found error when trying to access the direct URL for "register" at somesite.com/register. Uncertain if this is a server or Angular issue. Here is my router module ...

Can you identify a specific portion within an array?

Apologies for the poorly titled post; summarizing my query into one sentence was challenging. I'm including the current code I have, as I believe it should be easy to understand. // Constants that define columns const columns = ["a", " ...

Experience the power of Stimulsoft reporting integrated with Angular and Asp.net Core-framework!

I've created a Webservice in Asp.net Core to generate reports which is then called in an Angular app to display the reports. However, when I try to show the report in Angular, it only shows a blank page. What could be causing this issue and how can I ...

`Creating a union of prop types in TypeScript and React`

I'm facing an issue with a component prop that I need to restrict to specific strings using a union type, as shown below: type HeadingProps = { level?: 'h1' | 'h2' | 'h3' | 'h4'| 'h5' | 'h6&a ...

Can the validity of a Control's property be adjusted?

Is it possible to establish the valid property of a control titled "titleCtrl"? I attempted .dart titleCtrl.valid = false; Unfortunately, this results in an error. However, retrieving the valid state poses no issue. ...

Angular MistakeORAngular Error

Every time I refresh the page, I encounter an error in my code while attempting to display a newly edited and saved text. I've initialized the variable, made the access variable public, but it still doesn't work. Can someone point out what I migh ...

Concealing .js and .map files within VS Code during

Is there a way to configure Visual Studio Code settings to hide specific .js and .map files? https://i.sstatic.net/mWWNg.png ...

Setting the values of a string array to the properties of an object dynamically in TypeScript

Imagine a situation where a component called searchBox is given two inputs: @Input() titles: string[] and @Input() model: Object. The number of values in the titles array matches the number of properties in the model object. The searchBox component generat ...

What is the best way to connect to a library using a script within a Typescript React application?

I'm a newbie to React and haven't worked on web development in years, so I'm facing a basic issue: Currently, I'm working on implementing a Stripe-based payment flow in a React web app (written in Typescript) and I've hit a roadbl ...

Build upon a class found in an AngularJS 2 library

Whenever I attempt to inherit from a class that is part of a library built on https://github.com/jhades/angular2-library-example For example, the class in the library: export class Stuff { foo: string = "BAR"; } And the class in my application: exp ...

Difficulty modifying the background color of a bar graph in Chart.js within an Ionic 2 Angular2 environment

I've been working with Chart.js in an Ionic2 and Angular2 hybrid app to create a stacked bar graph. However, I'm facing an issue where I can't seem to change the background color or fill color of the bars in the graph. Despite trying out all ...