ViewChild returns undefined while returning from child component to parent component

Question

I declared a ViewChild object of DateRangePickerComponent. Last 7 Days is the default selected date range. but I Updated it to Last 30 Days in a function updateDateRange() whiche is call within ngAfterViewInit() life cycle hook. But when I navigate to a child component and navigate back to parent component I called the updateDateRange() function to update Date Range from default Last 7 Days to Last 30 Days. But the object of DateRangePickerComponent becomes undefined as view does not initiated rather view changed.

In summary

First of All I am in the parent page. At present when the parent page initiates its view I Declared an object of DateRangePickerComponent. And Changes the selected date range using my custom updateDateRange() function. Till now its works fine. But when I navigate to a child component and come back to the the parent, then the object of DateRangePickerComponent which was created before becomes undefined. that's the scenario.

So how can I resolve this. Code is given below.

Parent html file `

<div>
   **main block of code**
   
   **injecting Child component**
   <app-child-component (directiveBack)="navigatePage(pageSwitch.ViewPage, $event)"></app-child-component>
   
</div>

Parent ts file `

parent class{
    @ViewChild(DateRangePickerComponent) private permissionDateRange: DateRangePickerComponent;
    searchFilter: ExampleInputDto;
    
    constructor(injector: Injector){
        super(injector);
        this.searchFilter = new ExampleInputDto();
        this.searchFilter.fromDate = moment().subtract(30, 'days');
        this.searchFilter.toDate = this.appConst.calenderSettings.daterangePickerOptions.toDate; //appConsts holds the constant files used in application.
    }

    ngAfterContentInit(): void {
    }

    ngAfterViewInit(): void {
        updateDateRange();
    }

    updateDateRange(): void {
        this.permissionDateRange.datePicker.setStartDate(this.searchFilter.fromDate.toDate());
        this.permissionDateRange.datePicker.setEndDate(this.searchFilter.toDate.toDate());
    }

    navigatePage(switchEnum: SwitchEnums, data?: any): void {
        if (data) {
            this.searchFilter.fromDate = moment().subtract(30, 'days');
            this.searchFilter.toDate = this.appConst.calenderSettings.daterangePickerOptions.toDate;
            this.updateDateRange();
        }
    }
}

`

Child ts file

`

  child class{
      @Output() directiveBack: EventEmitter<>;

      constructor(){}

      navigateBack(): void {             //this function is called after clicking back button in child html
          this.directiveBack.emit(null)
      }
  }

`

Answer 1

I would try using static ViewChild:

 @ViewChild(DateRangePickerComponent, { static: true }) private permissionDateRange: DateRangePickerComponent;
    searchFilter: ExampleInputDto;

With static queries (static: true), the query resolves once the view has been created, but before change detection runs. The result, though, will never be updated to reflect changes to your view, such as changes to ngIf and ngFor blocks.

Moover you can change ngAfterViewInit to ngOnInit in this approach.