Component aggiunta-evento, creazione

Component aggiunta-evento, creazione

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

ng generate component components\aggiuntaEvento

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

  • aggiunta-evento.component.css
  • aggiunta-evento.component.html
  • aggiunta-evento.component.ts
  • aggiunta-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 {
  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";
 
@NgModule({
  declarations: [
    AppComponent,
    ListaEventiComponent,
    DettaglioEventoComponent,
    DialogCancellazioneEvento,
    AggiuntaEventoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    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

Aggiungiamo la rotta per il nuovo componente.

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";

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: "", 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/aggiunta-evento

No Comments

Sorry, the comment form is closed at this time.