by

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 2019 18:50
    @StephenFluin banned @piotr-mamenas
Brad
@bradtaniguchi
I've worked with a lot of selects with multi-select on and idk if I've seen that, my guess is the value of the first item just so happens to have the same "default value", or the auto-select first value input is being passed
Evan Stoll
@evanjs
Hey guys, struggling to bind a mat-select to a map right now. I keep getting Value must be an array in multiple-selection mode
Is there no way to use a <mat-select multiple> with a map or etc?
Might be looking at this the wrong way
Brad
@bradtaniguchi
Your trying to pass in a new Map() as the value?
or a {} (POJO)
Evan Stoll
@evanjs
The backing collection is initialized with new Map()
Brad
@bradtaniguchi
Yea you'll need to probably manipulate the values in the map and display it using an array before passing it into the select
Evan Stoll
@evanjs
Yeah, I sort of figured. I realized I can display it just fine in most approaches, but it's getting the value back that doesn't work quite as well.
I also didn't realize that the value of a mat-select is ... a sorted list of all selected values in multiple selection mode
Anthony Nahas
@AnthonyNahas
I am proud to introduce today ngx-storage-firebaseui , open source angular library created with angular material for firebase storage. Upload with one click multiple images to firebase. If you are familiar with ngx-auth-firebaseui, you would to add this lib to your project! Any feedback and comments are welcome! A big thanks for the angular community
https://github.com/AnthonyNahas/ngx-storage-firebaseui
Dave
@beazergood
👋hi there, I have a mat-menu that is triggered via (contextmenu) event in my component. I would like to break the menu out into a child component to clean up my template code and to also better understand how ViewChild works in angular. I have searched SO and found a few helpful posts most notably this one: https://stackoverflow.com/questions/48343082/mat-menu-and-button-in-different-components
However, I can get the menu to open via a button in my parent component but I would like to trigger it to open via the right click event (contextmenu) from inside the typescript file as opposed to the template. Can anyone point me in the direction as to how I'd achieve this? I have referenced the child component in my parent class as follows: @ViewChild(MatMenuTrigger) childComponentMenu: ItemContextMenuComponent
where ItemContextMenuComponent is the child component where the menu is. I have tried this.childComponentMenu.openMenu() in the function that runs on right-click but it doesn't work.
I have a stackblitz on the go here: https://stackblitz.com/edit/angular-xkfdns-92t9sn
Dave
@beazergood
The above stackblitz doesn't have my edits to it (forgot to fork properly). This one does: https://stackblitz.com/edit/angular-xkfdns-psqygv
I'm just looking to open the menu in the child component from the menu-overview-example file.
Dave
@beazergood
☝️got there in there end! Was just a matter of connecting the dots correctly and getting a better understanding of how the matMenuTrigger relates to the child component.
Ian Kaney
@ikaney
I've been researching for a while and wondered if anybody could help.
I have the cdkDrag directive on a div which can be dragged around. This is located within a container that has scrollbars on.
I assumed cdkScrollable would force the container to scroll if dragging one of the items out of view, is this incorrect thinking? What would be the best way to achieve this?
Ian Kaney
@ikaney
I've setup a Stackblitz:
Miguel Vargas
@miguel-vargas
Good morning! I was looking to start contributing to material2. Specifically to the documentation. I found the angular/material2-docs-content repo but it seems PRs are to be against the angular/components repo. How would you modify the markdown or html for the APIs of material components?
Brad
@bradtaniguchi
@miguel-vargas I believe the docs are generated from the comments in the code itself, such is true for the core Angular repo
SAGO
@SAGOlab
Hi there is possible to set attribute of button from another component? I think something like set mat-fab-button nor mat-button from another component wtih @Input() decorator, or something like that?
Brad
@bradtaniguchi
@SAGOlab sounds like you want to change the directive on a button based upon some condition
SAGO
@SAGOlab
@bradtaniguchi yes...I'm developing a reusable button...so I need to set attribuite from other component
JayChase
@JayChase
uiui8kjjhn
christian
@kresdjan
Hi all, is it possible to ng add @angular/material or setup/load Angular Material only with a specific module? Like say an admin area? And not loading it globally?
Brad
@bradtaniguchi
@kresdjan Yup. Most of the modules in @angular/material are components only, so you need to add them to the module you want to load (like a lazy loaded module). Even some of the global providers are able to be loaded only in lazy modules, thus preventing them from being loaded globally.
Leonardo Patiño
@DLDante
Hello there, I'm trying to detect whenever angular calendar/datepicker change its view mode from dates selector to month selector to year selector without any luck, is there any property or something I'm missing for that's allows me to detect that change from typescript/dom/css?
Sebastian Podgajny
@SebastianPodgajny
Hi, angular/components#19086 someone can help with this?
Leonardo Patiño
@DLDante
done, found a way to achieve detection, datepicker has a ngswitch swapping components for different layouts, those comps are mat-multi-year-view, mat-year-view and mat-month-view, so I'll use them to know which layout is active, thank you guys
hope this info would help someone with same kind of concerns
Timo
@Swamp3
Hi, (also posted this in angular/angular) i am using Angular 9.1 with @angular/material 9.2 in a current project.
I am trying to change the size of a mat-checkbox inside a component and i only want to change this specific checkbox style.
How can i achive this? I do not want to use deprecated ng-deep, global styles or change view encapsulation.
This is the source from @angular/material : https://github.com/angular/components/blob/05f59b36a60851a6cc442214ee493922b8052f3d/src/material/checkbox/checkbox.scss#L213
here is a stackblitz link https://stackblitz.com/edit/angular-p81cwd
Brad
@bradtaniguchi
@Swamp3 If you add a class on the component, you can use that class to "select" the checkbox you want to change. Then its a game of being able to override the component styles by applying more specific css selectors from your app level stylesheet. Trying to apply styling from a parent component wont work without doing something nasty (ng-deep, or changing css encapsulation)
Timo
@Swamp3
@bradtaniguchi im not sure if i understand you correctly, but are you basically just suggesting to add/use global styles ? Thats again what i dont want to do ( but i am currently doing since its the only way i know ). I dont want that style to be in the global scss file since i am only using the specific checkbox in a module which in most cases might not even be lazy loaded so the global css does not really make sense to be there all the time.
Alexander Wieser
@crystalbyte
Is there a way to create or edit material themes after deployment and store them?
Brad
@bradtaniguchi
@Swamp3 You could change your style encapsulation, or use either of the deprecated selectors, but other then that thats all you got. If you wanted to make it "cleaner". you can define your styles in another file and import them globally, or if you really wanted to be optimal you could rig up an entire css loader to "lazy load" your styles on the page, but this requires a good amount of work and usually isn't worth much in terms of performance
Bojan Kogoj
@BojanKogoj

