How to make my custom component support the property [disabled] on button?

I have a custom component agenda-footer and inside has 2 buttons.
I want to add support the property [disabled] to the buttons, but I dont know how to implement this?

I want to inheritance the property [disabled] , but no Ideia how to do this

agenda-footer.ts

import { Component, Input, Output, Renderer, EventEmitter } from '@angular/core';
import { Keyboard } from 'ionic-angular';

@Component({
  selector: 'agenda-footer',
  templateUrl: 'agenda-footer.html'
})
export class AgendaFooterComponent  {

  @Input('leftActionLabel') leftActionLabel: string;
  @Input('rightActionLabel') rightActionLabel: string;
  @Output() leftActionClick: any = new EventEmitter();
  @Output() rightActionClick: any = new EventEmitter();

  constructor( private keyboard: Keyboard, public renderer: Renderer) {
    this.leftActionLabel = 'Cancelar';
    this.rightActionLabel = 'Avançar';
  }

  leftAction() {
    this.leftActionClick.emit({value:this.leftActionLabel});
  }

  rightAction() {
    this.rightActionClick.emit({value:this.rightActionLabel});
  }
 }

agenda-footer.html

<div class="footer-box" [hidden]="keyboard.isOpen()">
  <div class="footer-actions">
      <div class="btn-left">
        <button ion-button color="danger" round tappable (click)="leftAction()">{{ leftActionLabel }}</button>
      </div>
      <div class="btn-right">
        <button ion-button color="primary-btn" round tappable (click)="rightAction()">{{ rightActionLabel }}</button>
      </div>
    </div>
</div>

Calling my custom component

<agenda-footer 
  [leftActionLabel]="'Cancelar'" 
  [rightActionLabel]="'Avançar'" 
  (leftActionClick)="inicioRegistro()"
  (rightActionClick)="estabelecimento()">
</agenda-footer>

And I want to call my component like this

<agenda-footer 
  [leftActionLabel]="'Cancelar'" 
  [leftActionDisabled]="userData.email == '' "
  [lrightActionDisabled]="userData.email == '' "
  [rightActionLabel]="'Avançar'" 
  (leftActionClick)="inicioRegistro()"
  (rightActionClick)="estabelecimento()">
</agenda-footer>

If someone knows, I will be very happy with some direction.

Theres an example here: https://angular.io/guide/forms

The sample uses the disabled propery but I can’t figure out how to apply this on my code.

I created this solution and works for me, but I`m not sure if is the best solution.
agenda-footer.ts

import { Component, Input, Output, Renderer, EventEmitter, ElementRef } from '@angular/core';
import { Keyboard } from 'ionic-angular';

@Component({
  selector: 'agenda-footer',
  templateUrl: 'agenda-footer.html'
})

export class AgendaFooterComponent  {

  @Input('leftActionLabel') leftActionLabel: string;
  @Input('rightActionLabel') rightActionLabel: string;
  @Input('rightDisabled') rightDisabled: boolean;
  @Input('leftDisabled') leftDisabled: boolean;
  @Output() leftActionClick: any = new EventEmitter();
  @Output() rightActionClick: any = new EventEmitter();

  constructor( private keyboard: Keyboard, public renderer: Renderer, private el: ElementRef) {
    this.leftActionLabel = 'Cancelar';
    this.rightActionLabel = 'Avançar';
  }

  ngOnChanges() {
    this.leftActionDisabled();
    this.rightActionDisabled();
  }
 
  leftActionDisabled() {
    if(this.leftDisabled) {
        this.renderer.setElementAttribute(this.el.nativeElement.children[0].children[0].children[0].children[0], 'disabled', 'true');
    } else {
        this.renderer.setElementAttribute(this.el.nativeElement.children[0].children[0].children[0].children[0], 'disabled', null);
    }
  }

  rightActionDisabled() {
    if(this.rightDisabled) {      
      this.renderer.setElementAttribute(this.el.nativeElement.children[0].children[0].children[1].children[0], 'disabled', 'true');
    } else {
        this.renderer.setElementAttribute(this.el.nativeElement.children[0].children[0].children[1].children[0], 'disabled', null);
    }
  }
 
  leftAction() {
    this.leftActionClick.emit({value:this.leftActionLabel});
  }
  
  rightAction() {
    this.rightActionClick.emit({value:this.rightActionLabel});
  }
}

agenda-footer.html

<div class="footer-box" [hidden]="keyboard.isOpen()">
  <div class="footer-actions">
      <div class="btn-left">
        <button ion-button color="danger" round tappable (click)="leftAction()" leftDisabled>{{ leftActionLabel }}</button>
      </div>
      <div class="btn-right">
        <button ion-button color="primary-btn" round tappable (click)="rightAction()" rightDisabled>{{ rightActionLabel }}</button>
      </div>
    </div>
</div>

Calling the component

<agenda-footer 
  [leftActionLabel]="'Back'"
  [rightActionLabel]="'Next'"
  [leftDisabled]="user.mail == ''"
  [rightDisabled]="user.mail == ''"
  (leftActionClick)="gotToWelcomePage()"
  (rightActionClick)="save()">
</agenda-footer>

1 Like