Develop Reference

ng model value refreshes

The value I am displaying if the value of ngModel but the thing is everytime I selct new date on the calendar or update the new date it refreshes the ngmodel and data took like 2-3 seconds before its show , want I want is just it should not blink like on the recording below , it show always display . Any idea guys that might help ?
the ngmodel value should not refresh if there are no value changes
#recording
#html code
<td >
<div style="width:110px;" fxLayout="row" fxLayoutAlign="center center">
<input
(click)="openPicker(pickerTargetDate);"
([ngModel])="data.targetDate"
class="entitlements-body-picker-font"
(dateChange)="dateChange(targetDate')"
[matDatepicker]="pickerTargetDate">
<mat-datepicker #pickerTargetDate></mat-datepicker>
<mat-icon class="date-icon" (click)="openPicker(pickerTargetDate);">calendar_today
</mat-icon>
</div>
</td>

how to create search bar dropdown in angular 4?

I have created below search bar component which interacts with API every time a key is pressed.
<div class="fill-remaining-space">
<md-input-container class="example-full-width" color="accent">
<md-icon mdPrefix>search</md-icon>
<input type="text" mdInput #input (keyup)="search(input)">
<md-icon mdSuffix *ngIf="input.value.length > 0" (click)="input.value=''">clear</md-icon>
</md-input-container>
</div>
Now I am getting results array in my component.ts file. I want to show a dropdown below this search bar when results are fetched from db.
I tried doing multiple things like applying *ngIf on list. but all in vain.
Is there any simple solution which can allow me to show a dropdown list after I start typings characters in search box input?
Thanks in advance.

Cannot change md-select value programmatically

Im trying to change the item of md-select programmatically and tried using ng-model-options="{trackBy: '$value.id'}" but this code won't work. Did i missed something so simple?
You can take a look at this DEMO

The md-select element does not have an attribute for ng-model-options since it's not stated in the docs.
Anyways, it looks like you have to instead of track by data, use track by $index.
<md-select ng-model="selectedAnimal">
<md-option
ng-value="item"
ng-repeat="item in data track by $index">
{{item.animal}}
</md-option>
</md-select>
Updated Codepen

Access selected object property in Angular.js

I'm new to angular and I'm working with angular.js and angular-material together.
What I'm trying to do is create a md-select and assign an object to it as a ng-model. My md-options come from an array of objects, and when I select the desired option, the whole object is stored in the ng-model.
The problem is that when after that I try to select a property of this object, nothing is returned. You can see my code here:
<md-input-container md-no-float class="md-block col-1111-20-0-fl mrg-l-20">
<md-select ng-model="orderItems[$index].item">
<md-option ng-repeat="item in itemNames[$index] | orderBy: item.name" value="{{item}}">
{{item.name}} - {{item.price | currency : 'R$' : 2}}
</md-option>
</md-select>
</md-input-container>
{{orderItems[$index].item.name}}
if I write just {{orderItems[$index].item}}, the whole object is accessed, showing it as an object and it's propeties, like this:
{"_id":"5812cfdb1c27a7187c61b8c1","price":"2","name":"Water Bottle 500ml"}
but when I write:
{{orderItems[$index].item.name}}
I can't access the name of the object, nothing shows.
What am I doing wrong here??
Thanks!

The $index you're using in the ng-repeat won't apply to the parent md-select so you cannot index your orderItems array using that number. Also, according to the angular-material docs, you don't need to evaluate value="{{item}}" for the value attribute.
If you just want to store the value selected as an object, you can just do this:
<md-input-container md-no-float class="md-block col-1111-20-0-fl mrg-l-20">
<md-select ng-model="selectedItem">
<md-option ng-repeat="item in itemNames | orderBy: item.name" ng-value="item">
{{item.name}} - {{item.price | currency : 'R$' : 2}}
</md-option>
</md-select>
</md-input-container>

Angular material select get reset

I'm facing another problem with Angular Material.
Now I have a form, with two select. The problem is when I select one value in any of this two select, the other one get reseted and loose his value.
is this a bug? or maybe I'm doing something wrong?
<form name="addTarjeta">
<div ng-controller="MedioPagoController">
<md-input-container class="md-icon md-block">
<label>Tipo de tarjeta</label>
<md-icon class="material-icons"></md-icon>
<md-select ng-model="_tarjeta.medioPago" md-on-open="listaMedioPago()"
required name="medio">
<md-option value="{{medio}}"
ng-repeat="medio in medioPagos track by medio.idMedioPago">{{medio.nombrePago}}</md-option>
</md-select>
</md-input-container>
</div>
<div ng-controller="EntidadBancariaController">
<md-input-container class="md-icon md-block">
<label>Entidad bancaria</label>
<md-icon class="material-icons"></md-icon>
<md-select ng-model="_tarjeta.medioPago" md-on-open="listaEntidadBancaria()"
required name="entidad">
<md-option value="{{entidad}}"
ng-repeat="entidad in entidadBancarias">{{entidad.nombreEntidad}}</md-option>
</md-select>
</md-input-container>
</div>
</form>

As I post in a comment:
You are binding both selects to the same ng-model="_tarjeta.medioPago", so this is the expected behaviour.
I think it's probably just a typo in your code. Could you check it?
Change the ng-model of (probably) your second select to another variable of the controller and the problem should disapear.
Hope it helps