/
user.component.ts
48 lines (43 loc) · 1.09 KB
/
user.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { Component } from '@angular/core';
import { loadingComponent } from './loading.component';
import { User, UserListComponent } from './user-list.component';
@Component({
standalone: true,
selector: 'app-user',
imports: [loadingComponent, UserListComponent],
template: `
<h1>@defer</h1>
<button #start (click)="onFetch()">読み込み</button>
<div>
@defer (on interaction(start)) {
@defer (when loaded) {
<app-user-list [users]="users"></app-user-list>
} @placeholder {
<app-loading />
}
} @placeholder {
データが読み込まれていません
}
</div>
`,
styles: [`
button {
display: block;
margin-bottom: 1rem;
}
`],
})
export class UserComponent {
loaded = false;
users: User[] = [];
onFetch() {
setTimeout(() => {
this.loaded = true;
this.users = [
{ id: 1, name: 'ユーザー1', role: '管理者' },
{ id: 2, name: 'ユーザー2', role: "一般" },
{ id: 3, name: 'ユーザー3', role: "一般" },
];
}, 3000);
}
}