Where communities thrive

Join over 1.5M+ people
Join over 100K+ communities
Free without limits
Create your own community

Explore more communities

angular/material2

Material Design components for Angular

People

Repo info

Activity

Jun 18 18:50

@StephenFluin banned @piotr-mamenas

Marco Buschini

@marcobuschini

tsickle was not intalled in the devDependencies.

power-amin

@power-amin

guys, I have angular material selector and I want to put the selected element in the API call and the rest I want to put them false

how can I do this

BertrandMarechal

@BertrandMarechal

@power-amin are you using ReactiveForms ?

what's in your template code ?

power-amin

@power-amin

@BertrandMarechal

BertrandMarechal

@BertrandMarechal

and you are ccalling your API on change right ?

power-amin

@power-amin

after he finished the changes he's gonna click a button and then I'll make the call @BertrandMarechal

like this

BertrandMarechal

@BertrandMarechal

so you want to save the selected index or value on change, and map your currentJobs to a new array when calling your api, and map only the selected one to a true value ?

power-amin

@power-amin

@BertrandMarechal it is like this I have an api

and this is the body of the API

I have the value saved when I used onChange

but I want to set in the body the value that was selected to true and the rest to false

power-amin

@power-amin

and this is the object of the values

BertrandMarechal

@BertrandMarechal

Ok thanks, and what is the code behind currentJob() ?

power-amin

@power-amin

nothing that just for the selected one

BertrandMarechal

@BertrandMarechal

Ok, so, if you store job in a variable, then on building your body, you could have something like

{
// ... rest of the body
isDevelopper: job === 'isDevelopper',
isRetired: job === 'isRetired',
// ... the other cases
}

power-amin

@power-amin

I don't get it

BertrandMarechal

@BertrandMarechal

hope this helps

power-amin

@power-amin

oooh Ok I got it I'll try it

BertrandMarechal

@BertrandMarechal

:thumbsup:

power-amin

@power-amin

@BertrandMarechal I did it it works but I want to open the object

I set it like this

and in the call, I got it as an object inside an object and I want just on object

BertrandMarechal

@BertrandMarechal

I think you want to spread it :wink: Have a quick Google

power-amin

@power-amin

oooh yeah @BertrandMarechal

thank so much man

you became my mentor now :))

BertrandMarechal

@BertrandMarechal

no worries

and developer take one P in English :)

power-amin

@power-amin

yeah

:))

Andy Rash

@andy-rash

Hello!

I've been trying to make a mobile-friendly search bar that conforms to Material design spec, in particular the expandable search (see "Expandable search" here).

I've not had a ton of success using vanilla Angular Material components. This is due to the unremovable underline that comes packaged with mat-form-field, but also the 'clear' button that appears when there is text in the search bar, which by default is quite small.

I was able to sort of fix the 'clear' button by forcing the font-size for that button with an !important CSS rule, but I've had no such luck trying to get rid of the underline. Can somebody tell me whether I'm doing something wrong here, or is this just not possible with the current capabilities of Angular Material?

A Stackblitz demo of the closest I've been able to make can be found here.

Also, this is a bit unrelated, but has anybody else found that mat-form-fields default to having 1.5px letter spacing? This looks super weird, and I've always had to override the letter spacing to normal. Not a huge deal, just thought it was strange.

rudzikdawid

@rudzikdawid

are there any chances to fix the memory leak in datepicker ?

#17896

vpasudo

@vpasudo

@andy-rash kinda wrong but you can remove it this way

::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline {
  height: 0px!important;
}

Dave Bush

@DaveMBush

@andy-rash there are multiple ways of formating form controls in material. (see "Form field appearance variants" here https://material.angular.io/components/form-field/examples) none of these work for you?

Andy Rash

@andy-rash

@vpasudo yeah, I had seen that option on some SO posts. When I do that, there's still some empty space beneath the input, so it looks weird. Trying to fix the space by altering margin/padding/border is just a bit much given all the wrappers, etc. that Angular Material puts around mat-form-fields. I just realized I didn't give the link for the interactive Stackblitz in my original post, so you can see how doing the ::ng-deep trick turns out here

@DaveMBush You're right, there are multiple ways of formatting the form controls, and I've tried all of them. None of them do what I'd like, at least not out of the box. The best version I got was with floatLabel="never" so that the placeholder doesn't float when the input is focussed (which if it does float, it looks horrible when the input is inside of a nav bar)

I'm sure I could get it done eventually either with some major tweaks or possibly just writing my own component outside of Angular Material, but I don't have enough time right now to futz with it like that. I kind of wish this was just available by default. I get that the Angular Material team's whole ethos is being non-opinionated, but it'd at least be nice to look at the Material Design Patterns spec and be able to replicate it with some level of ease, rather than not even being able to use their products to do it, which is kind of what it's looking like right now

vpasudo

@vpasudo

@andy-rash you can also edit the scss related to this in the node_modules material folder

Andy Rash

@andy-rash

@vpasudo unfortunately, that's an unsustainable solution, as any subsequent updates would overwrite any changes. I'd just as soon just write CSS overrides in my own code, since at least I can be the one to maintain it, but that puts me in the same position of contending with all of the wrappers, etc. that Angular Material adds