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

a month ago

Latest Post Ansible to Slack by Matthew Davis

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:

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

Matthew Davis

Published a month ago

Comments?

Leave us your opinion.