To create a lead generation page where different agents can accept or reject the lead and can add new lead that will be reflected back in the lead list.
Shells are mainly created in a project for different roles. Since this assignment is single role based it consists of only one shell that includes the header and sidenav component. This shell inherits on other modules as router outlet and these modules render around it.
It consists of 4 modules: -Home module -About module -Documentation module -Shared module
It consists of 2 child components. These are added in the shared module so that they can be used anywhere in the project For search of the leads by name Showing details of the leads in the accordian format
It includes about the: -Problem statement -About me
It includes documentation of the project.
It includes the components that can be used throughout the project. -Search lead component by name -Tabular representation of lead list -Custom modal component (you can design custom modal) - Add new lead component - Success modal when new lead is generated. -Spinner for showing http requests. -Confirm dialog component that work as alert modal.
I created a wrapper theme over ng-bootsrap and primeng. So that you can directly use the components as per the color of the project. It’s been added to give consistency throughout the project without wasting much time on CSS. It consists of: -Button -Form -General -Topography -Mobile
It includes the image that are used in the project and sample lead list data.
I have created a wrapper over in the build validator class of reactive forms so that all the errors can be stored and used from one place. Path: app->modules->data-validator.ts
I have added some extra features: -Searching -Confirm modal for accept/reject -In case of pending it will show the buttons -Modular modal service -Wrapper theme -Data validator for error handling -Documentation
Generated using ngX-Rocket.
- Go to project folder and install dependencies:
npm install- Launch development server, and open
localhost:4200in your browser:
npm startdist/ compiled version
docs/ project docs and coding guides
e2e/ end-to-end tests
src/ project source code
|- app/ app components
| |- @core/ core module (singleton services and single-use components)
| |- @shared/ shared module (common components, directives and pipes)
| |- app.component.* app root component (shell)
| |- app.module.ts app root module definition
| |- app-routing.module.ts app routes
| +- ... additional modules and components
|- assets/ app assets (images, fonts, sounds...)
|- environments/ values for various build environments
|- theme/ app global scss variables and theme
|- translations/ translations files
|- index.html html entry point
|- main.scss global style entry point
|- main.ts app entry point
|- polyfills.ts polyfills needed by Angular
+- test.ts unit tests entry point
reports/ test and coverage reports
proxy.conf.js backend proxy configuration
Task automation is based on NPM scripts.
| Tasks | Description |
|---|---|
| npm start | Run development server on http://localhost:4200/ |
| npm run build [-- --env=prod] | Lint code and build app for production in dist/ folder |
| npm test | Run unit tests via Karma in watch mode |
| npm run test:ci | Lint code and run unit tests once for continuous integration |
| npm run e2e | Run e2e tests using Protractor |
| npm run lint | Lint code |
| npm run translations:extract | Extract strings from code and templates to src/app/translations/template.json |
| npm run docs | Display project documentation |
When building the application, you can specify the target environment using the additional flag --env <name> (do not
forget to prepend -- to pass arguments to npm scripts).
The default build environment is prod.
Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change
any of the source files.
You should not use ng serve directly, as it does not use the backend proxy configuration by default.