This project was generated with Angular CLI version 9.1.1.
It is basically an angular web app for maintaining Contact Information. Things implemented in this project
- Ability to view all the contacts from a json file stored under the assets folder.
- Ability to add a new contact by giving all the mandatory details.
- Save Button validation while adding a new contact, where in most of the fields are mandatory and the status would be inactive by default
- Ability to edit an existing contact and choosing the status using the toggle button
- Ability to delete an existing contact from the directory
- Added pagination to the table to accomodate 250 rows together. By default, the user sees only 10 rows per page
- The user has the option switch to any particular page directly using the Dropdown option
- The user has the ability to switch back and forth using the next and previous icons
- The user is able to view page information like the start and end index of a particular page
- The user gets to choose the no of rows in a particular page using the dropdown option
- The user gets navigated back to the first page the moment we change the no of rows dropdown option
- Ability to filter the Contact Information by first name, last name, email, phone number or status
- Validation for Phone number as no text can be entered there.
- All the components in the web app are unit tested with code coverage over 100% and you can find the coverage report under coverage folder in the root directory
While creating this web app, the best software design practices and coding standards were used. I have segregated the components, filters, services, models for better folder structure.
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.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
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.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.
"# custom-ngx-pagination"