How to assign a value to an href tag in TypeScript within an Ionic application

Is there a way to dynamically set the value of the href tag based on input from a user? Specifically, I want the href tag to call "skype:+ (value from the input)" when clicked.

<ion-content padding>
    <ion-col>
         <ion-label color="primary">Enter The No.</ion-label>
    <ion-input placeholder="Text Input"></ion-input>
      <a href="skype:+jelordrey?call">
    <button  ion-button color="secondary">test</button>
     </a>
       <!--  <a href="skype:+jelordrey?call">
               <button >
                        Click to open Skype and dial the no:+1234567890
              </button>
      </a> -->
 </ion-col>

</ion-content>
export class SkypecallPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SkypecallPage');
  }

}

Answer №1

To gather information from the user, you are utilizing an input field. To properly bind the model name to your href attribute, it is necessary to use ngModel first on the ion-input:

Insert the following code in your HTML file:

<ion-item>
   <ion-label color="primary">Enter The No.</ion-label>
  <ion-input type="text" placeholder="Enter Your Number" [(ngModel)]="userNumber"></ion-input> //any model name can be used here and declared in your ts
</ion-item>

Subsequently, utilize the value of ngModel to bind it to the href attribute using [attr.href]:

<a>[attr.href]="'skype:+' + userNumber + '?call'"</a>

If an "sanitizing unsafe URL value" warning is thrown, follow SAJ's advice and use DomSanitizer to resolve the issue. Refer to the same stack-overflow link recommended by SAJ for guidance on handling unsafe URLs.

Answer №2

If you want to dynamically set the href value, you can utilize the [attr.href] option. Here is an example of how the code might look:

<a [attr.href]="'skype:+' + name + '?call'">
 <button ion-button color="secondary">test</button>
</a>

In case Angular flags it as an unsafe URL by adding the `unsafe:` prefix in front of it when using the method above, you may need to sanitize the URL to make it safe. You can refer to this link for information on how to use DOM sanitizer.

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

Choosing a personalized component using document selector

Currently, I am working on an application using Stenciljs and have created a custom element like this: <custom-alert alertType="warning" alertId="warningMessage" hide>Be warned</custom-alert> The challenge arises when attem ...

What is the best approach to manage dynamic regex values for input types within ngFor loop?

In my project, I have an array of objects containing details for dynamically generating input fields. I have successfully implemented the dynamic input field generation based on the type received from an API. However, I am facing a challenge with matching ...

Encountered an error with create-react-app and MaterialUI: Invalid hook call issue

I am encountering an issue while trying to set up Create-react-app with Material UI. The error message I receive pertains to Hooks. Could there be something else that I am missing? This is the specific error message being displayed: Error: Invalid hook ...

Saving the current state of a member variable within an Angular 2 class

export class RSDLeadsComponent implements OnInit{ templateModel:RSDLeads = { "excludedRealStateDomains": [{"domain":""}], "leadAllocationConfigNotEditables": [{"attributeName":""}] }; oldResponse:any; constructor(private la ...

applying multiple angular filters on table column values

I'm currently facing a challenge with implementing a filter pipe that can handle multiple values across multiple attributes in a table. While I have successfully managed to filter multiple values on a single attribute, I am struggling to achieve the ...

Create a TypeScript type that represents an empty collection

I recently acquired some knowledge about TypeScript through a university course I took this month. Is it possible for this to represent an empty set? type emptySet=0&1; Whenever I attempt to assign this to any value (for example: boolean, number, st ...

Using a Svelte click event to toggle a boolean value in an array from a div

How can I modify the toggle functionality to work on any click event, not just on a button, in order to trigger a state change regardless of the element clicked? ToolBar.ts export default class ToolBar { options:Array<ToolBarOptions>; const ...

I am unable to employ filtering in TypeScript

Hey there, I'm trying to filter some JSON data randomly by using this function, but I keep running into an error with my variable called filteredArray. The error message says "Property 'filter' does not exist on type 'Dispatch<SetSta ...

Enhancing Vue prop with TypeScript typing

In my Vue component, I am working with a prop called tabs. The format for this prop is expected to be as follows: [{ id: string title: string color: `#${string}` },{ id: string title: string color: `#${string}` }] Currently, I am utilizing Lar ...

In TypeScript, how are angle brackets like methodName<string>() utilized?

Could someone please assist me in understanding why we use angular brackets <> in typescript? For example, I have provided some code below and would appreciate an explanation. export class HomePage { constructor(public navCtrl: NavController) ...

Encountering NaN in the DOM while attempting to interpolate values from an array using ngFor

I am working with Angular 2 and TypeScript, but I am encountering NaN in the option tag. In my app.component.ts file: export class AppComponent { rooms = { type: [ 'Study room', 'Hall', 'Sports hall', ...

Error: The method that was custom created is not functioning as expected

I am working on a project where I have a collection of hero buttons that come with a customized animation which is defined in the button.component.ts file. These buttons start off as inactive, but when one is clicked, it should become active. To achieve th ...

Implementing Formik in React for automatic updates to a Material-UI TextField when blurred

Presently, I am developing a dynamic table where users can simultaneously modify multiple user details in bulk (Refer to the Image). The implementation involves utilizing Material-UI's <TextField/> component along with Formik for managing form s ...

index signature in TypeScript is an optional feature

Is it possible to create a type with optional namespaces in TypeScript? export interface NodesState { attr1: number; attr2: number; attr3: number; } The goal is to allow users to namespace the type like this: { namespace1: { attr1: 100, ...

Advanced TypeScript deduction

I have a coding query: interface Feline{ purr:boolean } interface Jungle{ lion:Feline, tiger:Feline, leopard:Feline } later in the code: let cats:Jungle;// assume it's properly defined elsewhere for(const j in cats) if(cats.hasOwnProperty(j)){ ...

The custom error handling middleware in Express.js appears to be ineffective for certain error cases

The custom error handler code snippet provided below: export const errorHandler: ErrorRequestHandler = (err, _, res) => { if (err instanceof HttpError) { res.status(err.statusCode).json({ message: err.message }); return; } res.st ...

What could be the reason for my npm package installed globally to not be able to utilize ts-node?

Recently, I've been working on developing a CLI tool for my personal use. This tool essentially parses the standard output generated by hcitool, which provides information about nearby bluetooth devices. If you're interested in checking out the ...

The mat-slide-toggle component does not recognize the checked binding

My angular app contains the mat-slide-toggle functionality. switchValue: {{ switch }} <br /> <mat-slide-toggle [checked]="switch" (toggleChange)="toggle()">Toggle me!</mat-slide-toggle> </div> This is how the ...

Utilizing unauthorized fetch methods to modify the urql Client's fetch function contradicts TypeScript requirements

I've been struggling to make Typescript happy while redefining the fetch function on @urql/core. Although I came across two helpful solutions on Stack Overflow that seemed to address the issue, unfortunately they didn't quite work for me: fetch ...

Angular2: Implementing a restricted access control system for permitted user actions

Within my application, there are various projects each with their own set of actions or buttons such as like, share, and edit. However, not all users should have access to every action. In fact, some users should not even see certain buttons. To address t ...