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
Related
I have an ngFor loop going on some membership options. I would like to change the text inside the button from select to selected once the user chooses their options. The code i have now unfortunately changes all three buttons to selected when one has been clicked.
Typescript:
export class SelectPlanComponent implements OnInit {
plans: any;
selectedPlan?: Plan;
buttonValue = "Select";
constructor(private service: PlansService) { }
ngOnInit(): void {
this.service.getPlans()
.subscribe((response) => {
this.plans = response;
console.log(response);
});
}
onSelect(plan: Plan): void {
this.selectedPlan = plan;
this.buttonValue = "Selected"
}
}
HTML:
<div class="card" *ngFor="let plan of plans">
<h2>{{plan.title}}</h2>
<p >£{{plan.amount}}</p>
<p>{{plan.duration}}</p>
<div class="benefits-container">
<div class="benefits" *ngFor="let item of plan.description.items">
<div class="icon-container">
<mat-icon>check</mat-icon>
</div>
<p>{{item}}</p>
</div>
</div>
<a class="inverted-button" [class.selected]="plan === selectedPlan" (click)="onSelect(plan)">{{buttonValue}}</a>
</div>
Thank you in advance
You should create a property on the Plan object to keep track of whether it has been selected or not. Do this by modifying your Plan class to include a selected property, like this:
export class Plan {
// existing properties go here
selected: boolean;
}
Then, in your onSelect() method, you can set the selected property on the plan object to true when it is selected, like this:
onSelect(plan: Plan): void {
this.selectedPlan = plan;
plan.selected = true;
this.buttonValue = "Selected";
}
In your HTML, you can use this selected property to conditionally render the "Selected" text on the button, like this:
<a class="inverted-button" [class.selected]="plan === selectedPlan" (click)="onSelect(plan)">
{{ plan.selected ? "Selected" : "Select" }}
</a>
You currently have one variable which is bound to all buttons. What you could do is the following
Checking if the selectedPlan is the plan for the current button
<div class="card" *ngFor="let plan of plans">
<h2>{{plan.title}}</h2>
<p >£{{plan.amount}}</p>
<p>{{plan.duration}}</p>
<div class="benefits-container">
<div class="benefits" *ngFor="let item of plan.description.items">
<div class="icon-container">
<mat-icon>check</mat-icon>
</div>
<p>{{item}}</p>
</div>
</div>
<a class="inverted-button" [class.selected]="plan === selectedPlan" (click)="onSelect(plan)">{{plan === selectedPlan ? 'selected' : 'select' }}</a>
</div>
and after that you can change your TypeScript Code as follows:
onSelect(plan: Plan): void {
this.selectedPlan = plan;
}
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.
In my Home page, I have a search bar and imported three components. my search bar have the ability to search through them but just wondering how can I hide a particular component if a result in not found in that component and only show a component that have a result.
The problem I have right now is, if search result is only found in Application group component then, the attachment and training component is showing me blank (pls check uploaded image below). I just want to hide the components that don't have the result while user is filtering/searching and just show it back the component when a user cancel the search.
I would be really appreciated if I can get help or suggestion on this.
<!-- attachments -->
<div>
<app-attachment [attachments]="entity.attachments"></app-attachment>
</div>
<!-- appgroups -->
<div *ngFor="let entityGroup of entity.entityGroups">
<app-application-group [entityGroup]="entityGroup" [entity]="entity"></app-application-group>
</div>
<!-- Training and Support -->
<div>
<app-training [entity]="entity"></app-training>
</div>
</div>
ngOnInit(): void {
this.searchText$ = this.searchService.searchText
.asObservable()
.pipe(debounceTime(750), distinctUntilChanged())
.subscribe((value) => {
this.filterValue = value;
this.loadApplication(this.entityType, this.entityId);
});
this.collapse = false;
this.expanded = true;
this.route.url.subscribe((_value) => {
this.entityType = BaseEntity.stringToType(_value[0].path);
this.entityId = Number(_value[1].path);
this.loadApplication(this.entityType, this.entityId);
this.populateMeetups(this.entityId);
});
}
loadApplication(entityType: EntityType, entityId: number): void {
this.color = BaseEntity.color(this.entityType);
if (this.entityType && this.entityId) {
// this.filterValue = null;
this.childrenActive = null;
this.pageSize = 999;
this.childrenActive = true; // We want to bring only active children for things that have tables.
}
this.entityService
.getApplicationDetails(
entityId,
entityType,
this.pageSize,
this.childrenActive,
this.filterValue,
)
.subscribe((entity) => {
this.entity = entity;
this.ancestor = this.entity.channels.get(0);
this.entityGroup = this.entity.entityGroups.filter(
(r) => r.entityType === EntityType.Application,
);
this.entity.attachments = this.entity.attachments.filter((app) => {
return app.name.toLowerCase().includes(this.filterValue.toLowerCase());
});
});
}
click here to view my screenshot
Use *ngIf to remove stuff from the DOM you don't want to show. For example:
<ng-container *ngIf="entity.attachments?.length">
<div>
<app-attachment [attachments]="entity.attachments"></app-attachment>
</div>
</ng-container>
Or hide it with css:
<div [ngClass]="entity.attachments?.length ? 'show' : 'hide'">
<app-attachment [attachments]="entity.attachments"></app-attachment>
</div>
and the css:
.hide {
visibility: hidden;
}
You may want to consider placing the *ngIf inside the child component instead of the parent.
Try to use ngIf by checking the length of the search result instead of creating a new variable. Also use else block to display no result found as shown below
Show result here
No result found .
I am creating a simple program in Electron. The program has the option of running several separate functions based on what the user needs. All functions require a file to be inputted and a save location for the resulting output file. This is done using a form. I would like to have it that once the user inputs the locations it is displayed in a div beside the input buttons. Is there a way to do this within electron?
code:
<!-- File Input Section -->
<div class = "individual-input-container-2">
<div class="input-container" >
<div class = "inner-input-container">
<input type="file" id="file-input" class = "input-top" >
<p class = "input-desc-file">File</p>
</div>
<div>
</div>
</div>
<div class="input-container">
<div class = "inner-input-container">
<input type="file" webkitdirectory id="save-input"class = "input-bottom">
<p class = "input-desc-save">Save Location</p>
</div>
</div>
</div>
Here is photo of what I am building
I did something similar a while back and mine looks like this:
HTML:
<button id="choosePath">Choose Folder</button>
JS:
const { dialog } = require('electron').remote;
document.querySelector('#choosePath').addEventListener('click', (e) => {
dialog.showOpenDialog({
title:"Select Directory",
properties: ["openDirectory"]
}, (folderPaths) => {
// folderPaths is an array that contains all the selected paths
if(folderPaths === undefined){
return;
} else {
// Do something with the folderPaths variable
}
});
});
It's basically just an ordinary button opening a Dialog Window where you can select a path.
If you did select one the full Path is passed to a callback function where you can use it to do whatever you have to do with it.
You can try Electron's dialog.showSaveDialog ()/dialog.showSaveDialogSync () functions. They return a Promise<string> or a string representing the file/folder which was selected by the user, respectively. Then you can easily display in your <div>.
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>