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

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>Mława</h1>
      <p>
        Miejscowość, w której mieszkam, jest malowniczym miastem położonym u podnóża gór. Otoczone piękną przyrodą i pełne urokliwych zabytków, to miejsce, gdzie natura spotyka się z historią.
      </p>
      <img ngIf="firstImageVisible" src="assets/images/mlawa.jpg" alt="Pierwsze zdjęcie">
      <img ngIf="!firstImageVisible" src="assets/images/mlawa2.jpg" alt="Drugie zdjęcie">
      <div>
        <button (click)="showFirstImage()">Ratusz</button>
        <button (click)="showSecondImage()">Kościół</button>
      </div>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'zadanie';
  firstImageVisible: boolean = true;

  showFirstImage() {
    this.firstImageVisible = true;
  }

  showSecondImage() {
    this.firstImageVisible = false;
  }
}