ngx-grs v0.1.1

Ngx-generic-rest-service

A lightweight, strongly typed & very easy-to-use Angular library that handles HTTP requests to decrease boilerplate when you write HTTP services.

Installation

npm install ngx-grs

or

yarn add ngx-grs

Usage

1. Create your Angular service (e.g., tasksService):

   ng generate service tasks

2. Extend your Angular service from NgxGenericRestService:

   @Injectable({ providedIn: "root" })
   export class TasksService extends NgxGenericRestService {}

3. Call the constructor of the NgxGenericRestService class and pass-in the baseUrl and resourceName:

   @Injectable({ providedIn: "root" })
   export class TasksService extends NgxGenericRestService {
     constructor() {
       super({
         baseUrl: "https://example.com/api", // environment.apiUrl
         resourceName: "tasks", // API controller
       });
       // endpoint: https://example.com/api/tasks
     }
   }

   That's it! You can now use your tasks service to perform all kind of HTTP requests

Perform HTTP request

Let's assume you have a tasks-list smart component:

The first thing you need to do is to inject your TasksService:

@Component({
  templateUrl: "./tasks-list.page.html",
  styleUrls: ["./tasks-list.scss"],
})
export class TasksListPage implements OnInit {
  constructor(private tasksService: TasksService) {}

  ngOnInit(): void {}
}

You can now perform HTTP requests inside this component:

// Model
export interface Task {
  id: number;
  name: string;
  done: boolean;
}

• Get a list of tasks

  tasks: Task[];
  
  fetchTasks(): void {
    this.tasksService.list<Task[]>().subscribe(tasks => this.tasks = tasks);
  }

• Get a single task

  task: Task;
  
  fetchTask(taskId: number): void {
    this.tasksService.single<Task>(taskId).subscribe(task => this.task = task);
  }

• Create a task

  createTask(task: Task): void {
    this.tasksService.add<Task>(task).subscribe();
  }

• Update a task with a PUT request

  updateTask(taskId: number, task: Partial<Task>): void {
    this.tasksService.update<Task>(taskId, task).subscribe();
  }

• Update a task with a PATCH request

  updateTask(taskId: number, task: Partial<Task>): void {
    this.tasksService
  	.update<Task>(taskId, task, {
  	  method: 'PATCH'
  	})
  	.subscribe();
  }

• Delete a task

  deleteTasks(taskId: number): void {
    this.tasksService.delete<Task>(taskId).subscribe();
  }

Default HttpClient request options

Custom HTTP options