Is it permissible to include $event as an argument in a function that is invoked by ngStyle?

Question

Is it permissible to include $event as an argument in a function that is invoked by ngStyle?

Here is the HTML code I'm having trouble with:

<div *ngFor="let dates of the_list">
    <p  [ngStyle]="{'background-color': changeColor($event)}" [ngClass]="{ 'text-white':(the_list.indexOf(dates))>4 }">{{dates}}</p>
</div>

The corresponding TypeScript function is:

changeColor(event: any){
    this.temp=(<HTMLInputElement>event.target).value;
    if(this.the_list.indexOf(this.temp)===5)
    {
      return 'blue'
    }
    else
    {
      return ''
    }
  }

An error message pops up saying: ERROR TypeError: Cannot read property 'target' of undefined.

I wonder, is it not allowed to pass $event as a parameter in this case?

angular typescript function

Answer 1

Answer №1

Here is an example of using let i = index:

<div *ngFor="let dates of the_list; let i = index">
  <p [ngStyle]="{'background-color': i == 5 ? 'blue' : ''}" [ngClass]="{ 'text-white': i > 4 }">
{{dates}}</p>
</div>

Avoid incorporating functions in your HTML code as Angular will execute function() each time change detection occurs to determine if there has been any difference between the previous and current results.

Answer 2

Here is an example of using let i = index:

<div *ngFor="let dates of the_list; let i = index">
  <p [ngStyle]="{'background-color': i == 5 ? 'blue' : ''}" [ngClass]="{ 'text-white': i > 4 }">
{{dates}}</p>
</div>

Avoid incorporating functions in your HTML code as Angular will execute function() each time change detection occurs to determine if there has been any difference between the previous and current results.

Answer 3

Answer №2

To dynamically determine the styling during each iteration, you can call a method with the index parameter. The code snippet below demonstrates how this can be implemented. It is important to note that $event cannot be utilized in this scenario as it is typically associated with event triggers like click, hover, or key up.

Give this a try:

In your template file

<div *ngFor="let dates of the_list; let i = index">
    <p  [ngStyle]="{'background-color': changeColor(i)}" [ngClass]="{ 'text-white': (the_list.indexOf(dates) > 4) }">{{dates}}</p>
</div>

In your ts file

changeColor(index: number){  
    if(index === 5)
    {
      return 'blue';
    }
    else
    {
      return '';
    }
  }

Answer 4

To dynamically determine the styling during each iteration, you can call a method with the index parameter. The code snippet below demonstrates how this can be implemented. It is important to note that $event cannot be utilized in this scenario as it is typically associated with event triggers like click, hover, or key up.

Give this a try:

In your template file

<div *ngFor="let dates of the_list; let i = index">
    <p  [ngStyle]="{'background-color': changeColor(i)}" [ngClass]="{ 'text-white': (the_list.indexOf(dates) > 4) }">{{dates}}</p>
</div>

In your ts file

changeColor(index: number){  
    if(index === 5)
    {
      return 'blue';
    }
    else
    {
      return '';
    }
  }

Is it permissible to include $event as an argument in a function that is invoked by ngStyle?

Answer №1

Answer №2

Similar questions

Achieving successful integration of SignalR with Angular 5 within the environment of dot net framework version 4.6.1

Can you outline the process for troubleshooting the issue of not being able to set breakpoints on a Chrome launch configuration when working with Angular

The cdkDropList in Angular's drag and drop feature does not support the application of element styles

Tips for configuring VSCode to display strictNullChecks Typescript errors

Why is interpolation not allowed in Angular 2 for binding to my child component?

Retrieve the raw text from the input field instead of the date object

Angular: Dynamically add or delete an interceptor based on conditions

Vue cannot detect the component that is provided by my plugin

Explore an asynchronous PipeTransform experiment

Tips for setting up a proxy with an enum

Issues with accessing view variables within a directive query are persisting

The flow union type operates smoothly without any errors occurring

Angular fails to eliminate the colon (:) preceding the route

Ways to incorporate conditional checks prior to running class methods

Remove the hyphen from a user input field using Angular 2 and reactive forms

Tips for setting up Typescript to deduce discriminated unions when `is` and `never` are included in the code

Need to import Vue component TWICE

Expanding the number of buttons for <ul> in creating a responsive navigation system using Angular

Can you use `keyof` to create a template literal type?

What is the best way to filter an array based on the value entered in an input field?