HI friends,
I need to use expand and collape in project
Example : use case
1.COD
2.Net banking
3.Debit card
4.Credit Card etc
if i click on COD then expand and show some input field Address, pincoden
if i click on Net banking then expand and show select option for selecting bank and expiry date and goes on
How to do in IONIC 2
Actually i am Android developer so new to Ionic 2
please give some solutions
Thank you
Maybe @mhartington’s accordion is what you’re looking for.
If you don’t need something ultra complicated, and fast for the UI client, use something like the ToggleGroup used in @rapropos suggestion.
Personnally, I use a (simple) similar function to expand an area in the template view, only if it is clicked/checked (and then, show more buttons with dedicated more complex code). Code below.
In template view (page.html)
<button ion-button block (click)="showHideButtons()">Show More Complex Choice Buttons</button>
<ion-list radio-group [(ngModel)]="itemFamily" *ngIf="this.chooseTypeClicked === true">
...
In controller (page.ts)
showHideButtons() {
if (this.chooseTypeClicked === undefined) {
this.chooseTypeClicked = true;
}
else if (this.chooseTypeClicked === true){
this.chooseTypeClicked = false;
}
else if (this.chooseTypeClicked === false){
this.chooseTypeClicked = true;
}
}
And this code is made, to start only if 1st button is clicked, then to expand, and to reset to false at every new choice (chooseTypeClicked is a boolean in controller). Because it is a radio button that is called, it’s a bit specific.
Of course this is basic, and it’s not suited to large datasets, but it is a working code in Ionic 2. I also noted that this kind of code to expand areas in the template view in realtime (with data bindings) can prove to be risky, so be careful.
Let’s say it’s the equivalent of Jquery show/hide functions, but with Angular and Ionic.
Hope it helps 
showHideButtons() is way too complicated.
showHideButtons(): void {
this.chooseTypeClicked = !this.chooseTypeClicked;
}
thx @rapropos, but as I said this is a particular case, when at first hit of button it’s not defined on a Ngmodel binding. But I need to be a value, not void or null.
But maybe my knowledge of JS is just too low, mm, void means null, undefined or what?
For the question of @Jayanthkumar, it’s way too complicated for sure, i was just giving an example working. Thx again @rapropros .
JavaScript’s type conversion rules are…complicated, to be polite. When it comes to ngIf, all it cares about is that there are truthy things and falsy things. null and undefined are both falsy. The ! operator returns true if its argument is falsy, and false if its argument is truthy. Ergo, it can be applied to anything and returns a boolean. Just *ngIf="chooseTypeClicked" in the template and the one-liner showHideButtons() should work just fine. No explicit comparisons to true or false needed.
@rapropos yeah thanks again rapropros, my function works neatly because it’s a simple comparison as I see it. It’s also because angularfire2 results are always truthy (length always > 0 with AngularFire). That’s why my dumb function checks deeper. But I learn, I’m learning every day And yes, that’s why i created a boolean to be created in controller, then to be called in *ngIf in template view. Again I don’t recommend it on large data bindings, but it does the job on simple cases like one customer at once, that are objects with AngularFire.
I don’t see how *ngIf="something === true" is simpler than *ngIf="something", especially when you have to have such a long and unwieldy toggle function in the controller. Shorter code is easier to read, and longer unidiomatic code always makes me feel (as a reader) that something unusual is going on.
@rapropos there is no technical difference, just that it works for real on the template view, associated with the good (ngmodel), (controlFormName), and such. When was the last time you worked with 2-way real time data binding?
What point are you trying to make here?
No point, sorry. I’m just at times, frustrated, because there are often great pieces of learning, everywhere on the web, and never here on the official forums. (I pass on the fact you didn’t test ngIf=“chooseTypeClicked”) with Ionic 2 or 3, it will not work as you think in theory. Again, I <3 Ionic thx again no issue:)
As somebody who posts lots of things that I would hope people would consider “pieces of learning”, if not necessarily “great” ones, I’m offended by this comment.
I call BS on that claim.
<button ion-button (click)="showHideButtons()">toggle zippy</button>
<div *ngIf="chooseTypeClicked">zippy is open</div>
chooseTypeClicked: boolean;
showHideButtons(): void {
this.chooseTypeClicked = !this.chooseTypeClicked;
}
Works exactly as expected.
I see no difference. If you change a backing property, Angular’s change detection reflects that in the template. It does not matter if the binding is one-way or two-way.