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
Rich Berberian
@RecursiveRich
Hi everyone. This is my first time using Gitter. Looks like there is just one stream of comments and questions? My question is about reseting button toggles so that none are selected. As far as I can tell, there is no API for this. I have to use a private property like this: this.buttonGroup._buttonToggles.map( btn => btn.checked = false ); My questions is the same as https://stackoverflow.com/questions/52600220/angular-material-reset-button-toggle-group which has example https://stackblitz.com/edit/angular-wgsubv
Daniel Willis
@danww
Welcome @RecursiveRich
Rich Berberian
@RecursiveRich
Thanks @danww
Daniel Willis
@danww
@RecursiveRich I got it to work, starting from the Angular Material example here: https://stackblitz.com/angular/ngmakqnqjmq?file=app%2Fbutton-toggle-exclusive-example.ts
I can't figure out how to save and share my work, but essentially the problem appears to be with the two-way data-binding.
What I did was remove the [(ngModel)] from the button group, do the data binding in the component(rather than the template) and leave the state of the button UI to the Material component. reset() is then simply this.buttonGroup.value = '';
It's a bit more work, but it's cleaner than accessing private properties, etc.
Daniel Willis
@danww
I rarely, if ever, use two-way data-binding, but rather have data flow directly from state, and have actions modify state, so haven't run into this one before.
Rich Berberian
@RecursiveRich
Thanks @danww !
Daniel Willis
@danww
@RecursiveRich Did you get it working?
Rich Berberian
@RecursiveRich
@danww Sure did!
Daniel Willis
@danww
@RecursiveRich Splendid!
Shervin Z
@shervinee
@fabianngala The initial steps in achieving your goal would be checking angular material guide: https://material.angular.io/guide/theming for custom theming, customizing your own theme.scss file with the designs, mixins and etc...Just be aware that custom theming if, beyond colors, fonts, and some simple sass can get a bit tricky.
I suggest using this tool in case you found your own theme.scss a bit overwhelming:
https://materialtheme.arcsine.dev
S E R A Y A
@takahser
hey guys
what's the reccommended approach to extend a angular material component?
in my case, I want the slider component to have two differently colored segments (e.g. 0-40% primary color, 40-100% accent color)
I got started by building a wrapper but I failed to achieve this requirement by simply overriding styles
Instead, I'll need to add some additional html markup
S E R A Y A
@takahser
thanks I read that, but I'm not theming a custom component, but extending a material component instead :)
Manoj
@manojvignesh
Oh ok
you can override the styles.
was there any issue with that??
S E R A Y A
@takahser
what's the reccommended approach on overriding the styles?
I guess setting the view encapsulation to none and providing more specific styles, right?
in my case if I would add custom markup, it works
otherwise, it doesn't
and I didn't find a way to "inject" the markup
I also tried pseudo elements, but it didn't work for some reason :(
fabian
@fabianngala
T http://localhost:4200/js/materialize.min.js net::ERR_ABORTED 404 (Not Found) i get this eror in my browser
Manoj
@manojvignesh
@takahser Try ::ng-deep
S E R A Y A
@takahser
that's neat @manojvignesh thanks
but still, I need to add some custom markup
S E R A Y A
@takahser
I ended up copying the whole component from the original library
While I copied html and scss 1:1, for the typescript I was able to extend the original component and hence avoid code duplication :)
No solution for html and scss though, as I wasn't able to find the files in the node package
Luis Ruiz
@newmesiss
I have a select, when I select the item, I pass and save only the id, but how can I at the same time execute a function and pass the entire item?
Brad
@bradtaniguchi
@newmesiss Are you using reactive forms or remplate driven forms or anything?
One approach is to "detach" the select from the form-control, so you have complete control. Another is to run your function call on an event, and get the object from the list in that function, but leave the id saving of the select alone
Anthony Nahas
@AnthonyNahas
Today, we released a new version of ngx-auth-firebaseui v3.4.0 which contains a lot of improvements like custom email verification template, smooth animations, and new single login and register component to take the full control of the authentication process with firebase. Special thanks @jeandat for contributing and making this library better.
Check this out and try the new standalone components: https://github.com/AnthonyNahas/ngx-auth-firebaseui
Suresh918
@Suresh918
Hi all, Any suggestion for rich text area implementation in angular components project ?
broweratcognitecdotcom
@broweratcognitecdotcom
@newmesiss use a setter
Brad
@bradtaniguchi
@Suresh918 I was told pell worked pretty good with Angular out of the box, its super small, simple and free. This is my second hand account though :)
Suresh918
@Suresh918
@bradtaniguchi Thank you for your suggestion. can we have material icons in the toolbar and matformfield integration to the text area in that ?
@bradtaniguchi will it support angular material specifics mat-errors, mat-icons, etc..
Mathieu Grenier
@grenmath_twitter
Hi, with a mat-select, do you think its possble to select a option-group ?? When i use option and option-group into <mat-select> , only options can be selected. I was thinking if it’s possible to select a option-group ??
Alessio Stalla
@alessiostalla
@Suresh918 we use ngx-quill, a wrapper over the quill editor. Works fine, but we don't do any fancy stuff with it.
JuanCarlosJr97
@juancarlosjr97
Hello guys!
Brad
@bradtaniguchi
@Suresh918 Not sure if that is how it could work, you might be able to integrate the icons somehow, but I'm not sure if you can put a rich-text editor (that is rendering html) into an input. You might be able to engineer something that works with the existing mat-form-field, but threre isn't any fancy integration with the lib + angular material
Natalia
@petajamaja
@grenmath_twitter Hey Mr. Grenier, I created a mat-select with selectable option-groups for you! It's a customized version of what they have on the main Material Design website. Here's my hacked version of mat-select, hope it helps!
@grenmath_twitter I tried to re-create all the standard effects of a normal mat-select-option but for the mat-select-optgroup like ripples, checkboxes, cursor reactions, disabled state. This was so much fun!
Shekhar Ramola
@shekharramola
just like <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>, can't we have <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row> as well?
Natalia
@petajamaja
@shekharramola Take a look at the documentation, there are examples of tables that have both footer and header rows defined this way.
Shekhar Ramola
@shekharramola
@petajamaja , yes I did. have to do it using <th>, <td> but not sure why is that
Natalia
@petajamaja
@shekharramola but you don't have to use <th> and <td>, you can just substitute it with respective tags as seen in this pull request... It works just fine ever since 2018, can you give an example of a project where it did not work for you?
JuanCarlosJr97
@juancarlosjr97

Hi guys,

I have this issue

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous