Get ViewChild of a ngIf hidden element


#1

So I have this page with 2 segments. The second segment contains a custom child component ‘survey-list’ that is shown if it’s selected. This child component is responsible for retrieving and displaying his information.

From the first page a user can push a second page, that will be put into the stack. In this second page it’s possible for the user for delete one of the elements of the ‘survey-list’ component. When the second page is poped (dismissed), the first page is displayed exactly as it was before, and if the ‘survey-list’ was the selected element of the segment, his list will still display that item which was deleted.

Some things that I did try:

  1. Use a lifecycle hook for the child component. I found out that ionic do not offer page hooks to child components, so we are left alone with angular hooks, that as far as I know only focus on init and destroy events.

  2. Make a @ViewChild referente to ‘survey-list’ and then use it’s parent lifecycle. That didn’t work out because on rendering the first page it’s possible that the segment that holds 'survey-list is not part of the DOM, causing the referente to be undefined.

I wonder if it’s possible to get a reference to a child component inside a function. If that’s possible I could get the reference and trigger the apropriate update function inside it.

Am I missing something here?

<ion-content padding>

    <ion-segment [(ngModel)]="actionChoice" (ionChange)="loadLists()" color="dark" no-padding>
        <ion-segment-button value="create">
            New
        </ion-segment-button>
        <ion-segment-button value="edit">
            Edit
        </ion-segment-button>
    </ion-segment>

    <ion-list *ngIf="actionChoice === 'create'">
        <div *ngFor="let channel of recently_used_channels">
            <button ion-item
                    (click)="pushToTrades(channel.id)">
                {{channel.name}}
            </button>
        </div>

        <div *ngFor="let trade_type of trade_types">

            <ion-item-divider sticky>
                <h2><strong>{{trade_type.name}}</strong></h2>
            </ion-item-divider>

            <button ion-item
                    *ngFor="let channel of trade_type.channels"
                    (click)="pushToTrades(channel.id)"
                    style="color: #595959; font-size: 0.9em;">
                {{channel.name}}
            </button>

        </div>
    </ion-list>

    <survey-list #list [type]="survey_list_type" *ngIf="actionChoice === 'edit'"></survey-list>

</ion-content>


#2

Hello,
my english is too bad to understand what you want.

But *ngIF does not hide an element, It removes it from the dom. If you want hide an element use [hidden]

Hope it helps.

Best regards, anna-liebt.


#3

Hi Anna,

Thank you very much for your input. I did know that ngIf removes the element from the DOM and I’ve learned from angular that using ngIf is preferred over [hidden], because the latter can mess up on certain css setups. Because of that I was avoiding it.

But… as I’m running a not so complex app, maybe it’s ok to use it.

Thank you and best regards!


#4

Hello,

sorry for my bad english. So I do not understand what you want to do.

I do not think that *ngIf is prefered over [hidden]. I think there a two different things.

Maybe at the fast look, something that is maybe not here, can’t referenced by @viewchild.
Also If @viewchild is undefined or holds a reference depends on, when it is called. I should be called first in ngAfterViewInit(){} or later otherwise its undefined.

So I will try a little guessing.

Maybe you have page1.
On a button click you show page2 as a modal page.
The user do in the modal page, what he should do. In this.viewCtrl.dismiss(data); you can send data back to page1.

In page1 you can do at yourModal.onDidDismiss(data => {
console.log(data);
});
what you want, for example updating something.

Best regards, anna.

PS: If I am totally wrong, please apologisze, because my engish is bad and I am also a bloody beginner in ionic stuff.


#5

Hi Anna,

Thank you so much for trying to help me.

About the ngIf vs hidden debate, here is a link to clarify: http://www.talkingdotnet.com/dont-use-hidden-attribute-angularjs-2/

While I was looking into angular ngIf I saw an example that included a reference to a ViewChild that is not rendered, so maybe I messed up something while testing.

For now I will stay with the solution you suggested, which is working fine.

Best regards!