I have a small button that's meant to be some sort of close button with a somewhat dynamically-selected (i.e., pickable at runtime) image, for placing in toolbars.
close-button.component.html
:
<ion-button (click)="click()">
<ion-icon [ios]="ios" [md]="md" slot="icon-only"></ion-icon>
</ion-button>
close-button.component.ts
:
// snip imports, @Component
export class CloseButtonComponent implements OnInit {
@Input() public click: () => void;
@Input() public direction?: string;
protected md: string = 'close';
protected ios: string = 'close';
constructor() {}
public ngOnInit(): void {
if(this.direction) {
this.ios = 'chevron-' + this.direction;
this.md = 'arrow-' + this.direction;
}
}
}
The issue is that the icon doesn't show up unless direction
is falsy.
What am I doing wrong?
the issue is not with your dynamic selection, it is with your icons. always check the icons docs if you want to use ionic icons. Chevron
and Arrow
have up
, forward
, down
and back
direction, not left and right.
<ion-icon name="chevron-forward"></ion-icon>