We Keep Coding

How to make mat-select first option null?

I use 3 mat-select for day-month-year selection as shown on this DEMO.
I need to make the first options as null or undefined and modify that code as shown below:
allDates: number[] = [null];
dates: number[] = [null];
months: number[] = [null];
years: number[] = [null];
But I am not sure if it is a good idea or is there a proper way for mat-select. I also try to set [value]=null for the mat-select options, but in that case it does not receive the value properly. So, what is a proper way for this?

Is there a reason they need to be null? In my opinion it is more confusing to have a blank option.
Play around with the stack blitz to see how it behaves when initialized as an empty array vs when it is bound to an array with one null item. I think the UX is great when the mat-select is bound to an empty array. The mat-label resides in the select box, easy to see what type of data is in the select. Also when you click it, it doesn't show any options, because there aren't any. If you have a null, then the dropdown opens with one blank item.
I don't think there is anything wrong with the code you provided.
Edit:
You can bind the mat-select item with an object and use a display property to show the text and a value property to bind to the actual value.
Say you have an interface like this:
export interface DateSelectItem
{
value: number;
label: string;
}
let dates: DateSelectItem[] = [
{
value: -1
label: "None"
}
];
selectedDate: DateSelectItem;
in the template:
<mat-form-field>
<mat-label>Date</mat-label>
<mat-select [(ngModel)]="selectedDate">
<mat-option *ngFor="let date of dates" [value]="date">
{{date.label}}
</mat-option>
</mat-select>
</mat-form-field>
You can use just strings and convert them back and forth with their number equivalents.
Or if you use an object you can use the label property to display something other than the value.
EDIT: Modified StackBlitz
You will probably need to update the business logic on what you want the resulting date to look like if the user selects 'None' for day-of-the-month.
Updated StackBlitz

Ng-Select Selected are not updating from ngModel

I'm experiencing a problem that has me stumped. I have an ng-select. When loading records to the ngModel, it doesn't change the ng-select. The weirdest part is that on another page, the same code works.
I've tried numerous different options, even creating new arrays just to test. Also tried setTimeout to see if something is clearing the selection.
The HTML code
<label>
Add a Secondary channel
</label>
<br />
<ng-select placeholder="Select schools" items="schoolsArray" [(ngModel)]="selectedSecondSchools" [multiple]="true" name="secondSchools"
#secondSchools="ngModel">
</ng-select>
</div>
The one function in the component. The array is declared as selectedSecondSchools[] = [];
getVodEventGameSecondaryChannels(vodEventId: number, vodEventGameId: number): string[] {
let schoolIds: string[] = [];
this.vodEventService
.getVodEventGameSecondaryChannelsByGameId(vodEventId, vodEventGameId)
.subscribe((sc: IVodEventGameSecondaryChannels[]) => {
sc.forEach(gsc => {
schoolIds.push(
gsc.schoolId.toString());
});
});
this.eventGame.gameSecondaryChannelIds = schoolIds;
this.selectedSecondSchools = schoolIds;
return schoolIds;
}
When the data is returned, the returned IDs need to be selected within the ng-select and displayed.

It depends on the type of schoolsArray. In your case, I guess, schoolsArray is a list of objects, while ngModel is an array of strings. ng-select doesn't know how to map strings from ngModel to objects from items.
Please see documentation for property bindValue to inform ng-select how to bind items keys to the model. https://github.com/ng-select/ng-select
To summarize, add bindValue="id-property-name-in-items" to ng-select tag.

mochaJS: iterating in json

i have following issue, i have part of json returned by api:
...
"name": "NEWS",
"products": {
"10432471": {
"id": 10432471,
"productConfig": [
...
]
},
"10432481": {
"id": 10432481
},
"17300241": {
"id": 17300241
},
"17300251": {
"id": 17300251,
"productConfig": [
...
]
},
"18420501": {
"id": 18420501
}
}
...
and i want to get random simple product id (simple product means that it dont have productConfig field inside)
for (i=0;i<res.body.menu.categories.length;i++){
if(res.body.menu.categories[i].name=='NEWS'){
availableProducts = Object.keys(res.body.menu.categories[i].products);
console.log ('avbl prods from news category: ',availableProducts);
for (j=0;;j++){
random=Math.floor(Math.random()*Object.keys(res.body.menu.categories[i].products).length);
if(assert.notInclude(res.body.menu.categories[i].products[random],'productConfig')){
availableProductIdForDelivery = res.body.menu.categories[i].products[random].id;
break;
}
}
}
}
This code gives me error in line with second if (if(assert.notInclude....)) Uncaught AssertionError: object tested must be an array, a map, an object, a set, a string, or a weakset, but undefined given.
So, inside "products" we dont have array, becouse there're {}, not []?
There's any other way to iterate beetween products (their numerical names are changed everyday) and save id to availableProductIdForDelivery

