Typescript Angular ngIf reverse-CodePudding

I have this object isArchiveValid and its being set base on the count of relatedTemplates. On my view I have a message that I want to display and I have a button I want to hide. Is there a way I can use the same object isArchiveValid for both or do I need another object that is doing the reverse ?

ts class

 showDialog() {

        console.log(this.relatedTemplates.count);

        this.isArchiveValid = this.relatedTemplates.count == 0 ? true : false;
        console.log(this.isArchiveValid);
        this.$modalDialogContainer.modal("show");
    }

view

 <div class="row agent-form-row" *ngIf=isArchiveValid>
    <div class="col-sm-10">
       <div class="text-danger">
            This Agent is being used by Templates and can't be archived
       </div>
   </div>
</div>
<button type="button" class="btn btn-primary" *ngIf=isArchiveValid  (click)="onArchiveAgent()">Archive</button>

CodePudding user response：

Just use logical not ! or if/else: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT

<div class="row agent-form-row" *ngIf="isArchiveValid">
  <div class="col-sm-10">
   <div class="text-danger">
        This Agent is being used by Templates and can't be archived
   </div>
 </div>
</div>
<button type="button" class="btn btn-primary" *ngIf="!isArchiveValid"  (click)="onArchiveAgent()">Archive</button>

CodePudding user response：

First off, isArchiveValid is a variable and not a function. If you want to hide the text when the archive is valid you can use !isArchiveValid. This means that the error will only show if isArchiveValid is false.

CodePudding user response：

there is a ngIfElse input to ngIf directive. To use it, wrap the else piece in the template and pass it to the else piece of ngIf directive like this:

 <div class="row agent-form-row" *ngIf="isArchiveValid; else archiveBtnTemplate">
    <div class="col-sm-10">
       <div class="text-danger">
            This Agent is being used by Templates and can't be archived
       </div>
   </div>
</div>
<ng-template #archiveBtnTemplate>
  <button type="button" class="btn btn-primary" *ngIf=isArchiveValid  
  (click)="onArchiveAgent()">Archive</button>
</ng-template>