Giới thiệu HttpClient

Module HttpClient được sử dụng để xây dựng ứng dụng xử lý các yêu cầu Http trong ứng dụng. Ví dụ như các yêu cầu lấy dữ liệu từ server API.​

Các tính năng của HttpClient bao gồm:​

• Khả năng yêu cầu các kiểu đối tượng trả về​

• Xử lý lỗi hợp lý​

• Tính năng kiểm tra​

• Chặn request/response​

Các bước sử dụng HttpClient:​

Bước 1: Khai báo HttpClient trong AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormComponent } from './form/form.component';

import { DemoComponent } from './demo/demo.component';
import { HttpClientModule } from "@angular/common/http";
@NgModule({
  declarations: [
    AppComponent,
    FormComponent,
    DemoComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
 

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Bước 2: Tạo Blog service:

gõ angular cli:

ng g s blog

File blog.service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

const url = 'http://localhost:3000/blog'


@Injectable({
  providedIn: 'root'
})
export class BlogService {

  constructor(private http: HttpClient) { }
  getAllBlogs(): Observable {
    return this.http.get(url)
  }
  findBlog(id: number): Observable {
    return this.http.get(`${url}/${id}`)
  }
}

Tạo Component blog:

file blog.component.ts:

import { Component, OnInit } from '@angular/core';
import { BlogService } from 'src/app/service/blog.service';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {

  list_blog: any = []
  constructor(private blogService: BlogService) { }

  ngOnInit(): void {
    this.blogService.getAllBlogs().subscribe((data) => {
      this.list_blog = data;
    })
  }

}

Tại blog.component.html:

<div class="blog" *ngFor="let item of list_blog" style=" cursor: pointer;">
                    <div class="row" routerLink="/blog/{{item.id}}">
                        <div class="col-lg-3 col-md-3 col-sm-3" style="display: flex; align-items: center; ">
                            <div class="image_blog">
                                <img width="100%" src="{{item.image}}" alt="">

                            </div>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                            <div class="content_blog ">
                                <div class="title_blog">
                                    <h2>{{item.title}}</h2>
                                </div>
                                <div class="data_blog d-flex  align-items-center justify-content-between">
                                    <h6 class="mt-3 mb-3">{{item.date}}</h6>
                                    <div class="author d-flex align-items-center ">
                                        <img class="me-2" src="{{item.img_author}}" width="30px" height="30px" alt="">
                                        <p class="m-0">{{item.author}}</p>
                                    </div>
                                </div>
                                <div class="describe">
                                    <p class="m-0">{{item.content}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

TẠO ROUTE Xem chi tiết :

 { path: 'blog/:id', component: DetailBlogComponent }

Tạo Component BlogDetail :

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BlogService } from 'src/app/service/blog.service';

@Component({
  selector: 'app-detail-blog',
  templateUrl: './detail-blog.component.html',
  styleUrls: ['./detail-blog.component.css']
})
export class DetailBlogComponent implements OnInit {

  blog: any = [];

  constructor(private blogService: BlogService, private activatedRouter: ActivatedRoute) { }

  ngOnInit(): void {
    this.activatedRouter.paramMap.subscribe((param: any) => {
      let id: any = param.get(['id'])
      this.blogService.findBlog(id).subscribe((data) => {
        this.blog = data;
      })
    })

  }

 

}

Hiển thị chi tiết bài viết ở view rồi xem kết quả nhé