Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:angular:angular_osztalyok

< Angular

Angular osztályok

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
src/app/valami.ts
export class Valami {
}
src/app/valami.spec.ts
import { Valami } from './valami';
 
describe('Valami', () => {
  it('should create an instance', () => {
    expect(new Valami()).toBeTruthy();
  });
});

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.

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

Dolgozók renderelése

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;
    }
}
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)
  ]
 
}
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>
oktatas/web/angular/angular_osztalyok.txt · Utolsó módosítás: 2022/04/08 22:39 szerkesztette: admin