Programozás Material Tábla Akciógombok

Hogyan készíts gombokat a Material Táblába?

A szerkesztéshez használt gombok mindig jól jönnek. Nézd meg a videót, amiben megmutatom, hogyan készíts ilyeneket.

Nézd meg a videót


Github Repo

https://github.com/cherryApp/ast-mat-table

Szöveges segítség

Öt lépésben oldottam meg a problémát:

  • Felvettem a MatIconModule osztályt az app.module.ts fájlba:

    import { MatIconModule } from '@angular/material/icon';
    //
    imports: [
    MatIconModule,
    ]
    
  • Frissítettem a userService -t:

    refresh(): void {
      this.get().toPromise().then(
        users => this.watcher$.next(users as User[]),
        err => console.error(err)
      );
    }
    
    get(id?: string | number): Observable<User | User[]> {
      return this.http.get<User | User[]>(`${this.apiUrl}/${id || ``}`);
    }
    
    create(data: User): Observable<User> {
      return this.http.post<User>(`${this.apiUrl}`, data);
    }
    
    update(id: string | number, data: User): Observable<any> {
      return this.http.put(`${this.apiUrl}/${id}`, data);
    }
    
    delete(id: string | number): Observable<any> {
      return this.http.delete(`${this.apiUrl}/${id}`).pipe(
        tap( () => {
          this.refresh();
        })
      );
    }
    
  • Összeraktam az editable komponenst
    editable.component.ts
    editable.component.html
    editable.component.scss

That's it!