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

Stop span elements from being removed within a `contenteditable` container

I am facing a challenge with an editable div that contains a span element which I would like to prevent users from deleting. My development environment is Vue3. Currently, if the user presses backspace while their cursor is to the right of the span or sel ...

Crafting a template for mixing up images and quotes without any specific connection - here's how!

I came across some interesting templates that can generate random quotes and others that create random pictures. My goal is to develop a template that generates both a random quote and a random picture, similar to this example, without any relation betwee ...

Disabled text selection in Internet Explorer

I am in need of making one HTML element (Label) unselectable for IE. I have tried using the following methods: Unselectable=on onselectreturn=false; Unfortunately, none of these solutions are working for me. For Firefox and Chrome, I've successful ...

The navigation bar extends beyond the page's width

Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...

Exciting transition effect for font sizes in CSS

Issue: Hover over the X and wait for the div to collapse completely. Move away from the X Notice how the div jumps to the bottom and then back up. Inquiry: How can I prevent text wrapping while expanding the div during animation? (Currently using del ...

Where will the user's input be stored?

Consider the following HTML code: <div class="form-group"> <label class="col-md-3 col-xs-3 col-sm-3 control-label">Phone</label> <div class="col-md-4 col-xs-4 col-sm-4"> <input id="input ...

Implementing a universal (click) attribute for Angular 2 in CSS

When using Angular 1, it was as easy as following this syntax: [ngClick], [data-ng-click], [x-ng-click] { cursor: pointer; } This snippet ensured that any tags with the ng-click attribute displayed a pointer cursor. How can we achieve the same effect ...

Tips for extracting text from a multiline tag using Selenium

I need help extracting the text "1 file has been successfully uploaded" from the code snippet below: <div class="formbuttons"> <h3 id="res" class="demo" style="color: rgb(255, 255, 255); display: block;"> <center>1 file <br>has bee ...

Attempting to use tabs within a tab does not function correctly

Visit the CodePen link here This is the codepen example. <div class="row"> <div class="col s12"> <ul class="tabs2"> <li class="tab col s3"><a href="#test1">Test 1</a></li> <li class=" ...

Is there a CSS fix for containing a floating div inside another div with overflow hidden?

I've managed to create a cool effect with a div of an airplane inside a parent div that has 'overflow: hidden' applied. This setup gives the illusion that the airplane div is flying from under an element on the page and carrying a banner alo ...

Achieving a sidebar that remains full height with CSS

Currently working on this page () where my aim is to create a sidebar that fills the entire height of the screen. The goal is for the sidebar, along with the black line on its right, to always reach the bottom of the viewport. JSFiddle Link Here's t ...

Align two separate unordered lists together in the center

Would it be possible to align two separate UL elements next to each other horizontally? Here is the code that I am currently working with: <div id="container"> <ul id="list1"> <li></li> <li></li> ...

Ways to create a sequential appearance of elements through CSS animations

Can you help me achieve a wave effect for elements appearing one by one using CSS animation (jQuery)? Currently, all the elements show up at once and I want to create a wave-like motion. Any assistance would be greatly appreciated. $(window ...

The display/block feature will only function if the div element is contained within a table

I am facing an issue with hiding/showing two div elements alternatively. The code works perfectly when the divs are placed within a table, but fails when they are not in a table due to compatibility issues with Internet Explorer. I prefer not to use a tabl ...

GSAP also brings scale transformations to life through its animation capabilities

I have an SVG graphic and I'm looking to make four elements appear in place. I've been using GSAP, but the elements seem to be flying into place rather than scaling up. Here's the code snippet I've been using: gsap.fromTo( ...

What is the method for updating the value of the Sass variable in Angular 4?

Within the file app.component.scss, there is a variable named $color that has been set to 'red'. What steps can be taken within the file app.component.ts in order to access this variable and change its value to 'green'? ...

Switch the visibility of an HTML input styled as a "spinner"

I have managed to create a CSS-based method for toggling the visibility of span or input elements depending on whether a radio button is checked. I got inspired by this insightful question on Stack Overflow. However, I encountered an issue where this togg ...

What is the best way to make an image expand when clicked, align it in the center of the webpage, and have it return to its original position with just one more click by utilizing

Currently, this is the code I am working with. The JavaScript functionality is working well, however, there seems to be an issue where the image does not return to its original size on a second click. Additionally, I am having trouble getting the CSS to ce ...

Eliminate any unnecessary or hidden spacing on the left side of the options within an HTML select

Currently, I am in the process of creating a Registration Form and encountering a challenge with aligning the input[type="text"] placeholder and the "pseudo" placeholder for a <select> element. My goal is to have both placeholders left-aligned flush ...

Customizing the colors of an Ant Design header

I am currently attempting to modify the background color of the entire header in antdesign. I believe the file containing the default settings can be found here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less Upo ...