Angular 2 Routing Part 2


This is a continuation of the previous blog post called Angular 2 Routing Introduction. All we are going to do in this post is look at how to separate out our HTML from our About page.

Let’s look at the code of about.component.ts.

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

@Component({
  moduleId: module.id,
  selector: 'about',
  templateUrl: 'about.component.html'
})
export class AboutComponent {
  name: string;
  email: string;
  
  constructor() {
    this.name = 'John Doe';
    this.email = 'johndoe@gmail.com'
  }
}

Below is the code for the abount.component.html file.

<h3>About the application myapp3</h3>
<p>This is our About page. We show you how to use Angular routing.</p> 
<p>This page is dedicated to someone by the name of</p> 
<p>{{name}} with the email of {{email}}. This text is located in the</p>
<p>file about.component.html.</p>
<p>This page uses interpolation to get the name and email from about.component.ts</p>

This is what the About page looks like in the Chrome browser.

Leave a comment

Your email address will not be published. Required fields are marked *