Angular kötések

• Szerző: Sallai András
• Copyright © Sallai András, 2021, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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:

src/app/app.component.html

<h1>Teszt</h1>
 
<p>{{name}}</p>

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:

src/app/app.component.ts

//...
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 <p> elemébe kötöttük be.

A HTML fájlba kötött adatok formázhatók az alábbi módon.

src/app/app.component.html

<h1>Teszt</h1>
 
<p>{{ name | uppercase }}</p>

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.

src/app/app.component.html

<h1>Teszt</h1>
 
<p>{{ name | lowercase }}</p>

Egyetlen változó helyet objektumokat is létrehozhatunk TypeScript oldalon, aminek a tagjait beköthetjük a HTML sablonba.

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:

<p>
  {{ dolgozo.name }} {{dolgozo.city}}
</p>

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

<p>
  {{ dolgozok[0].name }} {{dolgozok[0].city}}
</p>
 
<p>
  {{ dolgozok[1].name }} {{dolgozok[1].city}}
</p>

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

src/app/app.component.ts

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:

first.component.html

<p>
    {{ dolgozo.name }} {{ dolgozo.salary }}
</p>

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

src/app/app.component.ts

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

src/app/employee.ts

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

src/app/app.component.ts

import { Employee } from './employee';
 
//...

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

src/app/employee.ts

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

{{valamiFuggveny()}}