CODEWITHSUNDEEP
angulartypescriptionic2
S S
S S

Reputation: 1503

How to display the parameter received in ts file to html page

I am new to ionic framework. Here I am trying to display the parameter received from home page in my new page. I have tried following codes. But nothing is displayed at the moment. Can anybody tell me what I am missing.

Thank you.

about.ts

export class AboutPage {
    userProfile: any = null;
    constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.userProfile = navParams.get("userProfile");
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad AboutPage');
    }
    goBack() {
        this.navCtrl.pop();
    }
}

about.html

<ion-content padding>
    <p>This is About Us Page.</p>
    <ion-card *ngIf="userProfile">
        <img [src]="userProfile.photoURL"/>
        <ion-card-content>
            <ion-card-title>
                {{ userProfile.displayName }}
            </ion-card-title>
            <p>
                The UID for this new user is {{userProfile.uid}} and the email is {{userProfile.email}}
            </p>
        </ion-card-content>
    </ion-card>

</ion-content>

Upvotes: 2

Views: 691

Answers (1)

Charles Zha
Charles Zha

Reputation: 189

Check this: https://ionicframework.com/docs/api/util/Events/

It's not necessary to use subscription to update userProfile. This might be helpful when some event (like, login(), loadProfile()) is triggered. Because this will trigger the corresponding task which you can include the function this.userProfile = navParams.get("userProfile"); or other related ones.

Upvotes: 2

Related Questions