Angular element is being null when using query selector

I have a checkbox whereby on clicking on it, it should cause inputs and dropdowns to be disabled. I did the change on my local machine and everything is working fine. However, on my environment, im getting the element null causing it not to be disabled.

private disableControls() {
const isPizza = this.dynamicFormMenuForm.get('menuHasPizza');
const pizzaOptions = this.dynamicFormMenuForm.get('menuPizzaOptions');
const pastaOptions = this.dynamicFormMenuForm.get('menuPastaOptions');
const saladChoice = this.dynamicFormMenuForm.get('menuSaladChoice');
const dessertChoice = this.dynamicFormMenuForm.get('menuDessertChoice');

if (isPizza?.value == false) {
saladChoice?.enable();
pastaOptions?.enable();
pizzaOptions?.disable();

if (saladChoice?.value == false) {
dessertChoice?.disable();
}
}
else {
saladChoice?.reset(false);
saladChoice?.disable();
dessertChoice?.disable();
}

if(isPizza){
isPizza.valueChanges.subscribe
((newValue) => {
if (newValue === true) { // Pizza
selected
pizzaOptions?.enable();
saladChoice?.patchValue(false);
saladChoice?.disable();

const dessertElement = document.querySelector(`[ng-reflect-name="menuDessertChoice"]`) as HTMLSelectElement;
dessertChoice?.patchValue(null);
dessertElement.selectedIndex = 0;
dessertElement.disabled = true;

const pastaElement = document.querySelector(`[ng-reflect-name="menuPastaOptions"]`) as HTMLSelectElement;
pastaOptions?.patchValue(null);
pastaElement.selectedIndex = 0;
pastaElement.disabled = true;
}
});


} }.. in the query selector, the elements are being null and hence not disabled on environment. Im calling the function on ngafterviewinit

Continue reading...