Search code examples
ionic-frameworkionic3

"ion-button + icon-only" inside component not working

I'm using Ionic 3.*, tring to create a component that contains just a button.enter image description here

The component code is:

@Component({
  selector: 'profile-button',
  templateUrl: 'profile-button.html',
})
export class ProfileButtonComponent {
  constructor(
    private popoverCtrl: PopoverController
  ) {}

  /**
   * Present the Profile popover
   * @param ev
   * @returns {Promise<any>}
   */
  async presentPopover(ev) {
    let popover = this.popoverCtrl.create(ProfilePopover);

    return popover.present({
      ev
    });
  }
}

and my template is:

<button ion-button icon-only (click)="presentPopover($event)" title="Profile">
    <ion-icon name="person"></ion-icon>
</button>

The problem:

The problem is that the icon-only directive is just ignored. The button still have a background color. If I put the template outside the component, it shows the right style.

Looks like the directives is not available inside a Component. My component is inside a custom module, not on AppModule.

How can I solve this? Found that on Ionic2 i need to import the directives manually, but it don't work on Ionic3.

Solution

  • I've solved the issue, maybe with an workarround:

    1. Changed the component selector to attribute selector: [profile-button]
    2. Wrapped the template in a <ion-buttons end> tag
    3. Called the component as an attribute of <ion-buttons end>

    <ion-buttons profile-button end></ion-buttons>

    Note: The issue wasn't with icon-only directive. But it's a style issue on Ionic that required the button directly child of the toolbar or ion-buttons to get proper styles.