Disable Create Button for expired Dates in Angular-CodePudding

How can enable/disable a button in Angular if the endDate is less than currentDate. For example: enddate: 01.02.2021 currentdate: 01.02.2022 => Button to create an new entry will be disabled.

CodePudding user response：

We can compare dates with > operator. We use [disable] to evaluate prop isDisabled to disable or enable the button.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  isDisabled: boolean = false;
  endDate: Date = new Date('Febuary 02, 2021 23:15:30');
  today: Date = new Date;
  constructor() {
    if (this.endDate < this.today) {
      this.isDisabled = true;
    }
   }
}

<button mat-stroked-button 
        color="primary" 
        >Button
</button>
<button mat-stroked-button 
        color="primary"
        [disabled]="isDisabled"
        >Button disabled
</button>

endDate: {{endDate}}
today: {{today}}

Here is a working example: https://stackblitz.com/edit/mat-button-molyas?file=src/app/app.component.ts

CodePudding user response：

my HTML

 <a  [ngClass]="{ 'disabled': !contract.availableLicenseCount && contract.contractEndDate < currentDate}" (click)="contract.availableLicenseCount && createNewLicense(contract)" >
  <i [c8yIcon]="'plus-circle'"></i> {{ 'New Licence' }}
  
</a>

my component

export class AllLicensesComponent implements OnInit {
public contracts: Contract[] = [];
endDate = new Date(contracts.contractEndDate);
currentDate = new Date('2023-02-01');

my Model

export class Contract {
contractEndDate: Date;
constructor(contract?: Partial<Contract>) {
this.contractEndDate = null;
}

}