How would I change the text of a toggled class of a button in Angular, so far I have the following to toggle the class, I am using Bootstrap:
html
<!-- toggle button -->
<button type="button" class="btn btn-primary mt-3 ml-3" (click)="status=!status;" [ngClass]="status ? 'btn-info' : 'btn-primary'" [disabled]="clicked">Primary</button>
<!-- toggle button -->
Any idea's?
Your code for ngClass is wrong and i corrected this,
Also if you want to change the text of button you can do it like this :
<button type="button" class="btn btn-primary mt-3 ml-3" (click)="status=!status;" [ngClass]="{'btn-info' : status, 'btn-primary' : !status}" [disabled]="clicked">{{status ? 'Info' : 'Primary'}}</button>
Related
How do I connect the button to change the values of the [codeOnly] values in the directives below it?
I'm using Angular 2.4.10 in typescript.
<button class="btn btn-primary">
Click me to change all of the [codeOnly] values below to true
</button>
<app-header [codeOnly]='false'></app-header>
<app-power-bi-wrapper [codeOnly]='false'></app-power-bi-wrapper>
<app-power-bi-wrapper-mobile [codeOnly]='false'></app-power-bi-wrapper-mobile>
<app-page-title [codeOnly]='false'></app-page-title>
<app-page-title-nav [codeOnly]='false'></app-page-title-nav>
In the component that contains your HTML add
isFoo:boolean = false;
then change the HTML to
<button class="btn btn-primary" (click)="isFoo = true" >
Click me to change all of the [codeOnly] values below to true
</button>
<app-header [codeOnly]='isFoo'></app-header>
<app-power-bi-wrapper [codeOnly]='isFoo'></app-power-bi-wrapper>
<app-power-bi-wrapper-mobile [codeOnly]='isFoo'></app-power-bi-wrapper-mobile>
<app-page-title [codeOnly]='isFoo'></app-page-title>
<app-page-title-nav [codeOnly]='isFoo'></app-page-title-nav>
or to toggle
<button class="btn btn-primary" (click)="isFoo = !isFoo" >
Click me to change all of the [codeOnly] values below to true
</button>
I have a pop hover button. I want to make it's text RTL. How can I do it?
<button
type = "button"
class = "btn btn-success btn-xs pop"
data-container = "body"
data-toggle = "popover"
data-placement = "right"
data-content = "hello world"
data-original-title = ""
title = "">help</button>
add:
style="direction:rtl;"
<button type="button" class="btn btn-success btn-xs pop" data-container="body" data-toggle="popover" data-placement="right" data-content="hello world"
data-original-title="" title="" style="direction:rtl;" >
A paragraph with a right-to-left direction:
<p dir="rtl">Write this text right-to-left!</p>
For your case, and as documented on bootstrap, you have the option to change the popover tempate via the attribute data-template
<div class="popover" role="tooltip" direction="rtl">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
In your code, add this attribute and set the direction to rtl both in title and body
<button data-template='<div class="popover" role="tooltip" dir="rtl"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' ...>
Help
<button>
HTML rtl attribute
bootstrap popovers
try using css, like so
.your-class-name{
direction: rtl;
}
Read the complete reference here
To all folks ending up here, in order to change direction or style text inside bootstrap's tooltip you can enable the HTML rendering inside tooltip using data-html="true" and then adding preferred HTML tags and attributes. Checkout example below:
Step 1 - Displaying plain text in tooltip:
<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="name=درود"></i>
Step 2 - Creating the desired HTML to show in the tooltip:
<p dir='rtl'><strong>name<strong>=درود</p>
Step 3 - Displaying text with direction and bold style:
<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="<p dir='ltr'><strong>name<strong>=درود</p>"></i>
- There are also other possible solutions such as editing the CSS class of popover or tooltip, such as this link.
I have two buttons. One where i clone a div (button-add) and one where I remove a div (button-remove).
I want to disable the remove-button when I only have one div.
So for multiple divs, it looks like this:
<button type="button" class="btn btn-default btn-lg button-add">+1</button>
<button type="button" class="btn btn-default btn-lg button-remove">-1</button>
<div class="copybox"></div>
<div class="copybox"></div>
<div class="copybox"></div>
...and when there's only one div, I want it to look like this:
<button type="button" class="btn btn-default btn-lg button-remove" disabled>-1</button>
<div class="copybox"></div>
I use jQuery 1.11.3
Here you go. Hope this is what you need.
$('.btn').on('click',function(){
if($(this).text()=="+1")
{
$('.button-remove').prop('disabled',false);
$('div.copybox:first').clone().appendTo('body');
}
else
{
$('div.copybox:last').remove();
}
$('div.copybox').length==1?$(this).prop('disabled',true):$(this).prop('disabled',false)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn-lg button-add">+1</button>
<button type="button" class="btn btn-default btn-lg button-remove">-1</button>
<div class="copybox">Copy</div>
<div class="copybox">Copy</div>
<div class="copybox">Copy</div>
Try using the $("div.copybox").length that DontVoteMeDown commented and then set an ID for the button remove. Once you do that, you can add a function to hide the button with this code.
document.getElementById(buttonID).style.display = 'none'
If later you decide to enable it again, then you can also add another if statement and then the code for that would be block instead of none
I have a row of buttons and want to initialize the first button as active (as the data associated with it is loaded in my controller's init function). The below HTML works great, but when I click the other two buttons the 'active' class remains on the first button. I want this button set as active on page load and then treated 'normally' (ie: if a different button is clicked remove active class from first button):
<div class="btn-group btn-group-sm">
<button class="btn btn-default" ng-class="{active : isActive}" ng-init="isActive = true" type="button" ng-click="playerMap.clusterToggle(true)">Clustered</button>
<button class="btn btn-default" type="button" ng-click="playerMap.clusterToggle(false)">Unclustered</button>
<button class="btn btn-default" type="button" id="heatmap" ng-click="playerMap.heatmap()">Heatmap</button>
</div>
Should be simple as:
If you are using a loop then its even clean - just pass the index.
<button class="btn btn-default" ng-class="isActive[0] ? 'active' : ''" ng-init="isActive[0]=true" type="button" ng-click="toggleButton(isActive,0)">Clustered</button>
<button class="btn btn-default" ng-class="isActive[1] ? 'active' : ''" type="button" ng-click="toggleButton(isActive,1)">Unclustered</button>
<button class="btn btn-default" ng-class="isActive[2] ? 'active' : ''" type="button" ng-click="toggleButton(isActive,2)">Heatmap</button>
Though this does not answer your initial question, here is a working solution (not very efficient I have to say):
HTML:
<div class='container' ng-controller="GoingStack">
<div switch class="button" ng-class="{'active-button': state}">1</div>
<div switch class="button">2</div>
<div switch class="button">3</div>
</div>
Script:
app.controller('GoingStack', ['$scope', function($scope) {
$scope.state = true;
}]);
var active = document.getElementsByClassName('button');
app.directive("switch", [function() {
return {
link: function(scope, element, attr) {
element.bind('click', function(e){
scope.state = false;
active[0].classList.remove('active-button');
element.addClass('active-button');
});
}
}
}]);
I am using twitter bootstrap to share my post on social media, i have made a link whose popover with some buttons content, but further when i click on buttons in popover, their popover function does not work.
<div class="well text-center">
<button id="but1" title='Popover' class="btn btn-success" rel='popover' data-placement="bottom" data-toggle='popover2'>Share</button>
</div>
<div class='container hide' id='cont'>
<a onclick="Facebook()"
class="btn btn-default">
Facebook
</a>
<a onclick="twitter()"
class="btn btn-default">
Twitter
</a>
<a class="btn btn-default"
data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body"
type="button" data-html="true" href="#" id="login">
Email
</a>
</div>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" placeholder="Name" class="form-control" maxlength="5">
<button type="submit" class="btn btn-primary" onclick="EmailToSomeOne();">Send</button>
</div>
</form>
</div>
and the js
$('#but1').popover({
html: true,
content: $('#cont').html()
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
function Facebook(){
alert('share on facebook');
}
function twitter(){
alert('share on twitter');
}
function EmailToSomeOne(){
alert('Email to send');
}
for more clearing i have created a fiddle also.
Your code works fine. Its just a jsFiddle setting issue.
In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.
See example
When onLoad is selected your functions are defined within the closure of the $(document).ready(function() {}); only. Thats the reason it shows the error Uncaught ReferenceError: Facebook is not defined (see the console)
BTW, here's an equivalent example on plunkrenter link description here
You can simply bind the buttons with an id like
<a id="Facebook"class="btn btn-default">Facebook </a>
and access it using
$("#Facebook").on('click',function(){
alert('share on facebook');
})
EDIT:
You cannot have nested popover in bootstrap.However you can use the below two approaches
1)You can change the html inside the popover and display your email form
$('.popover-content').html($('#emailform').html())
Please refer to the fiddle attached for this appproach
https://jsfiddle.net/mohit181191/mxstLfnf/
2)You can open a modal on popover button click.
<a data-toggle="modal" data-target="#facebook"
class="btn btn-default">
Please refer to the below fiddle for this approach
http://jsfiddle.net/mohit181191/o35zqy7w/
Bootstrap not support the Nested popover
http://getbootstrap.com/javascript/#modals
Use this :
$('body').on('click',".btn-default", function(){
alert('share on facebook');
});
.btn-default change this to your button default id