Angular este un framework JavaScript care permite dezvoltarea de aplicații web. Una dintre caracteristicile cheie ale Angular este reprezentată de componente. Componentele reprezintă blocuri individuale de cod care conțin HTML, CSS și JavaScript și sunt utilizate pentru a construi interfețe vizuale și pentru a oferi funcționalități specifice în aplicații.

În acest articol, voi prezenta un ghid pas cu pas pentru a utiliza componente în Angular.

PASUL 1: Crearea unui proiect Angular
Primul pas constă în crearea unui proiect Angular. Acest lucru se poate face utilizând Angular CLI (Command Line Interface). Deschideți linia de comandă și executați următoarea comandă:

“`
ng new nume-proiect
“`

Această comandă va crea un nou proiect Angular cu numele specificat în locația actuală.

PASUL 2: Crearea unui component
După ce proiectul este creat, puteți crea componente.

“`
ng generate component nume-componenta
“`

Această comandă va crea o nouă componentă Angular cu numele specificat în locația “src/app”.

PASUL 3: Utilizarea unui component în alt component
După ce componenta este creată, puteți utiliza acest componentă în alt component. Deschideți fișierul “app.component.ts” și importați componenta folosind căile relative.

“`
import { NumeComponenta } from ‘./cale/relativa/nume-componenta.component’;
“`

Apoi, adăugați componenta în decoratorul “Component” al componentei “AppComponent”.

“`
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘app’;
}
“`

Adăugați componenta în șablonul HTML al componentei “AppComponent”.

“`
<app-nume-componenta></app-nume-componenta>
“`

PASUL 4: Transmiterea datelor între componente
Pentru a transmite date între componente, puteți utiliza legături (bindings) de intrare și ieșire. Definiți un @AngularInput în componenta copil pentru a primi date de la componenta părinte și folosiți @AngularOutput și EventEmitter în componenta părinte pentru a emite și primi evenimente.

În componenta copil, definiți o variabilă cu decoratoarea @AngularInput pentru a primi date de la componenta părinte.

“`
@AngularInput() data: any;
“`

În componenta părinte, transmiteți date către componenta copil folosind legături de intrare.

“`
<app-nume-componenta [data]=”myData”></app-nume-componenta>
“`

Pentru a emite și primi evenimente între componente, în componenta copil, definiți o variabilă de eveniment cu decoratoarea @AngularOutput și un EventEmitter pentru a emite evenimente.

“`
@AngularOutput() myEvent = new EventEmitter();
“`

În componenta părinte, recepționați evenimentul și tratați-l folosind o funcție definită în componenta părinte.

“`
<app-nume-component

a (myEvent)=”handleEvent($event)”></app-nume-componenta>
“`

PASUL 5: Utilizarea serviciilor în componente
Pentru a utiliza serviciile în componente, trebuie să injectați serviciul în constructorul componentei.

“`
constructor(private numeServiciu: NumeServiciu) { }
“`

Apoi, puteți utiliza metodele sau proprietățile serviciului în metodele componente.

“`
this.numeServiciu.metodaServiciu();
“`

PASUL 6: Stilizarea componentelor
Pentru a stiliza componente, puteți folosi fișiere CSS externe sau puteți defini stiluri în componenta însăși folosind decoratoarea @Component.

“`
@Component({
selector: ‘app-nume-componenta’,
templateUrl: ‘./nume-componenta.component.html’,
styleUrls: [‘./nume-componenta.component.css’]
})
“`

Definiți stiluri în fișierul “nume-componenta.component.css” sau direct în decoratorul @Component.

“`
@Component({
selector: ‘app-nume-componenta’,
templateUrl: ‘./num

e-componenta.component.html’,
styles: [`
.nume-componenta {
color: blue;
font-size: 16px;
}
`]
})
“`

Acestia sunt pașii de bază pentru a utiliza componente în Angular. Puteți continua explorarea Angular prin adăugarea de funcționalități suplimentare sau prin utilizarea altor caracteristici ale framework-ului.

Sper că acest ghid pas cu pas v-a fost util și v-a ajutat să înțelegeți cum să utilizați componente în Angular. Dacă aveți întrebări suplimentare, nu ezitați să le adresați în comentarii sau să consultați documentația oficială a Angular.