update

src/app/+admin/Management/Job/Job.component.ts

@@ -60,7 +60,6 @@ export class JobComponent implements OnInit {
     this.loading = true;
     this.jobService.jobsGet().pipe(
       tap((res) => {
-        console.log(res);
         if (res.responseData)
           this.listOfJob = res.responseData.rows;
       }),

src/app/+admin/data-access/services/JobService.service.ts

@@ -14,11 +14,7 @@ export class JobService {
   apiUrlById = environment.API_DOMAIN + '/jobById';
   constructor(private http: HttpClient) {}
 
-  // jobsGet(): Observable<ResponseResult<JobModel[]>> {
-  //   return this.http.get<ResponseResult<JobModel[]>>(this.apiUrl);
-  // }
   jobsGet(): Observable<ResponseResult<Rows<JobModel>>> {
-    const params = new HttpParams()
     return this.http.get<ResponseResult<Rows<JobModel>>>(this.apiUrl);
   }
 

src/app/+home/component/JobCard/JobCard.component.html

-<nz-card nzHoverable style="width:240px" [nzCover]="coverTemplate">
-  <nz-card-meta nzTitle="Europe Street beat" nzDescription="www.instagram.com"></nz-card-meta>
+<nz-card *ngIf="job" [nzTitle]="job.title" [nzExtra]="extraTemplate">
+  <p>loại công việc: {{job.type}}</p>
+  <p>Công ty: {{job.company}}</p>
+  <p>Địa chỉ làm việc: {{job.location}}</p>
 </nz-card>
-<ng-template #coverTemplate>
-  <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
+
+<ng-template #extraTemplate>
+  <button class="tw-mr-2" nz-button nzType="primary" nzSize="small">
+  more
+</button>
 </ng-template>

src/app/+home/component/JobCard/JobCard.component.ts

-import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
 import { NzCardModule } from "ng-zorro-antd/card";
+import { Job } from "../../data-access/model/Job.model";
+import { CommonModule } from "@angular/common";
 
 @Component({
   selector: 'job-card',
   templateUrl: './JobCard.component.html',
-  imports: [NzCardModule],
+  imports: [NzCardModule,
+    CommonModule
+  ],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class JobCardComponent {
-
+export class JobCardComponent{
+  @Input() job?: Job;
 }

src/app/+home/component/JobDetail/JobDetail.component.html

+<nz-card style="width:300px;" nzTitle={{job?.title}} [nzExtra]="extraTemplate">
+  <p>{{job?.type}}</p>
+  <p>{{job?.company}}</p>
+  <p>{{job?.location}}</p>
+</nz-card>
+<ng-template #extraTemplate>
+  <a>More</a>
+</ng-template>

src/app/+home/component/JobDetail/JobDetail.component.ts

+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { NzCardModule } from "ng-zorro-antd/card";
+import { JobModel } from "../../data-access/model/Job.model";
+
+@Component({
+  selector: 'job-detail',
+  templateUrl: './JobDetail.component.html',
+  imports: [NzCardModule],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class JobDetailComponent {
+  @Input() job?: JobModel
+}

src/app/+home/component/JobListCard/JobListCard.component.html

-<nz-divider nzOrientation="left" nzText="Vertical"></nz-divider>
-<div nz-row [nzGutter]="[16, 24]" ngFor="let index of listOfJob">
-  <job-card></job-card>
-</div>
+<!-- <nz-card nzTitle="Jobs List" style="width:100%">
+  <ng-container *ngIf="listOfJob?.length; else noJobsTemplate">
+    <job-card *ngFor="let job of listOfJob" [job]="job"></job-card>
+  </ng-container>
+  <ng-template #noJobsTemplate>
+    <p>No jobs available</p>
+  </ng-template>
+</nz-card>
+
+<p>{{ listOfJob }}</p> Hiển thị dữ liệu của listOfJob -->
+
+<nz-list nzGrid>
+  <div nz-row [nzGutter]="16">
+    @for (item of listOfJob; track item) {
+      <div nz-col [nzSpan]="6">
+        <nz-list-item>
+          <job-card [job] = "item">Card content</job-card>
+        </nz-list-item>
+      </div>
+    }
+  </div>
+</nz-list>

src/app/+home/component/JobListCard/JobListCard.component.ts

-import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from "@angular/core";
 import { JobCardComponent } from "../JobCard/JobCard.component";
 import { NzDividerModule } from "ng-zorro-antd/divider";
 import { NzGridModule } from "ng-zorro-antd/grid";
 import { JobModel } from "../../../+admin/data-access/model/jobModel.model";
-
+import { JobService } from "../../data-access/service/Job.service";
+import { tap } from "rxjs";
+import { CommonModule } from "@angular/common";
+import { NzListModule } from 'ng-zorro-antd/list';
+import { NzCardModule } from "ng-zorro-antd/card";
 @Component({
-  selector: 'app-job-card',
+  selector: 'app-home-list-job',
   templateUrl: './JobListCard.component.html',
   imports: [
+    CommonModule,
     NzDividerModule,
     NzGridModule,
     JobCardComponent,
+    NzGridModule,
+    NzListModule,
+    NzCardModule
   ],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class JobListCardComponent {
-  listOfJob: JobModel[] = [];
+export class JobListCardComponent implements OnInit {
+  listOfJob?: JobModel[] ;
+  constructor(private jobService: JobService,private _changeDetectorRef: ChangeDetectorRef,) {}
+  ngOnInit() {
+    this.jobService.jobsGet().pipe(
+      tap((res) => {
+        this.listOfJob = res.responseData?.rows as JobModel[];
+        this._changeDetectorRef.markForCheck();
+        console.log(this.listOfJob);
+      }),
+    ).subscribe();
+  }
 }

src/app/+home/data-access/model/Job.model.ts

+export interface Job {
+  id: string;
+  type?: string;
+  created_at: string;
+  company?: string;
+  company_url?: string;
+  location?: string;
+  title?: string;
+  description?: string;
+  how_to_apply?: string;
+  company_logo?: string;
+}

src/app/+home/data-access/service/Job.service.ts

+import { Injectable } from "@angular/core";
+import { environment } from "../../../../environments/environment.development";
+import { Observable } from "rxjs";
+import { ResponseResult, Rows } from "../../../shared/data-access/interface/response.type";
+import { Job } from "../model/Job.model";
+import { HttpClient } from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root',
+})
+export class JobService {
+  apiUrl = environment.API_DOMAIN + '/jobs';
+  constructor(private http: HttpClient) {}
+  jobsGet(): Observable<ResponseResult<Rows<Job>>> {
+    return this.http.get<ResponseResult<Rows<Job>>>(this.apiUrl);
+  }
+}

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

 <meu-home-header></meu-home-header>
+<app-home-list-job></app-home-list-job>
 <meu-home-footer></meu-home-footer>

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

@@ -9,6 +9,7 @@ import { HeaderComponent } from '../../+shell/ui/components/header/feature/heade
 import { FooterComponent } from "../../+shell/ui/components/footer/feature/footer.component";
 import { HeaderHomeComponent } from '../layout/feature/Components/header/header.component';
 import { FooterHomeComponent } from '../layout/feature/Components/footer/footer.component';
+import { JobListCardComponent } from '../component/JobListCard/JobListCard.component';
 
 
 @Component({
@@ -22,7 +23,8 @@ import { FooterHomeComponent } from '../layout/feature/Components/footer/footer.
     NzMenuModule,
     NzIconModule,
     HeaderHomeComponent,
-    FooterHomeComponent
+    FooterHomeComponent,
+    JobListCardComponent
 ],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],