access information from a modal in Ionic2

One of the functionalities in my webpage involves a button that triggers the creation of a modal upon being clicked.

Now, I am looking to initialize a variable within the modal and then pass it back to the page containing the button once the modal is closed.

Here's an excerpt showcasing my attempt at achieving this (boilerplate code has been excluded):

modal.ts

myVar: string;
constructor(private navCtrl: NavController, private viewCtrl: ViewController) {
    this.myVar = "Hello";
}

// code snippet for when the modal is closed
onCancel() {
    this.viewCtrl.dismiss(this.myVar);
}

pageWithButton.ts

varFromModal: string;
constructor(private navCtrl: NavController, private viewCtrl: ViewController) {}

// Error encountered here: Error TS1068: Unexpected token. A constructor, method, accessor, or property was expected.
this.viewCtrl.onDismiss(data => { 
    this.varFromModal = data;
});

Answer №1

It is not possible to write code directly within a class:

class YourClassName {

    varFromModal:string;
    constructor(private navCtrl: NavController, private viewCtrl: ViewController) {}

    // Avoid writing code here!
    // It should be placed in a function, constructor, or elsewhere...
    this.viewCtrl.onDismiss(data => { 
        this.varFromModal = data;
    });
}

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

Team members

Just started diving into Angular and practicing coding with it while following video tutorials. However, I've stumbled upon something in my code that has left me puzzled. I'm curious about the significance of the line "employees: Employee[]" in ...

Issue with React Router: Trying to access the 'history' property of an undefined object

I am developing a styleguide app that features two dropdown components. Users can select both a brand and a specific component, and the app will display the chosen component styled according to the selected brand. I aim to have these options reflected in t ...

The issue persists wherein getBoundingClientRect fails to provide the accurate value following a resize

I have implemented a custom directive that appends a dropdown to the body when it is displayed. The logic functions correctly when executed within the ngAfterViewInit lifecycle, but I encounter issues when attempting to use the same logic within the wind ...

Issue: Oops! The digital envelope routines are not supported in Angular while attempting to run the project

I encountered an error when running the command below: ng s The error message is as follows: Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:68:19)at Object.createHash (node:crypto:138:10)at BulkUpdateDe ...

Obtaining Prisma arguments by providing the table name as a string

Is there a way to retrieve the query arguments for a Prisma function by only passing the table name? Currently, I know I can obtain the table by providing the table name as a string in the following manner: function (tablename: string) { await prisma.[tab ...

Using "undefined" as the discriminator in a discriminated union

My idea is to implement a discriminated union using null as the discriminator: type Result<T> = { result: T; error: null } | { result: null; error: string } If the function register() returns a Result, I could handle it like this: const { error, res ...

Increasing an ID number automatically using Javascript

I'm currently working on a functionality where a unique number is automatically generated whenever a new record is created. For instance, if I were to click "Create record" on a webpage, the number would auto-fill in the record ID field. Subsequently, ...

Guide to updating all object values in Typescript

I am working with an object that looks like this: enum FeatureNames = { featureA = 'featureA', featureB = 'featureB', featureC = 'featureC' } interface FeatureDetails { on: boolean; } type Features = Record<Featu ...

When attempting to publish an index.d.ts file using npm, the module is

We are currently in the process of developing an npm package that will serve as the foundation for most of our projects. However, we have encountered some issues that need to be addressed: The index.d.ts file of our base npm package is structured as shown ...

Using Node.js: Only bring in the necessary function, don't execute the entire file

Today, I stumbled upon an interesting observation and I'm curious about the peculiar behavior of node in this scenario. I have two files structured as follows: src/api/index-api.ts src/worker/index-worker.ts Both of these files contain a simple con ...

Issue with React Redux: Store dispatch not causing component update

I have recently implemented React Redux in my project, but I seem to be encountering some issues. Despite changing the state, the value remains the same. I attempted to use useStore(), but it does not take any parameters. Can anyone provide insight into wh ...

MUI is designed to only manage either onBlur or onKeyPress, but not both simultaneously

Currently, I am working on a project with TypeScript and Material-UI. My main goal is to handle both the onBlur event and the onEnter key press event for a TextField component. Here's the scenario: I have incorporated this text field into a menu. Whe ...

Using RxJS to merge various HTTP requests into a unified and flattened observable array

Struggling with combining multiple http get requests simultaneously and returning them as a unified, observable array. In my current setup, the method returnNewCars() retrieves Observable<ICar[]> by executing a single http get request. However, in t ...

Is it feasible to connect to an output component without using EventEmitter?

When it comes to creating components, I've found it quite easy to use property binding for inputs with multiple options available like input(). However, when dealing with component outputs, it can be a bit complicated as there's only one option u ...

Issue with playing audio file using HowlerJS

Having trouble playing a .mp3 file in my project directory with Howler. I'm not sure if there's an error in my src. When I tried playing an online hosted audio file, it worked fine. I've placed the audio file in the same directory as Slideon ...

When utilizing the dispatch function with UseReducer, an unexpected error is triggered: Anticipated 0 arguments were provided,

Having trouble finding a relevant answer, the only one I came across was related to Redux directly. So here's my question that might be obvious to some of you. In my code, everything appears to be correct but I'm facing an error that says: Expect ...

Is there a way to confirm if a link is within the same domain before opening it in the current tab?

I am currently working on an Angular 8 application. In this application, there is a specific requirement for handling links. For external links, such as www.ad.nl, clicking on them should open in a new tab. However, if the link belongs to the same domain ...

Is there a way to resolve the issue of the argument being of type Boolean or undefined in React and TypeScript?

Encountering an issue, Received an error message stating: 'Argument of type 'boolean | undefined' is not assignable to parameter of 'type boolean'. Type 'undefined' is not assignable to type 'boolean'.' ...

Tips for incorporating a reference into a styled component div in a React application using TypeScript

Looking to include a reference to a styled component div. Here is the code snippet: const DragAndDrop: React.FC<any> = props => { const divRef= React.createRef(); return ( <Zone ref={divRef}/> ); } Encountering thi ...

Encountering difficulties accessing props while invoking a component in React

In my project, I've created a component called FilterSliders using Material UI. Within this component, I passed a prop named {classes.title} by destructuring the props with const { classes }: any = this.props;. However, when I try to access this prop ...