Adding items to angular material table

Question

Helloo, i want to push object to array element data and to show in table, but when i do it nothing happend, my table is empty. I am new to this and i am learning, where i made a mistake?

I have app component and one more dialog component, when i insert information into dialog, on button add, on close dialog, i send that data and push into data element array.

App component:

    export interface PeriodicElement {
      videoname: string;
      url: string;
      author: string;
      description: string;
    }

    const ELEMENT_DATA: PeriodicElement[] = [];

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
      title = 'Zadatak';

      displayedColumns: string[] = ['videoname', 'author', 'description', 'url' ];
      dataSource = ELEMENT_DATA;

      constructor(public dialog: MatDialog, private changeDetectorRefs: ChangeDetectorRef) {}


      openDialog(): void {
      const dialogRef = this.dialog.open(AddVideoFormComponent);
      dialogRef.afterClosed().subscribe(data => {
      ELEMENT_DATA.push(data);
      });
      }
    }

Dialog component:

export class AddVideoFormComponent implements OnInit {
  videoForm: FormGroup;

  constructor(public dialogRef: MatDialogRef<AddVideoFormComponent>) { }

  ngOnInit() {
    this.videoForm = new FormGroup({
      videoname : new FormControl('', Validators.required),
      url : new FormControl('', Validators.required),
      author : new FormControl('', Validators.required),
      description : new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    this.dialogRef.close(this.videoForm.value);
  }
}

In this example there is only 1 component, i don't understand how to connect add() with button in other component? Thanks. I did it like this but still don't work: openDialog(): void { const dialogRef = this.dialog.open(AddVideoFormComponent); dialogRef.afterClosed().subscribe(data => { this.dataSource.data.push(ELEMENT_DATA[this.index++]); this.table.renderRows(); }); } — Mladen Nikolić
– Mladen Nikolić, Commented Mar 24, 2020 at 15:03
no, your push mush be this.dataSource.push(data);. In my e.g. push an element from an array, you add an element from the data you filled in the Dialog box — Eliseo
– Eliseo, Commented Mar 24, 2020 at 15:20

Eliseo · Accepted Answer · 2020-03-24 15:18:45Z

1

just add a reference variable in your table (yes, the #table)

<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  ...
</table>

Add viewChild in your app.component

import {MatTable} from '@angular/material/table' //<--you need import MatTable

@ViewChild('table', { static: true,read:MatTable }) table

In your funcion openDialog

 openDialog(): void {
      const dialogRef = this.dialog.open(AddVideoFormComponent);
      dialogRef.afterClosed().subscribe(data => {
        this.dataSource.push(data); //<--make the push on dataSource
        this.table.renderRows()  //<--say to Angular that render the rows
      });
  }

answered Mar 24, 2020 at 15:18

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mladen Nikolić Over a year ago

You helped me s, so much, if i ever see you, you have a beer!

Eliseo Over a year ago

Yeah, count on it :)

Collectives™ on Stack Overflow

Adding items to angular material table

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related