Component modifica-evento, creazione

Component modifica-evento, creazione

Per creare il nuovo component modificaEvento dalla nostra Shell diamo il seguente comando Angular:

ng generate component components\modificaEvento

Nella folder di progetto \agenda-eventi\src\app\components verrà creata il folder modifica-evento, contenente i quattro nuovi file, caratteristici di ogni component.

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

MODIFICHE AUTOMATICHE AL FILE app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import {
  MatInputModule,
  MatPaginatorModule,
  MatProgressSpinnerModule,
  MatSortModule,
  MatTableModule,
  MatIconModule,
  MatButtonModule,
  MatCardModule,
  MatFormFieldModule
} from "@angular/material";
import { MatSelectModule } from "@angular/material/select";
import { MatDialogModule } from "@angular/material";

import { ListaEventiComponent } from "./components/lista-eventi/lista-eventi.component";
import { DettaglioEventoComponent } from "./components/dettaglio-evento/dettaglio-evento.component";
import { DialogCancellazioneEvento } from "./components/dettaglio-evento/dialog-cancellazione-evento";
import { AggiuntaEventoComponent } from "./components/aggiunta-evento/aggiunta-evento.component";
import { ModificaEventoComponent } from './components/modifica-evento/modifica-evento.component';

@NgModule({
  declarations: [
    AppComponent,
    ListaEventiComponent,
    DettaglioEventoComponent,
    DialogCancellazioneEvento,
    AggiuntaEventoComponent,
    ModificaEventoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    MatSelectModule,
    MatSortModule,
    MatProgressSpinnerModule,
    MatIconModule,
    MatButtonModule,
    MatCardModule,
    MatFormFieldModule,
    MatDialogModule
  ],
  providers: [],
  entryComponents: [DialogCancellazioneEvento],
  bootstrap: [AppComponent]
})
export class AppModule {}

MODIFICA DEL FILE app-routing.module.ts

Anche per questo nuovo componente ci interessa definire una rotta all’interno dell’applicazione.

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { ListaEventiComponent } from "./components/lista-eventi/lista-eventi.component";
import { DettaglioEventoComponent } from "./components/dettaglio-evento/dettaglio-evento.component";
import { AggiuntaEventoComponent } from "./components/aggiunta-evento/aggiunta-evento.component";
import { ModificaEventoComponent } from "./components/modifica-evento/modifica-evento.component";

const routes: Routes = [
  {
    path: "lista-eventi",
    component: ListaEventiComponent,
    data: { title: "Lista degli Eventi" }
  },
  {
    path: "dettaglio-evento/:id",
    component: DettaglioEventoComponent,
    data: { title: "Dettagli dell'Evento" }
  },
  {
    path: "aggiunta-evento",
    component: AggiuntaEventoComponent,
    data: { title: "Aggiunta Evento" }
  },
  {
    path: "modifica-evento",
    component: ModificaEventoComponent,
    data: { title: "Modifica Evento" }
  },
  { path: "", redirectTo: "/lista-eventi", pathMatch: "full" }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Dopo queste modifiche il nostro nuovo component sarà visualizzabile nel browser semplicemente digitando

http://localhost:4200/modifica-evento

No Comments

Sorry, the comment form is closed at this time.