How to do routing in Angular correctly

Question

I'm developing an web application using Angular latest version and SpringBoot for learning purposes.

I'm now facing a weird problem.I did the routing correctly and the http://localhost:4200 navigates to the home and when http://localhost:4200/bookings navigates to the booking component.But in that booking component I created a form and added css styles.The routing worked fine.But then I added

required[(ngModel)]=""

part for every input field according to the tutorial.Now the problem is when I type http://localhost:4200/bookings It doesn't navigate to the booking component in-staid it returns the home component without loading the booking Component.If I remove the required[(ngModel)]="" part from every input field then the routing works fine and the http://localhost:4200/bookings will return the booking form.I'm currently stuck in that please help me to solve it.Why adding required[(ngModel)]="" part in every input field affect the routing?.

Navigation bar

nav role="navigation">
    
      HOME
      PLAN AND BOOK
        
          Manage My Booking
          Check-In Online
          Flight Status
        
      
      FLYINGWINGS
      HOLIDAYS

Routing file

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'bookings', component: BookingComponent },
  { path: 'home', component: HomeComponent }
];

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

Booking.component.html file

Booking.Component.ts

export class BookingComponent implements OnInit {
  public minDate: Date = new Date ("01/01/2000 00:00 AM");
  public maxDate: Date = new Date ("01/01/2050 00:00 AM");
  public dateValue: Date = new Date ("01/01/2015 00:00 AM");

  booking:Bookings =new Bookings();
 


  constructor(private flightService:FlightService, private router: Router) { }

  

  ngOnInit(): void {
  }

  save() {
    this.flightService.search(this.booking)
      .subscribe(data => console.log(data), error => console.log(error));
    this.booking = new Bookings();
    this.gotoList();
  }

  gotoList() {
    this.router.navigate(['/home']);
  }

}

App.Module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BookingComponent } from './booking/booking.component';
import { HeaderComponent } from './header/header.component';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HomeComponent } from './home/home.component';
import {HttpClientModule} from '@angular/common/http';
import { FooterComponent } from './footer/footer.component'
import { DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';


@NgModule({
  declarations: [
    AppComponent,
    BookingComponent,
    HeaderComponent,
    HomeComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DateTimePickerModule,
    HttpClientModule,
    CarouselModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please help Me.Thank you.

Usman Ali · Accepted Answer

Example of two way binding

In .ts file

name: string;

In .html file


 {{name}}

what you write in input it shows in

In your code, there is no problem with routing. The problem is with ngModel you have to clear in your problem that what you want to do by using [(ngModel)].

How to do routing in Angular correctly

Answers (1)

Related Questions