Component dettaglio-evento, personalizzazione

Component dettaglio-evento, personalizzazione

Questo Component servirà per visualizzare i dati di dettaglio di uno specifico evento di ballo. Ad esempio Nome dell’evento, data, località, etc etc.

I 4 file che lo definiscono si trovano nella directory \components\dettaglio-evento e sono,:

  • dettaglio-evento.component.html
  • dettaglio-evento.component.ts
  • dettaglio-evento.component.css
  • dettaglio-evento.component.spec.ts

 

Dopo che abbiamo generato automaticamente con un solo comando i 4 file, non ci resta che personalizzarli. Ecco le prossime operazioni che ci aspettano:

    1. modifica del file .ts;
    2. modifica del file .html;
    3. modifica del file .css;

Nota: come abbiamo già detto il file con estensione .spec.ts riguarda i test e ne rimandiamo la trattazione.

MODIFICA DEL FILE dettaglio-evento.component.ts

Inseriamo in dettaglio-eventocomponent.ts le inizializzazioni delle variabili. Quella coi dati da visualizzare e quella coi titoli delle colonne della tabella in cui i dati saranno visualizzati.

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

@Component({
  selector: 'app-dettaglio-evento',
  templateUrl: './dettaglio-evento.component.html',
  styleUrls: ['./dettaglio-evento.component.css']
})
export class DettaglioEventoComponent implements OnInit {
  
  singoloEvento = { id: 123, name: 'Serata danzante al crepuscolo', country: 'Italy', town: 'Siena',
 site2: 'http://www.google.com', styles:'Balboa', startdate:'2020-03-21', stopdate:'2020-03-22' };

  constructor() { }

  ngOnInit() {
  }

}

MODIFICA DEL FILE dettaglio-evento.component.html

Sostituiamo tutto il precedente contenuto del file con il seguente.

Possiamo notare che aver valorizzato una variabile json nel file .ts consente di visualizzarne le parti nel file .html.

Notiamo altresì la comparsa nell’applicazione dei due primi link. Quello interno è gestito come routerLink (vedasi quindi come è definito nel file app.routing.module.ts). Il link esterno con la notazione usuale nell’html: attributo href del tag “a”. 

<div class="inner-single">
  <div class="container mat-elevation-z8">
    <div class="button-row">
      <a mat-flat-button color="primary" [routerLink]="['/']"
        ><mat-icon>list</mat-icon></a
      >
    </div>

    <mat-card class="example-card">
      <mat-card-header>
        <mat-card-title
          ><h2>{{ singoloEvento.name }}</h2></mat-card-title
        >
        <mat-card-subtitle
          >Inizio {{ singoloEvento.startdate }}</mat-card-subtitle
        >
        <mat-card-subtitle>Fine {{ singoloEvento.stopdate }}</mat-card-subtitle>
      </mat-card-header>

      <mat-card-content>
        <dl>
          <dt>Balli:</dt>
          <dd>{{ singoloEvento.styles }}</dd>
          <dt>Luogo:</dt>
          <dd>{{ singoloEvento.country }} / {{ singoloEvento.town }}</dd>
          <dt>Link:</dt>
          <dd>
            <a href="{{ singoloEvento.site2 }}" target="_blank">{{
              singoloEvento.site2
            }}</a>
          </dd>
        </dl>
      </mat-card-content>

      <mat-card-actions>
        <a mat-flat-button color="primary"><mat-icon>edit</mat-icon></a>
        <a mat-flat-button color="warn"><mat-icon>delete</mat-icon></a>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

Se il server Angular è ancora in funzione, ad ogni modifica dei files, avviene una ricompilazione automatica dei sorgenti e il ri-run dell’applicazione, con conseguente aggiornamento nel browser. In alternativa dalla nostra shell ri-inseriamo il comando ng serve e controlliamo nel browser come si è modificata la nostra app all’indirizzo http://localhost:4200/dettaglio-evento/123.

Controlliamo che la visualizzazione sia coerente con l’aspettativa e testiamo i due link. Abbiamo imparato come utilizzare un link statico, ma per muoverci dalla pagina lista-eventi a quella dettaglio-evento sarà necessario utilizzare un link dinamico: vediamo come nel prossimo articolo.

 

No Comments

Sorry, the comment form is closed at this time.