I am trying to use Mat-keyboard but the focus on input changes when I click the keyboard. Please see the image below -
displayed view of my keyboard
<form ngForm="myForm">
<mat-form-field>
<input matInput placeholder="Code" type="text" name="code">
</mat-form-field>
<mat-keyboard></mat-keyboard>
</form>
I want to achieve something this blog shows on angular 6:
Kindly visit to get more clarity
https://rawgit.com/GreenfieldVentures/angular-on-screen-keyboard/master/demo2.html
Thanks for your help!
You're not supposed to use <mat-keyboard> on it's own - it says so in the docs:
A component used to open as the default keyboard, matching material spec. This should only be used internally by the keyboard service.
Only use it as a directive:
<input matInput matKeyboard placeholder="Code" type="text" name="code">
You can read more on it on the docs site.
Related
I'm using matInput. What I want is that the content in matInput is marked/highlighted so that if I press any key the text gets deleted. For example you double click a word in the search bar here in stackoverflow. How can I archieve that?
<mat-form-field>
<input matInput [(value)]="test">
</mat-form-field>
Assuming you're using Angular 8, you can use #ViewChild decorator to get a reference to your input element. Then you select the input value within the ngAfterViewInit lifecycle hook. In order to link the input element with #ViewChild, you can use a template reference variable (e.g. #food).
Please have a look at the following StackBlitz
Please note that using setTimeout inside ngAfterViewInit prevents you from getting an ExpressionChangedAfterItHasBeenCheckedError.
I wanted to implement a DateTimePicker using Angular Material.
I came to this example I went through all the steps.
In the site there were some live examples too. I was interested to implement the DateRange Example.
I found out that Angular Material doesn't use the md-input-container anymore, instead it uses mat-form-field.
I copied the code and a strange DateTimePicker is showing, not like in the site.
I think maybe angular doesn't understand this mdc-datetime-picker or it could be because I used mat-form-field.
Here is the code which I implemented just for testing:
<div layout="column">
<mat-form-field>
<label>Start Date/Time</label>
<input mdc-datetime-picker="" date="true" time="true" type="text"
placeholder="Date" max-date="dateTimeEnd" ng-model="dateTimeStart" class=" md-input"
readonly="readonly" id="input_0">
<div></div>
</mat-form-field>
</div>
Any Idea on where the problem could be?
I am setting up an Angular project to use the Angular Material framework. I am also using materializecss. When I try to create a form, I get a double control shown below...
Here is how I am creating this field:
<mat-form-field hintLabel="Max 10 characters" appearance="standard">
<input matInput #input (keyup)="applyFilter($event.target.value)" placeholder="Filter catalogs">
</mat-form-field>
Use either Angular Material MatInput and MatFormField or MaterializeCSS, but not both. They both add their own style to input, causing the problem you see.
When I create websites with input fields and I view them on an iphone, the default keyboard always pops up in spite of the fact that I use a third-party keyboard called swype as my default keyboard. Is there a certain attribute I need to put in my input tag so that it allows third-party keyboards? If not, how would I allow them? Let me know. Thank you in advance for any help.
<div id="project-input" class="col-sm-6">
<input id="project-name" type="text" class="form-control" placeholder="Title Your Project">
</div> <!--col-sm-6 -->
Hy
What i want to do is to create a custom renderer for will_paginate which renders first, previous, next and last page and a input field where the user can type in the page number manually. I already have the links for first, last etc. but i stuck at the input field. I could create a form in the view but the input field has to be rendered between the previous and next links.
Does anyone know how to do this?
Thanks for your help
You can do this as a separate form (make sure it is a GET). All you
need is the one input element named page. Something as simple as this
should work (not all browsers may like the #). I dropped it into a
site I'm playing with now and it worked. Put it anywhere on your page.
You might have to make something more complicated if you need to
incorporate search terms.
<form action="#" method="get">
Go to page: <input type="text" name="page" value="" size="2"
maxlength="4" />
<input type="submit" name="btnSubmit" />
</form>