https://github.com/naseem1amjad/angular-based-contentbook-with-instant-search

A content book (also known as phone book) that can be hosted in organizations to search their employees based on different parameters.
https://github.com/naseem1amjad/angular-based-contentbook-with-instant-search

angular api api-rest autocomplete contactbook contacts phonebook php search search-engine sqlite website

Last synced: 11 days ago
JSON representation

A content book (also known as phone book) that can be hosted in organizations to search their employees based on different parameters.

• Host: GitHub
• URL: https://github.com/naseem1amjad/angular-based-contentbook-with-instant-search
• Owner: naseem1amjad
• Created: 2021-10-07T09:35:27.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-07T13:51:55.000Z (about 3 years ago)
• Last Synced: 2024-06-13T09:02:53.265Z (5 months ago)
• Topics: angular, api, api-rest, autocomplete, contactbook, contacts, phonebook, php, search, search-engine, sqlite, website
• Language: TypeScript
• Homepage:
• Size: 2.24 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ContactBook V1.0

## About

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.

The ContactBook uses RestApi to fetch data from DB (SQLite in current case). It is a demonstration of Quick/Instant Search/Filter of data using Angular. Can be beneficial for organizations that want to have a place to find employees based on their name , designation , contact number etc.

Online Demo can be seen at https://www.ajsoftpk.com/demo/contact-book/home

![Angular example using Rest API in php](ContactBook-Search-Using-Angular-RestApi-PHP.gif "PhoneBook")

## Technical Detail

To change WebService URL, goto `./Contactbookv1.0/src/employee/employee.service.ts -> apiUrl`

Dont forget to allow CORS in your custom API.

Recommended Pattern for URL ReWrite is (home|favs|links)$

### About Source Code

Entry point to angular = main.ts - Never going to need to change this

index.html = Top Level html

styles.css = Top Level css

- AppComponent

	- navbar

		- ToolbarSearchComponent

	- router-outer

		- HomeComponent

- ToolbarSearchComponent

	- Searchbar

	- Advanced search toggle

- HomeComponent

	- AdvancedSearchComponent

	- Paginator

	- Table

- AdvancedSearchComponent

	- Form for advanced search

- DataTransferService

	- Holds methods and fields for tranfer of data from Component to Component

- RedirectComponent

	- Redirects to last open page if navigated to empty path

	eg. If you close the browser on site/favs and open site/ later, it redirects to site/favs

- EmployeeService

	- Fetches data from local web service of all employees

	Some fallback records for contact (incase unable to connect with WebService)

## Configuration

Run `npm install` to create node_modules folder and install relevant packages.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## Further help

To get more help on the Angular CLI use `ng help`

## Author

You may contact me at [email protected] to get help in setting up (i.e. Rest APIs for connectivity)