Pass data between two components in Angular

I have userList and userDetail component. in userList.ts, here is my code:

export class UserlistComponent implements OnInit, OnDestroy   {
  isBusy = false;
  userList: IUser[] = [];
  private userListSubscription: Subscription;
  @ViewChild('pTable', {static: false}) pTableElement: Table;
  pTableHelper: PrimengTableHelper;
  @Output() public userDetailEvent = new EventEmitter<any>();

  
  constructor(private userService: UserService,
    private router: Router
    ) { 
    
  }

  ngOnInit() {
    this.getUserList();
  }

  ngOnDestroy(): void {
    
  }

  viewUser(user: IUser): void {
    this.userDetailEvent.emit(user); 
    this.router.navigate(['/user/userdetail'],  {
      state:{
        data: user
      }});

  }

  getUserList(): void {
    this.isBusy = true;
    this.userListSubscription = this.userService.getUsersList().subscribe(
      (data: IUser[]) => {
        this.isBusy = false;
       this.userList = data; 
      },
      (error: any) => {
        //on error
        this.isBusy = false;
      },
      () => {
        this.isBusy = false;
        // default
      }
      );
    }
}

now in viewUser method, I want to route to userDetail component. userDetail.component.ts looks like this:

export class UserdetailComponent implements OnInit, OnDestroy   {
  isBusy = false;
  userList: IUser[] = [];
  private userListSubscription: Subscription;
  @ViewChild('pTable', {static: false}) pTableElement: Table;
  pTableHelper: PrimengTableHelper;
  public userDetailData : IUser;

  constructor(private userService: UserService, private router: Router) { 
    this.userDetailData = router.getCurrentNavigation()?.extras.state?.data;
  }

  ngOnInit() {
    
  }

  ngOnDestroy(): void {
    
  }
}

routing.module.ts looks like this:

const routes: Routes = [
    {path: '', component: UserlistComponent},
    {path: 'userdetail', component: UserdetailComponent},
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})

export class UserRoutingModule {}

This works but here is the confusion I have. I wanted to use EventEmitter but unable to consume it on the userDetail component since I don't have user-detail component tag on user-detail page (since I believe I don't need it). Any suggestions on how I can do that? Backup, I plan to use state.data.user