Guide on showcasing the parameter passed in a TypeScript file on an HTML page

Just starting out with the Ionic framework and I'm attempting to show the parameter passed from the home page on my new page. I've gone through the code below but so far, nothing is showing up. Any ideas on what might be missing?

Thanks in advance.

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

Answer №1

Take a look at this: https://ionicframework.com/docs/api/util/Events/

You don't have to rely on subscriptions for updating the userProfile. Instead, use events to respond to actions like login() or loadProfile(). This approach will trigger specific tasks where you can implement code like 

this.userProfile = navParams.get("userProfile");
or other relevant functions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating to a component that also needs to redirect

I have a main feature (let's call it "main hub") that houses various sections. Within the "main hub" feature, I navigate to another section (let's call it "subsection") which also contains different subsections. In one of these subsections, call ...

angularangular-routing

Supply additional parameters to the method decorator within an Angular component

Imagine a scenario where there are multiple methods requiring the addition of a confirmation dialog. In order to streamline this process, a custom decorator is created. @Component({...}) export class HeroComponent { constructor(private dialog: MatDialog ...

angulartypescriptdecoratorangular-decorator

Exploring TypeScript to get a ref with the Vue Composition API

The issue I'm facing is related to Vetur underlining 'null' in the following line: const firstRef = ref<HTMLElement>(null) <template> <input id="first" ref="firstRef"> <button type="button&q ...

typescriptvue.jsrefvue-composition-api

The data stored in the variable cannot be accessed when calling it in a different method

Within my component, there are several methods including constructor(){...} and ngOnInit(){...}. I have declared a variable named values:any=[] in the class, and it is initialized with JSON data within a method called getData(). getData(){ this.service. ...

angulartypescriptangular5

Is including takeUntil in every pipe really necessary?

I'm curious whether it's better to use takeUntil in each pipe or just once for the entire process? search = (text$: Observable<string>) => text$.pipe( debounceTime(200), distinctUntilChanged(), filter((term) => term.length >= ...

angulartypescriptrxjs

Having trouble updating properties of child components in Angular

I have a data filtering functionality where I enter values in a filter popup and successfully retrieve results. I then store this data in local storage to retain it when navigating back from another page. However, upon returning to the filter component, I ...

angulartypescriptangular-materialpage-lifecycleangular-lifecycle-hooks

Sending a specific object and its corresponding key as parameters to a reusable component in Angular: T[K]

I am currently working on developing a generic component in Angular and Typescript version 4.4.4. The goal is to create a component where I can set both an object (obj) and specific keys (properties). Here's a simplified version of my text component: ...

angulartypescript

How to associate an object with a component in Angular2/TypeScript using HTTP

I am currently working on displaying a list of item names retrieved from a REST API. By utilizing the map function on the response observable and subscribing to it, I was able to obtain the parsed items object. Now, my challenge is how to bind this object ...

javascriptnode.jshttptypescriptangular

What's the best way to make a toast notification appear when an API call is either successful or encounters

Seeking guidance on incorporating toast messages within an Angular + Ionic 6 application... My goal is to display a toast message in response to events such as clearing a cart or submitting an order, with the message originating from an API call. While a ...

javascriptangulartypescriptionic-framework

What is the reason for the compatibility issue between sass-loader and Angular?

One of my rules for dealing with sass is as follows: { test: /\.(scss|sass)$/, use: [ { loader: 'raw-loader'}, { loader: 'sass-loader', options: {data: sassConfiguration} } ], } typescript loader { ...

angularwebpacksass-loader

Utilizing the array.map method to access the key of an object within an array of arrays in TypeScript

Can I utilize array.map in TypeScript to apply a function with the parameter being the key of an object within an array? I have an array containing objects which have keys 'min' and 'max'. I am looking to use something like someArrayFun ...

arraystypescript

Executing npm / http-server script

I'm currently working on a shell script that will compile an Angular app using the "ng build" command and then launch a web server to host the app from the dist folder. The web server will be started with the "http-server" command, which needs to be i ...

javascriptangularshellnpmhttpserver

Problems Arising from Bootstrap Label and Input Field Alignment

I'm encountering an issue with my Angular app that uses Bootstrap 4. I'm trying to have my form label and input text box appear on the same line, but instead, they are displaying on separate lines. I've tried searching for a solution, but ha ...

htmlcssangulartwitter-bootstrapbootstrap-4

Executing the plugin-typescript library within an Angular 2 project hosted on localhost

I am encountering an issue every time I run my angular2 project where numerous files are being loaded, including the 'ts' library from unpkg.com/plugin-typescript/lib/plugin.js. I am looking to eliminate the need for this file to load from anothe ...

angulartypescript

Capture Video on iOS devices using the MediaRecorder API and display it using HTML5 Video Player

Issue: I am facing an issue where I cannot record video or get a video stream from the camera on iOS through my Angular web application built using ng build. Investigation: In my investigation, I explored various websites that discuss Apple iOS features ...

htmliosiphonetypescriptmediarecorder

Setting a default value for the dropdown in Angular is essential for ensuring a smooth

<select [(ngModel)]="detail.State" (ngModelChange) ="onStateChange()" class="form-control"> <option [ngValue]="null" disabled selected>Select State</option> <option * ...

angulartypescriptdropdown

Access a PDF document in a new tab and save it with a specific file name using Angular

I am facing a challenge in Angular where I want to open a PDF file in a new tab and enable the user to download it with a specific name (Example.pdf). The current code successfully downloads the PDF but does not open a new tab (target=_blank is ineffecti ...

angular

There seems to be an issue in Angular as it is unable to retrieve /

I'm encountering an issue with my simple application where I am receiving the error message "Cannot GET /." Also, in the console, I see this error: TypeError: Cannot read property 'checked' of null at Object.SL_BBL_locer. I'm unsure ab ...

htmlangulartypescript

When clicking, clear the selected items and avoid the function from repeatedly executing

I am currently facing issues with implementing mat-select-autocomplete in my project. Firstly, I have noticed that the function's (selectionChange)="getSelectedOptions($event)" is triggered every time I click on mat-select-autocomplete. Is there a wa ...

angulartypesangular-materialmat-autocomplete

Is it possible to find a more efficient approach than calling setState just once within useEffect?

In my react application, I find myself using this particular pattern frequently: export default function Profile() { const [username, setUsername] = React.useState<string | null>(null); React.useEffect(()=>{ fetch(`/api/userprofil ...

javascriptreactjstypescript