Dynamic binding issue with angular and primeng

Question

The following code works fine.

<p-column *ngFor="let col of detailsModel.columnDefs"
              [field]="col.field"
              [header]="col.headerName"
              [style]="{'width':'150px','text-align':'right'}"
              sortable="true">
</p-column>

Now I want to make the style part dynamic. So, if I re-wrote my code like this

<p-column *ngFor="let col of detailsModel.columnDefs"
                  [field]="col.field"
                  [header]="col.headerName"
                  [style]="col.textAlign == 'left' ? alignLeft : alignRight"
                  sortable="true">
</p-column>

TS file:

export class MyComponent implements OnInit {

  alignLeft = "'width':'150px','text-align':'left'";
  alignRight = "'width':'150px','text-align':'right'";

 constructor() {
  }


  ngOnInit() {
 }

}

This code give me error like below. Why?

ERROR Error: Cannot find a differ supporting object ''width':'150px','text-align':'right''
    at KeyValueDiffers.webpackJsonp.../../../core/@angular/core.es5.js.KeyValueDiffers.find (core.es5.js:8051)
    at NgStyle.set [as ngStyle] (common.es5.js:2441)
    at updateProp (core.es5.js:11114)
    at checkAndUpdateDirectiveInline (core.es5.js:10806)
    at checkAndUpdateNodeInline (core.es5.js:12349)
    at checkAndUpdateNode (core.es5.js:12288)
    at debugCheckAndUpdateNode (core.es5.js:13149)
    at debugCheckDirectivesFn (core.es5.js:13090)
    at Object.View_ColumnHeaders_1._co [as updateDirectives] (ColumnHeaders.html:3)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075)

Another question is why the style needs to be written with quotes on each style type like this?

'width':'150px','text-align':'right'

And why not like this?

"width:150px; text-align:right"

the answer below is 100% correct for using the style/ngstyle directive. but I would recommend using ngClass and assigning those stlyes to an align-left and align-right class. — bryan60
– bryan60, Commented Nov 21, 2017 at 4:18
@bryan60 I tried with ngClass. Please see the code here plnkr.co/edit/DXAfuISr7zEGg8m4EYY4 . This plunker won't run for some reason, but you can get to know what I am trying to achieve. — Sujoy
– Sujoy, Commented Nov 21, 2017 at 19:22

mohit uprim · Accepted Answer · 2017-11-21 04:14:11Z

1

Using "Style binding", we can set a single style dynamically,so we have to code it multiple times.

<p-column *ngFor="let col of detailsModel.columnDefs"
                  [field]="col.field"
                  [header]="col.headerName"
                  [style.width]="col.textAlign == 'left' ? alignLeftWidth : alignRightWidth"
                  [style.text-align]="col.textAlign == 'left' ? alignLeftAlign : alignRightAlign"
                  sortable="true">
</p-column>

To set many inline styles at the same time, we can use "NgStyle " directive.

<p-column *ngFor="let col of detailsModel.columnDefs"
                  [field]="col.field"
                  [header]="col.headerName"
                  [ngStyle]="col.textAlign == 'left' ? alignLeft : alignRight"
                  sortable="true">
</p-column>

ngSyles takes a key:value control object. Each key of the object is a style name; its value is whatever is appropriate for that style. so initialise variable in component.

Ts File:

export class MyComponent implements OnInit {

  alignLeft:{};
  alignRight:{};

 constructor() {
     this.alignLeft = {'width':'150px','text-align':'left'};
     this.alignRight = {'width':'150px','text-align':'right'}
  }


  ngOnInit() {
 }

}

Demo:https://plnkr.co/edit/ZfrUX4u70OHZZlw9uBHg

For second question,style takes key-value pair as input, so we can not assign string.I hope this makes clear.

answered Nov 21, 2017 at 4:14

mohit uprim

5,3522 gold badges26 silver badges28 bronze badges

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

4 Comments

Sujoy Over a year ago

Thanks a lot for your response. I don't understand what's the issue with primeng, this same code doesn't work. I think the issue is with primeng. I have updated the question.

mohit uprim Over a year ago

could you create template at plunker?

Sujoy Over a year ago

I shall create a template with plunker. Thanks again!

Sujoy Over a year ago

This plunker is not working. The setup is exactly like yours but still it's not working. But you will get an idea what I am trying to achieve. plnkr.co/edit/DXAfuISr7zEGg8m4EYY4?p=preview

Sujoy · Accepted Answer · 2017-11-21 19:50:23Z

1

Finally this link helped me to find out the exact attribute to solve this. https://github.com/primefaces/primeng/issues/1405

Code:

<p-column *ngFor="let col of detailsModel.columnDefs"
              [field]="col.field"
              [header]="col.headerName"
              [style]="{'width': '150px'}"
              styleClass="{{col.textAlign == 'left' ? 'text-left' : 'text-right'}}"
              sortable="true">
    </p-column>

answered Nov 21, 2017 at 19:50

Sujoy

84211 silver badges22 bronze badges

Collectives™ on Stack Overflow

Dynamic binding issue with angular and primeng

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related