vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: save

Browse Source
This commit is contained in:
thomas
2024-02-04 13:52:19 +01:00
parent cbe3967cfe
commit c98aff0bae
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/angular/view-transition/src/app/blog/blog.component.ts
View File

@@ -8,10 +8,10 @@ import { ThumbnailComponent } from './thumbnail.component';
imports: [ThumbnailComponent], imports: [ThumbnailComponent],
template: ` template: `
<div <div
class="flex h-20 items-center justify-center border-b-2 text-4xl shadow-md"> class="fixed left-0 right-0 top-0 z-50 flex h-20 items-center justify-center border-b-2 bg-white text-4xl shadow-md">
Blog List Blog List
</div> </div>
<div class="flex h-screen flex-col items-center gap-10 border p-10"> <div class="my-20 flex h-screen flex-col items-center gap-10 border p-10">
@for (post of posts; track post.id) { @for (post of posts; track post.id) {
<blog-thumbnail [post]="post" /> <blog-thumbnail [post]="post" />
} }

15
apps/angular/view-transition/src/app/post/post.component.ts
View File

@@ -5,6 +5,7 @@ import {
computed, computed,
input, input,
} from '@angular/core'; } from '@angular/core';
import { RouterLink } from '@angular/router';
import { ThumbnailHeaderComponent } from '../blog/thumbnail-header.component'; import { ThumbnailHeaderComponent } from '../blog/thumbnail-header.component';
import { fakeTextChapters, posts } from '../data'; import { fakeTextChapters, posts } from '../data';
import { PostHeaderComponent } from './post-header.component'; import { PostHeaderComponent } from './post-header.component';
@@ -12,9 +13,19 @@ import { PostHeaderComponent } from './post-header.component';
@Component({ @Component({
selector: 'post', selector: 'post',
standalone: true, standalone: true,
imports: [ThumbnailHeaderComponent, NgOptimizedImage, PostHeaderComponent], imports: [
ThumbnailHeaderComponent,
NgOptimizedImage,
PostHeaderComponent,
RouterLink,
],
template: ` template: `
<div class="w-full max-w-[800px]"> <div class="relative w-full max-w-[800px]">
<button
routerLink="/"
class="absolute left-2 top-2 z-20 rounded-md border bg-white p-2">
Back
</button>
<img [ngSrc]="post().image" alt="" width="960" height="540" /> <img [ngSrc]="post().image" alt="" width="960" height="540" />
<h2 class="p-7 text-center text-5xl">{{ post().title }}</h2> <h2 class="p-7 text-center text-5xl">{{ post().title }}</h2>
<post-header [date]="post().date" class="mb-20" /> <post-header [date]="post().date" class="mb-20" />