# Sample Project

The WireBootstrap for Angular solution includes a sample project that demonstrates how to use WireBootstrap within the Angular framework.

## Pipeline

The sample is a standard Angular project [created with the Angular CLI](https://angular.io/guide/component-overview).  

The classes needed for the sample are registered in the application's module file at `\src\app\app.module.ts`.

![app.module.ts](https://4244610584-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJqd16AL07VEGrzNtwkHj%2Fuploads%2FWswSMo7TzbcbBx7ltvJR%2Fimage.png?alt=media\&token=4bc1183b-c26d-4887-8fd4-bd8dc261e72b)

The example page view components in the sample are used in the `\src\app\app.component.html` template.

![app.component.html](https://4244610584-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJqd16AL07VEGrzNtwkHj%2Fuploads%2FVaJTW1x5amrdO88R4B4c%2Fimage.png?alt=media\&token=813bee16-fa65-4b31-84f2-9d0273030821)

## Data

The sample data used in the project is the same data used in the [WireBootstrap for Gentelella](https://docs.wirebootstrap.com/themes/sample-data) theme project.  

This data and the classes supporting data access are located in the project at `\src\app\sample\data`.

### Data Service

The data service at `\src\app\sample\data\sample-data-service.ts` defines a [DataSet](https://docs.wirebootstrap.com/wirebootstrap/datasets) that uses the sample data source.  This service is imported and defined as an Angular component provider in the example page view components.

![example1.component.ts](https://4244610584-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJqd16AL07VEGrzNtwkHj%2Fuploads%2FFqgW8GRCPduJx9T4nUBt%2Fimage.png?alt=media\&token=12c2ff0f-4700-4af5-9dec-dd797322b56e)