I have a button which consists of a image & name. On clicking of that button I need to replace the image & content. I have given my code below.
<div class="btn-default">
<button name="Save" [ngClass]="[bntStyle]" (click)="submit()">
<img class="img1" src="./image1.png"/><a
class="sidebarlinks" >Content1</a>
</button>
</div>
Likewise I have few more buttons.
My ts file:
submit() {
this.bntStyle = 'btn-change';
}
My css file:
.btn-change {
background-image: url("./image1_after_click.png");
}
Can somebody help me with this please?
You need to remove [] from ngClass value
<button name="Save" [ngClass]="bntStyle" (click)="submit()">
Related
I'm doing an HTML assignment for a class at university and I was stuck on a problem asking me to create a button with the label “Change color!”. When the button is pressed, a script will execute causing the “green_parakeet.jpg” image to be replaced with “blue_parakeet.jpg”.
When I emailed the professor, she said for me to add onclick="statement" property, e.g. you can call a function here as shown in the example from the LX12 document <button onclick="f(x);">. Then you can write a script language to set up the function in a way that img tag should change src property value to a new one.
Here's my HTML code so far
<img src = "green_parakeet.jpg">
<button> Change Color! </button>
I can't figure out what to do next.
I have created this code according to this.
<script>
function change() {
document.getElementById("image").src = 'blue_parakeet.jpg';
}
</script>
<img id="image" src = "green_parakeet.jpg">
<button onclick="change()"> Change Color! </button>
edit: The code below will remove the onclick.
<script>
function change() {
document.getElementById("image").src = 'blue_parakeet.jpg';
document.getElementById('button').removeAttribute("onclick");
}
</script>
<img id="image" src="green_parakeet.jpg">
<button id="button" onclick="change()"> Change Color! </button>
Using the html below I can show a popover html button. However when adding classes to the button, the popover button will break and show on the screen. Is there a way to add classes such as btn to the button in the popover?
<div class="col-md-2 popscustom"><a href="#x"><img data-toggle="popover" data-html="true" title="Popover title" data-content="
<div>
<button>Test</button>
</div>
$(function () {
$('[data-toggle="popover"]').popover({ trigger: 'hover', html: 'true', container: 'body'})
})
Make sure you're not passing data-html:"true" as a string. It needs to be a boolean...
$('[data-toggle="popover"]').popover({ trigger: 'hover', html:true})
Switch to single quotes (') for html content inside the popover...
<img data-toggle="popover" title="Popover title" data-title="foo" data-content="<div><button class='btn btn-danger'>Test</button></div>" src="//placehold.it/200">
Demo: https://www.codeply.com/go/EKuiKhFaeP
So I'm working with Angular and I'm trying to make a button that when clicked disappears. I have tried to use [hidden], (click)="showHide = !showHide", and a bunch of other methods. Nothing is working so far.
My html (currently):
<div class="rows">
<div class="a-bunch-of-styles-for-my-button">
<a type="button" class="more-styles" (click)="inboundClick = !inboundClick" [routerLink]="['/inbound']" href="">
</a>
</div>
</div>
and my component:
export class AppComponent {
inboundClick = false;
}
In essence I have 2 buttons on a page and when one button is clicked I want to hide both buttons and display a set of new buttons.
I'm very new to Angular and I'm very confused why this won't work.
Your HTML
<div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false">
...
</div>
Your TypeScript
export class AppComponent {
private isButtonVisible = true;
}
This should do the job. *ngIf automatically hides the element, if the condition evaluates false, so setting the variable to false is sufficient.
The problem I see here is, that you don't control the visibility at any point. Using [ngClass] to add a specific class, if a condition is met, or *ngIf is helpful, whenever you try to change elements on user interaction.
For more information on [ngClass], you can read about its usage here: https://angular.io/api/common/NgClass
You can read about *ngIf here: https://angular.io/api/common/NgIf
Especially the "Common Use" part should be interesting for you.
Edit:
Reading your comment below it seems you did not notice what [hidden] and (click) actually do. [hidden] controls the visibility of the element, usually dependent on a certain condition. (click) however is a quick way to bind a Click-Event to your element.
Using both of those tools enables to hide an element, by changing a variable, if a user clicks on your element (the new value of the variable may be assigned by a function called by (click) or inline, as demonstrated in the example code).
Edit2: Yep, you meant Angular2/4 ;) So this should do the job.
Here is how you can achieve that:
In your component.html:
<a type="button" class="more-styles"
[hidden]="!inboundClick"
(click)="inboundClick = !inboundClick"
[routerLink]="['/inbound']" href="">
</a>
<a type="button" class="more-styles"
[hidden]="!outboundClick "
(click)="outboundClick = !outboundClick "
[routerLink]="['/outbound']" href="">
</a>
... and in your AppComponent:
export class AppComponent {
inboundClick = true;
outboundClick = true;
}
PLUNKER DEMO
Here is a neat way to hide/remove items, specially handy if there is a list of items.
Note how it takes advantage of Angular's template variables (#ListItem).
So your template can either be something like:
<a type="button" #ButtonA
(click)="onClick(ButtonA)"
[routerLink]="['/inbound']" href="">
</a>
<a type="button" #ButtonB
(click)="onClick(ButtonB)"
[routerLink]="['/outbound']" href="">
</a>
Or like this:
<ng-container *ngFor="let item of list">
<div #ListItem>
<button (click)="onClick(ListItem)">
</div>
</ng-container>
Depending on how you want to hide - if you want to remove it from DOM, or just hide it with CSS. And depending if you want to toggle it or just remove it completely. There are a few options:
Remove element from DOM (no way to get it back):
close(e: HTMLElement) {
e.remove();
}
Hiding it with the hidden attribute - beware that the hidden attribute can be overriden by CSS, it will happen if you are changing the display property and the rule has more precedence:
close(e: HTMLElement) {
e.toggleAttribute('hidden');
}
Hiding it "manually" with CSS:
close(e: HTMLElement) {
e.classList.toggle('hide-element');
}
.hide-element {
display: none;
}
I am using the ng-file-upload directive to upload files. I have a scenario where the number of files to be uploaded is decided dynamically. Also I have created have a slightly deviated scenario form the standard where Upload and Submit buttons are separate and needless to say do different actions.
Now what I want to do is get the Choose File ie. <input type="file"> and Upload Button on the same line but I have not been able to do so.
My Relevant Markup:
<input type="file" ngf-select ng-model="input.value" name="{{input.name}}" ngf-model-invalid="errorFile" required>
<button type="button" ng-show="input.value !== null" ng-click="uploadFile(input.value, $index)">Upload File</button>
<span ng-show="input.value.progress >= 0">
<div class="progress" style="width:{{input.value.progress}}%" ng-bind="input.value.progress + '%'"></div>
</span>
What can I do in this case?
You can try to float-right the button (see here)
Like this:
<style type="text/css">
div.inline { float:left; }
.clearBoth { clear:both; }
</style>
and at the end clear the float with class clearBoth
i am using toggle buttons in my application, i would like to set the backgound-color when the button is pressed.
how can i know what is the proper attribute?
and in general is there any place that i can know which CSS attribute has which effect on the HTML element?
If you are using GWT ToggleButton, then you may
import com.google.gwt.user.client.ui.ToggleButton;
final ToggleButton tb = new ToggleButton( "my button text" );
if (tb.isDown()) {
tb.addStyleName("pressed"); // or tb.setStyleName("pressed");
}
and in your css file:
.pressed { background-color: blue; } /* any color you want */
Another way - to change just background of this given button:
tb.getElement().getStyle().setProperty("background", "green");
I know GWT is similar to jQuery, but I've never used it... with jQuery I'd do this (I wasn't sure what kind of button tag you were using, so I included both):
CSS
input, button {
background-color: #555;
color: #ddd;
}
.clicked {
background-color: #f80;
}
HTML
<button type="button">Click Me</button>
<input type="button" value="Click Me" />
Script
$(document).ready(function(){
$('button, :button')
.mousedown(function(){ $(this).addClass('clicked') })
.mouseup(function(){ $(this).removeClass('clicked') })
.mouseout(function(){ $(this).removeClass('clicked') });
})
and in general is there any place that i can know which css atribute has which effect on the HTML element?
Yes, http://www.w3schools.com/css/ has most of what you will probably need. Check the left column for the CSS-property you're looking for.
Regarding your first question, I you can just use the btn:active, btn:hover, btn:visited properties. (i.e. your button has the class/id 'btn'.)
Good luck