Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:angular:angular_animacio [2025/07/16 23:38] – [Angular - Animáció] admin
+++ oktatas:web:angular:angular_animacio [2025/07/17 00:09] (aktuális) – [Háromszög terület számítás eredménye] admin
@@ Sor 132: / Sor 132: @@
 ===== Háromszög terület számítás eredménye =====
+<code javascript src/app/app.config.ts>
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideAnimationsAsync()   //<--
+  ]
+};
+</code>
 Szeretnénk az eredményt animáltan megjeleníteni.
 <code javascript src/app/triangle/triangle.component.ts>
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
+import {
-import { FormControl } from '@angular/forms';
+  animate,
+  state,
+  style,
+  transition,
+  trigger
+} from '@angular/animations';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 @Component({
   selector: 'app-triangle',
-  templateUrl: './triangle.component.html',
+  standalone: true,
-  styleUrls: ['./triangle.component.scss'],
+  imports: [ReactiveFormsModule],
   animations: [
     trigger('result', [
       state('disable', style({
         backgroundColor: 'white',
       })),
       state('enable', style({
@@ Sor 158: / Sor 181: @@
         animate('4s')
       ])
     ])
-  ]
+  ],
+  templateUrl: './triangle.component.html',
+  styleUrl: './triangle.component.css'
 })
-export class TriangleComponent implements OnInit {
+export class TriangleComponent {
-  base = new FormControl('');
-  height = new FormControl('');
-  area = new FormControl('');
-  isVisible = false;
-  constructor() { }
-  ngOnInit(): void {
+  constructor(private builder: FormBuilder) {}
-  }
+  triangleForm = this.builder.group({
+    base: '',
+    height: '',
+    area: ''
+  })
+  isVisible = false;
   onCalcButtonClick() {
     this.isVisible = true;
-    let area = this.calcTriangleArea(this.base.value, this.height.value);
+    let area = this.calcTriangleArea(
-    this.area.setValue(area);
+      Number(this.triangleForm.value.base),
+      Number(this.triangleForm.value.height)
+    );
+    this.triangleForm.patchValue({area: String(area)});
   }
   onDeleteButtonClick() {
     this.isVisible = false;
-    this.base.setValue('');
+    this.triangleForm.reset();
-    this.height.setValue('');
-    this.area.setValue('');
   }
   calcTriangleArea(base: number, height: number) {
@@ Sor 186: / Sor 215: @@
   }
 }
 </code>
 <code html src/app/triangle/triangle.component.html>
+<form class="triangleForm" [formGroup]="triangleForm">
+  <div class="mt-3">
+      <label for="base"
+      class="form-label">Alap</label>
+      <input type="text" formControlName="base"
+      id="base" class="form-control">
+  </div>
+  <div class="mt-3">
+      <label for="height"
+      class="form-label">Magasság</label>
+      <input type="text" formControlName="height"
+      id="height" class="form-control">
+  </div>
-<div class="triangleForm">
+  <div class="mt-3">
-    <div class="mt-3">
+      <button class="btn btn-primary me-2" (click)="onCalcButtonClick()">Számít</button>
-        <label for="base"
+      <button class="btn btn-primary" (click)="onDeleteButtonClick()">Töröl</button>
-        class="form-label">Alap</label>
+  </div>
-        <input type="text" [formControl]="base"
-        id="base" class="form-control">
-    </div>
-    <div class="mt-3">
-        <label for="height"
-        class="form-label">Magasság</label>
-        <input type="text" [formControl]="height"
-        id="height" class="form-control">
-    </div>
-    <div class="mt-3">
-        <button class="btn btn-primary me-2" (click)="onCalcButtonClick()">Számít</button>
-        <button class="btn btn-primary" (click)="onDeleteButtonClick()">Töröl</button>
-    </div>
-    <div class="mt-3 p-1" [@result]="isVisible ? 'enable' : 'disable'">
-        <label for="area"
-        class="form-label">Terület</label>
-        <input type="text" [formControl]="area"
-        id="area" class="form-control">
-    </div>
-</div>
+  <div class="mt-3 p-1" [@result]="isVisible ? 'enable' : 'disable'">
+      <label for="area"
+      class="form-label">Terület</label>
+      <input type="text" formControlName="area"
+      id="area" class="form-control">
+  </div>
+</form>
 </code>