Navigate to a different page upon selecting an option from AlertController in Ionic

I am working with an AlertController that appears after adding a new note. It offers two options: "new note" and "see notes". If the user selects "see notes", they should be directed to another page to view a list of notes. If they select "new note", they should stay on the current page to add a new note. Can anyone advise on how to navigate to a different page when selecting an option in the alertCtrl?

Here is my current code snippet:

  showConfirm() {
    let confirm = this.alertCtrl.create({
      title: 'What do you want to do else?',
      buttons: [
        {
          text: 'New note',
          handler: () => {
            console.log('New note');
          }
        },
        {
          text: 'See notes',
          handler: () => {
            console.log('See notes');
          }
        }
      ]
    });
    confirm.present();

https://i.sstatic.net/FRv6Y.png

Answer №1

When inside the handler: method, make sure to call upon the NavController and use the push function to navigate to the required page.

Refer to the example below for guidance:

constructor(private navCtrl: NavController, private alertCtrl: AlertController) {}

showConfirm() {
  let confirm = this.alertCtrl.create({
    title: 'What would you like to do next?',
    buttons: [
      {
        text: 'Create new note',
        handler: () => {
          this.navCtrl.push(NewNotesPage);
        }
      },
      {
        text: 'View notes',
        handler: () => {
          this.navCtrl.push(SeeNotesPage);
        }
      }
    ]
  });
  confirm.present();

Answer №2

  displayConfirmation() {
    let confirmation = this.alertCtrl.create({
      title: 'Will you wield the lightsaber?',
      message: 'Are you ready to use this powerful weapon for the greater good throughout the vast galaxy?',
      buttons: [
        {
          text: 'No',
          handler: () => {
            console.log('Disagree clicked');
            this.openNotes(NotesPage);            
          }
        },
        {
          text: 'Yes',
          handler: () => {
            console.log('Agree clicked');
          }
        }
      ]
    });
    confirmation.present();
  }
  openNotes(destination:any){
    this.navCtrl.push(destination);
  }

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

Retrieve the implementation of an interface method directly from the constructor of the class that implements it

I am looking to create a function that takes a string and another function as arguments and returns a string: interface Foo { ConditionalColor(color: string, condition: (arg: any) => boolean): string; } I attempted to pass the ConditionalColor metho ...

The file 'angular2 src/app/app.routing' does not contain a exportable element called 'routing'

Shown below is the content of my packages.json file: { "name": "ng2", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng serve", "postinstall": "typings install", "lint": "tslint \"src/**/*.ts&bs ...

Displaying elements based on the selected mat-radio-button

I'm struggling with the logic to show and hide elements based on the selected radio button. Here's my current pseudocode: <mat-radio-button [value]="0">BUTTON A</mat-radio-button> <mat-radio-button [value]="1&quo ...

Performing both HTTP requests with a single subscribe function in Angular 4

I'm facing an issue with the following code: ComputerValue: number; private subscription: ISubscription; ngOnInit() { this.getMyValue(); setInterval(() => { this.getMyValue(); }, 30000); } getMyValue(): void { this.subscription = th ...

Displaying JSON data in a table using Angular 4

Here is a JSON data example: { "0": { "open": 93.3, "high": 96, "low": 93.3, "close": 95.04, "volume": 358172, "score": "100", "symbol": "ZBRA", "company_name": "Zebra Technologies Corp.", "company_sector": "Industrial Goods" }, "1": { "open": 19.1396, "h ...

Avoid including any null or undefined values within a JSON object in order to successfully utilize the Object.keys function

My JSON data structure appears as follows: { 'total_count': 6, 'incomplete_results': false, 'items': [ { 'url': 'https://api.github.com/repos/Samhot/GenIHM/issues/2', 'repository_url' ...

Displaying notification in Ionic 2

Whenever I click on the register button, if I fill out all the fields I am taken to the regsuccess page. Otherwise, I receive a message saying to fill in all required fields. However, I want to display an alert message using Ionic2 and TypeScript. HTML: ...

Error compiling SCSS in Angular 6 due to a util.js issue

As a novice in the world of Angular 6, I am currently exploring the Angular CLI and trying to grasp the file structure. My goal is to utilize SCSS for creating a unified global stylesheet. However, during compilation, an error keeps popping up: ERROR in . ...

Clearing data initialized in a service constructor upon user logout in Angular

In my current setup, I am utilizing a GlobalDataService, which I discovered from this post on Stack Overflow ( source here ), to store response data from a login API in a global variable. This data is then used for subsequent API calls. login(): if (_to ...

When using Protractor with Typescript, you may encounter the error message "Failed: Cannot read property 'sendKeys' of undefined"

Having trouble creating Protractor JS spec files using TypeScript? Running into an error with the converted spec files? Error Message: Failed - calculator_1.calculator.prototype.getResult is not a function Check out the TypeScript files below: calculato ...

The makeStyles function in MUI v5 with Typescript always returns null

I am currently in the process of transitioning my components from MUI v4 to v5, and I have reached a point where I am unsure how to migrate my makeStyles components. In the previous version, I had a working implementation like this: const useStyles = make ...

react-data-table-component establishes the structure of the expanded element

Has anyone encountered an issue with the react-data-table-component? I need to pass a row type (typescript model) to the Detail component that is rendered when the row is expanded. Detail: export const Detail = (row: certificates) => { //it works fine ...

Utilize a generic data type for a property that can accept values of type 'number', 'string', or 'undefined'

This query involves React code but pertains to typescript rather than react. To simplify, I have a component called MyList which accepts a single generic type argument passed to the props type. The generic type represents an object that will be used to c ...

Is there a way to modify the style within a TS-File?

I've created a service to define different colors and now I want to set separate backgrounds for my columns. However, using the <th> tag doesn't work because both columns immediately get the same color. Here's my code: color-variatio ...

How can I access the most up-to-date state value in an event listener within a React element?

Here is the code I am working with: var C = () => { var [s, setS] = useState(0) var dRef = useRef<HTMLDivElement>() useMount(() => { setShortcut("ArrowDown", () => { setS(s+1) }) }) return ...

Arranging input elements horizontally

this issue is connected to this post: Flex align baseline content to input with label I am grappling with the layout of my components, specifically trying to get all inputs and buttons aligned in a row with labels above the inputs and hints below. The CSS ...

Oops! The program encountered an error where it cannot assign a value to the 'id' property of an undefined object while trying to store a session in redis

I am currently working on an Angular4 login application and I am looking to store sessions in Redis. To accomplish this, I am utilizing Express session. However, I have encountered the following error: req.session.id = userName; ...

Utilizing Angular 7, Ngrx, and Rxjs 6 to efficiently share state data among lazily loaded modules

Currently, I am working with Angular 7 alongside Ngrx and Rxjs 6. In my project, I have two lazy loaded modules named A and B, each with its own selectors and reducers. The challenge I am facing is accessing the data stored in module B's state from m ...

Could routerLinkActive be used to substitute a class rather than simply appending one?

I have a navigation bar icon that links to an admin route. I want this icon to change its appearance when on that specific route. To achieve this, I can simply replace the mdi-settings-outline class with mdi-settings, displaying a filled version of the sam ...

Real-time data not instantly stored using socket.io

In my current issue, whenever I receive a message with the action stop, I encounter a problem specifically with the setTotalScore function. Initially, the totalScore is set to 0, and upon receiving the message, it should update to match the user.score. How ...