marinantonio / angular-mat-table-crud Goto Github PK

Hello - I want to use this component in my project which is on Angular 4 - Material 2. Can i use this component.? Will this cause issue as its on Angular 5.?

Also - What is the licensing of this component to use in my project.

How to you run this example locally, like through a ng serve command or something?

Hi ,

Your code demonstration works great with limited data. My question is how to consider your logical code to be able to work with a large number of records.
As a general rule, we should never bring all lacks of records and bind it to the data source.

But if we are bringing limited records then during each activity such as sorting , filtering, pagination every time we have to call an API. Let me know how we can solve this problem with your logic written.

Thanks

ERROR TypeError: Cannot read property 'name' of undefined
at eval (user.component.ts:174)
at Array.filter ()
at MapSubscriber.eval [as project] (user.component.ts:172)
at MapSubscriber._next (map.js:79)
at MapSubscriber.Subscriber.next (Subscriber.js:92)
at MergeMapSubscriber.notifyNext (mergeMap.js:151)
at InnerSubscriber._next (InnerSubscriber.js:25)
at InnerSubscriber.Subscriber.next (Subscriber.js:92)
at BehaviorSubject.Subject.next (Subject.js:56)
at BehaviorSubject.next (BehaviorSubject.js:46)

This error occure when assigning the dialogData with the object which we got it from form.
this.dialogData = userObj;

if we put before post request in Service class it is working, But id and created_at and update_at are emty, In my case ID is auto increament and created_at and update_at are set to default value current date. So user wont supply it from the front end. Once the user object persisted in to the data base. These value id,created_at and update_dt are should assign to the front end list.

Please suggest how we can overcome this.

Thanks
Mohsin

Hello Guys,

I'm having this problem

its on loadData method. Could you help me solve it? Thanks

Hi ,

Is there any way where I can export mat tables data into different formats. ?

Please suggest if any way

Hello,

I use this method to refresh the table

this.paginator._changePageSize(this.paginator.pageSize);

Much more convenient.

Hi all,

I have a slightly different implementation of your table. However, I think the same problem should occur here as well.

After adding an issue to my database, I am also adding it to my Behavior Subject (via .next(newissue) ). However, then the slice function crashes, since only the last emitted value is captured in my Behavior Subject value and not the whole array.

this.filteredData = this._exampleDatabase.data.**slice().filter((**issue: Issue) =>

How do you suggest to deal with this?

Thanks a lot and best regards
Simon

Hi,

thanks for your code :). I'm pretty new to Angular and I did something like your example for my RESTful application using HttpService, Mat-Table and MatTableDataSource. Everything is working fine except that in Chrome my table scrollbar always scroll to bottom when I refresh my datasource. Do you know if it something related to MatTableDataSource? Did this happen to you also?
MatTableDataSource extends DataSource so I think it should behave in the same way and in your example this issue does not appear.

This is my code, as you can see when I close the dialog I call the getLinedevices() method that update the dataSource.
If, for example, I am deleting a record in the middle of the table after the datasource updates the scrollbar scrolls to the bottom.
This doesn't happen in firefox.

Any suggestions will be appretiated,

Thanks,
Luca

export class LinedeviceComponent implements OnInit {

