main.ts
index.html
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
styles: [`
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background: #f7f7f7; }
.controls { display: flex; gap: 8px; margin-bottom: 8px; }
input { padding: 6px 8px; }
`],
template: `
<h3>Filter & Sort</h3>
<div class="controls">
<label>Search: <input #q (input)="query = q.value" placeholder="Type to filter..." /></label>
<button (click)="setSort('name')">Sort by Name</button>
<button (click)="setSort('price')">Sort by Price</button>
<button (click)="toggleDir()">{{ sortDir === 1 ? 'Asc' : 'Desc' }}</button>
</div>
<table>
<thead>
<tr><th>Name</th><th style="width:140px">Price</th></tr>
</thead>
<tbody>
<tr *ngFor="let p of view">
<td>{{ p.name }}</td>
<td>{{ p.price | currency:'USD' }}</td>
</tr>
</tbody>
</table>
`
})
export class App {
items = [
{ name: 'Angular', price: 0 },
{ name: 'React', price: 0 },
{ name: 'Vue', price: 0 },
{ name: 'Svelte', price: 0 },
{ name: 'Solid', price: 0 },
{ name: 'Lit', price: 0 }
];
query = '';
sortKey = 'name';
sortDir = 1; // 1 asc, -1 desc
get view() {
const q = this.query.toLowerCase();
const filtered = this.items.filter(it => it.name.toLowerCase().includes(q));
const dir = this.sortDir;
const key = this.sortKey;
return [...filtered].sort((a, b) => {
const av = a[key];
const bv = b[key];
return av < bv ? -1 * dir : av > bv ? 1 * dir : 0;
});
}
setSort(key) {
if (this.sortKey === key) {
this.toggleDir();
} else {
this.sortKey = key;
}
}
toggleDir() {
this.sortDir = this.sortDir === 1 ? -1 : 1;
}
}
bootstrapApplication(App);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular Lists - Filter & Sort</title>
</head>
<body>
<app-root></app-root>
</body>
</html>