File
Methods
|
applyFilter
|
applyFilter(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
|
|
dataSource
|
Default value : new MatTableDataSource<IService>()
|
|
|
|
displayedColumns
|
Type : string[]
|
Default value : [
'service_id',
'nom_service',
'description',
'marchand',
]
|
|
|
|
paginator
|
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator)
|
|
|
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule, MatCardTitle } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { RouterLink, RouterOutlet } from '@angular/router';
import { IService } from 'src/app/_interfaces/servives/service';
import { ServiceService } from 'src/app/_services/service/service.service';
import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
@Component({
selector: 'bgui-view-service',
standalone: true,
imports: [
RouterLink,
RouterOutlet,
CommonModule,
MatPaginator,
MatTableModule,
MatFormFieldModule,
MatInputModule,
CarouselComponent,
MatCardModule,
MatCardTitle,
ReactiveFormsModule,
MatButtonModule,
MatIconModule,
MatCheckboxModule,
MatPaginatorModule,
FormsModule,
MatMenuModule,
],
templateUrl: './view-service.component.html',
styleUrl: './view-service.component.scss',
})
export class ViewServiceComponent {
services: IService[] = [];
displayedColumns: string[] = [
'service_id',
'nom_service',
'description',
'marchand',
];
dataSource = new MatTableDataSource<IService>();
@ViewChild(MatPaginator) paginator!: MatPaginator;
constructor(private service: ServiceService) {}
ngOnInit(): void {
this.service.getServices().subscribe((data: IService[]) => {
this.services = data;
console.log('services=>', this.services);
this.dataSource.data = this.services;
});
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.paginator.pageIndex = this.paginator.pageSize;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
<div class="content sm-gutter">
<div class="page-title mb-20">
<h3 style="margin-bottom: 25px">Services</h3>
</div>
<div class="row">
<div class="col-md-12 col-vlg-12 m-b-10">
<div class="row-fluid">
<div class="span12">
<div class="grid simple">
<div class="card">
<div class="card-title">
<div class="card-body m-3">
<!-- <h5 class="mb-3 text-center">Details Service</h5> -->
<form method="post">
<div class="row justify-content-center">
<div class="col-md-5 mb-2">
<label for="service_id" class="Ftext">Id Service</label>
<input
type="text"
id="service_id"
placeholder="ID"
class="form-control"
name="service_id"
value=""
required="" />
</div>
<div class="col-md-5 mb-2">
<label for="nom_service" class="Ftext"
>Nom Service</label
>
<input
type="text"
id="nom_service"
placeholder="Nom Service"
class="form-control"
name="nom_service"
value=""
required="" />
</div>
<div class="col-md-5 mb-2">
<label for="description" class="Ftext"
>Description</label
>
<input
type="text"
id="description"
placeholder="Description"
class="form-control"
name="description"
value=""
required="" />
</div>
<div class="col-md-5 mb-2">
<label for="marchand" class="Ftext">Marchand</label>
<input
type="text"
id="marchand"
placeholder="Marchand"
class="form-control"
name="marchand"
value=""
required="" />
</div>
<div class="col-md-12">
<div class="d-flex justify-content-end mt-3">
<button
class="btn btn-sm btn-success"
id="save_button">
Enregistrer <i class="fa fa-save"></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--+++++++++++++++++++++++++++++++++++++++++++++++-->
<div class="page-title d-flex justify-content-between">
<a
data-bs-toggle="modal"
data-bs-target="#exampleModal"
[routerLink]="['create-users/']"
class="btn btn-sm btn-success m-2">
Ajouter un utilisateur
</a>
</div>
<div class="page-title d-flex justify-content-between">
<a
[routerLink]="['/assistances/create-service']"
class="btn btn-sl btn-success mt-5">
Ajouter
</a>
</div>
<div class="example-container mat-elevation-z8" style="margin-top: 40px">
<mat-form-field>
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Nom Column -->
<ng-container matColumnDef="service_id">
<mat-header-cell *matHeaderCellDef class="text">ID</mat-header-cell>
<mat-cell *matCellDef="let service">{{ service.service_id }}</mat-cell>
</ng-container>
<ng-container matColumnDef="nom_service">
<mat-header-cell *matHeaderCellDef class="text">Nom</mat-header-cell>
<mat-cell *matCellDef="let service">{{ service.nom_service }}</mat-cell>
</ng-container>
<!-- Prenoms Column -->
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef class="text"
>Description</mat-header-cell
>
<mat-cell *matCellDef="let service">{{ service.description }}</mat-cell>
</ng-container>
<!-- Email Column -->
<ng-container matColumnDef="marchand">
<mat-header-cell *matHeaderCellDef class="text">Marchand</mat-header-cell>
<mat-cell *matCellDef="let service">{{ service.marchand }}</mat-cell>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef class="text">Actions</mat-header-cell>
<mat-cell *matCellDef="let service" style="text-align: right">
<a href="#" class="m-2" [routerLink]="['view-service']"
><mat-icon style="color: blue" title="Voir"
>remove_red_eye</mat-icon
></a
>
<a href="#" class="m-2" [routerLink]="['edit-service/id']"
><mat-icon style="color: green" title="Modifier">edit</mat-icon></a
>
<a href="#" class="m-2" [routerLink]="['delete-service/id']">
<mat-icon style="color: red" title="Supprimer">
delete_sweep
</mat-icon>
</a>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator
#paginator
[pageSize]="5"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
</div>
Legend
Html element with directive