Unable to access DOM element using querySelector


#1

Hello!

I am trying to access a DOM element with the id=ACTIONCOMICS_alert . This element is a button. I want to be able to set it’s toggle it’s “disabled” attribute from true to false. However, whenever I try to obtain the element using the following:

console.log('DOM STUFF',this.elementRef.nativeElement.querySelector('#ACTIONCOMICS_alert'))

It always returns null.

Here is the HTML for the Page where the DOM is located

<ion-content>
    <p *ngIf="bookmarks.length === 0 || bookmarks === null" text-center>No bookmarks found.</p>
    <ion-list>
        <ion-item-sliding *ngFor="let series of bookmarks">
            <ion-item-options side="left">
                <button ion-button item-start color="danger" (click)="remove(series)">
                    <ion-icon name="close"></ion-icon>
                </button>
            </ion-item-options>
            <ion-item>
                <h2 text-left>{{series.series}}</h2>
                <button id="{{series.seriesID}}_alert" disabled="true" icon-start ion-button clear item-end color="secondary" (click)="itemSelected($event, series)">
                <ion-icon name="alert"></ion-icon>
            </button>
            </ion-item>
            <ion-item-options>
                <button #notify id="{{series.seriesID}}_notify" ion-button icon-start item-end (click)="add($event, series)">
                    <ion-icon name="notifications"></ion-icon>
                    Notify
                </button>
                <button id="{{series.seriesID}}_cancel" ion-button color="danger" icon-start item-end (click)="cancelNotifications(series)">
                    <ion-icon name='notifications-off'></ion-icon>
                    Cancel
                </button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

I generate ids for the alert buttons using an *ngFor. Below is my component where I try to access the DOM element through various lifecycle hooks

ngAfterViewInit(): void {
    console.log('ngAfterViewInit() called');
    console.log('DOM STUFF',this.elementRef.nativeElement.querySelector('#ACTIONCOMICS_alert'))  
  }
  
  ionViewDidLoad() {
    console.log('ionViewDidLoad BookmarksPage');
    console.log('DOM STUFF',this.elementRef.nativeElement.querySelector('#ACTIONCOMICS_alert'))
    
    this.storage.get('bookmarks').then((data)=>{
      if (data != null){
        this.bookmarks = data;
        console.log('BOOKMARKS',this.bookmarks);
      }
    });

    this.storage.get('notifications').then((data)=>{
      if (data != null) {
        this.notifications = data;
      }
    });
  }

  ionViewWillEnter() {
    console.log('ionViewWillEnter BookmarksPage');
    console.log('DOM STUFF',this.elementRef.nativeElement.querySelector('#ACTIONCOMICS_alert'))
  }

  ionViewDidEnter(){
    console.log('ionViewDidEnter BookmarksPage');
    console.log('DOM STUFF',this.elementRef.nativeElement.querySelector('#ACTIONCOMICS_alert'))
    
  }

the element is always null. Here is a screenshot of the element via the Chrome Developer Tools