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
