Sending dynamically variable from .ts to .html in angular

Question

I have a grid and I want to sending class condition from .ts file. I achieve this with code myClassCondition = 5 < 6 ? 'bg-red' : null; like below. But, I want like below with "col" and "rowData". Is gave me compilation error because there is no "col" and "rowData" in .ts file. How can I achieve this?

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of myColumns" class="ui-resizable-column">
      <span [ngClass]="myClassCondition"> {{rowData[col.field]}}</span>
    </td>
  </tr>
</ng-template>

This working perfectly.

myClassCondition = 5 < 6 ? 'bg-red' : null;

But I want like this.

myClassCondition = col.field == 'studentAge' && rowData.[col.field] < 6 ? 'bg-red' : null;

I tried this but also not worked.

myClassCondition : string = "col.field == 'studentAge' && rowData.[col.field] < 6 ? 'bg-red' : null";

It can be null or string.empty.It's no matter. My problem is access to "col" and "rowData" — realist
– realist, Commented Oct 26, 2018 at 8:47
You could use a function with a col and rowData parameter instead of the string property myClassCondition (which btw. isn't a condition but just a string value). — Henry
– Henry, Commented Oct 26, 2018 at 8:52
Sorry. But I couldn't understand exactly your want to telling. And what btw means? @Henry — realist
– realist, Commented Oct 26, 2018 at 8:57
I found btw means :) "By The Way". And now I understand that, you want to say like that I marked answer of DilanTharaka. @Henry — realist
– realist, Commented Oct 26, 2018 at 11:30

Dilan Tharaka · Accepted Answer · 2018-10-26 10:53:50Z

2

In your ts file, Instead of having a variable to a decide class, use a function

getClassCondition(col, rowData)
{
 return col.field == 'studentAge' && rowData.[col.field] < 6 ? 'bg-red' : null;
}

and in your template, call that functions to get class,

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of myColumns" class="ui-resizable-column">
      <span [ngClass]="getClassCondition(col, rowData)"> {{rowData[col.field]}}</span>
    </td>
  </tr>
</ng-template>

Since you have a seperate component called app-grid and the logic to define class name depends on the hosting component, do something like this, In the ts file of your app-grid component, define input to get the function that can return required value,

@Input() logic: any;

and change getClassCondition function in app-grid component to something like following,

getClassCondition(col, rowData)
{
 return logic(col,rowData);
}

and in the hosting component, define the actual function to define class. In that components' ts file define it,

logic = function(col,rowData){
 return col.field == 'studentAge' && rowData.[col.field] < 6 ? 'bg-red' : null; // change this implementation in different components
}

And in that components' template file, send that function as an input

<app-grid [logic]="logic"></app-grid>

edited Oct 26, 2018 at 10:53

answered Oct 26, 2018 at 8:57

Dilan Tharaka

5675 silver badges16 bronze badges

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

5 Comments

realist Over a year ago

Thanks for your reply @DilanTharaka . But, in my real scenario, this html is a global component. And my page call it like <app-grid></app-grid>. So, my getClassCondition method will be in my parent component and can't access from inner to parent.

Dilan Tharaka Over a year ago

so, why don't you implement getClassCondition function inside app-grid components' ts file ?

realist Over a year ago

Because every page has different condition, different columnName, different types etc. (for example other page can be return col.field == 'universityName' && rowData.[col.field].length > 50 ? 'bg-purple' : null;) @DilanTharaka

Dilan Tharaka Over a year ago

I changed my answer, check that out

realist Over a year ago

Thanks a lot @DilanTharaka. It worked perfectly.. You saved my a lot of time. But, I will try this by output instead of input. Because, output can be better way for this.

Pakkiyaraj · Accepted Answer · 2018-10-26 09:06:23Z

1

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of myColumns" class="ui-resizable-column">
      <span [ngClass]="myClassCondition(rowData,col.field)"> {{rowData[col.field]}}</span>
    </td>
  </tr>
</ng-template>

myClassCondition(rowData,col_field) {
    if(check your condition){
        return 'bg-red';
     }
}

answered Oct 26, 2018 at 9:06

Pakkiyaraj

111 bronze badge

3 Comments

Mr. Pyramid Over a year ago

please explain your answer

Suryan Over a year ago

@Mr.Pyramid what Pakkiyaraj is trying to say is instead of using variable you can make a function so that you can send both the variable from your html and then in you component you can have the access of both the variables using that function and can check your condition what yours is not working as you described in your question

realist Over a year ago

Thanks for your replies . But, in my real scenario, this html is a global component. And my page call it like <app-grid></app-grid>. So, my myClassCondition() method will be in my parent component and can't access from inner to parent. @Pakkiyaraj

Collectives™ on Stack Overflow

Sending dynamically variable from .ts to .html in angular

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related