I am trying to hide a PayPal button depending on the state of my switch. At the moment, once the paypal button gets rendered, it always stays there. Regardless of whether the switch gets set back to credit card
Here is the switch:
<p class="heading">Payment Method</p>
<div class="frame flex-row flex-center">
<button
class="flex-column flex-center"
(click)="paymentMethod = 'creditCard'; dismountPaypal()"
[ngClass]="
paymentMethod == 'creditCard' ? 'type-btn-active' : 'type-btn'
"
>
Debit/Credit Card
</button>
<button
class="flex-column flex-center"
(click)="paymentMethod = 'paypal'; renderPaypal()"
[ngClass]="paymentMethod == 'paypal' ? 'type-btn-active' : 'type-btn'"
>
PayPal
</button>
</div>
and here is the button itself:
<div>
<div #paypalRef></div>
</div>
on my component.ts file I've got this to render the button, this function gets called when paypal gets clicked in the switch:
#ViewChild("paypalRef", { static: true }) private paypalRef: ElementRef;
renderPaypal() {
if (this.paypalButtonRendered != true) {
window.paypal
.Buttons({
style: {
layout: "horizontal",
color: "white",
},
})
.render(this.paypalRef.nativeElement);
}
this.paypalButtonRendered = true;
}
I've tried using ngIf on the parent div component and the div of the button itself. This just results in the button never being displayed. I've also tried using [ngClass] snd setting a CSS style to display none if the payment method is credit card, but this also doesn't work. I'm kind of at a loss right now. Any help would be greatly appreciated.
Add the style display: none; to the button you don't want rendered, based on the paymentMethod condition.
Related
react beginner here, here i have antd checkbox, i want to change this checkbox into a button but still have checkbox functionality: here is my checkbox:
import { Checkbox } from "antd";
<div className="modal-body d-flex flex-column">
<Checkbox
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
>
Select All{" "}
</Checkbox>
</div>
this is what i tried to do, i tried to give opacity zero to checkbox to hide it and then put checkbox inside a button in order to change the look of it to button and have checkbox functionality, but problem is, this new button is working if you click on the left side of the button but right side is not working, any solution ?
:
import { Checkbox } from "antd";
<div className="modal-body d-flex flex-column">
<button>
<Checkbox
style={{ opacity: "0" }}
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
>
Select All{" "}
</Checkbox>
Select All
</button>
</div>
If you want the button to do exactly what the checkbox does, simply pass the onCheckAllChange to the button onClick.
<div className="modal-body d-flex flex-column">
<button onClick={onCheckAllChange}>
Select All
</button>
</div>
and your handle change is something like this assuming your state variables are
checkedList, indeterminate, and checkAll:
const onCheckAllChange = (e: any) => {
setCheckedList(!checkedList.length ? allColumnKeys : []);
setIndeterminate(false);
setCheckAll(!checkAll);
};
I am trying to Hide Transfer Button If an account is a negative value or Show Transfer if an account is a positive value.
I want to check if the amount is negative then Hide Transfer Button if the amount is positive then show Transfer Button
HTML
<div class ="content">
<span class ="negative-account" *ngIf="account?.primaryValue! <= 0">-</span>
<span class="dollar-sign">$</span>
{{account?.primaryValue | currency: '': '' | absolute }}
</div>
<div class="transfer"
*ngIf="showTransferLink"
<div> Transfer</div>
</div>
Typescript
export class AccountComponent {
private _showTransferLink = false;
#Input ()
public set showTransferLink(showTransferLink: boolean) {
this._showTransferLink = attributeToBoolean(showTransferLink);
}
public get showTransferLink() {
return (
this._showTransferLink &&
this.account
);
}
I see that you already show or hide a minus based on the value of the account. Why not apply the same logic to the button?
<div class="transfer" *ngIf="account?.primaryValue >= 0">
<div>Transfer</div>
</div>
This should show or hide the button if the primaryValue of the account is less or more than 0
I have a modal and I want a progress bar to be shown while the data for modal display is being fetched by the service call. But in this case, progress bar is being fetched first and then the modal which makes the progress bar to be displayed under the modal. How to fix this ?
this.service.searchMembers(memSearchJson).subscribe((response: any) => {
// some function
}
<modal id="custom-modal-2">
<div class="modal">
</div>
<div id="memberSearchBar" class="class-hide">
<mat-spinner></mat-spinner>
Finding Member IDs..
</div>
</modal>
If document.getElementById("memberSearchBar").className = 'loading-div'; is called before the service call, it throws error as className null. Where should I call this to display progress bar on modal?
I would recommend using *ngIf, as mentioned above. For a better understanding, I add a link to the perfect tutorial.
Loading spinner
For example: in ts:
showSpinner: boolean = true;
ngOnInit() {
this.spinnerShow();
}
if you need show spinner before you get data like from service.
spinnerShow(){
this.workflowService.getData().subscribe(()=>
this.showSpinner = false);
}
And in HTML
<div *ngIf="showSpinner"></div>
Sorry for my terrible english, but i hope this will help you. :)
Instead of doing document.getElementById("memberSearchBar").className = 'loading-div' you can take advantage of Angular's *ngIf and [class.class-name]="expression"
Try something like this instead
displayModalAndSearchMembers(){
// using only isLoading should be sufficient, but I wanted to show how you could use [class.classname]="expression" in the html template as well.
this.isLoading = true;
this.showSpinner = true;
this.displayModal = true;
this.service.searchMembers(memSearchJson).subscribe((response: any) => {
// some function
this.isLoading = false;
this.showSpinner = false;
}
}
<modal id="custom-modal-2">
<div *ngIf="displayModal" class="modal"> <!-- added *ngIf -->
</div>
<div id="memberSearchBar" *ngIf="showSpinner" [class.loading-div]="isLoading">
<mat-spinner></mat-spinner>
Finding Member IDs..
</div>
</modal>
EDIT
You could also use *ngIf="displayModal" on the modal as well, in case you have some display: none on that one as well.
I added some ts code as well. I am not 100% sure what the desired behaviour OP wants, but I am assuming that she wants to show/hide the spinner, and set a class name on it.
This can be simplified by using only *ngIf="isLoading":
<div id="memberSearchBar" class="loading-div" *ngIf="showSpinner">
Working on displaying and hiding a section using *ngIf, the div doesnt get activated on the first click of the button, but gets activated on the second.
Scenario -
On entering a frame number and click of the search button a http call is made, the number received is checked against the status if it is true or false, if false the section should remain closed, meaning the data entered is wrong, if correct then data section will open and be patched with a few values.
The below is the code at my component, where i am checking if the status from my response is true or false and displays notification once my status is fault.
Issue- though the condition is met of being true, my ngif section doesnt display, instead displays on the second click
onSubmitVehicleDetails() {
console.log(this.vehdetails.status)
console.log(this.fetch_vehicle);
let formValue1: any = {
chassis_no: this.vehicleDetailsForm.value.chassis_no,
}
this.policyService.getVehicleNumber(formValue1)
.pipe()
.subscribe(vehdetails => {
this.displayModalPolicy(vehdetails),
console.log(this.vehdetails.status)
if(this.vehdetails.status === false){
this.fetch_vehicle = false;
console.log(this.fetch_vehicle)
}
else {
this.fetch_vehicle = true;
console.log(this.fetch_vehicle)
}
console.log('vehdetails: ', vehdetails); //
(error: any) => this.errorMessage = <any>error;
console.log(this.vehdetails.status)
}
)
}
displayModalPolicy(vehdetails): void {
this.vehdetails = vehdetails;
this.vehicleDetailsForm.patchValue({
model_name: vehdetails.data.model_name,
v_fuel: vehdetails.data.v_fuel,
v_yom: vehdetails.data.v_yom,
v_cc: vehdetails.data.v_cc,
variant_name: vehdetails.data.variant_name,
exshow_price: vehdetails.data.exshow_price,
engine_no: vehdetails.data.engine_no,
});
console.log(vehdetails);
// the data on the form
console.log(this.vehdetails.status)
console.log(this.fetch_vehicle)
}
This is the HTML
<button mat-raised-button color="primary" type="button"
(click)="[onSubmitVehicleDetails()]">Search</button>
<p>
{{fetch_vehicle}}
</p>
</div>
</div>
<div *ngIf="fetch_vehicle">
<div class="form-group m-form__group row">
<div class="col-lg-6">
<img src="assets/app/media/img/logos/logo-1.png">
<label class="col-lg-4 col-form-label">
<h4>Vehicle Details</h4>
</label>
</div>
I have an app that has been written in AngularJS, and am currently trying to add the functionality to hide the headings of some widgets displayed on one of the web pages when the user selects a checkbox to indicate that they should be hidden.
At the moment, I have a page that displays a number of widgets- on the 'heading' of each widget, there is a 'Settings' button. When the user clicks the Settings button, a dialog box opens up on top of the current page (i.e. the user does not navigate to another page- the URL does not change at all). That dialog box contains a form with a number of input fields- one of which is a checkbox that I want to use to 'hide' the headings of all of the widgets on the webpage.
I have been following the example at: https://docs.angularjs.org/api/ng/directive/ngHide to try and do this, but can't quite seem to get it working...
I have added the ng-hide attribute to my HTML element, as in the example:
<div data-ng-if="widget.name === 'tag-box'" ng-hide="hideWidgetHeading"> <!-- class="ng-hide"-->
<div class="divider"></div>
...
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="hideWidgetHeading()" ng-click="hideWidgetHeading()" ng-checked="hideWidgetHeading" ng-model="viewModel.hideWidgetHeading">
<!-- ng-model="viewModel.hideWidgetHeading" -->
<span></span>
</label>
</div>
</div>
</div>
I defined the hideWidgetHeading() function in the ctrl.js file as follows:
function hideWidgetHeading(){
if($scope.widgetHeadingCheckbox==false) {
$scope.$watch('noWidgetHeading', function() {
$scope.hideWidgetHeading = true;
console.log("Value of hideWidgetHeading: ", $scope.hideWidgetHeading);
});
return true;
} else {
console.log("hideWidgetHeading() else called (Widget/ctrl.js line 440) ");
$scope.$watch('noWidgetHeading', function() {
$scope.hideWidgetHeading = false; //document.getElementById('noWidgetHeading');
});
return false;
}
if($scope.hideWidgetHeading) {
console.log("hideWidgetHeading is true- hide the widget heading: ");
}
return $scope.hideWidgetHeading;
}
and I have added the following CSS to my widgets.scss file:
.animate-show-hide.ng-hide {
opacity: 0;
}
.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
transition: all linear 0.5s;
}
.umw-tag-box {
opacity: 1;
}
When I load my page as it is presently, when I click the Settings button, the dialog opens up. If I then check the 'Hide widget heading' checkbox, and click Submit, the debug that I have added displays the following in the console:
Value of hideWidgetHeading: true
which tells me that the code inside the $scope.$watch(...){...} function is running.
However, if I click the Settings button, and then either don't check the 'Hide widget heading' checkbox, or check it and uncheck it again, and then click Submit, I get the same true value displayed in the console debug, which indicates that the code inside the $scope.$watch(...){...} function is running regardless of whether the 'watched' element changes or not.
Questions
How can I ensure that the code inside the $scope.$watch(...){...} only runs when the 'watched' element (i.e. the checkbox) has its value changed?
How do I actually 'call' the CSS that I've added to hide the HTML elements on the particular HTML that I want to hide? Or how do I make that CSS 'apply' to the HTML elements that I want to hide?
Edit
I changed the HTML for the checkbox to:
<input type="checkbox" ng-model="checked" name="noWidgetHeading" id="noWidgetHeading">
as suggested, and when I now browse to my page, and open the dialog, it displays the widget as I expect:
When I click the 'Settings' button on the widget, the 'Configure Item' dialog opens up on top of the page:
But when I select the 'Hide widget heading' checkbox, it actually hides the 'Tag' label & input box from the dialog:
The element I want to hide is actually displayed on the page from which the dialog box is opened, not on the dialog box itself... but I can't seem to work out how I can hide that using a control on the dialog... Any suggestions?
So, this should work, it is even the first example shown in their docs, with your code it will be:
<div data-ng-if="widget.name === 'tag-box'" ng-hide="viewModel.hideWidgetHeading"> <!-- class="ng-hide"-->
<div class="divider"></div>
...
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="logWidgetHeading()" ng-click="logWidgetHeading()" ng-checked="viewModel.hideWidgetHeading" ng-model="viewModel.hideWidgetHeading">
<!-- ng-model="viewModel.hideWidgetHeading" -->
<span></span>
</label>
</div>
</div>
</div>
you can keep functions on the events if you wan to log values, but there is no need for hiding. The ng-model directive will update your value and the ng-hide should follow.
function logWidgetHeading(){
console.log("Value of hideWidgetHeading: ", $scope.hideWidgetHeading);
}
What i was saying about function or var: in some cases, i used to have values from the scope that were not updated, and the solution was to introduce a function to be called to retreive the value. It is what i thought you were trying because ng-hide="hideWidgetHeading" shows the same name as your function: function hideWidgetHeading(){, that's why i first said that the round brackets were missing. So another version would be something like this (without ng-model on purpose, to show an alternate way to modify stuff with your events):
<div data-ng-if="widget.name === 'tag-box'" ng-hide="getHideWidgetHeading()"> <!-- class="ng-hide"-->
<div class="divider"></div>
...
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="toggleWidgetHeading()" ng-checked="isHiddenWidgetHeading">
<!-- ng-model="viewModel.hideWidgetHeading" -->
<span></span>
</label>
</div>
</div>
</div>
and the js:
//initialisation to the default value:
$scope.isHiddenWidgetHeading = false;
//function that toggles the value:
$scope.toggleWidgetHeading = function(){
$scope.isHiddenWidgetHeading = !$scope.isHiddenWidgetHeading;
};
//function to retreive the value:
$scope.getHideWidgetHeading = function(){
return $scope.isHiddenWidgetHeading;
};
Sorry i was a bit quick in naming vars and such, but you should get what you need here..