Zadanie 100: Komponenty i Atrybuty (Bootstrap Button)

Wstęp

W nowoczesnych frameworkach takich jak Angular, kluczową koncepcją jest reużywalność. Zamiast pisać ten sam kod HTML dla przycisku w wielu miejscach, tworzymy jeden komponent, który możemy konfigurować za pomocą parametrów.

Do stylizacji użyjemy frameworka Bootstrap, który ułatwia tworzenie responsywnych i estetycznych interfejsów.

Część 1: Instalacja i Konfiguracja Bootstrap

Aby móc używać klas Bootstrapa w Angularze, musimy dodać go do projektu.

Krok 1: Instalacja paczki

W folderze swojego projektu wykonaj komendę:

npm install bootstrap bootstrap-icons

Krok 2: Konfiguracja w `angular.json`

Znajdź plik angular.json w głównym katalogu projektu. W sekcji architect -> build -> options dodaj ścieżki do stylów i skryptów Bootstrapa:

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

[!NOTE] Po zmianach w angular.json musisz zrestartować ng serve.

Część 2: Tworzenie komponentu Button

Krok 1: Generowanie komponentu

Wygeneruj nowy komponent o nazwie custom-button:

ng generate component custom-button

Krok 2: Definiowanie parametrów (@Input)

Otwórz plik custom-button.component.ts. Chcemy, aby nasz przycisk mógł zmieniać:

Tekst na przycisku (label)
Kolor Bootstrap (color np. 'primary', 'danger', 'success')
Rozmiar (size np. 'sm', 'lg')

Dodaj import Input z @angular/core i zdefiniuj zmienne:

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

@Component({
  selector: 'app-custom-button',
  standalone: true,
  templateUrl: './custom-button.component.html',
  styleUrl: './custom-button.component.scss'
})
export class CustomButtonComponent {
  @Input() label: string = 'Przycisk';
  @Input() color: string = 'primary';
  @Input() size: string = ''; // puste to domyślny rozmiar
}

Krok 3: Szablon HTML

Otwórz custom-button.component.html. Wykorzystaj właściwości do dynamicznego ustawiania klas CSS:

<button type="button" 
        class="btn" 
        [ngClass]="'btn-' + color + (size ? ' btn-' + size : '')">
  {{ label }}
</button>

Część 3: Użycie komponentu w aplikacji

Otwórz app.component.html i wstaw kilka wersji swojego przycisku:

<div class="container mt-5">
  <h2>Moja biblioteka przycisków</h2>
  
  <div class="d-flex gap-2">
    <!-- Wersja domyślna -->
    <app-custom-button></app-custom-button>

    <!-- Przycisk usuwania (duży) -->
    <app-custom-button 
      label="Usuń dane" 
      color="danger" 
      size="lg">
    </app-custom-button>

    <!-- Mały przycisk sukcesu -->
    <app-custom-button 
      label="Zapisz" 
      color="success" 
      size="sm">
    </app-custom-button>
  </div>
</div>

[!IMPORTANT] Pamiętaj, aby zaimportować CustomButtonComponent w tablicy imports w pliku app.component.ts (jeśli używasz Standalone Components).

Zadanie domowe (dodatkowe)

Dodaj parametr @Input() disabled: boolean = false i powiąż go z atrybutem [disabled] przycisku HTML. Przetestuj działanie.

Komponenty i Atrybuty: Bootstrap Button