Controlling Ionic 3 slides on a separate page

I have a collection of slides on one page, each slide representing a different page. I am looking to create a functionality where clicking a button on one of the pages will advance the slide to the next one:

slides-page.ts

@ViewChild(Slides) slides: Slides;

goNext() {
  this.slides.slideNext()
}

slides-page.html

<ion-slides (click)="goNext()" (ionSlideDidChange)="slideChanged()" [pager]="true">
  <ion-slide>
    <page-family-status></page-family-status>
  </ion-slide>
  <ion-slide>
    <page-familymembers></page-familymembers>
  </ion-slide>
</ion-slides>

As an illustration, if currently viewing slide 1 - "page-family-status," when the button on that page is clicked, the slide would transition to the second slide, "page-familymembers."

angulartypescriptionic3

Answer №1

To make things happen, you need to set up an event Emitter within the context of page-family-status. The event should be triggered when a button is clicked.

@Output()
buttonClicked: EventEmitter<boolean> = new EventEmitter();

click(){
    this.buttonClicked.emit(true);
}

Next, in the parent component, listen for the emitted event and proceed to execute the function slide.next.

<page-family-status (buttonClicked)="goNext() "></page-family-status>

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

Acquire information using AngularJS

This is a demonstration of my service: import { Injectable } from '@angular/core'; import { GenericPostService } from 'app/shared/services/generic.post.service'; @Injectable({ providedIn: 'root' }) export class FaqServic ...

angular

Place a new button at the bottom of the react-bootstrap-typeahead dropdown menu for additional functionality

Currently, I have successfully implemented the React Bootstrap Typeahead with the desired options which is a good start. Now, my next challenge is to integrate a custom button at the end of the dropdown list for performing a specific action that is not ne ...

javascriptreactjstypescriptreact-bootstrap-typeahead

Angular2's AngularFire2: Issue with Nested Observables not Displaying in the View

I am currently working on an experimental app using Ionic 2, Firebase, and AngularFire2 (which is still in alpha). I have been following a tutorial by Aaron Saunders as a foundation for my project: https://github.com/aaronksaunders/ionic2-angularfire-sam ...

angularangularfireobservableionic2

Effortlessly converting JSON data into TypeScript objects with the help of React-Query and Axios

My server is sending JSON data that looks like this: {"id" : 1, "text_data": "example data"} I am attempting to convert this JSON data into a TypeScript object as shown below: export interface IncomingData { id: number; t ...

reactjsjsontypescriptaxiosreact-query

The parameters provided for ionic2 do not align with any acceptable signature for the call target

Currently, I have 3 pages named adopt, adopt-design, and adopt-invite. To navigate between these pages, I am using navCtrl.push() to move forward and to go back to the previous page. Everything works smoothly on the browser, but when I try to build it for ...

iostypescriptionic2

What is the process of obtaining a body response through Interception?

I'm currently using Angular and I need to capture the body request in my interception method. Here is what I have tried so far: return next.handle(request).pipe( catchError(err => { return throwError(err); })) I at ...

angularangular7

Utilizing Nginx with Angular2 for a seamless PathLocationStrategy implementation in html5

Angular2 is a single-page site, so all URL requests need to be redirected to index.html using Nginx. Below is the Nginx server block configuration: server { listen 8901; server_name my_server_ip; root /projects/my_site/dist; location /.+& ...

htmlnginxangularnavigation

Can you explain the correct method for assigning types when destructuring the `callbackFn.currentValue` in conjunction with the `.reduce()` method? Thank you

I'm working with an array of arrays, for example: const input = [['A', 'X'], ['B', 'Y'],...]; In addition to that, I have two enums: enum MyMove { Rock = 'X', Paper = 'Y', Scis ...

typescriptannotationsdestructuring

Introducing a new element in TypeScript using a separate method with parameters

Currently, I am attempting to create a method that will allow me to add an element to my array. Despite being new to typescript, I have been struggling to determine what needs to go into the addNewProduct function. While seeking help, I came across the p ...

typescript

Retrieve user roles from OpenID Connect client

Utilizing oidc-client for authentication in my application with Angular and ASP.NET Core 3.1. Is there a way to retrieve the user roles from ASP.NET using oidc client? ...

c#angularasp.net-coreidentityserver4oidc-client

Field that only permits numerical input without triggering events for other characters

I've encountered some issues with the default behavior of the HTML number input and I'm looking to create a simple input that only allows numbers. To address this, I have developed a directive as shown below: import { Directive, ElementRef, Hos ...

angulartypescriptangular-directive

What is preventing me from defining the widget as the key (using keyof) to limit the type?

My expectations: In the given scenario, I believe that the C component should have an error. This is because I have set the widget attribute to "Input", which only allows the constrained key "a" of type F. Therefore, setting the value for property "b" sho ...

reactjstypescript

Amazon has raised concerns about my use of an incorrect algorithm for signing requests

Need to include the string "AWS4" in my code implementation, which involves Angular and Python. In Python, I calculate the signature and then pass it to the frontend for sending the file to AWS. Here is a snippet of the signature and payload code: signa ...

pythonangularamazon-s3sha256

Retrieving Firebase data asynchronously with Angular and Firestore

Apologies if the title is a bit off, but I'm reaching out here because I'm feeling quite lost and unable to locate what I need online. To be honest, I'm not entirely sure what exactly I'm searching for. Here's my situation: I have ...

angularfirebaseasynchronousgoogle-cloud-firestore

Is it possible for a class that implements an interface to have additional fields not defined in the parent interface?

Looking at the code snippet below, my aim is to ensure that all classes which implement InterfaceParent must have a method called add that takes an instance of either InterfaceParent or its implementing class as input and returns an instance of InterfacePa ...

typescript

What is the trick to make the "@" alias function in a Typescript ESM project?

My current challenge involves running a script using ESM: ts-node --esm -r tsconfig-paths/register -T src/server/api/jobs/index.ts Despite my efforts, the script seems unable to handle imports like import '@/server/init.ts': CustomError: Cannot ...

node.jstypescriptes6-modules

The Observable.subscribe method does not get triggered upon calling the BehaviorSubject.next

In my Navbar component, I am attempting to determine whether the user is logged in or not so that I can enable/disable certain Navbar items. I have implemented a BehaviorSubject to multicast the data. The AuthenticationService class contains the BehaviorSu ...

typescriptangularbehaviorsubject

Uncovering the websocket URL with NestJS and conducting postman tests: A step-by-step guide

Creating a mean stack application using NestJS involves utilizing websockets. However, testing websockets in Postman can be confusing. Typically, I test route URLs in Postman and get output like: "http://localhost:3000/{routeUrl}". But when it comes to tes ...

javascriptnode.jstypescriptexpressnestjs

The CORS policy is blocking Angular Socket.io Node.js because the requested resource does not have the 'Access-Control-Allow-Origin' header present

When trying to access the socket endpoint from my frontend, I encounter this error message: chat:1 Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NOAlAsz' from origin 'http://localhost:4200& ...

node.jsangularsocket.io

Holding off on completing a task until the outcomes of two parallel API requests are received

Upon page load, I have two asynchronous API calls that need to be completed before I can calculate the percentage change of their returned values. To ensure both APIs have been called successfully and the total variables are populated, I am currently using ...

javascriptangularjstypescriptasynchronous