we are making an extension that scans the input field and fills some data into it. I am using the .value operator to fill the data. The problem is, it works in almost every case except the angular material input. I am able to set the value of the input, it displays in the field but somehow angular is unable
Tag: angular-material
How to update mat-autocomplete options from another component?
I have two components called Employee and Form in my application. There are 2 mat-autocomplete: State and City lists in EmployeeComponent. I fill and pass these mat-autocomplete controls to the FormComponent using “formData” parameter: Employee Component: html ts Form Component: html At this point, when I select a state I want the cities list is cleared and the filled by
Increasing the Width of the MatBottomSheet?
The following CSS increases the height but not the width: Anyone know how to increase the MatBottomSheet width? Stackblitz new window demo. Note that the demo has to run in a new window (Open in New Window) in order to see that the MatBottomSheet is not full view. Answer this is because you have mat-bottom-sheet-container-large applied to the same element
Adding a new line in MatDialog Content Angular 7
I am using MatDialog and trying to add a new line in the content definition. Both n and </b> are not doing it. Is there another way without having to manually go into the html and change it since it’s a reusable component: HTML Answer You can use the [innerHTML] property: and instead of nn, use the html br tag.
Select All checkbox Angular material 5 | Gmail style if selecting individual it will also select
I need to create a select all functionality in angular material, I am sharing code below which is partially working. .ts file select all/deselect is working but the individual selection is not working properly, if selected the first one it is selecting the select all but it should work when selected all individual, Please help. Answer Just change your selectchildren
How to add mattooltip by custom directive in Angular
I am creating a custom directive called TooltipDirective whihc is going to add matTooltip to every host element, code is like below In my html I have two elements to compare the result in the result html tooltip and mattooltip attributes are added but it doesn’t show the tooltip. and rendered html is like below I tried adding other extra
Angular 5 material design full-width inputs
I’m new to angular 5, so I need to make a form with full-width inputs, and I want to every input take the whole width of its container, however, it only takes up half of it. Here is what I’m getting I’m using angular material and here is my code: Thanks. Answer On all of your mat-form-field, you will need
angular material two check boxes, only one can be checked at a time
I am very new to Angular-material so this question might sound a bit silly, but please bear with me. I have two checkboxes as following. Let’s say a user checked the first checkbox (“Apply for a Job”) then later on clicks on “Modify Job” checkbox, I want the application to automatically uncheck the first one. How can I achieve this
Angular change MatInput Size
I am new to Angular 4 and started working with the material components, I copied a couple of example from the official documentation but didn’t get the same result as the documentation : How do I get change the textbox width ? I tried style=”width: 200px;” style=”width:100%”; class=”col-md-x” But none of them worked, second thing is how to center that
Angular 2 Material Input change placeholder dynamically
I want to change the text of the input placeholder dynamically. The console.log already gives the updated string but the interface doesn’t update so there stays the old placeholder. How can I get the Interface to recognize the change? Answer you can change your input placeholder dynamically like this component.ts now you can change somePlaceholder value any where in the