The thing is on clicking the Assign button in User component.html file, it should load the other Assign component. But on clicking the Assign button, Im getting the following error in console: ERROR TypeError: Cannot read properties of undefined (reading 'selectTab') And the error is happening in the Component Paper.ts.

I dont know how to initialize the editor component using @viewChild decorator

Please find the code below:

Component User.html
<button (click)="openAssignOnClick(user)">Assign</button>

Component User.ts

 @Output() assignSection = new EventEmitter();

 openAssignOnClick(user) {
    user.showMessage = true;
    this.assignSection.emit();
  }

Similarly, 
Component Paper.html
<div>
<div>
<editor-tabs #tabComp [initialSelectedTabId]="selectedTab" [options]="tabs"
          (tabSelected)="handleTabSelection($event)"></editor-tabs>
</div>
</div>
<div>
<div>
<app-users *ngIf="selectedTab === 'manage-tab'" (assignSection)="openAssignSectionTab()"></app-users>
<app-sections *ngIf="selectedTab === 'assign-tab'"></app-sections>
</div>
</div>

Component Paper.ts

@ViewChild('tabComp', { static: true }) tabComponent: EditorTabsComponent;

tabs: ITab[] = [
    { id: 'manage-tab', name: 'Manage Users' },
    { id: 'assign-tab', name: 'Assign Sections' },
  ];
  ngOnInit() {
    this.loading = true;
    // only load the manuscript segments and users if the paper is not being saved.
    this.isSavingSubscription = this._bodyObservable.isSaving$.subscribe(isSaving => {

      if (!isSaving) {
        this.dataSubscription = this._metadataObservable.metadata$.pipe(
          // If the user is not the paper's owner, switch the page, he should not have access here.
          tap((data: IManuscriptMetadata) => {
            if (!data.sharing.isOwner) {
              this._router.navigate(['/', 'write', 'editor', data.docId]);
            }
          }),

          // Continue if the user is not redirected out the page.
          filter((data: IManuscriptMetadata) => data.sharing.isOwner),

          tap((data: IManuscriptMetadata) => this.docId = data.docId),
          switchMap(() => this._collaborateService.GetManuscriptSegmentsAndUsers(this.docId)),
          tap((result: any) => this._collaborateObservable.update(result.data))
        ).subscribe(() => {
          this.loading = false;

          const targetPage = this._activeRoute.snapshot.queryParamMap.get('page');
          if (targetPage === 'assign') {
            this.openAssignSectionTab();
          }
        });

        this.dataChangeSubscription = this._collaborateObservable.collaborateChange$.subscribe(changed => this.shouldReloadManuscript = changed);
      }
    });

  }

 openAssignSectionTab() {
    this.tabComponent.selectTab(this.tabs[1]);
  }