Add new page angular

To add a new page in an Angular application, you can follow these steps:

Step 1: Create a new component

In the terminal, navigate to the root directory of your Angular project and run the following command:

ng generate component <component-name>

Replace <component-name> with the name of your new component, for example, new-page.

Step 2: Create a new routing module

In the terminal, run the following command:

ng generate module <module-name> --routing

Replace <module-name> with the name of your new routing module, for example, app-routing.

Step 3: Add the new component to the routing module

In the app-routing.module.ts file, add the following code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NewPageComponent } from './new-page/new-page.component';

const routes: Routes = [
  { path: 'new-page', component: NewPageComponent }
];

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

This code defines a new route for the NewPageComponent component.

Step 4: Add the new routing module to the app module

In the app.module.ts file, add the following code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This code imports the AppRoutingModule module and adds it to the imports array.

Step 5: Add the new component to the app component

In the app.component.html file, add the following code:

<router-outlet></router-outlet>

This code adds a router outlet to the app component, which will render the new page component.

Step 6: Run the application

Run the following command in the terminal:

ng serve

This will start the Angular development server and you can access the new page by navigating to http://localhost:4200/new-page in your web browser.

That's it! You have successfully added a new page to your Angular application.