From e914f6c57a05ca5ce10e4f7d54bc6033899309ab Mon Sep 17 00:00:00 2001
From: Jakub Kubacki <jakub.kubacki@synergycodes.com>
Date: Mon, 2 Jun 2025 21:33:34 +0200
Subject: [PATCH] Add component

---
 apps/angular-intro/src/app/app.component.html |  5 ++++-
 apps/angular-intro/src/app/app.component.ts   |  2 ++
 .../src/counter/button/button.component.html  |  3 +++
 .../src/counter/button/button.component.ts    |  8 +++++++
 .../src/counter/counter.component.html        |  7 +++++++
 .../src/counter/counter.component.ts          | 21 +++++++++++++++++++
 .../src/counter/value/value.component.ts      | 11 ++++++++++
 7 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 apps/angular-intro/src/counter/button/button.component.html
 create mode 100644 apps/angular-intro/src/counter/button/button.component.ts
 create mode 100644 apps/angular-intro/src/counter/counter.component.html
 create mode 100644 apps/angular-intro/src/counter/counter.component.ts
 create mode 100644 apps/angular-intro/src/counter/value/value.component.ts

diff --git a/apps/angular-intro/src/app/app.component.html b/apps/angular-intro/src/app/app.component.html
index fc6faa1..6bbfba1 100644
--- a/apps/angular-intro/src/app/app.component.html
+++ b/apps/angular-intro/src/app/app.component.html
@@ -1 +1,4 @@
-<div class="p-4">Hello world</div>
+<div class="p-4">
+  Hello world
+  <app-counter />
+</div>
diff --git a/apps/angular-intro/src/app/app.component.ts b/apps/angular-intro/src/app/app.component.ts
index 7fc0e58..1a32f2b 100644
--- a/apps/angular-intro/src/app/app.component.ts
+++ b/apps/angular-intro/src/app/app.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { CounterComponent } from '../counter/counter.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
+  imports: [CounterComponent],
 })
 export class AppComponent {
   title = 'angular-intro';
diff --git a/apps/angular-intro/src/counter/button/button.component.html b/apps/angular-intro/src/counter/button/button.component.html
new file mode 100644
index 0000000..808fce5
--- /dev/null
+++ b/apps/angular-intro/src/counter/button/button.component.html
@@ -0,0 +1,3 @@
+<button class="bg-gray-400 px-4 py-2 rounded-sm h-min">
+  <ng-content />
+</button>
diff --git a/apps/angular-intro/src/counter/button/button.component.ts b/apps/angular-intro/src/counter/button/button.component.ts
new file mode 100644
index 0000000..9e33285
--- /dev/null
+++ b/apps/angular-intro/src/counter/button/button.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-button',
+  templateUrl: './button.component.html',
+})
+export class ButtonComponent {}
diff --git a/apps/angular-intro/src/counter/counter.component.html b/apps/angular-intro/src/counter/counter.component.html
new file mode 100644
index 0000000..7197a10
--- /dev/null
+++ b/apps/angular-intro/src/counter/counter.component.html
@@ -0,0 +1,7 @@
+<div class="flex flex-row items-center gap-4">
+  <h3>
+    <app-value [value]="count" />
+  </h3>
+  <app-button (click)="increment()">+1</app-button>
+  <app-button (click)="decrement()">-1</app-button>
+</div>
diff --git a/apps/angular-intro/src/counter/counter.component.ts b/apps/angular-intro/src/counter/counter.component.ts
new file mode 100644
index 0000000..3b2860c
--- /dev/null
+++ b/apps/angular-intro/src/counter/counter.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { ButtonComponent } from './button/button.component';
+import { ValueComponent } from './value/value.component';
+
+@Component({
+  standalone: true,
+  selector: 'app-counter',
+  templateUrl: './counter.component.html',
+  imports: [ButtonComponent, ValueComponent],
+})
+export class CounterComponent {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+
+  decrement() {
+    this.count--;
+  }
+}
diff --git a/apps/angular-intro/src/counter/value/value.component.ts b/apps/angular-intro/src/counter/value/value.component.ts
new file mode 100644
index 0000000..99d1498
--- /dev/null
+++ b/apps/angular-intro/src/counter/value/value.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-value',
+  template: `<div>Value: {{ value }}</div> `,
+})
+export class ValueComponent {
+  @Input({ required: true })
+  value!: number;
+}