Video Course

Routing Angular v2+ Applications: Lesson 2 of 23

Starter Components

Up Next

Starting Routing

Autoplaying in 7 seconds!

Cancel

We'll create three components to start. These will be our home, about, and contact components.

We'll need these components, which will act as pages so that we can route to them.

app/about/about.component.ts

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

@Component({
  selector: 'about-page',
  template: `
    i am the about page
  `
})
export class AboutComponent {}

app/home/home.component.ts

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

@Component({
  selector: 'home-page',
  template: `
    i am the home page
  `
})
export class HomeComponent {}

app/contact/contact.component.ts

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

@Component({
  selector: 'contact-page',
  template: `
    i am the contact page
  `
})
export class ContactComponent {}

Once the components are created, be sure to add them to the app.module.ts so that our application knows how to use them.

Chris Sevilleja

163 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.