Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
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
image.png
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
image.png
BertrandMarechal
@BertrandMarechal
and you are ccalling your API on change right ?
power-amin
@power-amin
no
after he finished the changes he's gonna click a button and then I'll make the call @BertrandMarechal
like this
image.png
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
image.png
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
image.png
BertrandMarechal
@BertrandMarechal
Ok thanks, and what is the code behind currentJob() ?
power-amin
@power-amin
nothing that just for the selected one
image.png
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
image.png
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
image.png
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