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.
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