Take a look at the documentation: http://www.chaijs.com/api/assert/#method_notinclude
You see that the first parameter must be Array, String or haystack. Let's take a look at the error message you have given:
Uncaught AssertionError: object tested must be an array, a map, an
object, a set, a string, or a weakset, but undefined given.
This error message indicates that something was undefined instead of the possible expected types listed in the message. I guess it was the first parameter, but it might be the third as well, since you did not pass anything as the third parameter, so it is undefined.

So, inside "products" we dont have array, becouse there're {}, not []?
Correct. As far as I can tell, you are trying to apply an assertion to res.body.menu.categories[i].products[random], but because products is an object (and not a list) attempting to retrieve an index (as oppose to one of the keys defined in the object) with products[random] returns undefined.
If you want to create a list of products in order to evaluate their contents, you may be able to use Object.values(res.body.menu.categories[i].products)[random]. As far as I am aware, this feature is only standard as of ES2017. You may also be able to apply a map function to your availableProducts object to retrieve the corresponding values for each product key.

Ok, thanks for help, now its works as i want. Below my solution, maybe it help someone in the future:
for (i=0;i<res.body.menu.categories.length;i++){
if(res.body.menu.categories[i].name=='NEWS'){ //random simple product from 'news' category
availableProducts = Object.keys(res.body.menu.categories[i].products);
console.log ('avbl prods from news category: ',availableProducts);
while(availableProductIdForDelivery==''){
random=Math.floor(Math.random()*Object.keys(res.body.menu.categories[i].products).length);
if((Object.values(res.body.menu.categories[i].products)[random].productConfig).length==0)
availableProductIdForDelivery = Object.values(res.body.menu.categories[i].products)[random].id;
}
console.log('random simple product: '+availableProductIdForDelivery) ;
}
}

Can someone explain Angular as-for-in expression notation?

In Angular loops (ng-repeat, ng-options) you can use the following syntax:
item as item.label for item in items
Can someone please explain what each of the tokens in the expression is doing there and what it means? Can you point me to the documentation of this? I can't figure out what to search for (searching for 'as' or 'for' is useless). It is not mentioned in the documentation for ng-repeat or ng-options.
I know that somehow it lets you pick an object from a list of objects, but 'item' appears in the expression twice and it is not clear to me what the role of that token is in this expression.
Sorry if this is all documented some place which I can not find....

You have an array "items". And you are interating through it with
item in items
As the example you have copied incompletely from this page "https://docs.angularjs.org/api/ng/directive/ngOptions" would normally create a dropdown, there would be now the problem that the "item" object you currently have in your iteration has more fields than just a string to show as label for your dropdown entry. Here is the object again:
$scope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
So what do you want to show then? Yeah, you want to show "item.label".
And thats what
item as item.label
does. It tells the loop to use the current "item.label" value as "item" for this specific loop.

Angular.js model not updateing after first time

I have an example here:
http://www.search-this.com/examples/angular-help/
If you double-click "Text Message" in the list it brings up an input box.
type "one" in the input box and click the update button.
Notice the console.log
click SmsResponseActionParmAndValue to expand and locate the "Text Message" option
click ParmAndValue to expand and notice the Value property has our "one" value we typed in.
Now type two in the input box and look at the console.log and notice it doesn't update? It only updates the first time?
Help please...

which is getting updated in selected object not in main JSON object.
$scope.updateDetails = function () {
console.log("update");
console.log($scope.actions); //
console.log($scope.selectedAction); // look in this object updated you have to override it to original object or use 2 times ng-repeat to bind.
};

This is very ugly i know but its a solution:
$scope.updateDetails = function() {
angular.forEach($scope.actions.SmsResponseActionParmAndValue,function(action){
if(action.Description === $scope.selectedAction.Description){
console.log($scope.selectedAction)
action.ParmAndValue = $scope.selectedAction.ParmAndValue
return;
}
});
console.log($scope.actions)
};
The problem is that the updated model doesn't point to the same array in memory as the original object so we have to update the array that the original object points to.