  displayedColumns: string[] = [....];
  linedevices: Linedevice[];
  linedevice: Linedevice;
  dataSource = new MatTableDataSource(this.linedevices);
  lineId: number;
  deviceId: number;
  description: String;
`
  /**
   * HttpClientService 
   */
  constructor(
    private httpClientService: HttpClientService,
    private location: Location,
    public dialog: MatDialog,
    public deleteDialog: MatDialog,
    public insertDialog: MatDialog
  ) { }

  ngOnInit() {
    this.getLinedevices();
  }

getLinedevices() {
    this.httpClientService.getLinedevices().subscribe(
      response => this.dataSource.data = response,
    );
  }
/*
   * Dialog di Delete  
   */

  openDeleteDialog(): void {
    const dialogRef = this.deleteDialog.open(DialogDeleteComponent, {
      width: '500px',
      data: { lineId: this.lineId, deviceId: this.deviceId, description: this.description }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The delete dialog was closed');
      /*console.log(result);*/
      this.getLinedevices();
    });
  }

Hi,
I must say it's almost what I was looking for. If it is possible to add with an image it will super for me.
Is it possible to add and update with a image upload in this project?
Thank you

Great example! Thanks for this gem!

How errors from Data Service can be handled while Dialog is already closed?

Thanks

Hello
what do I need to do so to use toaster notifications. Do I have to install something?
I get
Property 'toasterService' does not exist on type 'DataService'.ts

thank you

I get the error TypeError: undefined is not an object (evaluating 'repair.id') .
In this this.exampleDatabase.dataChange.value array is one data undefined .. this is be undefined after this line dialogRef.afterClosed().subscribe(result =>

I am getting below error:

1. CreateCarsManiaComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'nativeElement' of undefined

2. core.js:7187 ERROR TypeError: Cannot set property 'pageIndex' of undefined

3. ERROR TypeError: Cannot read property 'sortChange' of undefined

Also since I am using angular 8, I had to change the code like:

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
@ViewChild(MatSort, {static: false}) sort: MatSort;
@ViewChild('filter', {static: false}) filter: ElementRef;

I need help as I am the halfway of implementing this in my project and need to finish it soon.

it is caused by the datasource I think.
but how to solve this problem?

Hi ,

I would like to have a functionality which will display a filter above all the columns and which will filter individually. Also, Would be great if we can have functionality for individual column which can filter as per extra level of filter such as contains , equals to , >= , <= .

Also, Can you add something which can format the columns as well. Meaning , user can decide which columns to keep and which to not.

I am looking for something which is combination of below two grids

https://l-lin.github.io/angular-datatables/#/advanced/individual-column-filtering
This has got individual column filtering option

https://ggmod.github.io/angular-2-data-table-demo/
This grid if you see have the option to filter the records , check top right side option. Which will show an popup and user can select which columns to keep

Hello,

Is there any tutorial so to implement this

thank you

Do you plan to add change detection OnPush?

I have this error message when I tried use addNew() function, Expected 1 arguments, but got 0.
<button mat-icon-button color="accent" (click)="addNew()" >. I want to know how can I resolve this issue. Thanks

Hi ,

This is something very urgent i need help on.
We are sending value from datasource which gets bind to mat table. My question is how to read datasource values in typescipt file of that component. When i console.log(datssource) I able to see all those properties but unable to access them when i start accesing them using . operator in ts file. its returning me either undefined or empty.

Also, How to add extra properties during connect operation of datasource which can be read on component side.

How to make the toaster functional?
Which toaster service are you using?

Right after when we update or add new item, it gives error "
Cannot read property 'id' of undefined
at eval (masters.designationcrud.component.ts:187)
at Array.filter ()
at MapSubscriber.eval [as project] (masters.designationcrud.component.ts:184)
at MapSubscriber._next (map.js:79)
at MapSubscriber.Subscriber.next (Subscriber.js:92)
at MergeMapSubscriber.notifyNext (mergeMap.js:151)
at InnerSubscriber._next (InnerSubscriber.js:25)
at InnerSubscriber.Subscriber.next (Subscriber.js:92)
at BehaviorSubject.Subject.next (Subject.js:56)
at BehaviorSubject.next (BehaviorSubject.js:46)
"

code line-
return Observable.merge(...displaydataChangeDesignation).map(() => {
//Filter data
this.filteredData = this._exampleDatabase.dataDesignation.slice().filter((designation: IDesignation) => {
const searchStr = (designation.id + designation.designationName ).toString().toLowerCase();// this line gives error
return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
});

   if we click reload data button then it binds newly added/updated value. I think the grid is loading data too fast before it gets data from the server and find nothing.Please suggest how can I correct this issue.

In the latest version of angular material v6 mat table element is changed to table.
Is these demo is compatible with latest angular v6 and angular material v6?

Hi,

strangely that my edit component (as entryComponent) it can not be bootstraped. The buttons look like this:

My code of the button and app.module.ts is exactly the same as this example.

Could you please help?

Thank you

Cella

Hello,

I am a newbie to Angular and able to do my first trail with your working example. Thank you so much.

Have to improve my UI, with additional data - Sample UI/ JSON attached.

1. I will have non-tabular data along with multiple no. of tabular data. (I will have multiple tables one after the other in the final UI.)
2. My first trial was sucessful - I had ONLY list of products in the JSON and it was working properly. Then I have added additional data elements in JSON n HTML as reflected in attached pic (like patient age/gender/country..etc).
3. After the JSON update, without any code change, console showed the correct data on console (exampledatabase)
4. However MatTable earler populated with list of products is loosing data.

Pls help me..

** I do not know how to change data service/ model / loaddata()...etc according to new data.
** Are there any additional changes reqd to accomplish above remnt?
** I will have to use more tables in the UI in similar manner - If so, JSON change followed by model and Html changes are sufficent?

Thanks in advance
ASHA

paginator adding firstlastbutton and page navigation index[page1,page2...] to navigate according to page