Creating your first Angular application: rendering a data table and creating a user page.
We continue building our first Angular application. In the previous lesson we added a data table with mock data. In this lesson we will use real data and create a user page.
As homework, try to explore Angular resolvers.
users.html
@let users = users$ | async;
@if (users) {
<table mat-table [dataSource]="users">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>User name</th>
<td mat-cell *matCellDef="let element">
<a [routerLink]="['users', element.id]">{{element.name}}</a>
</td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef>User email</th>
<td mat-cell *matCellDef="let element">{{element.email}}</td>
</ng-container>
<ng-container matColumnDef="phone">
<th mat-header-cell *matHeaderCellDef>User phone</th>
<td mat-cell *matCellDef="let element">{{element.phone}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
}
user.ts
import {Component, inject, OnInit} from '@angular/core';
import {UsersService} from '../../services/users-service';
import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-user',
imports: [],
templateUrl: './user.html',
styleUrl: './user.scss',
})
export class User implements OnInit{
private users = inject(UsersService);
private route = inject(ActivatedRoute);
public ngOnInit() {
const userId = this.route.snapshot.params['id'];
}
}
0 Comments