how to create search bar dropdown in angular 4? - javascript

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.

Related

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>

Selected value in one dropdown should not appear in other two dropdowns in Angular material

Selected value in one dropdown should not appear in other two dropdowns in Angular material. How to remove the selected value in one dropdown from all other dropdowns? (I have dynamic dropdown which gets added each time a button in clicked)
I tried using this https://stackblitz.com/edit/angular-dqvvf5?file=src%2Fapp%2Fapp.component.html but the logic is not working for angular material.
I've taken your Stackblitz and managed to get it working using mat-select instead of the standard HTML select. Please see this Stackblitz for a working demo.
The main changes were in the HTML...
HTML
<div *ngFor="let field of fieldArray; index as idx" style="margin-bottom: 8px">
<mat-form-field appearance="fill">
<mat-label>Select Language</mat-label>
<mat-select #selectLang (selectionChange)="selected(selectLang.value,i)">
<ng-container *ngFor="let lang of languageList" >
<mat-option *ngIf="selectLang.value === lang.name || !isSelected(lang.name)" [value]="lang.name">
{{lang.name}}
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
<button (click)="deleteFieldValue(idx, selectLang.value)" style="margin-left: 8px">X</button>
</div>
<button (click)="addFieldValue()">Add Select</button>
The Typescript is pretty much the same as in your example, except I've modified the signature of the selected() function to read selected(value: string, idx: number) as you're passing 2 parameters into that from your HTML.

Template reference variable undefined in radio buttons

I am having troubles with aplying validations on radio buttons in angular, on other input types, i usualy just create the #templateRefVariable on the input and can then access the NgControl that allows me to use things like the touched property of the control.
What im trying to achieve currently is setting the touched property of the div acording to if any of the radio buttons in the group were touched. (seting it in the div because of css dependencies if it is not in that outer div the validations will not show), but typeCode is always undefined.
<div class="form-group">
<label>Label</label>
<div class="btn-group btn-group-toggle w-100"
[class.ng-invalid]="!viewmodel.typeCode"
[class.ng-touched]="typeCode?.touched">
<label *ngFor="let domain of types" class="btn btn-toogle"
[class.active]="domain.code==viewmodel.typeCode">
<input type="radio" [(ngModel)]="viewmodel.typeCode"
#typeCode="ngModel" name="typeCode"
[value]="domain.code">
{{domain.description}}
</label>
</div>
<validation-message *ngIf="!viewmodel.typeCode"
[message]="'Required'"></validation-message>
</div>
With invalid i can workarround it by using the information in the view model to see if it was set already but the information on touched is not in the view model.
And i cant do the same for ng-touched because i need to set touched when there is an atempt to submit the form (even if the inputs were not actualy touched).
Any idea why typeCode (templateVariableRef) is undefined while using it in radio buttons ? i suspect it might be because of there being multiple in the page but i am not sure.
P.S: Using template driven forms
StackBlitz as requested (note errors on console because of typeCode undefined):
https://angular-5vqi5c.stackblitz.io
It is because ngFor is a structural directive and creates a nested template, and therefore these template variable(s) are out of scope.
Would moving your logic inside the ngFor be an option for you e.g.?
<div class="btn-group btn-group-toggle w-100"
[class.ng-invalid]="!viewmodel.typeCode">
<ng-container *ngFor="let domain of types">
<div [class.ng-touched]="typeCode?.touched>
<label class="btn btn-toogle"
[class.active]="domain.code==viewmodel.typeCode">
<input type="radio" [(ngModel)]="viewmodel.typeCode"
#typeCode="ngModel" name="typeCode"
[value]="domain.code">
{{domain.description}}
</label>
</div>
</ng-container>
</div>
PS. I haven't tested the code above.

how to edit the existing content in the angularjs

Hi Im creating an app using ionic and angularjs. The problem I face is in the editing. I have a two view pages, one view will list the car names, when a car name is selected it will be redirect to the second view page where the information regarding the selected car is listed and also editable . Im able to get it till here but I don't know how to edit the content. I tried using contenteditable along with <div> property but angularjs can't bind the ng-model property. So please help me how to edit the read information so that the edited information are updated. Thank you.
Selected Car:
<input type="text" ng-model="editedName">{{selectInput.name}}</div>
<br><hr>
Selected options:
<div ng-repeat="type in selectInput.types" ng-model="selectedTypes">
{{type}}
</div>
</div>
<br><hr>
<button ng-click="Update($index)">Update</button></div>

In AngularJS how to display a green tick mark in front of input field upon entering valid data in it?

I'm using AngularJS and Angular Material in my web application.
I'm a total newbie to this AngularJS and Angular Material thing.
Now I have to show a green tick mark in front of input field only upon entering valid input data in it.
How should I achieve this?
Sample password field code is as below:
<md-input-container class="md-block" flex>
<label>Current Password</label>
<md-icon md-svg-src="/images/icons/ic_lock_black_24px.svg"></md-icon>
<input type="password" ng-model="changePassword.currentPassword" required name="curPass" minlength="6">
<div ng-messages="chnagePasswordForm.curPass.$error">
<div ng-message="required">Please enter valid password</div>
<div ng-message="minlength">Password should be of eight or more characters</div>
</div>
<md-button ng-disabled="chnagePasswordForm.$invalid" class="md-raised md-primary enrolBtn" ng-click="changePassword()">Save</md-button>
</md-input-container>
I have to display green colored tick mark in front of this password field only upon entering the valid password.
Thanks.
What have you tried so far? Did you try just adding another icon and conditionally showing it with ng-if:
<md-icon md-svg-src="/images/icons/ic_lock_black_24px.svg"></md-icon>
<md-icon md-svg-src="/images/icons/my_checkmark.svg" ng-if="!changePassword.curPass.$error"></md-icon>
<input type="password" ng-model="changePassword.currentPassword" required name="curPass" minlength="6">

Categories

Resources