Steps for changing an image with another image upon button click in Angular 6

I have a button with an image and text. When the button is clicked, I want to change both the image and content. Here's the code I'm currently using:

<div class="btn-default">
  <button name="Save" [ngClass]="[bntStyle]" (click)="submit()">
   <img class="img1" src="./image1.png"/><a 
   class="sidebarlinks" >Content1</a>
  </button>
</div>

I also have other similar buttons in my project.

This is what my ts file looks like:

 submit() {
   this.bntStyle = 'btn-change';
}

In my css file, I have defined the following:

.btn-change {
 background-image: url("./image1_after_click.png");
}

If anyone can assist me with this, I would greatly appreciate it. Thank you!

Answer №1

To fix the issue, simply eliminate the square brackets [] from the ngClass attribute value

<button name="Save" ngClass="btnStyle" (click)="submit()">

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

Incorporating components into Vue while utilizing Flask poses a challenge

Currently, I am working on a project that involves Flask and Vue. I am attempting to add a carousel to my website, but I am running into difficulties with creating and importing components for Vue when following tutorials. Here is my current file structure ...

Media Queries elude my complete comprehension

Can anyone provide a brief overview? For example, should buttons and images, as well as a footer, all be placed in one Media Query or kept separate? I'm feeling overwhelmed by this. ...

I'm looking to incorporate XML data into table cells using JQuery. How can I go about creating this table?

I am currently working on creating a 16x4 table in JQuery for a "Meet the Staff" page that will feature information on 16 employees. Each row of the table will contain details such as the employee's name, image, position in the company, and a brief de ...

Tips for adjusting the border-bottom line in real-time as text is selected from a dropdown menu

$('#select').on('change', function() { name = $('#select :selected').val(); //some code here }); . bdr-txtline { border-bottom: 1px solid black; } <div class="container"> <div class="row"> <div ...

A guide on verifying a phone number using just one character

I am looking to validate a phone number with only one character being allowed. For example, the format should be XXX-XXXXXXX where "-" is the only allowed character. Below is my validation function: function validatePhoneNumber() { if(addform.staff_m ...

What is the process for creating a personalized <a> tag using CSS?

On my website, I am looking to differentiate between two types of <a> tags - one for inline links and the other for standalone links. This means that I want these two variations of <a> tags to have distinct colors and styles. For inline links, ...

Trouble with CSS styling arising when launching the MVC application on IIS

Currently working on a website in ASP.Net MVC 5. I am trying to test it on my local IIS (version 8), but encountering an issue where the CSS styling is not being applied. In my _layout.cshtml file, I opted for direct link tags instead of using bundles. &l ...

Having trouble resolving this technical problem in Express.js and JavaScript programming

try { console.log('11111') const { data: { tasks }, } = await axios.get('/api/v1/tasks') console.log('22222 ' + await axios.get('/api/v1/tasks') ) console.log('33333 ' + tasks) https://i.sstatic.net/mLLV ...

The accordion feature fails to function properly when incorporated into an ajax response

When I click a button, an Ajax response is loaded. The response is successfully appended where it should be, but the issue arises with the accordion not working for the response part. Below is the structure of my response: <div class="articles-content ...

Creating a navigation bar in React using react-scroll

Is anyone able to assist me with resolving the issue I am facing similar to what was discussed in React bootstrap navbar collapse not working? The problem is that although everything seems to be functioning properly, the navbar does not collapse when cli ...

Is it impossible to style an element within a div tag?

How can I apply styling to a specific div with id="1", which contains class="match"? Here is the code: <div class="col-lg-3"> <div id="1"> <p class="match">Match {this.state.matches[0].id}</p> <div class="tea ...

Monitoring changes within the browser width with Angular 2 to automatically refresh the model

One of the challenges I faced in my Angular 2 application was implementing responsive design by adjusting styles based on browser window width. Below is a snippet of SCSS code showing how I achieved this: .content{ /*styles for narrow screens*/ @m ...

IE11 is unable to display the background image

I am attempting to create a process roadmap by using background images on list items. The background-image on the list item is not showing up in IE11 (also in all versions of IE10, 9, etc). CSS CODE body{padding: 50px 0;} .status-line { width: 80%; ...

What sets XHTML 1.1 apart from other document types?

Visit this page for more information: XHTML 1.1 makes it simple to create various display formats, including printing pages, wireless device and PDA pages, and browser pages for television by creating a new CSS (cascading style sheet) for the specific ...

Issue with disabled button in Angular 2 when using Chrome's autocomplete feature

In a basic login form, the login button is initially disabled with the following code: [disabled]="!password || !loginName" When Chrome's autocomplete feature fills in the values for loginName and password, the button remains disabled after the pa ...

What are some techniques to ensure a bookmark retains its original style even when the cursor hovers over it?

My CSS skills are limited, so I am facing what may seem like a basic issue. On my website, I have a table of contents with links structured like this: <a href="#user-interface">User interface</a> Additionally, there is a bookmark in another ...

"Cascading Style Sheets for Organizing Buttons in a Grid

I have created a layout in Word that I want to achieve: https://i.stack.imgur.com/krK7w.png After researching, I found out about the CSS grid layout which seems like the best option for achieving the desired layout. However, when implementing the grid i ...

Prevent Bootstrap 5 input fields from automatically adjusting to the height of a CSS grid cell

Below is some Bootstrap 5 markup that I need help with. The first example is incorrect. I don't want the Bootstrap input to be the same height as the grid cell. The second example is right, but I want to achieve the same result without using a wrapp ...

Troubleshooting: Unable to get the :last selector to work

$('.data_row:last').after('<tr class="odd"> <td class="first data" style="min-width: 29px;">2</td></tr>'); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> < ...

How can I append the value of an input box to a URL as a parameter upon clicking a button?

I am working on a form with one input field and two buttons, each with different functions. My goal is for one of the buttons to take the value entered in the input field and append it to a specified URL as a parameter when clicked. For example, if the us ...