szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular|< Angular]]

====== Angular interfész ======

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

===== Típusként =====


Generáljunk interfészt:

  ng generate interface Valami

===== Dolgozók példa =====

Van egy kész Angular projekt. Generáljunk egy Angular interfészt:

  ng generate interface Employee

Könyvtárszerkezet:

<code>
src/
  |-app.component.html
  |-app.component.scss
  |-app.component.spec.ts
  |-app.component.ts
  |-app.module.ts
  `-employee.ts
</code>

Interfész:

<code javascript src/app/employee.ts>
export interface Employee {
    name: string;
    city: string;
    salary: number;
}

</code>

Használat:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Dolgozók';

  employees !: Employee[]

  constructor() {
    this.employees = [
      {name: "Erős István", city: "Pécs", salary: 342},
      {name: "Rendes Béla", city: "Szolnok", salary: 334},
      {name: "Cseles Irén", city: "Pécs", salary: 328},
      {name: "Jó Ferenc", city: "Szolnok", salary: 365},
      {name: "Tekerő Ilona", city: "Zalaegerszeg", salary: 397},
      {name: "Láncos Piroska", city: "Pécs", salary: 327},
      {name: "Csendes Ernő", city: "Pécs", salary: 318}
    ]
  }

}

</code>