Angular 6 Routing

Routing in Angular


https://www.youtube.com/watch?v=-Rtf6G7u4-4&t=1s


Today i will tell you how to Create Link in Angular .

to Create a link you need a app-routing.module.ts
in this module we define link /routes .


Frist we will Create Some Link on our Home Page Component

app.component.html

Home


Employee

The tells the router where to display routed views.

Now our HTML page in created in which two link will be there
on clicking these link you will be redirected on another page .
this is done through routing .

Routing outlet is used for routing .


we have create component

C:\MyAngular\myapp> ng g c home
CREATE src/app/home/home.component.html (19 bytes)
CREATE src/app/home/home.component.spec.ts (614 bytes)
CREATE src/app/home/home.component.ts (261 bytes)
CREATE src/app/home/home.component.css (0 bytes)
UPDATE src/app/app.module.ts (553 bytes)

C:\MyAngular\myapp> ng g c emp
CREATE src/app/emp/emp.component.html (18 bytes)
CREATE src/app/emp/emp.component.spec.ts (607 bytes)
CREATE src/app/emp/emp.component.ts (257 bytes)
CREATE src/app/emp/emp.component.css (0 bytes)
UPDATE src/app/app.module.ts (623 bytes)

see in both case app.module.ts is updated .

in app.module.ts routing module is already added in import section

by default import { AppRoutingModule } from './app-routing.module'; is added in app.module.ts


app-routing.module.ts
--------------------------------

const routes: Routes = [
{ path:'',component : HomeComponent } ,
{ path:'employee',component : EmplistComponent }

];
path: a string that matches the URL in the browser address bar.
component: the component that the router should create when navigating to this route.

---------------------------------