<ion-navbar hideBackButton >
<ion-title> </ion-title>
...
...
I want hideBackButton to be there conditionally and I don't want to repeat the whole ion-navbar element with *ngIf.
Is it possible to to apply *ngIf for hideBackButton attribute?
You have to provide null to boolean values for them to get removed,
<ion-navbar [attr.hideBackButton]="someExpression ? true : null">
otherwise angular creates
<ion-navbar hideBackButton="false">
You can leverage interpolation:
<ion-navbar [attr.hideBackButton]="someExpression">
<ion-title> </ion-title>
...
...
If someExpression is null the attribute won't be present and if someExpression is an empty string, the attribute will be there. Here is a sample:
@Component({
selector: 'my-app',
template: `
<div [attr.hideBackButton]="someExpression">
Test
</div>
<div (click)="toggleAttribute()">Toggle</div>
`
})
export class AppComponent {
constructor() {
this.someExpression = null;
}
toggleAttribute() {
if (this.someExpression==null) {
this.someExpression = '';
} else {
this.someExpression = null;
}
}
}
See this plunkr: https://plnkr.co/edit/LL012UVBZ421iPX4H59p?p=preview