Angular create new page

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

Method 1: Using the Angular CLI

1. Open your terminal and navigate to your Angular project directory.
2. Run the command ng generate component <component-name> to create a new component. Replace <component-name> with the name of your new page (e.g., new-page).
3. The Angular CLI will create a new directory with the component files (e.g., new-page.component.ts, new-page.component.html, new-page.component.css).
4. Open the new-page.component.html file and add your HTML content.
5. Open the new-page.component.ts file and add your TypeScript code.
6. To use the new component in your application, add it to the app.module.ts file by importing it and adding it to the declarations array.

Method 2: Manually creating a new page

1. Create a new directory in your Angular project directory to hold your new page (e.g., pages/new-page).
2. Create a new file called new-page.component.ts in the new directory and add the following code:

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

@Component({ selector: 'app-new-page', templateUrl: './new-page.component.html', styleUrls: ['./new-page.component.css'] }) export class NewPageComponent { // Add your component logic here }

3. Create a new file called `new-page.component.html` in the same directory and add your HTML content.
4. Create a new file called `new-page.component.css` in the same directory and add your CSS styles.
5. To use the new component in your application, add it to the `app.module.ts` file by importing it and adding it to the `declarations` array.

**Adding the new page to the router**

To add the new page to the router, you need to create a new route for it. Open the `app-routing.module.ts` file and add the following code:
```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NewPageComponent } from './pages/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 creates a new route for the new-page component and maps it to the /new-page URL.

Accessing the new page

To access the new page, you can navigate to the /new-page URL in your browser. You can also add a link to the new page in your application's navigation menu or toolbar.

That's it! You have now created a new page in your Angular application.