Property Binding i obrazki – [ ] i folder public

<!-- Bez bindingu – statyczna wartość (zwykły HTML) -->
<img src="logo.png">
<button disabled>Wyślij</button>

<!-- Z bindingiem – wartość ze zmiennej TypeScript -->
<img [src]="sciezkaDoLogo">
<button [disabled]="czyZablokowany">Wyślij</button>

<!-- Wyrażenie TypeScript po prawej stronie = -->
<button [disabled]="imie.length === 0">Dalej</button>
<img [alt]="'Zdjęcie: ' + imie">
<a [href]="'https://school-it.pl/' + sciezka">Link</a>

export class AppComponent {
  formularzWypelniony = false;
  czyAdmin            = true;
  wczytywanie         = true;
  imie                = '';
}

<!-- Przycisk aktywny tylko gdy formularz wypełniony -->
<button
  class="btn btn-primary"
  [disabled]="!formularzWypelniony"
>
  Wyślij
</button>

<!-- Panel widoczny tylko dla admina -->
<div class="alert alert-info" [hidden]="!czyAdmin">
  Panel administratora
</div>

<!-- Przycisk "Wyślij" nieaktywny gdy imię jest puste -->
<input #imieInput type="text" class="form-control" (input)="''">
<button
  class="btn btn-success mt-2"
  [disabled]="imieInput.value.length === 0"
>
  Zapisz
</button>

export class AppComponent {
  czyAktywny = true;
  kolor      = 'red';
  rozmiar    = '24px';
}

<!-- Warunkowa klasa Bootstrap -->
<span [class.text-success]="czyAktywny">Status</span>
<!-- Gdy czyAktywny = true → dodaje klasę text-success -->
<!-- Gdy czyAktywny = false → usuwa klasę text-success -->

<!-- Dynamiczny kolor tekstu -->
<p [style.color]="kolor">Ten tekst ma kolor ze zmiennej</p>

<!-- Dynamiczny rozmiar czcionki -->
<p [style.fontSize]="rozmiar">Ten tekst ma rozmiar ze zmiennej</p>

<!-- Tytuł (tooltip) ze zmiennej -->
<button class="btn btn-info" [title]="'Kliknij aby: ' + akcja">
  Info
</button>

moja-aplikacja/
└── src/
    ├── assets/          ← obrazki wrzucane tutaj
    │   └── logo.png
    └── app/

<!-- W HTML odwoływało się przez: -->
<img src="assets/logo.png">

<!-- Wymagało też wpisu w angular.json: -->
"assets": ["src/favicon.ico", "src/assets"]

moja-aplikacja/
├── public/              ← TUTAJ wrzucamy obrazki (obok src, nie w src)
│   ├── logo.png
│   └── images/
│       ├── hero.jpg
│       └── uczen.jpg
├── src/
│   └── app/
└── angular.json         ← nie trzeba tu nic zmieniać!

<!-- W HTML odwołujemy się przez ścieżkę od korzenia: -->
<img src="logo.png">             <!-- plik w public/ -->
<img src="images/hero.jpg">    <!-- plik w public/images/ -->

<!-- Plik: public/logo.png -->
<img src="logo.png" alt="Logo szkoły" class="img-fluid">

<!-- Plik: public/images/hero.jpg -->
<img
  src="images/hero.jpg"
  alt="Nagłówek strony"
  class="img-fluid rounded"
  width="800"
  height="400"
>

export class AppComponent {
  aktualnyUczen = {
    imie:    'Anna Kowalska',
    klasa:   '3TI',
    zdjecie: 'images/anna.jpg'   // ścieżka relative do public/
  };

  produkty = [
    { id: 1, nazwa: 'Laptop',    zdjecie: 'images/laptop.jpg'    },
    { id: 2, nazwa: 'Myszka',    zdjecie: 'images/myszka.jpg'    },
    { id: 3, nazwa: 'Klawiatura', zdjecie: 'images/klawiatura.jpg' },
  ];
}

<!-- Profil ucznia – zdjęcie i opis ze zmiennych -->
<div class="card" style="width: 200px">
  <img
    [src]="aktualnyUczen.zdjecie"
    [alt]="'Zdjęcie: ' + aktualnyUczen.imie"
    class="card-img-top"
  >
  <div class="card-body">
    <h5>{{ aktualnyUczen.imie }}</h5>
    <p>Klasa: {{ aktualnyUczen.klasa }}</p>
  </div>
</div>

<!-- Lista produktów ze zdjęciami przez @for -->
<div class="row">
  @for (produkt of produkty; track produkt.id) {
    <div class="col-md-4">
      <div class="card mb-3">
        <img
          [src]="produkt.zdjecie"
          [alt]="produkt.nazwa"
          class="card-img-top"
        >
        <div class="card-body">
          <h6>{{ produkt.nazwa }}</h6>
        </div>
      </div>
    </div>
  }
</div>

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgOptimizedImage],
  templateUrl: './app.component.html'
})
export class AppComponent {
  zdjecieUrl = 'images/hero.jpg';
}

<!-- Obrazek statyczny z ngSrc -->
<img
  ngSrc="images/hero.jpg"
  alt="Baner strony"
  width="800"
  height="400"
>

<!-- Obrazek dynamiczny z [ngSrc] -->
<img
  [ngSrc]="zdjecieUrl"
  alt="Zdjęcie"
  width="300"
  height="200"
>

<!-- Obrazek priorytetowy (ładowany pierwszy – np. logo) -->
<img
  ngSrc="logo.png"
  alt="Logo"
  width="200"
  height="60"
  priority
>