parent
c65d6b029c
commit
c2b84e3d3e
@ -0,0 +1,25 @@
|
||||
<div *ngIf="ingredients.length > 0">
|
||||
<h2>List of Ingredients</h2>
|
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef>ID</th>
|
||||
<td mat-cell *matCellDef="let ingredient">{{ ingredient.id }}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef>Name</th>
|
||||
<td mat-cell *matCellDef="let ingredient">{{ ingredient.name }}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
<mat-paginator
|
||||
[length]="ingredients.length"
|
||||
[pageSize]="5"
|
||||
[pageSizeOptions]="[5, 10, 20]"
|
||||
>
|
||||
</mat-paginator>
|
||||
</div>
|
||||
@ -0,0 +1,33 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { Ingredient } from '../models/ingredient';
|
||||
import { IngredientService } from '../services/ingredient.service';
|
||||
import { MatTableModule, MatTableDataSource } from '@angular/material/table';
|
||||
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-ingredient-list',
|
||||
standalone: true,
|
||||
templateUrl: './ingredient-list.component.html',
|
||||
styleUrls: ['./ingredient-list.component.scss'],
|
||||
imports: [CommonModule, MatTableModule, MatPaginatorModule],
|
||||
})
|
||||
export class IngredientListComponent implements OnInit {
|
||||
ingredients: Ingredient[] = [];
|
||||
dataSource: MatTableDataSource<Ingredient> =
|
||||
new MatTableDataSource<Ingredient>();
|
||||
displayedColumns: string[] = ['id', 'name'];
|
||||
|
||||
@ViewChild(MatPaginator) paginator!: MatPaginator;
|
||||
|
||||
constructor(private ingredientService: IngredientService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ingredients = this.ingredientService.getIngredients();
|
||||
this.dataSource.data = this.ingredients;
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.dataSource.paginator = this.paginator;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
@Pipe({
|
||||
name: 'truncate',
|
||||
standalone: true,
|
||||
})
|
||||
export class TruncatePipe implements PipeTransform {
|
||||
transform(
|
||||
value: string,
|
||||
limit: number = 50,
|
||||
completeWords: boolean = false,
|
||||
ellipsis: string = '...'
|
||||
): string {
|
||||
if (!value) return '';
|
||||
if (value.length <= limit) return value;
|
||||
|
||||
if (completeWords) {
|
||||
limit = value.substring(0, limit).lastIndexOf(' ');
|
||||
}
|
||||
return `${value.substring(0, limit)}${ellipsis}`;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue