How to bind value to attribute dynamically in typescript Angular2?

Question

I am trying to get condition value which is coming form exported class in typescript but unable to get for dispay attribute value and on browser it showing me [object HTMLDivElement]

@Component({
 template:`<div #noRecordFoundMsg class="ui-widget-header ui-helper-clearfix" 
 style="padding:4px 10px;border-bottom: 0 none;display:{{ displayAttribute }}"> <-----here
 <span>{{ noRecordFoundMsg }}</span>
 </div>`})
 private displayAttribute: string;
 exported class Demo{
 //some code 
 if (Counts === 0) {
 this.noRecordFoundMsg = "No Record Found";
 this.displayAttribute = "none";
 } else {
 this.displayAttribute = "block";
 }
 }

Answer 1

Have you tried, [style.display]="displayAttribute":

 @Component({
 template:`<div #noRecordFoundMsg class="ui-widget-header ui-helper-clearfix" 
 [style.display]="displayAttribute"
 style="padding:4px 10px;border-bottom: 0 none;"> <-----here
 <span>{{ noRecordFoundMsg }}</span>
 </div>`})

• Sarvesh Yadav: Yes i tried but still facing same issue :( even also tried [ngStyle]="{'display': displayAttribute}"
• null canvas: sorry, it should be [attr.style.display]
• Sarvesh Yadav: same issue [object HTMLDivElement]
• Zen: [style.display]="displayAttribute" is correct. Check the app.component.ts, the title has been hidden. @SarveshYadav