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

Zold alkalmazás létrehozása, a virtuális Zöld Zrt, számára.

ng new zold
cd zold

Az alkalmazásunk váz részét a src/app alkönyvtárban találjuk.

Ha nem vagyunk belépve a projekt könyvtárába lépjünk be, majd:

ng serve --open

Az ng serve --open kapcsolója automatikusan megnyitja böngészőben, a 4200-s porton.

http://localhost:4200/

A komponensek az Angular alapvető építőkövei. Gondoskodnak az adatok megjelenítéséről, figyelik a felhasználói bevitelt, majd ezek alapján tevékenységeket kezdeményeznek.

Az alapkomponensek a következő részekből állnak:

• app.component.ts - a komponens osztálya, TypeScriptben írva.
• app.component.html - a komponens sablonja, HTML-ben írva.
• app.component.css - a komponens privát CSS része.

Nyissuk meg az app.component.ts fájlt, majd állítsuk be a címet:

app.component.ts

title = 'Zöld Zrt';

Az app.component.html fájlt nyissuk meg, és töröljük a generált tartalmat. Írjuk bele a következőt:

app.component.html

<h1>{{title}}</h1>

Adjunk az alkalmazásunknak egy kevés stílust.

Szerkesszük az src/style.css fájlt.

src/style.css

h1 {
    background-color: dodgerblue;
    padding: 20px;
    font-family:Arial, Helvetica, sans-serif;
    border-radius: 5px;
}

A dolgozókat angolosan employee rövidítésével fogjuk megadni: empl.

Készítsünk egy empl nevű komponenst.

ng generate component empl

A parancs hatására, létrejön egy src/app/empl nevű könyvtár. Négy fájl generálódik.

Az Empl komponens osztály állománya a következő:

empl.component.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-empl',
  templateUrl: './empl.component.html',
  styleUrls: ['./empl.component.css']
})
export class EmplComponent implements OnInit {
 
  constructor() { }
 
  ngOnInit() {
  }
 
}

A Component dekorátor függvény meghatározza az Angular metaadatait a komponens számára. Alapértelmezetten három metaadat tulajdonság generálódik:

• selector - CSS elem szelektora
• templateUrl - a sablon fájl elérése
• styleUrls - a privát CSS fájl elérése

Az ngOnInit() egy olyan metódus, amely a komponens létrehozása során lefut.

A komponens osztály mindig exportálva van, így felhasználható máshol.

Hozzunk létre az Empl komponensünk számára egy az EmplComponent osztályban egy employee tulajdonságot.

employee = 'Penge Béla';

A dolgozó megjelenítéséhez szerkesszük a Empl komponens sablonállományát, jelenítsük meg a dolgozót.

<p>{{employee}}</p>

Hogy lássuk a tartalmat, helyezzük el az alkalmazás sablonján a komponenst. Emlékezzünk, hogy a Empl komponens szelektora app-empl. Ennek megfelelően a következőt írjuk az src/app/app.component.html fájlba:

<h1>{{title}}</h1>
<app-empl></app-empl>

Nézzük meg az eredményt.

Egy dolgozónak több tulajdonsága is van, a nevén kívül. Az egyszerűség kedvéért legyen most azonosító, név és fizetés.

Készítsünk egy ilyen interfészt, az src/app könyvtárban.

src/app/empl.ts

export interface Empl {
    id: number;
    name: string;
    salary: number;
}

Most menjünk az Empl komponensünk osztályához vissza, majd importáljuk a Empl interfészt:

import { Empl } from '../empl';

Az employee tulajdonság legyen Empl típusú:

employee: Empl = {
    id: 1,
    name: 'Penge Béla',
    salary: 3800000
};

Javítsuk az Empl komponens sablonját.

<p>{{employee.id}}</p>
<p>{{employee.name}}</p>
<p>{{employee.salary}}</p>

Az űrlap használatához szükségünk van egy modulra. Nyissuk meg az app.module.ts fájlt. Importáljuk a FormsModule modult.

import { FormsModule } from '@angular/forms'; 

