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
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?
Sankey28
@Sankey28
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
Sankey28
@Sankey28
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

`
openDialog() {
const modal = this.modal.open(ModalDoctor, {
width: '640px',
});

modal.afterClosed().subscribe(result => {
  this.getDoctors();
});

}
`

this is in my .ts file
but, I don't have any idea how can I put user id on my dialog

` create(value: any) {
this.submitted = true;
this.adminService.addDoctor(this.doctors)
.subscribe(data => console.log(data),
error => console.log(error));
this.doctors = new Doctor();
}

close() {
this.modal.close();
}

Saidazim
@saidazimabdukhamidov
this is logic of my MatDialog
Lisa Copeland
@lisacopeland
@saidazimabdukhamidov the dialogRef object takes a data parameter - call it like this:
    const dialogRef = this.dialog.open(myDialog, {
      width: '500px',
      data: {
        id: id
      }
    });

@saidazimabdukhamidov then - in your dialog you can get the id by doing:

this.id = data.id;

be sure to add @Inject(MAT_DIALOG_DATA) public data: myDataInterface to the constructor of your dialog component

Saidazim
@saidazimabdukhamidov
@lisacopeland oh thanks, I will do that
Lisa Copeland
@lisacopeland
Saidazim
@saidazimabdukhamidov
@lisacopeland It works!!!! thank you a lot, I spent 1 week for making it)))
Lisa Copeland
@lisacopeland
@saidazimabdukhamidov That's awesome!!!
Saidazim
@saidazimabdukhamidov
why https://material.angular.io/ is not working anyone knows?
Lisa Copeland
@lisacopeland
@saidazimabdukhamidov Its working for me
4javier
@4javier
I use cdk but not mat. How can I make overlay set fullscreen width for cdk-overlay-connected-position-bounding-box?
Sankey28
@Sankey28
I am trying to create dynamic table component using Mat Table. I am passing column names and data as input to this component. But when I am changing the column names and data, the table is not refreshing. What am I missing here?
Derek
@derekkite
@Sankey28 how are you doing it? first with the columns?
vpasudo
@vpasudo
Hi I have a problem with Edge Chromium, my <mat-icon> render the name of the icon instead of the icon ? (works fine with Chrome, Firefox, old Edge version) Do you guys know any workaround ?