[[oktatas:web:angular|< Angular]] ====== Angular kötések ====== * **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 ===== Kötés ===== Egy komponensnek két főbb része van. A HTML és a TypeScript fájl a teszt és a CSS mellett. Az adatok általában a TypeScript fájlban keletkeznek, de a HTML fájlban kell megjeleníteni. Ezért a TypeScript fájlok egy-egy változóit a HTML oldal egy pontjához kell kötni. Készítsünk egy Angular alkalmazást "kotes" néven. Az alkalmazás gyökérkomponense a következő két fő részből áll: * app.component.html * app.component.ts Szerkesszük az **src/app/app.component.html** fájlt. Töröljük az eredeti tartalmát, majd javítsuk ehhez hasonlóan:


Teszt

{{name}}

A kapcsos-zárójelekkel "{{ }}" hozzuk létre a kötést HTML oldalon. A kapcsos-zárójelek között meg kell adnunk egy olyan nevet ami a TypeScript fájlban változóként van jelen. Most szerkesszük az **src/app/app.component.ts** fájlt. A fájlban lévő AppComponent osztály tartalma a következő legyen:


//...
export class AppComponent {
    name = 'János';
}

A fájl többi részét hagyjuk változatlanul. Nézzük meg a böngészőben az eredményt. A TypeScript fájlban a "name" változót a HTML sablon

elemébe kötöttük be. ===== Formázás ===== A HTML fájlba kötött adatok formázhatók az alábbi módon.

`Teszt`



{{ name | uppercase }}

A mintában a pipe "|" karakter után adjuk meg, hogyan formázzuk a változó értékét. Az uppercase hatására, minden betű nagybetűs lesz. A következő példában, minden betű kisbetűs lesz.


Teszt

{{ name | lowercase }}

===== Objektum példa ===== Egyetlen változó helyet objektumokat is létrehozhatunk TypeScript oldalon, aminek a tagjait beköthetjük a HTML sablonba. ==== Egyetlen dolgozó ==== Hozzunk létre egy emplyoee objektumot, name, city és salary tagokkal:


  employee = {
    name: 'Pali Márton',
    city: 'Szeged',
    salary: 385
  }

Kössük be a HTML sablonba:



  {{ dolgozo.name }} {{dolgozo.city}}

==== Több dolgozó ==== Listákat, illetve tömböket is használhatunk:


  dolgozok = [
    {
      name: 'Pali Márton',
      city: 'Szeged',
      salary: 385
    },
    {
      name: 'Rendes Katalin',
      city: 'Szolnok',
      salary: 324
    }
  ]




  {{ dolgozok[0].name }} {{dolgozok[0].city}}



  {{ dolgozok[1].name }} {{dolgozok[1].city}}

==== Interfésszel ==== Interfészekkel típusokat határozhatunk meg. Legyen például egy Employee típus, amit egy name és egy salary tagot tartalmaz.


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  title = 'app01';
  employee: Employee;
  
  constructor() {
    this.employee = {
      name: "Pali Márton",
      salary: 2830000
    };
  }
}
interface Employee {
  name: string,
  salary: number
}

Az AppComponent osztályban létrehoztunk egy konstruktort is, ahol definiáljuk az objektum tartalmát. Kössük a HTML sablonba:



    {{ dolgozo.name }} {{ dolgozo.salary }}

Az interface-t tehetjük külön állományba, de akkor exportálni kell. ===== Konstruktor nélkül =====


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app16';
  janos: Emplyee = {
    name: "Panda Lajos",
    salary: 2850000
  }
}

interface Emplyee {
  name: string;
  salary: number;
}

===== Interfész külön fájlban =====


export interface Employee {
    name: string,
    salary: number
}


import { Employee } from './employee';

//...

Az interfész tagjai zárhatók pontosvesszővel is:


export interface Employee {
    name: string;
    salary: number;
}

===== Függvény eredménye weblapon =====


{{valamiFuggveny()}}