Is there a way to update the text of a button when it is clicked?

Is there a way to dynamically change the text of a button when it is clicked and revert back to its original text when clicked again?

I have attempted something along these lines, but I am unsure how to target the text since there isn't a property similar to color for ion-buttons.

HTML

<button (click)="changeText()" ion-button>Hello</button>

TS

public text: string = 'hello';

Constructor

public changeText(): void {
    if(this.text === 'hello') { 
        this.text = 'rank'
    } else {
        this.text = 'hello'
    }
}

Answer №1

To enhance your button, consider utilizing interpolation to ensure it appears as follows:

<button (click)="changeText()" ion-button>{{text}}</button> 

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

Data loss occurs when the function malfunctions

Currently, I am working with Angular version 11. In my project, I am utilizing a function from a service to fetch data from an API and display it in a table that I created using the ng generate @angular/material:table command. Client Model export interfac ...

The command 'ng' for Angular is not being detected as a valid internal or external command, executable program, or batch file, preventing access to the Angular app from outside the localhost

Whenever I try to run "'ng' is not recognized as an internal or external command, operable program or batch file." with ng serve --host 0.0.0.0 from my command prompt, it gives me this error message. However, running it through the node.js comma ...

Angular HTTP client failing to convert response data to specified type

Recently, I started using the new HttpClient and encountered an issue where the response is not cast with the provided type when making a call. I attempted to use both an interface and a class for casting, but it seems that only interfaces work as shown in ...

Tips for dynamically binding the image source in Angular based on certain conditions

Hi, I'm receiving a response from an API that only includes a name but no image source. However, I have a collection of images in my local images folder. <div class="left"> <img src="{{ record.imgSrc }}" alt="{ ...

Can someone explain why the Next 13 API route is showing up as empty?

I am currently working with Next 13 and I am attempting to create a simple API route. My goal is to have a: "hi" returned when I visit localhost:3000/api/auth. Despite not encountering a 404 error or any errors in the terminal or console, I can&a ...

Perform simple arithmetic operations between a number and a string using Angular within an HTML context

I'm stuck trying to find a straightforward solution to this problem. The array of objects I have contains two values: team.seed: number, team.placement: string In the team.placement, there are simple strings like 7 to indicate 7th place or something ...

Troubleshooting Angular 2 routing: when routerLink is empty, it fails to function

As I configure my routing, I encountered a problem. At the moment, these are my 2 routes: const appRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'products', component: ProductComponent} ]; Is it not allow ...

Troubleshooting a deletion request in Angular Http that is returning undefined within the MEAN stack

I need to remove the refresh token from the server when the user logs out. auth.service.ts deleteToken(refreshToken:any){ return this.http.delete(`${environment.baseUrl}/logout`, refreshToken).toPromise() } header.component.ts refreshToken = localS ...

Struggling to convert a JSON response into an object model using TypeScript in Angular?

I'm encountering a problem when trying to convert a JSON response into an object. All the properties of my object are being treated as strings, is that normal? Below is my AJAX request: public fetchSingle = (keys: any[]): Observable<Medal> =&g ...

Utilizing Protractor's advanced filtering techniques to pinpoint the desired row

I am trying to filter out the specific row that contains particular text within its cells. This is my existing code: private selectTargetLicense(licenseName: string) { return new Promise((resolve => { element.all(by.tagName('clr-dg-tab ...

What is the process of creating a new array by grouping data from an existing array based on their respective IDs?

Here is the initial array object that I have: const data = [ { "order_id":"ORDCUTHIUJ", "branch_code":"MVPA", "total_amt":199500, "product_details":[ { ...

Testing the subscription feature with unit tests

I am currently testing the reception of an array of people to ensure consistent response types, allowing for detection of any changes in the object from the back-end. Interface Definition: export interface People { peopleDtos: [{ id: number, ...

What is the correct way to declare a class as global in TypeScript?

To prevent duplication of the class interface in the global scope, I aim to find a solution that avoids redundancy. The following code snippet is not functioning as intended: lib.ts export {} declare global { var A: TA } type TA = typeof A class A { ...

Exploring the wonders of Angular 2: Leveraging NgbModal for transclusion within

If I have a modal template structured like this: <div class="modal-header"> <h3 [innerHtml]="header"></h3> </div> <div class="modal-body"> <ng-content></ng-content> </div> <div class="modal-footer"& ...

Displaying search results in various Angular components

On my home page (homePageComponent), I have a search feature. When the user clicks on the search button, they are redirected to a different page called the search list page (searchListComponent). Within the searchListComponent, there is another component c ...

"Optimize Your Data with PrimeNG's Table Filtering Feature

I'm currently working on implementing a filter table using PrimeNG, but I'm facing an issue with the JSON structure I receive, which has multiple nested levels. Here's an example: { "id": "123", "category": "nice", "place": { "ran ...

minimize the size of the indigenous foundation input field

Currently incorporating this code snippet into my application: <Item fixedLabel> <Input style={{ width: 0.5 }}/> </Item> The fixedLabel element is extending the entire width of the screen. I have attempted adju ...

The error at events.js:154 was not properly handled and caused an 'error' event to be thrown

Encountered an error while creating an Angular 2 application. I followed the instructions from this link to create a sample application. Upon running npm start Received the following error, events.js:154 throw er; // Unhandled 'error' even ...

What is the best way to ensure observables in a template (using async pipe) are fully subscribed to before executing any initialization code?

I am facing an issue with my HTTP service that returns information based on a given item ID. The data is fetched using a Subject, which receives the initial data in the ngOnInit method. To display the returned data in the HTML, I utilize the async pipe. ...

How to handle a property that is not found in a combined type in TypeScript?

In this scenario using TypeScript: interface EmotionsOkay { emotion: string; okay: "yap"; } interface EmotionsNotOkay { emotion: string; } type UndetereminedEmotion = EmotionsOkay | EmotionsNotOkay; const areYouOkay = (test: UndetereminedEmotion) =& ...