import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }     from '@angular/forms';
import { AppComponent }     from './app.component';
import { PriceComponent }     from './price/price.component';
import { HomeComponent } from './home/home.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';

const appRoutes: Routes = [
     { path: '', component: HomeComponent },
     { path: 'price', component: PriceComponent },
];

@NgModule({
     imports: [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes) ],
     declarations: [ AppComponent, PriceComponent, HomeComponent ],
     bootstrap: [ AppComponent ],
     providers: [{provide: APP_BASE_HREF, useValue: '/'}]
})
export class AppModule { }

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

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
})

export class AppComponent {

     myText1:string = "Hello!";

     constructor(private router: Router) {
     }

     ngOnInit(){
     }

     myNavigate()
     {
          this.router.navigate(['/price']);
     }
}

<h1>{{myText1}}!</h1>

h1 {
     color: blue;
}

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

@Component({
     selector: 'price',
     templateUrl: './price.component.html',
     styleUrls: ['./price.component.scss']
})

export class PriceComponent {

     myText1:string = "Book price!";

     constructor(){
     }

     ngOnInit(){
     }
}

<h1>{{myText1}}!</h1>

h1 {
     color: yellow;
}

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

@Component({
     selector: 'home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.scss']
})

export class HomeComponent {

     myText1:string = "Home!";

     constructor(){
     }

     ngOnInit(){
     }
}