I need to a new row with data into table

Question

I need to add data into the table, by clicking on add site button data with name description have to be added without any inputs giving at the table. now I need to add data by passing them into an array and able call them at add sites button and that called row should be added into the table. please help me with this.

<div class="table-container mat-elevation-z8">
  <mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header > Organization Name <mat-icon>filter_list</mat-icon> </mat-header-cell>
      <mat-cell *matCellDef="let databaseList" > {{databaseList.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef mat-sort-header > Description <mat-icon>filter_list</mat-icon> </mat-header-cell>
      <mat-cell *matCellDef="let databaseList" > {{databaseList.description}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="remove">
      <mat-header-cell *matHeaderCellDef mat-sort-header > Remove  </mat-header-cell>
      <mat-cell *matCellDef="let row; let i = index;">
        <button mat-icon-button color="primary" (click)="deleteRow(i)">
          <mat-icon>remove_circle</mat-icon>
        </button>
      </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" ></mat-row>

  </mat-table>
</div>

<div class="actionsLine">
  <span class='leftButtons'>
    <button class="mat-button menu-button" (click)="addSite()">
      <mat-icon color="primary"> add_to_photos </mat-icon>
      Add Site
    </button>
  </span>
  <ng-container *ngIf="showButtons">
    <span class="rightButtons">
      <button class="mat-button menu-button" (click)="cancel()">
        <mat-icon>block</mat-icon> CANCEL
      </button>
      <button class="mat-button primary-button" (click)="saveChanges()">
        SAVE
      </button>
    </span>        
  </ng-container>
</div>  

service file


export interface Database {
  organizationId : String;
  organizationname: String;
  description: String;
}

const Management_DATABASE: Database[]=[
  {
    Id:'A123-ABCD-2458SA-14FA',
   name: 'hospital_Arun',
    description:'demo group of Arun hospital'
  },
  {
    Id:'B123-PASA-2458SA-15FA',
    name: 'Ameresh_hospital',
    description:'Ameresh is a hospital for demo'
  },
  {
    Id:'C123-LATRU-2458SA-13FA',
    name: 'Biresh_hospital',
    description:'Biresh group'
  },
  {
    Id:'D123-METRO-2458SA-18FA',
    name: 'Deny_hospital',
    description:'Deny_hospital is used for demo purpose'
  },
  {
    Id:'E123-ABCD-2458SA-14FA',
    name: 'Pravan_hospital',
    description:'demo group of Pravan_hospital'
  },
]


@Injectable()
export class ManagementService {

  constructor() { }
  getOrganization(): Database[]{
    return Management_DATABASE;
  }

  addOrganization() : Database[]{
    return 
  }

}

Answer 1

Just make a function for adding a new site.

Component:

You need to push a new blank object into either dataSource or Management_DATABASE

  addSite() {    
      this.dataSource.push({organizationId: '', organizationname: '', description: ''});

     // OR

      this.Management_DATABASE.push({organizationId: '', organizationname: '', description: ''});
    }