I'm trying to send the id of a element from html to the function, this because it changes in the ts, so I have a click function but function(this.id) doesnt work
here is my code
the html
<button id="btnNext" class="btn" (click)="nextGeneral(this.id)">next</button>
the ts
nextGeneral(id:number){
alert(id)
}
If I understand correctly, you want the id attribute from the <button> (i.e. btnNext) to be passed into the nextGeneral() function (although this function is currently expecting a number not a string, so correct me if I'm wrong).
This is how you could achieve that dynamically:
.html
<button id="btnNext" class="btn" (click)="nextGeneral($event)">next</button>
.ts
nextGeneral(event: PointerEvent){
const id: string = (event.target as HTMLElement).id
alert(id)
}
this is not available inside a template. You might want to use 'btnNext' as the parameter instead, but its too vague from your description.
So replace the template's (click)=nextGeneral(this.id) with (click)=nextGeneral('btnNext') and it will work and also might fit your requirements. Does it fit?
Stackblitz
One of the cleanest way to achieve it is by using template reference in angular.
<button id="btnNext" #myButton class="btn" (click)="nextGeneral(myButton)">next</button>
Inside your nextGeneral
nextGeneral(button: HTMLButtonElement) {
alert(button.getAttribute('id'));
}
Running Solution - https://stackblitz.com/edit/angular-ivy-ohxfa5?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Related
I have got simple question: how to create binding between button and textarea? I see that like:
html
<textarea [value]="test"> <button (click)="onclick($event)>
ts
onclick(event: Event) {
this.test = ($event.HowToChooseTarget as HTMLInputElement).value;
}
As you can see, the problem is to choose target element there. How to do this?
Thank you for any help.
There are multiple ways to achieve this.
With help of template ref variable
<textarea #test [value]="test"> <button (click)="onclick(test.value)>
Use ngModel and directly access the value in your component file with "this.test"
<textarea [(ngModel)]="test"> <button (click)="onclick($event)>
I currently have an Angular component that contains a solutions array that I want users to be able to manually alter. I already have a button that allows users to dynamically add to this array, but I'm trying to implement deletion. I want a select box to be displayed that contains all of the solutions, then when the user clicks one of the options and hits "delete solution", it will remove that element from the array.
Currently the html of my component looks as follows:
<div *ngIf="logged" class="solutionsInput">
<div>
New Solution:
<div>
<textarea id="Solution" [(ngModel)]="newSolution" placeholder="None"></textarea>
</div>
</div>
<button class="add-solutions" (click)="addSolutions(defect)">
Add Solution
</button>
<!-- BELOW IS THE PART THAT NEEDS TO BE FIXED -->
<select id = "solutions"></select>
<button class="delete-solutions" (click)="deleteSolutions(defect)">
Delete Solution
</button>
</div>
The typescript of my component looks as follows:
defect.solutions = [] //THIS IS WHAT I WANT TO ALTER
newSolution = "";
addSolutions(defect: Defect): void {
if(this.newSolution !== "") {
this.defectService.getSolutionsHelper(defect).subscribe((currSolutions) => {
//not necessary to see all of this
})
});
}
}
deleteSolutions(defect: Defect): void {
//THIS NEEDS TO BE IMLPEMENTED
}
Are there any ideas for what I should do? Thank you so much in advance for your help!
When I run into these situations, I use a multiselect drop down list. My team uses the Kendo UI for Angular pack, but there are other free choices, like this one:
https://www.npmjs.com/package/ng-multiselect-dropdown
With this approach, you can simply bind your results from the call to this.defectService.getSolutionsHelper to the control (defect.solutions), and then the user can delete individual members from easily selectable items. Since the control is bound to defect.solutions, the control will natively trim the array.
This may work for you. Good luck!
in angular 2 there is a button that I want when click on it a div appear.
<button class="dokme" type="button" (click)="onSelect(signUp)" >Register</button>
<div *ngIf="selectedBtn">
<div>Hello</div>
</div>
and I couldn't complete my component, because I don't know how I should write it:
onSelect():void{
this.selectedBtn=...(?)}
Actually I know it can be similat to "Hide the empty detail with ngIf" in angular tutorial Hide the empty detail with ngIf, but the problem is I can't change that code to what I want. Because in that example there is hero and I don't know what should I replace it.
please help me in the simplest way it would be your kind.
The expression you pas into (click) will be executed when you click on the button.
If the expression you pass into *ngIf is true, the content inside the element will be present on the page. Otherwise, it will not.
So, what you ned to do is to change the value of selectedBtn when (click) event happens.
Template
<button class="dokme" type="button" (click)="onSelect()" >Register</button>
<div *ngIf="selectedBtn">
<div>Hello</div>
</div>
Component
onSelect() {
this.selectedBtn = true
}
Just set the variable to true
onSelect() {
this.selectedBtn = true;
}
ngIf works in a simmilar way that if statement in other programming languages so it checks for condition and if it is true (or if a function called in condition returns true). In this case, your ngIf is linked to component variable selectedBtn so only what you need to do is set it to true:
this.selectedBtn = true;
More easily, you can achieve the sane goal without creating new function in your controller.
<button class="dokme" type="button" (click)="selectedBtn=true" >Register</button>
<div *ngIf="selectedBtn">
<div>Hello</div>
</div>
Or if you want the button to toggle :
<button class="dokme" type="button" (click)="selectedBtn=!selectedBtn" >Register</button>
<div *ngIf="selectedBtn">
<div>Hello</div>
</div>
I've got an irritating problem with data binding using ng-model and button.
The principle of operation of my site:
My HTML site displays a list of projects (loaded from external .json file).
Each row has a button named Edit which displays a modal containing some <input type="text" filled with relevant data about project (like project.name, project.date etc.)
Initial value of input is equal to object data (text-input called Name will contain project.name etc.)
Object is modified only if you click Save button and confirm the operation (confirm(sometext) is okay).
Closing the modal, not clicking the button or pressing cancel on confirmation box should prevent data from being updated.
Editing input (let's say that project.name is "Project2" and I modify it by adding 3 numbers resulting in "Project2137"), closing modal and opening it again should result in "Project2" text inside input (because object wasn't modified, only input)
So far I understand that single text input should look like this
<input type="text" id="editName" class="form-control" ng-model = "project.name">
Using ng-model means that they are binded. That's what I know. However editing input means that object is updated as soon as I enter some data.
I tried to fiddle with ng-model-options but I didn't find any possible solutions.
I tried to do it programmatically as well using
<input type="text" id="editName" class="form-control" value = {{project.name}}>
....
<button type="button" class="btn pull-right btn-primary btn-md" ng-click="edit(project)" data-dismiss="modal" >Save</button>
And function:
$rootScope.edit = function(project)
{
if(confirm("Are you sure to save changes?"))
{
project.name = angular.element(document.getElementById('editName')).val();
// ...and so on with other properties
This solution is kinda close to what I wanted to achieve (object is updated only on confirm), but I faced another problem: input loads data from object only once at the beginning instead of each time the modal is opened which is against rule #5
Is there any way to fix this using either ng-model bind or custom function? Or maybe there is some other, easier way?
--EDIT--
Here I don't have any problem with saving the data using a button, everything works well and clicking Save is reflected in a projects list. (well until I hit a F5 key).
The problem is that input text is not properly binded to project and that's what I want to fix.
Sample data (pseudocode)
project1.name = "Proj1"
project2.name = "Proj2"
I click an Edit button on row #1
Text input displays "Proj1". Everything is fine.
I change input by adding some random characters like "Proj1pezxde1"
Text input is now "Proj1pezxde1"
I do not click Save button.
I close the modal.
Project summary still displays "Proj1". Okay.
I click an edit button on first row
10. Text input is "Proj1pezxde1" even though I didn't modify an object.
Text input should read data from object again (each time I open this modal) and thus display "Proj1"
That's the problem I want to fix. Sorry for being a little bit inaccurate.
You can create a copy of the project object in modal controller and use this object to bind with the input element of the modal
$scope.copyProj = angular.copy($scope.project);
Assign the copy object properties to project only when save is clicked.
As per my understanding after reading the provided descriptions, you have a list of projects, which is being used as in an repeater and you want to bind each projects data to a Text box and a Button.
Have you tried initializing your Projects object following way?
$scope.projects = [
{ 'name': 'proj1', 'id': '1' },
{ 'name': 'proj2', 'id': '2' }
];
Then you can do something like below to show your data
<div ng-repeat="project in projects">
<div>
<input type="text" class="form-control" ng-model = "project.name">
<button type="button" class="btn pull-right btn-primary btn-md" ng-click="edit(project)" data-dismiss="modal" >Save</button>
</div>
</div>
The simplest way to do this in my opinion is using a second object that is a copy of the project, and after confirmation applying the changes to the original project object.
For example, a simple "pseudo code" of a controller:
function MyCtrl($scope) {
$scope.projects = [...];
$scope.currentProject = null;
$scope.edit = function(project) {
$scope.currentProject = angular.copy(project); // This will create a copy so the changes in $scope.currentProject will not reflect.
// Open dialog with input bound to $scope.currentProject
if (confirm) {
// Assign all properties from currentProject to project
angular.extend(project, $scope.currentProject);
}
}
}
So , as I understand from your question , you need to update the project data only if it is saved. To do that you can maintain a copy of the actual object which get updated only it is saved like below :
Here we are using angular.copy(), which does a deep copy of the source object.
$scope.original = {name : "xyz"};
$scope.project = angular.copy(original);
//Call this when the user confirms to save , here we are replacing the
//original copy with the latest object that needs to be saved.
$scope.save = function () {
$scope.original = angular.copy($scope.project);
}
//Call this when closing the modal or clicking cancel or when losing
//focus, this will reset the changes to the original copy.
$scope.reset = function () {
$scope.project = angular.copy(original);
}
I have defined a custom DOM element, but when placed inside a form, it does not submit it. How can I get the form to submit when I click the button?
<form action="/foo" method="GET">
<my-button type="submit">click me</my-button>
</form>
This is the prototype configuration for the custom element:
myButton = Object.create(HTMLButtonElement.prototype);
The template for the button looks like this:
<template>
<button type="submit" id="button"><content></content></button>
</template>
Came across this question today, but found a more modern alternative subsequently: web components can now be native form elements. There's a great read on the topic here.
The long and the short of it is you can now associate custom components with a form, meaning they're included in the form's elements property - a HTMLFormControlsCollection of all the elements controlled by the form.
To do this, you need to add the following to your component:
class MyComponent extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.internals = this.attachInternals();
}
}
this.internals will then contain everything you need to interact with the form in question, e.g. this.internals.form, this.internals.setFormValue(), this.internals.checkValidity().
For the submit button, you could, for example, use:
connectedCallback() {
const { internals: { form } } = this;
this.buttonEl.addEventListener('click', () => form.submit());
}
You are doing it wrong. Though event bubbling from shadow DOM to owner document is somehow possible, it’s tricky and in general is a wrong approach. Instead of hiding button into shadow, one should use is= attribute of button:
<form action="/foo" method="GET">
<!--my-button type="submit">click me</my-button-->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->
<button type="submit" is="my-button">click me</button>
</form>
More info.
When your custom element extends a native element like HTMLButtonElement, you can no longer use a custom tag name like <my-button> (unfortunately). You have to use the native tag with the is= attribute:
<button type="submit" is="my-button">
If you do not extend a native element (called "type extension" in the spec), then you can use your custom tag name. Type extension example in the spec