Listening to Ionic event in Angular/Ionic framework

We are facing a challenge in our Ionic-Angular Frontend Application with the following issue:

There is a component we are working with:

...

export class StepIndicatorComponent {
  @Input() slides: IonSlides;

...

}

Our goal is to attach an event listener to the slides for the "ionSlideDidChange" event. Whenever this event is triggered, we need a method to be executed.

We have tried using rxjs and Hostlistener, but these methods seem to work only for DOM objects.

We are aware that we can add the method call for the event in the HTML file, but in this particular scenario, we need to implement it in the .ts component file.

Any suggestions or insights would be greatly appreciated.

Thanks!


For more information on Ion Slides API, please refer to: https://ionicframework.com/docs/api/slides

Answer №1

IonSlides is considered an element, therefore you cannot utilize the @Input declaration with it. Instead, you can simply bind the event directly to the element itself.

<ion-slides (ionSlideDidChange)="onSlideChange($event)">
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
</ion-slides>

To see a working example, check out this link: https://stackblitz.com/edit/ionic-g3sehf

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

Determine the dynamic height of content in a TypeScript file

Could you please provide guidance on obtaining the height of the content within this particular div element? For example, I need to calculate the dynamic height of the content. https://i.sstatic.net/2kNk3.png code .html <div class="margin-top-4 ...

Issue with <BrowserRouter>: TS2769: No suitable overload for this call available

I encountered this error and have been unable to find a solution online. As a beginner in typescript, I am struggling to resolve it. The project was originally in JavaScript and is now being migrated to TypeScript using ts-migrate. I am currently fixing er ...

Trouble Ensuring First Radio Button Is Checked in Angular 6

I'm working on setting the first radio button in a group to be checked by default. Within my application, I have 6 tabs each containing a set of scales that need to be displayed as radio buttons. The goal is to have the first button in each tab check ...

Dropzone and Typescript: A Powerful Combination

I'm currently working on an application that utilizes Dropzone 4.3 and is built with Typescript. Previously, we needed to set a global variable on Dropzone for everything to work smoothly. Dropzone.autoDiscover = false; These are the node packages I ...

Is there a way to determine if a string is empty, even if it contains hard returns?

I am currently working on a function that checks if a string is empty or not, but it seems to be missing the detection of new lines. export const isStrEmpty = function(text: string): boolean { return !text || text.match(/^ *$/) !== null; }; I attempted ...

Enrich your TypeScript code by unleashing the power of enum typing in overloading logical

I have a custom enum called PathDirection that represents different directions export enum PathDirection { LEFT="LEFT"; RIGHT="RIGHT"; }; Within my code, I need to toggle between the two directions. For example: let currentDire ...

Is there a way to assess Python code within a document's context using JavaScript in JupyterLab?

When using Jupyter Notebooks, I can create a cell with the following JavaScript code: %%javascript IPython.notebook.kernel.execute('x = 42') After executing this code, in another cell containing Python code, the variable x will be bound to 42 a ...

`Is it necessary to utilize @Inject in Angular 2?`

When needing to use a service that I have created, I make use of the @Inject decorator: export class ScheduleComponent { constructor(@Inject(ConnectionsApi) private connectionsApi: ConnectionsApi ) { } } However, when working with a service provided ...

Tips for efficiently constructing a Docker container using nodejs and TypeScript

Struggling for the past couple of days to get the project running in production, but it keeps throwing different errors. The most recent one (hopefully the last!) is: > rimraf dist && tsc -p tsconfig.build.json tsc-watch/test/fixtures/failing.t ...

Leveraging Angular 2 Service with the Power of RxJS BehaviorSubject or EventEmitter

Being new to Angular 2 and RXJS, I find myself faced with a challenge involving a custom header component that has 2 triggers (buttons) meant to activate 2 distinct navigation directives in different areas of the application. To address this issue, I have ...

Choose Angular Material to dynamically display the state of multiple items as either checked or unchecked

Currently, I am utilizing <mat-select> from Angular Material for multiple choice selection. Is there a particular property that can be set for <mat-option> to determine whether an option should be checked or unchecked based on a parameter? For ...

Having trouble viewing objects' content in the JavaScript console in Visual Studio 2015?

In the past, I was able to see all the content of my JavaScript objects like this: However, for some reason now, the content is not being displayed at all: I am using Visual Studio 2015 Community with Cordova and Ripple emulator. I have tried creating a ...

Absence of property persists despite the use of null coalescing and optional chaining

Having some trouble with a piece of code that utilizes optional chaining and null coalescing. Despite this, I am confused as to why it is still flagging an error about the property not existing. See image below for more details: The error message display ...

Tips for showcasing nested objects in Angular components

I'm faced with a situation where there is an object containing several nested objects, each with their own set of values. How can I display the key values from this complex data structure? I suspect using *ngFor might not provide the solution. const d ...

Displaying an error message following the dynamic retrieval of the input field's value

How can I display an error message when a specific field with a value of 0 is not filled out in my Angular reactive forms? In my form, I have added a dropdown which is mandatory and I have implemented validators to ensure it is required. The validator work ...

Using TypeScript to determine the week number - the value on the right side of the math operation must be of data type 'any'

I've spent a lot of time searching for code to help me calculate the week number in my Angular app according to ISO standards. It's been challenging to find JavaScript-specific code, but I believe I may have found something - however, I encounter ...

Using AsyncPipe within an ngFor loop to display items

What is the best practice for using an AsyncPipe within an ngFor loop to handle asynchronous calls for items in a list? Scenario: Imagine I have an Order object with Products, and I need to display each product's manufacturer. However, the manufactur ...

What could be causing the slower performance of my Angular App on Azure App Service Linux compared to App Service Windows?

I have a unique Angular application that interfaces with .NET 6 WebAPIs. The app was built using the Visual Studio 2022 template labeled "ASP.NET Core with Angular". It makes calls to an SQL Server database located on Azure. Interestingly, when I deploy th ...

Implementing Reactive forms to disable ng-select: A step-by-step guide

Is there a way to disable the ng-select component? I attempted to use the [disabled] property, but it did not have any effect. I also tried using form control to disable it, but that was unsuccessful as well. Check out this Stackblitz example for referenc ...

Simplify TypeScript code by converting null or undefined values to numbers

When working with a product, it's important to keep in mind that it can be undefined or null; furthermore, the price within the product can also be undefined or null. For example: getClasses(key: number): string { let product = this.mo ...