ive got a little problem with my Table. The implemented options are, that i can change the name from the item with clicking on the td or to change it by clicking on the pencil - but it does not disappear when i click on the X (means exit the input). When i'll change the name, a toast message appears, but the input field wont close (what its supposed to do).
I am attaching a screenshot of the table item and the html and ts code, just to know what is going on. Thanks in advance and happy replying! :)
input field (td)
It is the state when i have changed the name but the input field no longer closes!
<button
pButton
pRipple
class="p-button-outlined border-radius-0 bg-white p-button-icon-only p-button-default"
type="button"
id="cancel-edit-name"
(click)="cancel(group)"></button>
<button
pButton
pRipple
class="p-button-outlined p-button-icon-only bg-white border-radius-left-0 p-button-success"
type="button"
id="ok-edit-name"
(click)="onSubmit(group)"></button>
onSubmit(group: Group) {
if (group.name?.length > 0 && group.name.match('^[a-zA-Z0-9_ \-]+$')) {
group.active = false;
this.groupService.updateGroup(group).subscribe(this.messageService.observe('groups.group.edit.success'));
}
}
editGroup(group: Group) {
group.active = true;
}
cancel(group: Group) {
group.active = false;
}
<input id="group-name-edit" type="text" [(ngModel)]="group.name" pInputText (keyup.enter)="onSubmit(group)" (keyup.esc)="cancel(group)">
Did i miss something or am i just blind..
what do you mean by "the input field no longer closes" ? Do you mean lose focus ? If so you can call the blur function:
input.blur();
Related
I'm trying to get it so when one or more checkbox is clicked, I'm able to get a button to appear. I would like the toggle function to work if one or more checkbox is clicked, but instead, it will turn on when I select one checkbox, then turn off during the next selection. I'm sure I've got a couple of unnecessary properties added into here as well, but not too concerned about that. Any help would be appreciated.
HTML: Button
<button class="btn btn-primary"
*ngIf="switchCase" style="float:right"
>Save</button>
HTML: Checkbox Column
<kendo-grid-column field="checkbox" editor="boolean">
<ng-template kendoGridCellTemplate let-dataItem id="flexSwitchCheckChecked"
>
<input type="checkbox" (click)="toggleButton(dataItem, 'checkbox'
[checked]="dataItem.checkbox"
[width]="40"
>
TS: Button click method
public switchCase: boolean = false;
toggleButton() {
this.switchCase = !this.switchCase;
pass an event to your function then access its value from typescript class:
Step1(pass an $event):
on *ngFor tag level add an index var
<div *ngFor="let item of items;let i = index" >
<input type="checkbox" (change)="toggleButton($event,i)">
</div>
Step1(get its value):
toggleButton($event,i) {
let newValue = $event.target.value;
// this.switchCase =newValue;
this.items[i].checked = newValue;
}
I'm trying to make an Edit button, with an input field that appears/disappears when the button is pressed. It was working previously, however when I tried to make a Display form, it doesn't seem to recognize the "title.value" This is very strange. I'm using Boolean for an "edit" variable combined with a *ngIf to show/hide the form. If I take the *ngIf="edit" off, it works normally as a form that displays what you're written. Am I missing something?
Here's the HTML:
<input type="text" #title *ngIf="edit"/>
<button (click)="edit = !edit">Edit</button>
<button (click)="getTitle(title.value)">Get Title</button>
<h2>{{groupTitle}}</h2>
and here's the .ts:
public edit = false;
public groupTitle = "";
getTitle(val) {
this.groupTitle = val;
}
You have a problem with implementing together the ngIf directive and a reference to your input element as #title. In that case you can use hidden instead of ngIf.
Here's your html:
<input type="text" #title [hidden]="!edit"/>
<button (click)="edit = !edit">Edit</button>
<button (click)="getTitle(title.value)">Get Title</button>
<h2>{{groupTitle}}</h2>
There are couple more elegant ways to bind a value and render it on a page.
The first one is to get rid of the Get title button and use (input) method directly on an input element.
In that case, Html looks like:
<input type="text" #title *ngIf="edit" (input)="getTitle(title.value)"/>
<button (click)="edit = !edit">Edit</button>
<h2>{{groupTitle}}</h2>
The second one is to use [(ngModel]) instead of the getTitle method and bind your input value directly to the groupTitle variable.
Html will look like:
<input type="text" #title *ngIf="edit" [(ngModel)]="groupTitle"/>
<button (click)="edit = !edit">Edit</button>
<h2>{{groupTitle}}</h2>
Your .ts file:
edit = false;
groupTitle = "";
Execution:
I have several Material Checkboxes in a Material Dialog Component. They represent a column filter for a table:
<h1 mat-dialog-title>Filter</h1>
<div mat-dialog-content>
<ng-container *ngFor="let column of allColumns; index as i; first as firstEntry ">
<mat-checkbox *ngIf="!firstEntry" class="checkbox" [checked]="checkedList[i]" [aria-label]="column" (click)=doToggle(i)>{{column}}</mat-checkbox>
</ng-container>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">Abbrechen</button>
<button mat-button [mat-dialog-close]="allColumns" cdkFocusInitial>Reset</button>
<button id="ok-button" mat-button [mat-dialog-close]="displayedColumns" cdkFocusInitial>Ok</button>
</div>
When I click on a Checkbox I want to check it. All booleans of the Checkboxes are saved in a boolean array named checkedList. When I click on a Checkbox the method doToggle(i) gets executed.
doToggle(i: number){
if(this.checkedList[i]){
this.displayedColumns[i] = this.allColumns[i];
}
else{
this.displayedColumns[i] = null;
}
this.checkedList[i] = !this.checkedList[i];
}
The method also fills or empties the values at the appropriate position of the column list. At the end of the method it negates the boolean at the appropriate position in the checkedList.
Problem:
I always have to click twice on the Checkbox to check or uncheck it. The values are added or removed properly. But still I have to click two times on the checkbox. Why is that?
Try sending the value of checkbox in the click event.
Add template reference variable(#ck) to checkbox and get its value ck.checked
[checked]="checkedList[i]" [aria-label]="column" #ck (click)="doToggle(i,!ck.checked)"
and in doToggle function
doToggle(i,value){
this.checkedList[i] = value;
if(this.checkedList[i]){
this.displayedColumns[i] = this.allColumns[i];
}
else{
this.displayedColumns[i] = null;
}
}
I have a scenario where I want to change the button text depending upon the which user is logged in. Also, I get the logged user info like below
#ViewBag.CurrentGroupName
Also here is my button html
<input type="button" class="button approve" value="Accept" onclick="return SaveFiberData('Approve');" />
Now what I want is
if CurrentGroupName == FL and CurrentGroupName == FE then text should be Accept else it should be Approve.
How should I do it in MVC
You can conditionally render the value attribute value of the button
<input type="button" class="btn"
value="#((ViewBag.CurrentGroupName=="FL"||ViewBag.CurrentGroupName=="FE")?
Html.Raw("Accept"):Html.Raw("Approve"))"
onclick="return SaveFiberData('#((ViewBag.CurrentGroupName=="FL"||
ViewBag.CurrentGroupName=="FE")? Html.Raw("Accept"):Html.Raw("Approve"))');" />
While this works, I would recommend moving the if condition check to a helper method and use that. So if you ever have to add a third state to the condition, you make the change in a single place.
You can create a custom html helper and use that to render your button.
Create a view called MyHelper.cshtml inside the App_Code folder (create one in the web app root if that does not exist). Add the below helper method code to that
#helper MyButton(string item)
{
var b = "Approve";
if (item != null && (item == "FL" || item == "FE"))
{
b = "Accept";
}
<input type="button" class="btn" value="#b" onclick="return SaveFiberData('#b')" />
}
Now in your view, you can call this helper
#MyHelper.MyButton(ViewBag.CurrentGroupName)
I have an *ngFor which gives me the certain item list of goods and I click a particular button to choose them. As I click my choose button, it temporarily disables the button till the time I get response from my back-end. As I get my response from back-end, the button becomes active to un-choose the item.
The issue I am facing here is, as I click the choose button, it makes all buttons of the list temporarily disabled. But what I want is to make only the clicked button disabled.
My HTML code snippet:
<ion-card *ngFor="let list of list_Array;>
<ion-card-content >
<p style="color: #666; " [innerHTML]="list.item"></p>
</ion-card-content>
<button ion-button color="secondary" clear (click)="activeButton(list._id)" *ngIf="list.isAlreadyChosen==true" [disabled]="ChooseButton">
<div class="chosen"
ng-class="{'chosen': isChosen}">
<p >choose</p>
</div>
</button>
<button ion-button color="secondary" clear (click)="activeButton(list._id)" *ngIf="list.isAlreadyChosen==false" [disabled]="ChooseButton" >
<div class="choosen"
ng-class="{'chosen': isChosen}">
<p >choose</p>
</div>
</button>
</ion-card>
Currently you have ChooseButton flag global, that's why as soon as you change that flag, it reflects everywhere in component context.
Make the ChooseButton property local to each collection element i.e. list.ChooseButton.
[disabled]="list.ChooseButton"
For applying the above you should change the activeButton function to below, before that pass list object on click of button like (click)="activeButton(list)"
Function
activeButton (item) {
item.ChooseButton = true;
console.log("listId", item._id);
}
Answer 1:
As #Pankaj Parkar's answer said - Each item in your list_Array needs to have it's own flag chooseButton, than having 1 common flag for all items to make only the clicked button disabled.
Now, say you have loaded your list_Array. You can use following for loop to add this property to it and set it to false initially:
for(var i = 0; i < list_Array.length; i++){
list_Array[i]['chooseButton'] = false;
}
Now, pass the list as parameter from your UI code to activeButton(list) method like : (click)="activeButton(list)" (Remember to pass an entire object here than list._id as you have done).
Now, in your method:
activeButton(list) {
list.chooseButton = !list.chooseButton;
}
Here, I have negated list.chooseButton to it's previous value (true -> false or false -> true). Hope this helps.
Answer 2:
You already have list.isAlreadyChosen present in your list_Array.
Just do [disabled]="!list.isAlreadyChosen" in first button and [disabled]="list.isAlreadyChosen" in second should solve your problem. Easy. ;)
Here is another way to achieve this:
//component
disableMe:boolean[];
disableThis(id){
this.disableMe[id] = !this.disableMe[id];
}
//template
<button ion-button color="secondary" clear (click)="activeButton(list._id); disableThis(list._id)" *ngIf="list.isAlreadyChosen==true" [disabled]="disableMe[list._id]">
<div class="chosen"
ng-class="{'chosen': isChosen}">
<p >choose</p>
</div>
</button>