Throughout this tutorial, we’ll be learning how to build an Angular 11 CRUD application with Bootstrap 4 styles to consume a REST Web API, create, read, modify, and search data.
We will learn how to build an Angular 11 front-end application that fetches data from a REST API of products:
We’ll be building a Angular 11 frontend app for a presumed REST API exporting the following REST API endpoints:
:id
:id
:id
keyword
.All of them can work well with this Angular App.
These are the components of our CRUD app:
App
component is the parent of all other components and contains a router-outlet
directive where the router will be inserting any matched component. It also contains a navigation bar that contains links to the app routes using routerLink
directive.– ProductListComponent
which displays the list of products.
– ProductUpdateComponent
which displays a form for editing product’s details by :id
.
– ProductCreateComponent
which displays a form for creating a new product.
The components use the ProductService
methods for actually making CRUD operations against the REST API. The service makes use of Angular 11 HTTPClient
to send HTTP requests to the REST and process responses.
#angular #angular-11 #bootstrap 4