[[oktatas:web:angular|< Angular]]

====== Angular osztályok ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Osztály =====

  ng generate class Valami


A parancs hatására két állomány jön létre a következő helyen:
  * src/app/valami.ts
  * src/app/valami.spec.ts


<code javascript src/app/valami.ts>
export class Valami {
}
</code>

<code javascript src/app/valami.spec.ts>
import { Valami } from './valami';

describe('Valami', () => {
  it('should create an instance', () => {
    expect(new Valami()).toBeTruthy();
  });
});
</code>

===== Triangle =====

Készítsünk egy Triangle nevű osztályt, amely a
következő adattagokat tartalmazza:
  * alap
  * magasság
  * terület

Hozzunk létre olyan metódust, amely kiszámítja egy háromszög területét.

<code javascript>
export class Triangle {
    base !: number;
    height !: number;
    area !: number;
    constructor(base: number, height: number) {
        this.base = base;
        this.height = height;
    }
    calcArea() {
        this.area = this.base * this.height / 2;
    }
}

</code>

===== Dolgozók renderelése =====


<code javascript src/app/employee.ts>
export class Employee {
    name !: string;
    city !: string;
    salary !: number;
    constructor(name: string, city: string, salary: number) {
        this.name = name;
        this.city = city;
        this.salary = salary;
    }
}

</code>


<code javascript src/app/employee.ts>
//...
import { Employee } from './employee';

//...
export class AppComponent {
  title = 'app01';

  employees = [
    new Employee('Fer Irma', 'Szeged', 384),
    new Employee('Tar Irén', 'Szolnok', 382),
    new Employee('Lel Béla', 'Miskolc', 381),
    new Employee('Reg Elek', 'Budapest', 354)
  ]

}
</code>

<code html src/app/app.component.html>
<h1>Dolgozók</h1>

<table>
  <thead>
    <tr>
      <th>Név</th>
      <th>Település</th>
      <th>Fizetés</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let employee of employees">
      <td>{{ employee.name }}</td>
      <td>{{ employee.city }}</td>
      <td>{{ employee.salary }}</td>
    </tr>
  </tbody>
</table>
</code>