Add component

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>

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';

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>

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 {}

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>

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--;
+  }
+}

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;
+}