Profile Page

Ionic Framework Ionic Angular
1

Hye Guys, I want to create a profile page that have an image with a button for switch the image.
That button goes for a “definitions page” and there has a group of avatars for the user select and when the avatar is selected appears in the profile page.
Someone can Help me ?

2

Welcome to the Ionic Forums.

Generally, the most successful threads here are the ones that go like this:

I am trying to do X. Here’s the implementation I have so far (post relevant code). Unfortunately, i I am seeing Y, which differs from X in (explain specifically how). Does anybody have suggestions for how to fix what I have, or ideas on how I might want to rearchitect the design?

The way your post reads to me is more of a “somebody do my job for me” request. Realistically, if that really is what you want, maybe move your topic to the “jobs” subforum, where you can expect to be contacted by people willing to help write part or all of your app for you (likely, in exchange for some sort of compensation).

If you would prefer to stay in the land of volunteers trying to help out other community members, I suspect you’ll have better luck if you come back a little later after you’ve come up with a concrete problem with a concrete implementation that you’ve already put some work into.

1 Like
3

Your Right!!
I alredy have some code. I have the definitions page and the profile page but when I select an image in definitions page I cant get it on the profile page.

Captura1r
Captura1r518×794 33 KB

defini.ts :

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);

  }

}

defini.html

<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>

profile.ts

import { Component} from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';



@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
avatar:any;
  
 
  constructor( private route: ActivatedRoute,private router: Router, private orientacao: ScreenOrientation,) {
    
    this.orientacao.lock(this.orientacao.ORIENTATIONS.PORTRAIT);
    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.avatar = this.router.getCurrentNavigation().extras.state.avatar;
      }
    });
  }
 


}

profile.html :

<ion-header #header class="ion-no-border">
  <ion-toolbar>
   
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" scrollEvents="true">
<div>
  <div class="img-wrapper">
   <img>
   
    <ion-fab vertical="top" horizontal="end" slot="fixed" >
        <ion-fab-button size="small" routerLink="/defini">
          <ion-icon name="pencil-sharp" size="small"></ion-icon>
        </ion-fab-button>
      </ion-fab>
      <div class="header">
      <ion-list-header >Nome</ion-list-header>
    </div>
  </div>
4

My advice would be to move the avatar management to an AvatarService that is injected by both pages. Change propagation can be disseminated in many ways; here’s one.

5

thank you, I will try!