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";
                    }
    }

null canvas · Accepted Answer · 2016-06-26 09:33:03Z

2

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>`})

edited Jun 26, 2016 at 9:33

answered Jun 25, 2016 at 12:08

null canvas

10.7k2 gold badges17 silver badges18 bronze badges

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

4 Comments

Sarvesh Yadav Over a year ago

Yes i tried but still facing same issue :( even also tried [ngStyle]="{'display': displayAttribute}"

null canvas Over a year ago

sorry, it should be [attr.style.display]

Sarvesh Yadav Over a year ago

same issue [object HTMLDivElement]

Zen Over a year ago

[style.display]="displayAttribute" is correct. Check the app.component.ts, the title has been hidden. @SarveshYadav

Collectives™ on Stack Overflow

How to bind value to attribute dynamically in typescript Angular2?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related