Angular 18

Angular 18 guide for Trezo.

Overview

Angular is a powerful, open-source web application framework maintained by Google. Designed for building dynamic, single-page applications (SPAs), Angular provides a comprehensive set of tools, components, and libraries to streamline the development of complex web apps with a focus on speed, scalability, and developer productivity.

Here are some of Angular’s standout features:

Component-Based Architecture: Angular applications are built using a component-based architecture, where each component encapsulates its own logic, templates, and styles. This modular approach improves code organization, reusability, and maintainability.
Two-Way Data Binding: Angular’s two-way data binding allows for automatic synchronization of data between the model and the view, reducing the amount of code needed for data updates. This enables seamless interaction and real-time feedback in the user interface.
Dependency Injection: Angular’s built-in dependency injection simplifies services and application logic management. This feature promotes modularity, testing, and reusability by making it easy to manage dependencies.
Comprehensive CLI: Angular offers a powerful Command Line Interface (CLI) that automates many tasks in the development process, such as creating components, services, and modules, as well as handling configurations and optimizations. This enables rapid development and ensures consistency.
TypeScript Integration: Angular is built with TypeScript, a statically typed superset of JavaScript, which enhances the development experience with features like type checking, interfaces, and modern JavaScript syntax. TypeScript improves code quality, readability, and error detection.
Reactive Programming: Angular’s integration with RxJS provides reactive programming tools that allow developers to handle asynchronous operations, such as HTTP requests, more efficiently. This leads to smoother user experiences and greater control over data streams.
Routing and Navigation: Angular’s built-in router facilitates seamless navigation between pages in a single-page application. It supports lazy loading, route guards, and nested routes, enabling efficient app structure and loading optimization.
Testing and Debugging Tools: Angular provides extensive support for testing through tools like Karma and Jasmine, which enable unit testing, and Protractor for end-to-end testing. This makes it easier to maintain and ensure code reliability.
Built-In Form Handling and Validation: Angular offers robust form handling capabilities, with both template-driven and reactive forms, as well as a range of validation options. This simplifies creating complex forms with custom validation logic.

Angular’s structured approach, combined with its extensive ecosystem, makes it an excellent choice for building scalable and maintainable web applications, from small SPAs to large enterprise systems.

Local Development Environment Setup

To kickstart the development of your web app with Trezo, the first step is to set up an Angular development environment.

Name	Description
`angular.json`	Used for configuration of project specific settings. You can add external styles and scripts, change the output folder, add assets, add environment files and more.
`e2e`	Will be used for end-to-end tests to ensure functionality for users before deploying.
`node_modules`	All external modules used are here. Do not mess with this folder, as it is auto-generated by using npm install.
`package.json`	Contains all dependencies used for production and development.
`src`	Contains all Angular Typescript code, assets and basically everything the end user will have access to.
`tslint.json`	Angular-CLI includes an automatic Typescript-Linter, which can be configured with this file.

Node.js and NPM: If Node.js is not installed, download it from https://nodejs.org. NPM is included with Node.js.
angular-cli: You can install Angular CLI by running npm install -g @angular/cli in your command window. For more details, visit https://github.com/angular/angular-cli.

NPM Packages

Before proceeding, you'll need to install the necessary npm packages. Run npm install from the root of your project to install all the required dependencies.

Development Server

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

Building

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.

More Help

To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.

Local Environment Installation

Open the Trezo folder in Visual Studio Code and open a terminal on that folder and run these commands one by one.

npm install

ng serve

Go To

http://localhost:4200/

Done

Pages Info

Go to /app/app.routes.ts and see the urls & find the appropriate modules for every pages.

Dependencies

Here are the dependencies list which being used in the Trezo Angular Template:

"dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/cdk": "^18.0.1",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/material": "^18.0.1",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/platform-server": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@angular/ssr": "^18.0.0",
    "@fullcalendar/angular": "^6.1.14",
    "@fullcalendar/core": "^6.1.14",
    "@fullcalendar/daygrid": "^6.1.14",
    "@iplab/ngx-file-upload": "^18.0.0",
    "apexcharts": "^3.49.2",
    "express": "^4.18.2",
    "moment": "^2.30.1",
    "ng-apexcharts": "^1.11.0",
    "ngx-color-picker": "^16.0.0",
    "ngx-editor": "^17.5.4",
    "ngx-material-timepicker": "^13.1.1",
    "ngx-owl-carousel-o": "^18.0.0",
    "ngx-scrollbar": "^15.0.1",
    "remixicon": "^4.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
},
"devDependencies": {
    "@angular-devkit/build-angular": "^18.0.0",
    "@angular/cli": "^18.0.0",
    "@angular/compiler-cli": "^18.0.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
}

Responsive Breakpoints

The Trezo is a responsive template and is based on the Bootstrap Framework. For more information you can check the Bootstrap CSS.

/* Max width 767px */
@media only screen and (max-width: 767px) {
}

/* Min width 576px to Max width 767px */
@media only screen and (min-width: 576px) and (max-width: 767px) {
}

/* Min width 768px to Max width 991px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
}

/* Min width 992px to Max width 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
}

/* Min width 1200px to Max width 1399px */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
}

/* Min width 1600px */
@media only screen and (min-width: 1600px) {
}

Fonts Used

By default, the template loads Inter font from Google Web Font Services. The font can be changed based on the website needs. Google Fonts

Font code can be found in the "style.scss" & "index.html" files.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">

:root {
	--fontFamily: "Inter", sans-serif;
}

Option to Change the Main Color

File path: src/styles.scss

:root {
	--primaryColor: #605dff;
	--secondaryColor: #3584fc;
	--successColor: #25b003;
	--dangerColor: #ff4023;
	--warningColor: #ffc107;
	--infoColor: #0dcaf0;
	--lightColor: #f8f9fa;
	--darkColor: #212529;
	--purpleColor: #ad63f6;
	--orangeColor: #fd5812;
}

Speed Optimization

Please optimize all images KB, MB also, use the image size following by placeholder file path: public/images/..

How to Change Image?

Please go to the image file 'path: public/images/...' replace the image which one you want following placeholder image size & name

Credits

Note: All images are used for preview purpose only and not included in the final purchase files.

Images

https://freepik.com/

https://pixabay.com/

https://unsplash.com/

Google Fonts

Inter

IconFont

Packages

Installation Video

To help you understand the installation process better, please watch the following video tutorial. It provides a step-by-step guide on setting up the application:

Additional Notes

If you need more details, please refer to the written instructions.

Feel free to reach out to our support team if you have any questions!

Bootstrap 5

React + MUI