I'm using Ionic 3.*, tring to create a component that contains just a button.
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.
I've solved the issue, maybe with an workarround:
[profile-button]
<ion-buttons end>
tag<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.