Why mat-option text is not rendering in view sometimes?

I have a form where there is a mat-select field. The mat-select field will show value even if the option doesn’t match the list of options. Please take a reference of this stackblitz example. In this …

angular is not detecting change in input field

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 …

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 …

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 to add a class which you can call what you want but I’ll call it full-width-field so in the end it will look like this. HTML: CSS: Example take from Angular Material Docs

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 without using radio-buttons? Answer You can put a condition on checked attribute, as in this example: Typescript: HTML DEMO

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 login container in the middle of the page ? I found a few answers here but none of them seems to be working as well, here is my code : ** Answer To center in the container: CSS: To style