Создание первого приложения на Angular. Отрисовка таблицы и создание страницы пользователя
Мы продолжаем разработку нашего первого Angular приложения. На прошлом уроке мы добавили таблицу с mock данными. В этом уроке мы используем реальные данные, а также создадим страницу юзера.
В качестве домашнего задания предлагаю разобрать angular резолверы.
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