There is no docs for this, although importing it

import { MatIconTestingModule } from '@angular/material/icon/testing';

and using MatIconTestingModule in test imports works perfectly. No more annoying error messages

Alexander Wieser
@crystalbyte
Is there a way for a user to compose a material style and then use it without having to redeploy the app?
Zurie
@zurie
I’ve seen material theme builders that do that but they have a lot of pieces of the app using dynamic values from controls used to make themes. You could have a external css that changes themes and colors. It’s all just css. But if your tree shaking and building styles into components you would probably have to rebuild to get those changes. Unless you wrote your app to accept changes from say a rest api or DB
@crystalbyte
NourheneMbarek
@NourheneMbarek
image.png

Angular Nebular styles does not apply for NbChatComponent

I have an ongoing angular project and I'm trying to add Nebular Chat UI to the project.

I installed nebular with npm and did the imports as mentioned in the site. Functionality is working as expected, but the styles are not applied to the component.

Below are the steps I followed.

npm install --save @nebular/theme @angular/cdk @angular/animations
npm install --save @nebular/eva-icons

Imported NbThemeModule and NbChatModule in app.module.ts

Added styles in angular.json
Added html component (Sample available in the site)

image.png
Bojan Kogoj
@BojanKogoj
You are asking in the wrong chat, as far as I know Nebular isn't a part of Material.
Anyway, why don't you use ng add @nebular/theme?
Sanket Thotange
@iamsank8
Hi I am using a stackblitz example for mat-table grouping. However I want to add sorting to that, but when I sort it it fails to keep grouped row at the top. Here is the link to forked SB example. https://stackblitz.com/edit/angular-material-table-row-grouping-nmbg7z
Sanket Thotange
@iamsank8
Try sorting with any other column than grouped column.
Saidazim
@saidazimabdukhamidov
Hi everyone, I want to use MatDialog for Updating a user in my CRUD application, but I have problems in putting id of a user into MatDialog. Can you help me with making it
Lisa Copeland
@lisacopeland
@saidazimabdukhamidov post some code? How are you calling the dialog
Saidazim
@saidazimabdukhamidov
<button mat-mini-fab color="primary" class="ml-2" matTooltip="Add Doctor" (click)="openDialog()"> <mat-icon>add</mat-icon> </button>
@lisacopeland I called MatDialog on HTML like this