CODEWITHSUNDEEP
angulartypescript
Jefferson
Jefferson

Reputation: 67

Not able to set hidden property

I am trying to use this canUpdate flag to switch the hidden property in the html. I can see in the console that the canUpdate value is false so I am not sure what else I will need to do.

HTML

    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" [disabled]="updateVersionItemsInProgress">Close</button>
        <button type="button" class="btn btn-primary" (click)="updateItems()" [disabled]="updateVersionItemsInProgress" [hidden]="!canUpdate">Update</button>
    </div>

Component

validateUpdateItems(): void {
    console.log('validateUpdateItems')
    let versionKeys = this.items.map(i => i.VersionKey);
    this.templatesManagementService.ValidateUpdateToNewVersionRelatedTemplates(versionKeys)
        .then((response) => {
            if (response.IsValid) {
                this.canUpdate = true;
                console.log(this.canUpdate)
            } else {
                
                this.canUpdate = false;
                console.log(this.canUpdate)
                this.updateVersionItemsWarningMessage = response.Message;
                if (response.UnpublishedRelatedTemplates.length > 0) {
                    let strupdateVersionItemsWarningMessageDetails = Enumerable
                        .From(response.UnpublishedRelatedTemplates)
                        .Select(unpublishedRelatedTemplate => unpublishedRelatedTemplate.RelatedTemplateId + " (" + unpublishedRelatedTemplate.TemplateId + ")")
                        .ToArray();
                    this.updateVersionItemsWarningMessageDetails = strupdateVersionItemsWarningMessageDetails;
                }
            }
            this.updateVersionItemsInProgress = false;
        })
        .fail(e => {
            this.failedAction(e);
            $('#update-NewVersion-templates-modal').modal('hide');
            this.updateVersionItemsInProgress = false;
        });
}

Console

enter image description here

runtime displays hidden enter image description here

Upvotes: 1

Views: 81

Answers (2)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

There is no problem you says false it means show it, u need to !canUpdate if you want to hide while false

<button type="button" class="btn btn-primary" (click)="updateItems()" [disabled]="updateVersionItemsInProgress" [hidden]="!canUpdate">Update</button>

if not work your css may overwritten then put in style.css

button[hidden] { display: none; } /* add !important if still not working*/

Upvotes: 2

Akhil
Akhil

Reputation: 1453

[hidden] is a property which hides the element/button in your case if [hidden]="true"

Since you are receiving false in your console, which means [hidden] is getting set to false and that's the reason the button is not getting hidden.

Upvotes: 1

Related Questions