Skip to main content
Get the Count App up and running on your local machine in just a few steps.

​
Prerequisites

Before you begin, make sure you have the following installed:
  • Node.js (version 20 or higher)
  • npm (version 11.6.4 or higher, as specified in package.json)
The project uses npm as its package manager. You can check your versions with node -v and npm -v.

​
Installation Steps

1

Clone the repository

Clone the Count App repository from GitHub:
git clone https://github.com/GIODIROSA/count-app-angular.git
cd count-app-angular
2

Install dependencies

Install all required npm packages:
npm install
This will install Angular 21, Tailwind CSS, Vitest, and all other dependencies listed in package.json.
Key dependencies include:
  • @angular/core (21.2.0) - Core Angular framework
  • @angular/ssr (21.2.0) - Server-side rendering support
  • tailwindcss (4.1.12) - Utility-first CSS framework
  • vitest (4.0.8) - Testing framework
  • express (5.1.0) - Server for SSR
3

Start the development server

Launch the Angular development server:
ng serve
The application will be available at http://localhost:4200/
The dev server supports hot module replacement (HMR), so your changes will be reflected immediately without a full page reload.

​
First Interaction

Once the dev server is running, open your browser to http://localhost:4200/ and you’ll see the counter interface.

Increment

Click the + button to increase the counter value by 1

Decrement

Click the - button to decrease the counter value by 1 (minimum value is 0)

Reset

Click Reiniciar to reset the counter back to 0

Initial State

The counter starts at 10 by default
The counter uses Math.max(0, this.counter + value) to prevent negative values. Try clicking the - button when the counter is at 0 — it won’t go negative!

​
Understanding the Code

The counter logic lives in src/app/count/counter.components.ts:
src/app/count/counter.components.ts
export class CountPageComponent {
  counter = 10;

  incrementby(value: number) {
    this.counter = Math.max(0, this.counter + value);
  }

  reset() {
    this.counter = 0
  }
}
The template in src/app/count/counter.html binds click events to these methods:
src/app/count/counter.html
<h1>{{counter}}</h1>
<button (click)="incrementby(1)" class="igt-btn">+</button>
<button (click)="incrementby(-1)" class="igt-btn">-</button>
<button (click)="reset()" class="igt-btn">Reiniciar</button>

​
Additional Commands

​
Build for Production

npm run build
Creates optimized bundles in the dist/ directory.

​
Serve with SSR

npm run serve:ssr:count-app
Runs the Express server with server-side rendering (requires building first).

​
Run Tests

npm test
Executes unit tests using Vitest.

​
Watch Mode

npm run watch
Builds the application in watch mode for continuous development.

​
Project Structure

count-app-angular/
├── src/
│   ├── app/
│   │   ├── app.ts              # Root component
│   │   ├── app.html            # Root template
│   │   ├── app.routes.ts       # Route configuration
│   │   └── count/
│   │       ├── counter.components.ts  # Counter logic
│   │       ├── counter.html           # Counter template
│   │       └── counter.css            # Counter styles
│   ├── main.ts                 # Client bootstrap
│   ├── main.server.ts          # Server bootstrap
│   └── server.ts               # Express server
├── angular.json                # Angular CLI configuration
├── package.json                # Dependencies and scripts
└── tsconfig.json              # TypeScript configuration

​
Troubleshooting

If port 4200 is occupied, you can specify a different port:
ng serve --port 4300
Make sure you’re using Node.js 20 or higher and npm 11.6.4 or higher. You can update npm with:
npm install -g [email protected]
If hot module replacement isn’t working, try:
  1. Stop the dev server (Ctrl+C)
  2. Clear the .angular/ cache directory
  3. Restart with ng serve

​
Next Steps

Explore Components

Learn how the CountPageComponent is structured and how to extend it

Configure SSR

Understand the server-side rendering setup and deployment

Customize Styles

Modify the Tailwind CSS configuration and component styles

Write Tests

Add unit tests for your components using Vitest

Build docs developers (and LLMs) love

Get started for freeTalk to us