Angular 7 Routing: The Basics

Routing in Angular in one of the most common implementations any angular application will need to make it usable. In this exercise we’ll break things down into simple building blocks and get you routing a minutes!

We will cover the following topics:

• Basic routing between components
• Creating child components
• Placing the router-outlet

https://vimeo.com/298312720

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {HomeComponent} from './home/home.component';
import {ContactComponent} from './contact/contact.component';
import {MatButtonModule, MatToolbarModule} from '@angular/material';
import {RouterModule} from '@angular/router';

@NgModule({
    declarations: [

        AppComponent,
        HomeComponent,
        ContactComponent

    ],
    imports: [

        BrowserModule,

        MatToolbarModule,
        MatButtonModule,

        RouterModule.forRoot([

            {

                path: 'home',
                component: HomeComponent

            }, {

                path: 'contact',
                component: ContactComponent

            }

        ])

    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Source Code

• https://github.com/mateothegreat/ng-byexamples-routing-thebasics

See more at https://matthewdavis.io