Make a profile page - ionic-framework

Question

I want to create a profile page that has an image with a button to switch the image.
That button goes to a “definitions page” and there is a group of avatars for the user to select and when the avatar is selected it appears in the profile page.
I already have the definitions page but I don't know how the information of the image selected goes to the profile page. I'm trying with NavigationExtras but seems it doesn't work.
import { Component, OnInit } from '#angular/core';
import { NavController } from '#ionic/angular';
import { Router, NavigationExtras } from '#angular/router';
#Component({
selector: 'app-defini',
templateUrl: './defini.page.html',
styleUrls: ['./defini.page.scss'],
})
export class DefiniPage{
selectArray = [
{
"image":"assets/imgs/avatar/badass.jpg",
"isSelected": false
},
{
"image":"assets/imgs/avatar/chld.jpg",
"isSelected": false
},
{
"image":'assets/imgs/avatar/man.jpg',
"isSelected": false
},
{
"image":'assets/imgs/avatar/panda.jpg',
"isSelected": false
},
{
"image":"assets/imgs/avatar/pguim.jpg",
"isSelected": false
},
{
"image":"assets/imgs/avatar/woman.jpg",
"isSelected": false
},
{
"image":"assets/imgs/avatar/pinguim.jpg",
"isSelected": false
}
];
constructor(public navCtrl: NavController, private router: Router) {
}
btnActivate(ind) {
for(let i=0;i<this.selectArray.length;i++){
this.selectArray[i].isSelected = false;
}
this.selectArray[ind].isSelected = true;
}
public verAvatar(image) {
let navigationExtras: NavigationExtras;
navigationExtras = {
state: {
avatar: this.selectArray[image]
}
};
this.router.navigate(['selectArray'], navigationExtras);
}
ion-button{
border-radius: 0%;
height:80px;
width: 80px;
padding: 0%;
}
h5{
margin-left: 12px;
}
.selected{
background-color:#fe00334f;
}
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/tab3" text="Alterar Avatar"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-text>
<h5>Selecione o seu Avatar</h5>
</ion-text>
<ion-grid >
<ion-row>
<ion-col >
<ion-button fill="clear" [ngClass]="{'selected':avatar.isSelected}" *ngFor="let avatar of selectArray;let i = index" (click)="btnActivate(i)" >
<img src="{{avatar.image}}">
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>

Answer 1

Remember that you are in Ionic framework. Do not use the angular router. Use the ionic controller.
NOTE: Without seeing your routing module definitions, I am simply presuming that 'selectArray' is the correct path. This could also be why your app is not working. Run your app in browser and look for errors from console.log.
this.navController.navigateForward('selectArray', navigationExtras);

Answer 2

Maybe you can try with passing data with the use of a modal to choose the avatar. Or you can create a service with all your profiles data (avatars included) and modify it there. Services are really good if you'll need those data in multiples places in your app, not only your profile page.
There is a lot of tutorial for service in ionic or passing data between page or modal.