angular - Edit each row in mat table

Question

I'm a begginer and I'm trying to learn how the Mat Table is working. Since yesterday I'm trying to make an edit en delete function but nothing work, help me please.

I took exemple from this : Here but I have a problem with "this.dataSource = this.dataSource.filter((value,key)=>{" it's always telling me that this.dataSource.filter is not callable...

Can you please help me and show me how can I add an edit and delete button on each row ? Thank you.

import {Component} from '@angular/core';
import {AfterViewInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import {TooltipPosition} from '@angular/material/tooltip';

export interface PeriodicElement {
    id_projet: number;
    nom_projet: string;
    lien_jira: string;
    lien_git: string;
    lien_confluence: string;
    heure_daily: string;
    techno: string;
    client: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
    {
        id_projet: 1,
        nom_projet: 'alsace',
        lien_jira: 'https://jira',
        lien_git: 'https://git',
        lien_confluence: 'https://confluence',
        heure_daily: '09:00:00',
        techno: 'angular, symfony',
        client: 'hichem'
    },
    {
        id_projet: 2,
        nom_projet: 'credo',
        lien_jira: 'https://jira',
        lien_git: 'https://git',
        lien_confluence: 'https://confluence',
        heure_daily: '09:30:00',
        techno: 'angular, symfony',
        client: 'renato'
    },
    {
        id_projet: 3,
        nom_projet: 'intranet',
        lien_jira: 'https://jira',
        lien_git: 'https://git',
        lien_confluence: 'https://confluence',
        heure_daily: '10:45:00',
        techno: 'angular',
        client: 'christophe'
    }
];

@Component({
    selector: 'app-projets-admin',
    templateUrl: './projets-admin.component.html',
    styleUrls: ['./projets-admin.component.css']
})
export class ProjetsAdminComponent implements AfterViewInit {
    displayedColumns: string[] = ['nom_projet', 'client', 'lien_jira', 'lien_git', 'lien_confluence'];
    dataSource = new MatTableDataSource(ELEMENT_DATA);


@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

    ngAfterViewInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
    }
    applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
    }
}

question from:https://stackoverflow.com/questions/65847079/edit-each-row-in-mat-table

Answer 1

Waitting for answers