angular/material2

Material Design components for Angular

Zurie

@zurie

@crystalbyte

NourheneMbarek

@NourheneMbarek

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)

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

`
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

I think the material dialog has a really good example: https://stackblitz.com/angular/mrnbnxklgpl?file=src%2Fapp%2Fdialog-overview-example.ts

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?

Sanket Thotange

@iamsank8

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 ?

Derek

@derekkite

@vpasudo https://stackoverflow.com/questions/55340580/font-ligature-icons-in-microsoft-edge

vpasudo

@vpasudo

Thanks @derekkite

Harsha Chinni

@HarshaChinni

Hey everyone, hope you're doing well. I am using Angular material paginator on the front end. The Oracle table has 1.3 million records in the DB. I can't fetch all of them at a time(obvious), I need the paginator to make sure to display there are 130k pages assuming 10 records per page (130 k * 10 = 1.3 million). But the problem is material paginator is showing the total records to be the number of records available in the MatDataSource. In my case, I am fetching 30 records initially. The paginator is only showing 3 pages with 10 records per page.

But then, how can I tell the material paginator to show 130k pages and total records as 1.3 million (assuming 10 records per page) with out fetching the data unless I go to a particular page ?

Any leads will be very helpful.

Thank you :)

Derek

@derekkite

@HarshaChinni you set the length, total number of pages, and respond to a page event by loading the required data.

SAGO

@SAGOlab

Hi there, I have a mat-select inside a mat-bottomsheet, but when I select something the bottomsheet close panel automatically, how can I prevent this?

João Filipe Sabino Esperancinha

@jesperancinha

Hi there, can anyone help me understand why I can't get mat-table to work with SSR (Server Side Scripting)?

Jianhua Huang

@jianhua415

Hello, is it possible to show an image from Cloud Firestorage in Material Data Table, where the Data Table is populated by Cloud Firestore? Appreciate any pointers!

Luka Onikadze

@lukaonik

Hello, running yarn lint on Angular material source, gives the following errors on Windows " Expected linebreak to be 'LF'" , any solutions for that?

Mateus Carniatto

@Carniatto

is https://tina-material-tree.firebaseapp.com offline?

Pranav Powar

@pranavpowar

Hello Folks ,
I have a question regarding mat table.
If I were to write a custom directive for mat-cell , how can I access viewref of cell from directive?

Pranav Powar

@pranavpowar

Please help I am new to angular.

Sami Al Khatib

@alsami

You can inject ViewContainerRef into the constructor of your directive to archive that.

Pranav Powar

@pranavpowar

@alsami Thank you

Sanket Thotange

@iamsank8

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?

I have now resolved this issue by calling change detection manually in ngOnChanges() setTimeout(() => this.cdr.detectChanges());

Pranav Powar

@pranavpowar

Hello All,

I am using derived class from mat-table

In mat-table component definition:

  selector: 'mat-table, table[mat-table]',
  exportAs: 'matTable',
  template: CDK_TABLE_TEMPLATE,
  styleUrls: ['table.css'],
  host: {
    'class': 'mat-table',
  }

there is a table.css reference in style urls

but Resolver throws error if is try to reference same file in derived component. also, there is no 'table.css' present physically. any ideas why?

Ravindrakumar Rajput

@iiravindrarajput

"property matheaderrowdef is not provided by any applicable directive on an embedded template"
why I am getting this lint warning?

Where communities thrive

People

Repo info

Activity