# @ViewChild undefined

**URL:** <https://forum.ionicframework.com/t/viewchild-undefined/103656>\
**Category:** ionic-v3\
**Created:** [August 30, 2017, 3:51am UTC](https://forum.ionicframework.com/t/viewchild-undefined/103656 "2017-08-30T03:51:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cnswico](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cnswico/32/111340_2.png) [@cnswico](https://forum.ionicframework.com/u/cnswico)\
**Post date:** [August 30, 2017, 3:51am UTC](https://forum.ionicframework.com/t/viewchild-undefined/103656/1 "2017-08-30T03:51:07Z")

</div>

_Before you judge, I’ll let you know that I’ve checked every single search result that popped out to no avail._

I’m trying to get an HTML5 Audio Element to autoplay upon page enter.  
**`page-page.html`:**

```auto
<audio #audio id="audio" controls controlsList="nodownload">
   <source [src]="audioUrl" type="audio/mpeg">
   Sum Ting Wong.
</audio>

```

**`page-component.ts`:**

```auto
import { Component, ViewChild, ElementRef } from '@angular/core';

@IonicPage()
@Component({
  selector: 'page-page-page',
  templateUrl: 'page-page.html',
})
export class PagePage {
   @ViewChild('audio') elemElem;
   ...
   ngAfterViewInit () {
      console.log(this.elemElem); // Is always undefined.
   }
}

```

I don’t know why it’s always `undefined`. I’ve tried things like using the `@ViewChild()` within `ngAfterViewInit()` but of course, it’s not allowed.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [August 30, 2017, 5:37am UTC](https://forum.ionicframework.com/t/viewchild-undefined/103656/2 "2017-08-30T05:37:49Z")

</div>

Is that the entirety of the template? Is there a chance that some conditional directive like `ngIf` is somehow getting involved? `@ViewChild` doesn’t like it when its target is not always in the DOM.

---

<div class="post-metadata">

**Author:** ![cnswico](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cnswico/32/111340_2.png) [@cnswico](https://forum.ionicframework.com/u/cnswico)\
**Post date:** [August 30, 2017, 5:43am UTC](https://forum.ionicframework.com/t/viewchild-undefined/103656/3 "2017-08-30T05:43:52Z")

</div>

Darn it. You’re right! That’s all I actually needed.

I changed its parent `<div>` from this:

```auto
<div *ngIf="isReady">

```

… to this:

```auto
<div [hidden]="!isReady">

```

Thanks!

---

<div class="post-metadata">

**Author:** ![alemdg](https://avatars.discourse-cdn.com/v4/letter/a/45deac/32.png) [@alemdg](https://forum.ionicframework.com/u/alemdg)\
**Post date:** [December 23, 2019, 2:27pm UTC](https://forum.ionicframework.com/t/viewchild-undefined/103656/4 "2019-12-23T14:27:28Z")

</div>

This was my solution…