brendanm@ite.co.za
Posts: 26
Joined: Mon Jul 27, 2020 12:05 pm

Ionic4 Typescript to hide/show a component

I am looking for the Typescript syntax to hide or show an Image component when a Button is clicked. I see some examples but not for Ionic 4 Typescript.

Todd Mortensen
Posts: 4
Joined: Mon Jun 15, 2020 1:15 am

Re: Ionic4 Typescript to hide/show a component

I would like some good example of this as well. I have been focusing on some other things in my app, but will be pivoting back this eventually.

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Re: Ionic4 Typescript to hide/show a component

Hello,

It is pretty simple to do with *ngIf directive on any component you want to hide: https://angular.io/api/common/NgIf

brendanm@ite.co.za
Posts: 26
Joined: Mon Jul 27, 2020 12:05 pm

Re: Ionic4 Typescript to hide/show a component

The ngIf works well. But I am struggling to get it to show/hide indiviual ListItems.

On my ListItem I have this:
*ngFor: let task of taskList
*ngIf: true

That does not work. I was hoping it would show all list items. In fact the app shows nothing when Tested.

Ultimately I want to show/hide list items based on an underlying value. So for example on each task:
*ngIf: task.taskName == 'abc'

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Re: Ionic4 Typescript to hide/show a component

Hello,

You are right, the combination of ngFor and ngIf doesn't work there. Please see possible solutions here: https://stackoverflow.com/questions/346 ... sing-error

brendanm@ite.co.za
Posts: 26
Joined: Mon Jul 27, 2020 12:05 pm

Re: Ionic4 Typescript to hide/show a component

Thanks for the link. I had already worked around it by doing all the *ngIf work in the background and then bound my list to a temp array which just contained the list items I wanted to show. Messy but workable

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Re: Ionic4 Typescript to hide/show a component

Thank you for this update! Glad it works now!

Return to “Issues”