Unable to access DOM element using querySelector


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

    <p *ngIf="bookmarks.length === 0 || bookmarks === null" text-center>No bookmarks found.</p>
        <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>
                <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 #notify id="{{series.seriesID}}_notify" ion-button icon-start item-end (click)="add($event, series)">
                    <ion-icon name="notifications"></ion-icon>
                <button id="{{series.seriesID}}_cancel" ion-button color="danger" icon-start item-end (click)="cancelNotifications(series)">
                    <ion-icon name='notifications-off'></ion-icon>

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'))
      if (data != null){
        this.bookmarks = data;

      if (data != null) {
        this.notifications = data;

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

    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

1 Like

Pal, I have the same trouble and I struggle a lot and have nothing.

Why are either of you torturing yourselves thus?

One of the big reasons you use frameworks in the first place is so that you don’t have to deal with the DOM directly.

If you want to programmatically enable and disable an element in an Angular app, bind [disabled]="foo" in the template and assign true or false to the foo property of the page controller. Done.

Completely forgot this topic existed and it seems to have been necromanced. This was back when I had a very poor understanding of Angular framework as a whole. Your answer is correct and topic oughta be closed.