Generowanie nowego komponentu – https://school-it.pl/

Aby stworzyć nowy komponent, użyj Angular CLI w katalogu głównym Twojego projektu. Struktura polecenia wygląda następująco:

ng generate component nazwa-komponentu

Lub w skrócie:

ng g c nazwa-komponentu

Po wykonaniu tego polecenia Angular CLI automatycznie generuje nowy katalog nazwa-komponentu w folderze /src/app/ z czterema plikami:

nazwa-komponentu.component.ts – plik klasy komponentu, zawierający logikę komponentu.
nazwa-komponentu.component.html – plik szablonu, definiujący strukturę HTML komponentu.
nazwa-komponentu.component.css – plik stylów CSS, określający wygląd komponentu.
nazwa-komponentu.component.spec.ts – plik testu jednostkowego dla komponentu.

Krok 4: Edycja komponentu

Otwórz wygenerowane pliki w swoim ulubionym edytorze kodu i zacznij dostosowywać komponent do swoich potrzeb. Możesz edytować plik klasy komponentu (.ts) dodając logikę, manipulować wyglądem poprzez plik stylów (.css) oraz definiować strukturę komponentu w pliku szablonu (.html).

Struktura tradycyjnego komponentu plik .ts

Komponent MyComponentComponent jest przykładem komponentu standalone w Angularze 17, co oznacza, że został zdefiniowany bez konieczności używania tradycyjnego NgModule. To uproszczone podejście jest nowością w Angularze 17 i ma na celu zmniejszenie złożoności aplikacji.

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

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [],
  templateUrl: './my-component.component.html',
  styleUrl: './my-component.component.css'
})
export class MyComponentComponent {

}

Importy

W komponencie zaimportowano jedynie podstawowy moduł:

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

Component jest dekoratorem z biblioteki @angular/core, który pozwala Angularowi rozpoznać klasę jako komponent oraz dostarcza metadane, które konfigurują zachowanie komponentu.

Dekorator @Component

Dekorator @Component jest wykorzystywany do definiowania kluczowych właściwości komponentu, takich jak jego selektor, szablon, style i innych zależności:

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [],
  templateUrl: './my-component.component.html',
  styleUrl: './my-component.component.css'
})

selector: app-my-component jest to unikalna nazwa selektora, używana do wstrzykiwania komponentu w szablonach HTML innych komponentów lub stron.
standalone: Ustawienie true oznacza, że komponent jest samowystarczalny i nie potrzebuje być deklarowany w żadnym NgModule, co jest znaczącą zmianą w stosunku do wcześniejszych wersji Angulara.
imports: W tym przykładzie jest pusta tablica, ale zwykle można tutaj umieścić inne komponenty, dyrektywy lub moduły, które są używane w szablonie komponentu.
templateUrl: Ścieżka do pliku HTML, który zawiera szablon widoku komponentu. Szablon definiuje strukturę HTML i powiązania danych widoczne w przeglądarce.
styleUrl: Ścieżka do pliku CSS zawierającego style dla komponentu.

Klasa Komponentu `MyComponentComponent`

export class MyComponentComponent {
  // Tu można dodać logikę komponentu
}

Krok 5: Użycie komponentu

Jeżeli chcesz użyć MyComponentComponent w AppComponent, który również jest komponentem standalone, oto jak to zrobić:

1.Zaimportuj Komponent: Najpierw musisz zaimportować MyComponentComponent w pliku TypeScript komponentu, który go używa.

import { MyComponentComponent } from './path/to/my-component.component';

2.Dodaj do Imports w Dekoratorze @Component: Następnie dodaj MyComponentComponent do listy imports w dekoratorze @Component komponentu, który go używa.

// app.component.ts
import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component/my-component.component';  // Ustal odpowiednią ścieżkę dostępu

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MyComponentComponent],  // Importowanie MyComponentComponent
  templateUrl: './app.component.html',
  styleUrl: ['./app.component.css']
})
export class AppComponent {
  // Tutaj można dodać dodatkową logikę
}

3.Użycie w HTML: Teraz MyComponentComponent jest dostępny do użycia w szablonie AppComponent, co oznacza, że możesz użyć jego selektora app-my-component w HTML.

<!-- app.component.html -->
<div>
  <h1>Witaj w mojej aplikacji!</h1>
  <app-my-component></app-my-component>
</div>

Generowanie nowego komponentu z parametrem Inline Template

Opcja --inlineTemplate w Angular CLI służy do tworzenia komponentów z tzw. „inline template”, czyli szablonem HTML umieszczonym bezpośrednio w pliku klasy komponentu zamiast w osobnym pliku .html. To podejście może być przydatne w przypadku bardzo prostych komponentów lub gdy preferujesz trzymanie całej definicji komponentu w jednym pliku dla łatwiejszej orientacji.

Różnice między Inline Template a Tradycyjnym Komponentem

Tradycyjny Komponent:

Ma szablon HTML umieszczony w osobnym pliku .html.
Jest to standardowe podejście, które pomaga utrzymać porządek w projektach, szczególnie gdy szablony stają się bardziej złożone.
Ułatwia współpracę i utrzymanie kodu, ponieważ HTML i logika komponentu są oddzielone.

Komponent z Inline Template:

Cała struktura HTML komponentu znajduje się bezpośrednio w dekoratorze @Component w pliku klasy, zazwyczaj w właściwości template.
Umożliwia szybkie tworzenie mniejszych, bardziej zrozumiałych komponentów, które nie mają zbyt skomplikowanego HTML.
Może ułatwić zarządzanie małymi komponentami, gdyż nie musisz przełączać się między plikami podczas edycji.

Przykład Komponentu z Inline Template

Aby wygenerować komponent z użyciem inline template przy pomocy Angular CLI, możesz użyć polecenia:

ng generate component my-inline-component --inlineTemplate

lub w skróconej formie:

ng g c my-inline-component -t

To spowoduje utworzenie komponentu, w którym definicja HTML jest umieszczona bezpośrednio w dekoratorze @Component:

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

@Component({
  selector: 'app-my-inline-component',
  standalone: true,
  imports: [],
  template: `
    <p>
      my-inline-component works!
    </p>
  `,
  styleUrl: './my-inline-component.component.css'
})
export class MyInlineComponentComponent {

}

W powyższym przykładzie, zamiast odwoływać się do zewnętrznego pliku .html, użyliśmy właściwości template w dekoratorze @Component do bezpośredniego określenia szablonu HTML. Szablon jest prosty – zawiera tylko jedną linijkę HTML, co czyni go idealnym kandydatem do inline template.

Angular