I have an Angular 2+ app which has a component with an array and I have an ngFor which I show and I bind with [(ngModel)] to the elements of the array.
I have a button which adds on click and empty record to the last element of the array to edit. What I want is to focus to the input field which is at the last element of the array.
I think I need to use ViewChildren for that (because it is an array) and not ViewChild. Most tutorials that I have found use ViewChild to focus to a single element. What I want is to focus to the input field of each new record.
Yes you would use ViewChildren for this. ViewChildren returns a QueryList, which has an accessor method for the first and last items in the QueryList intuitively called last. If your ViewChildren variable is called children, you can get the last element with children.last
Putting it all together,
children.last.nativeElement.focus()
Related
I am using react-animated-css, for simple animation in react. I have a list which I am rendering in a <ul> tag. I am adding animation to the first element of the list.
This list is getting updated every 3 seconds. And new element is added at the first position in the array.
The problem is, on load the animation is happening but not on update.
Here is full code : https://codesandbox.io/embed/ecstatic-cloud-qdpcj
I am not able to create a tag with 'react-animated-css' name as I am not eligible. It would be helpful if someone creates one for this.
You must define a key property for every element in a map. If you do not define one the array index is the default key. So the first element with key 0 will be reused after each render and only the last one will be added. If you define a key, the redrawing will based on the key value, and the first one will be added.
{items.map((d, i) => {
if (i === 0) {
return (
<Animated
key={d}
animationIn="bounce"
animationOut="flash"
animationInDuration={1000}
animationOutDuration={1000}
isVisible={true}
>
<li>{d}</li>
</Animated>
);
Here is the example: https://codesandbox.io/s/pedantic-darkness-vgp3f
From my point of view "react-animated-css" this library is not getting re-rendered once the state gets updated.
I have tried it with simple css animation property "#keyframe" and is working fine and getting re-rendered when state changes.
Code-sandbox link :
https://codesandbox.io/s/suspicious-dijkstra-h1q7u
I have quantity:number variable and quantityArray: number[] array. In my template i have two buttons and one input field. when i click the buttons or when i change input field quantity must increment or decrement. and quantityArray must change its length according to quantity. When i click buttons everything works fine. But when i change the input field quantity changes but length of quantityArray is not changing
here's link
Ensure the value is treated as number
return new Array<number>(Number(qty));
Plunker example
Change input type to "number". It's text for now.
<input type="number" [ngModel]="quantity" (ngModelChange)="qtyChange($event)">
In my AngularJS project, I am having a dropdown field as a directive and the values are coming from the backend.The user can also leave the field without selecting the dropdown(optional field) but the problem is, there is no empty field from the backend. So I need to add an empty field into the dropdown as default.
Since there is no option in the directive got struck in this issue.Googled a lot but didnt get any solutions yet.Kindly provide some suggestion.
Note:Client machine,cant post the code.
If there is no value set for the ng-model that the dropdown is bound to, Angular will provide a blank option by default that can be left in place (ignored) by the user and will result in your final value being whatever you set that ng-model to in the first place. If you need an actual empty string for the value, initialize it to that.
If you need to enable the user to select an empty value once they have already selected a value, you will need to add an empty value to the object that the dropdown is bound to. Add the empty value like this:
myPromise.then(function(data){
$scope.ddInfo = data;
$scope.ddInfo.unshift({id:'0000',text:'Not Applicable'});
});
Okay, I'm in a quandary..
The idea: A web app, that can show a list of all the players (in my DB). You should then be able to pick 2 players on the list and press a play button. Then be passed on to a new view WITH the two selected players..
So, what i need is to be able to select to players from my ng-repeat list and then pass their information from my JSON on to the next view.
For now, I just wanna print em' on the next view. I'll be able to figure out how to use them for the game myself once this is done.
Anybody? :(
The best way to select more than one value is using the $index associated with the every element. Push all the selected value into the array, and check for the index of the value in the array.
In Your view:
ng-class="{sel: selected.indexOf($index) >= 0 }"
In your controller
$scope.select= function(index) {
$scope.selected.push(index);
};
working demo:
http://jsfiddle.net/chella89/3G7Kd/173/
I have an unwanted behavior: The second dropdown remembers the old item? Why?
http://jsfiddle.net/Xku9z/ (fiddle borrowed from another thread)
Scenario:
Step 1. Select an item in the first dropdown
Step 2. Select an item in the second dropdown
Step 3. Select an item in the first dropdown (without selecting anything in the second one)
Step 4. Select the same item in the first dropdown as you did in step 1.
I have no clue how to resolve this, I've been using $scope.$watch on the ng-model="option2" just to get a grip on the problem without success.
Also, by setting option2 = null in the data-ng-change="getOptions2()" wont help:
$scope.getOptions2 = function(){
$scope.option2 = null;
};
Any ideas? Thanks
The behaviour you're experiencing is easier to understand if you watch the $scope.option2 value.
When you change the first dropdown you actually don't modify the $scope.option2 value. It stays the same: it's remembered. To make it work like you want just add one line
$scope.option2 = null;
at end of getOptions2 function. That's it. If you want more explanation of the current behaviour, read on.
Why does the second select go blank when I change the first one if the value is remembered?
<select> elements will show a selected value if and only if the value of ng-model can be found in the array bound to this element with ng-options.
Select first items from both dropdowns. Now:
$scope.option2 = "option2 - 1-1";
$scope.options2 = ["option2 - 1-1","option2 - 1-2","option2 - 1-3"];
As you can see the first variable can be found in the array so the value is displayed as currently selected. Now change only the first dropdown to the second item:
$scope.option2 = "option2 - 1-1";
$scope.options2 = ["option2 - 2-1","option2 - 2-2","option2 - 2-3"];
As you can see, $scope.option2 is not changed, but it's no longer in the $scope.options2 array. Therefore its value is not displayer as currently selected.