1

My goal: user is in the welcome page(app component html) and when clicked on button, he should be able to go to another html page. I checked the tutorials and know that i should use routes to do this but whatever I do, i couldn't get this simple thing working with the following code, I click on the button url changes but i cant see the inner content html of hizmetlerimiz file:

App Component Html File:

<app-header></app-header>
<button routerLink="/hizmetlerimiz">click me</button>
<app-footer></app-footer>

App-routing-module.ts file:

const routes: Routes = [
  {
    path: 'hizmetlerimiz',
    component: HizmetlerimizComponent,
  },
  {
    path: '',
    component: AppComponent,
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Hizmetlerimiz Component:

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

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

export class HizmetlerimizComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Hitmetlerimiz Component Html File

<h5>hizmetlerimiz</h5>
<p>some hizmets</p>
Ahmet Eroğlu
  • 594
  • 1
  • 7
  • 23

1 Answers1

1

You need to utilize <router-outlet></router-outlet>. This tag is a placeholder for the html content and is filled with the component attached to the current route

So it should look something like this:

<app-header></app-header>
<router-outlet></router-outlet>
<button routerLink="/hizmetlerimiz">click me</button>
<app-footer></app-footer>
Beka Kalandadze
  • 510
  • 7
  • 10
  • Hi when i do this, i see that when button is clicked, only the html page of the hizmetlerimiz appended to the bottom but not opened as a new html page – Ahmet Eroğlu Dec 20 '21 at 11:21
  • @AhmetEroğlu What exactly do you mean by "new html page"? – wiwi Dec 20 '21 at 11:35
  • All of the content that sits inside /hizmetlerimiz component will go inside of the tag. If you want all of the page to change you can create one component for the main page and resolve it's route to `/` – Beka Kalandadze Dec 20 '21 at 11:36
  • This is what doesn't click for me. I already created a route for the hizmetler page with path "hizmetler" so when im in app component page( the entry point) why it isnt redirected to the hizmetler page's html file but rather just appens the inner html of it – Ahmet Eroğlu Dec 20 '21 at 11:39
  • That's the gist of Single Page Applications - You do not redirect user to the new page nor create page anew, you change innerHTML of the page given. – Beka Kalandadze Dec 20 '21 at 11:41
  • yeah but what happens if i want to use another footer or header in my new componetn? how do i remove the current header and footer in app component when i append the content of the hizmetler component – Ahmet Eroğlu Dec 20 '21 at 11:42
  • Basically the way I look at it I utilize `app-component` only for the first initialization logic and have only `router-outlet` present in it. But the default page that will get initialized will be other component e.g. `app-home` or `app-main` holding first page logic there. – Beka Kalandadze Dec 20 '21 at 11:45