javascript - How to pass the disabled condition, in the ionic button component - Stack Overflow

admin管理员组

文章数量:1399978

I have the following ponent:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-button',
  styleUrls: ['./buttonponent.scss'],
  template: `
              <ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">
                {{title}}
              </ion-button>
            `
})

export class ButtonComponent implements OnInit {

  @Input() public title: string;
  @Input() public color = 'primary';
  @Input() public condition: any;

  @Output() public action = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }
}

But when I pass the boolean out of it it does not render, because I have a boolean that starts false and bees true according to the input.

edit: the problem is when validDocument bees true, the button does not render again and remains disabled.

HTML declaration:

<app-button title="Buscar" (action)="go()" condition="!validDocument"></app-button>

I have the following ponent:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-button',
  styleUrls: ['./button.ponent.scss'],
  template: `
              <ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">
                {{title}}
              </ion-button>
            `
})

export class ButtonComponent implements OnInit {

  @Input() public title: string;
  @Input() public color = 'primary';
  @Input() public condition: any;

  @Output() public action = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }
}

But when I pass the boolean out of it it does not render, because I have a boolean that starts false and bees true according to the input.

edit: the problem is when validDocument bees true, the button does not render again and remains disabled.

HTML declaration:

<app-button title="Buscar" (action)="go()" condition="!validDocument"></app-button>

• javascript
• angular
• ionic-framework

Share Improve this question Follow edited Nov 11, 2019 at 12:51 Thales Henrique asked Nov 11, 2019 at 12:16 Thales HenriqueThales Henrique 2711 silver badge77 bronze badges 1

• try with [disabled]="{{condition}}" – manishgdev Commented Nov 11, 2019 at 12:20

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Have you tried:

@Component({
  selector: 'app-button',
  styleUrls: ['./button.ponent.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush, // force a ponent re-draw on input change
  template: `
              <ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">
                {{title}}
              </ion-button>
            `
})

If you are just passing an @Input() to the template you can change the changeStratergy to OnPush.

If you also want to use an @Input() inside the ponent you can add ngOnChanges to trigger functions that need to be fired when the @Input() is changed.

https://angular.io/api/core/ChangeDetectionStrategy

OnPush can speed up your app quite a bit if you have lots of ponents on the page at the same time

Try this code

<ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">                    
  {{title}}
</ion-button>

How about

[attr.disabled]="condition ? '' : null"

instead of directly using disabled. That should do the job.

try with below code

<ion-button color="{{color}}" (click)="action.emit(null)" disabled [attr.disabled]="(condition)?condition:null">                    

 {{title}}</ion-button>

[attr.disabled] will remove the disabled attribute if condition value is found to be false

本文标签： javascriptHow to pass the disabled conditionin the ionic button componentStack Overflow