Utilizing IonicSafeString for Alert Box Messages in Event Handling

.ts

private async displayTermsOfServiceAlert(): Promise<void> {
    const alert = await this.alertController.create({
      header: 'Updated Terms of Service',
      //problem lies here
      message: 
 new IonicSafeString(`<ion-button id="terms-of-service">Clear</ion-button>`),
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: (): void => {},
        },
        {
          text: 'Continue',
          handler: (): void => {},
        },
      ],
      mode: 'ios',
      cssClass: 'play-next',
      backdropDismiss: false,
    });

    await alert.present();
  }

Is there a way to add click() event handler for this? I've tried different methods without success so far.

`new IonicSafeString(`<ion-button fill="clear">Clear</ion-button>`),`

I came across some feedback regarding this issue. However, it's not clear how to implement it in the given scenario. Any guidance would be appreciated.

Reference: https://github.com/ionic-team/ionic-framework/issues/25584#issuecomment-1183277927

javascriptangulartypescriptionic-framework

Answer №1

Leading the Way with Ionic Framework: Liam DeBeasi was instrumental in resolving this issue. I am grateful for his assistance.

.ts

 //.... more alert box code

 await alert.present();

 alert.querySelector('#terms-of-service').addEventListener('click', () => {
      this.router.navigateByUrl('legal/terms');
      this.alertController.dismiss();
    });

ionic.config.json

{
  "name": "my.Ionic",
  "innerHTMLTemplatesEnabled": true,//this is a crucial setting
  "type": "angular"
}

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

Having trouble locating a nested component through multiple ng-content in Angular 8?

Currently, I am encountering an issue while attempting to locate components nested within sub child components. To illustrate what I am aiming for, here is an example: import { Component, OnInit, ContentChildren, ElementRef, QueryList } from '@angul ...

angulartypescript

bringing in a js file with an import statement at the beginning

I am looking to import a file that brings in another file for use across multiple pages Here is my folder structure: js modules momentum-scrolling index.js about.js contact.js Contents of momentum-scrolling.js: import LocomotiveScroll from &a ...

javascripthtmlcssfrontend

Filter and select JavaScript objects based on the content of an array

I have a challenge filtering specific fields from a set of JavaScript objects: A= [{ asset_bubble: 17, biodiversity_loss: 15, code: "CH", critical_information: 14, cyber_attacks: 19, data_fraud: 13, de ...

javascriptarraysjson

Having trouble with Angular2's Maximum Call Stack Exceeded error when trying to display images?

I am facing an issue in my Angular2 application where I am trying to display an image in Uint8Array format. The problem arises when the image size exceeds ~300Kb, resulting in a 'Maximum Call Stack Exceeded' error. Currently, I have been able to ...

javascripthtmlangularimage-rendering

Tips for retrieving data for client components on the server side

When referring to Client Components, I am talking about files that use use client at the top, while Server Components are files that utilize use server accordingly. I haven't come across any mention of fetching data on the server side and directly pa ...

javascriptreactjsnext.jsserver-side-renderingserver-side

docker throwing error due to missing webpack configuration file

I've encountered an issue while trying to run my web app using webpack and docker. It works fine when I run "npm start" but not when I run it with docker. Below are the errors that I am facing: > webpack-dev-server --open --progress --config webpa ...

javascriptnpmwebpackdockerfile

Navigate to a new page on button click using Row with Tanstack / React-Table and Typescript (2339)

Encountering a linting error when attempting to navigate to a new route by clicking on a table row. The functionality is working but how can I resolve this issue? It's showing an error message stating "The property "id" for type TData does not exist." ...

javascriptreactjstypescriptnext.jstanstack

selecting a number at random from a defined array

I am looking to generate a series of lottery numbers like the following: my list could be between 1 - 100, or it might range from 1 - 200, or even 1 - 300 select 35 random numbers from the chosen list. choose another set of 25 numbers from the list. pic ...

javascriptarraysrandom

Creating a basic Angular 1 application from scratch

Currently, I am in the process of setting up a small application with Angular 1 to enhance my skills (yes, we are still using version 1 at my workplace and I want to familiarize myself with it). Most of the application is working fine, but as soon as I in ...

javascriptangularjsangular1.6

Guide for transferring the body of a table to a different component without disrupting the design aesthetics

In an attempt to reorganize my large table component, I decided to separate its body section into a new component. However, every time I try to do this, the styling of the table breaks (likely due to the new HTML structure in the code). I'm currently ...

angularhtml-tablecomponentsprimengng-template

The 'SUM(total)' function in SQLite may not function properly on Android devices, but it performs effectively on web browsers

I am a newcomer to the ionic framework and I have been working on developing an app using SQLite. The app functions well on the browser but when I try to run it on a device, I encounter the error: Cannot read property 'SUM(total)' of undefined ...

androidsqliteionic-framework

I have a task to create a program that can extract unique elements from an existing array and add them to a new array

I am in the process of creating a code snippet that will extract unique elements from an array and store them in a new array. My approach involves developing two custom functions, similar to .includes and .push. The arrIncludesTest function is designed to ...

javascriptnode.jsarrays

Issue encountered while trying to connect to MongoDB: MongooseServerSelectionError

I am encountering an issue while attempting to establish a connection from my Node.js application to MongoDB using Mongoose. Every time I try to launch the application, I encounter the following error: "Error connecting to MongoDB: MongooseServerSele ...

javascriptmongodb

How to add an hr tag to a div element in HTML dynamically with JavaScript?

Whenever a user interacts with the search box, I have a list that gets populated. Here is an example of the overall structure: <div id="searchResult"> <div> <a href="#">result1</a> </div> <div> <a href="#">result2 ...

javascripthtml

The data in the array JSON is undefined, resulting in the inability to read property 'x'

Having issues with my code snippet: <div class="photo-gallery1" *ngIf="plans.attachments.length > 0"> ... </div> Here is the JSON data for 'plans': https://i.sstatic.net/zqsMg.png I encountered an error in my code: https://i.s ...

angular

Developing a feature in React Native to retrieve the user's location without properly updating and returning the received data

In the function below, I am attempting to retrieve the user's current location and update specific location properties: export const getCurrentLocation = () => { const location = { userLat: '5', userLng: '' } navi ...

javascriptreactjsreact-native

Place the Div directly above a distinct Div

Hey there! I'm currently working on positioning one div on top of another div programmatically (using javascript or css). These divs are completely separate and have the following structure: <div class="bottom"> <img src="image"></i ...

javascripthtmlcss

Vue.js: Select a different div within the Vue object instead of the one that is bound

I am currently utilizing Vue and Leaflet to showcase polygons (zones) on a map and exhibit relevant information (messages) upon clicking on specific polygons. The div responsible for rendering these messages has the unique id "#messagearea" and is connec ...

javascriptleafletvue.js

Unable to insert <form> element into the content of the popover

I am attempting to display a popover with content fetched from an API using AJAX. The content includes various HTML tags like <form> with a <textarea> and a <button>, <br/> tags, <a> links, and <time> elements. The issu ...

javascriptbootstrap-4popoverbootstrap-popover

Identifying when a fetch operation has completed in vue.js can be accomplished by utilizing promises

Currently, I am facing a dilemma in my Vue.js application. I am making an API call within the created() hook, but there are certain tasks that I need to trigger only after the API call has been completed. The issue is that this API call usually takes aroun ...

javascriptvue.js