Vegyük fel az imports nevű tömbbe a FormsModule modult is:

  imports: [
    BrowserModule,
    FormsModule
  ],

Készítsük el az űrlapot:

<div>
    <label for="employeeName">Név</label>
    <input id="employeeName" [(ngModel)]="employee.name" placeholder="név">
    <br>
    <label for="employeeSalary">Fizetés</label>
    <input id="employeeSalary" [(ngModel)]="employee.salary" placeholder="fizetés">
 
</div>

Hozzunk létre egy új mock állományt:

src/app/mock-employees.ts

import { Empl } from './empl';
 
export const EMPLOYEES: Empl[] = [
    { id: 1,  name: 'Páros Emese',    salary: 3800500 },
    { id: 2,  name: 'Tornyos Péter',  salary: 2800500 },
    { id: 3,  name: 'Regős Ilona',    salary: 3200000 },
    { id: 4,  name: 'Rétes László',   salary: 3100000 },
    { id: 5,  name: 'Fontos Katalin', salary: 2950000 },
    { id: 6,  name: 'Árva Ferenc',    salary: 3300500 },
    { id: 7,  name: 'Lengő Tibor',    salary: 3500000 },
    { id: 8,  name: 'Fejtős Aladár',  salary: 3400500 },
    { id: 9,  name: 'Remete Zoltán',  salary: 3500500 }
];

Importáld a Empl komponensben a mock fájlt.

import { EMPLOYEES } from '../mock-employees';

Hozz létre egy új tulajdonságot, employees néven:

export class EmplComponent Implements OnInit {
    employees = EMPLOYEES;
}

A *ngFor segítségével listázzuk a dolgozókat.

<table>
    <tr *ngFor="let employee of employees">
        <td>{{employee.id}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.salary}}</td>
    </tr>
</table>

Az eredeti tartalom törölhető.

A részletek megjelenítéséhez készítsünk egy empl-detail komponenst.

ng generate component empl-detail

Írjuk mega sablont:

<div *ngIf="employee">
    <h2>{{employee.name | uppercase}} részletek</h2>
    <div>
        <label for="empl-name">Név</label>
        <input id="empl-name" [(ngModel)]="employee.name" placeholder="name">
        <br>
        <label for="empl-salary">Fizetés</label>
        <input id="empl-salary" [(ngModel)]="employee.salary" placeholder="fizetés">
    </div>
</div>

Az EmplComponent osztályban vegyél fel egy új selectedEmployee tulajdonságot és egy onSelect metódust:

export class EmplComponent implements OnInit {
 
  employees = EMPLOYEES;
  selectedEmployee!: Empl;
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
  onSelect(employee: Empl): void {
    this.selectedEmployee = employee;
  }
 
}

Javítsuk az empl komponens sablonját:

<table>
    <tr *ngFor="let employee of employees" [class.selected]="employee === selectedEmployee"
        (click)="onSelect(employee)">
        <td>{{employee.id}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.salary}}</td>
    </tr>
</table>
 
<app-empl-detail [employee]="selectedEmployee"></app-empl-detail>

Az empl-detail komponens osztályában importáljuk az Input modult. Vegyük fel, a már meglévő sorba:

import { Component, OnInit, Input } from '@angular/core';

Importáljuk a Empl interfészt is:

import { Empl } from '../empl';

Az osztályon belül vegyünk fel egy tulajdonságot:

@Input() employee?: Empl;

Az EmplDetailComoponent.ts teljes tartalma:

EmplDetailComoponent.ts

import { Component, OnInit, Input } from '@angular/core';
 
import { Empl } from '../empl';
 
@Component({
  selector: 'app-empl-detail',
  templateUrl: './empl-detail.component.html',
  styleUrls: ['./empl-detail.component.css']
})
export class EmplDetailComponent implements OnInit {
 
  @Input() employee?: Empl;
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

Most bármelyik sorra, ha kattintunk, megjelenik alul a részletekben, és javíthatjuk.

• https://angular.io/tutorial/ (2021)