update: job detail

src/app/+job/data-access/service/job.service.ts

@@ -21,4 +21,8 @@ export class JobService {
                 }
             });
     }
+
+    jobsGetOne(id: string) {
+        return this._http.get<ResponseResult<Jobs.Job>>(`jobs/${id}`);
+    }
 }
\ No newline at end of file

src/app/+job/feature/+job_detail/job-detail.component.ts

+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { JobApi } from '../../../+admin/management/job/data-access/model/job-manager.model';
+import { JobService } from '../../data-access/service/job.service';
+import { ActivatedRoute } from '@angular/router';
+import { catchError, of, tap } from 'rxjs';
+import { Jobs } from '../../data-access/model/job.model';
+
+@Component({
+    selector: 'job-detail',
+    standalone: true,
+    template: `
+    <div class="tw-max-w-3xl tw-mx-auto">
+    <p> {{ job?.company }} </p>
+    <p> {{ job?.company_logo }} </p>
+    <p> {{ job?.id }} </p>
+    <p> {{ job?.company }} </p>
+    <p> {{ job?.company }} </p>
+    <p> {{ job?.company }} </p>
+    <p> {{ job?.company }} </p>
+    <p> {{ job?.company }} </p>
+    </div>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+export class JobDetailComponent implements OnInit {
+
+    id: string | null = '';
+    job: Jobs.Job | null = null;
+
+    constructor(
+        private _jobService: JobService,
+        private _activatedRoute: ActivatedRoute,
+        private _cdr: ChangeDetectorRef
+    ) { }
+
+    ngOnInit() {
+        this.id = this._activatedRoute.snapshot.paramMap.get('id');
+        this.getJob();
+    }
+
+    getJob() {
+        this._jobService.jobsGetOne(this.id!)
+        .pipe(
+            tap((response) => {
+                this.job = response?.responseData;
+                
+                this._cdr.markForCheck();
+            }),
+            catchError((err) => {
+                return of(null);
+            })
+        )
+        .subscribe();
+    }
+}
\ No newline at end of file

src/app/+job/feature/job.component.html

@@ -22,8 +22,8 @@
           <p>Location: {{ job.location }}</p>
         </div>
         <div class="tw-flex-grow tw-grid tw-justify-end ">
-            <button class="tw-h-10 tw-px-2 tw-border tw-rounded-lg hover:tw-bg-black hover:tw-text-white tw-transition">
-                Apply
+            <button routerLink="/jobs/detail/{{job.id}}" class="tw-h-10 tw-px-2 tw-border tw-rounded-lg hover:tw-bg-black hover:tw-text-white tw-transition">
+              See detail
           </button>
         </div>
       </div>

src/app/+job/feature/job.component.ts

@@ -8,6 +8,7 @@ import { catchError, of, tap } from 'rxjs';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'meu-job-list-page',
@@ -20,7 +21,8 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
     NzCardModule,
     NzAvatarModule,
     NzPaginationModule,
-    DatePipe
+    DatePipe,
+    RouterLink
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/+job/job.routes.ts

 import { Route } from '@angular/router';
 
 const JOB_ROUTES: Route[] = [
+  {
+    path: '',
+    children: [
       {
         path: '',
         loadComponent: () =>
           import('./feature/job.component').then((m) => m.JobComponent),
       },
+      {
+        path: 'detail/:id',
+        loadComponent: () =>
+          import('./feature/+job_detail/job-detail.component').then((m) => m.JobDetailComponent),
+      }
+    ],
+  },
 ];
 export default JOB_ROUTES;

src/app/+shell/ui/layout.component.ts

@@ -20,7 +20,6 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
   standalone: true,
   imports: [
     RouterModule,
-    DatePipe,
     HeaderComponent,
     FooterComponent,
     NzButtonModule,