Angular Route

The Angular router is a core part of the Angular framework. It is used to handle the navigation from one view to another view.

Firstly you create a user component through command

Syntax:-

ng g c componentName

Example:-

ng g c user

After executing the above command then you can check some files are created in the user folder.

user.component.ts: you can implement user logic this file.

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

@Component({
  selector: 'app-user',
  templateUrl: './app-user.component.html',
  styleUrls: ['./app-user.component.css']
})

export class UserComponent implements OnInit {
	
constructor(){}

 ngOnInit() {}

}

Note:- ngOnInit():- It is Angular life cycle hook method and it is used to initialise data in a component. It is called once. It is Added to every component by default through the Angular CLI command.

user.component.html:you can implement form data or any content in this file.

user.component.css: this is used to define the user component css.

user.component.spec.ts: this file is used to test the component.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { UserComponent } from './user.component';

describe('UserComponent', () => {
  let component: UserComponent;
  let fixture: ComponentFixture<UserComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ UserComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UserComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Now open the file user.component.html and put the text “Hello John”

Now, import the UserComponent in app-routing.module.ts file.

import { UserComponent } from './user.component';

Now add the user route in the routes array which in the app-routing.module.ts file

const routes: Routes = [
 
  {path:'user', component:UserComponent},

]

Now, you open the url http://localhost:4200/user

then show the result Hello John

wildcard route

If the Angular route does not match any route then we can handle this situation through wildcard route which has two asterisks(**).

Firstly create a component like PageNotFoundComponent and write content in the component file.

Now, add the below code into app-routing.module.ts file

const routes: Routes = [
  {path: '404', component: PageNotFoundComponent},
  {path: '**', redirectTo: '/404'}
]