Using one System variable in another - Angular IONIC

Question

I’m starting with Angular and would like to know if there is any way to pass the value from one variable to another.

defineDificuldade(dificuldade) {
    console.log('Selected level ~~> ', dificuldade);
    this.userChoiceLevel = dificuldade;
  }

This code snippet belongs to the userlevel.page.ts file

I would like to pass the value of the userChoiceLevel variable to another Component to use in my methods

I tried something with @Input but could not apply functionally:

<ion-button [routerLink]="['/home']" routerLinkActive="router-link-active" color="primary" expand= "full" shape= "round" fill='outline' *ngIf="selectedLevel" (click)="defineDificuldade(selectedLevel)" [userChoiceLevel]='userChoiceLevel'>Começar</ion-button>

The problem happens because I don’t know what to do with this [userChoiceLevel]='userChoiceLevel' after putting it in HTML

Could someone give me an example of how I could pass the value of one variable to another?

The screen I am working on and I wish to pass data to others is as follows:

Answer 1

If I understand what you need, Voce can configure the routes for parameter crossing between components using a service.

In the route parameters, you must transmit only the data you want reflected in the browser’s URL bar.

constructor(private route: ActivatedRoute) {}
const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch : 'full'},
  {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
];

Data pass:

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}