CODEWITHSUNDEEP
htmlcssangularangular-routing
Rui
Rui

Reputation: 41

Angular: Make a routerLink inside a routerLink

Basically i have a page that is loaded using router link and I want it to have the content change by using router link as well but I don't want to be copying an pasting the html of the topBar and the botBar. Basically a routerLink is used to go to each page and then I want to use it to change its content without always having to copy the HTML of the topBar and botBar.

/*This is the routing for every page there is. The HTML shown is for /douroVinhas*/
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {HomePageComponent} from './home-page/home-page.component';
import {DouroVinhasComponent} from './douro-vinhas/douro-vinhas.component';
import {AVerOMarComponent} from './a-ver-omar/a-ver-omar.component';
import {MediterraneoComponent} from './mediterraneo/mediterraneo.component';

const routes: Routes = [
  { path: '', redirectTo: '/homePage', pathMatch: 'full' },
  { path: 'homePage', component: HomePageComponent },  
  { path: 'douroVinhas', component: DouroVinhasComponent }, 
  { path: 'aVerOMar', component: AVerOMarComponent },
  { path: 'mediterraneo', component: MediterraneoComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
.hotelPage {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 180px auto;
}

.topo {
    grid-row-start: 1;
    grid-row-end: 1;
    text-align: center;
    background-color: black;
}

.logo {
    float: left;
    width: auto;
    color: white;
    max-width: 15%;
    max-height: 100%;
    margin-top: 0.5%;
    z-index: 10;
}

.nomeHotel {
    position: absolute;
    color: white;
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
    z-index: 0;
    left: 40%;
}

.topNav {
    color: white;
    float: right;
    padding-right: 0;
    top: 0;
    text-align: center;
    font-size: 250%;
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
    width: 35%;
    padding-top: 2%;
}

.topNavA {
    padding: 5%;
}

.telefone {
    width: 5%;
    height: 5%;
}

.botBar {
    background-color: black;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5%;
}

.botBar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
}

#nrTelefone,
#mail {
    color: white;
}

.icon {
    width: 10%;
}
<div class="hotelPage">
    <div class="topo">
        <div class="topNav">
        <button>Change Content</button>
        </div>
    </div>
    <div class="content">This is what I want to be loaded using router link, basically this part changes by pressing a button on topNav.</div>
    <div class="botBar">
    </div>
</div>

Upvotes: 0

Views: 719

Answers (1)

Bunyamin Coskuner
Bunyamin Coskuner

Reputation: 8859

Router-outlet allows you to render components loaded by routing.

For more information, you can read it here

You can simply use router-outlet as follows

<div class="hotelPage">
    <div class="topo">
        <div class="topNav">
        <button>Change Content</button>
        </div>
    </div>
    <div class="content">
        <router-outlet></router-outlet>
    </div>
    <div class="botBar">
    </div>
</div>

Also, why do you have angular 1.7 script in your html? Do you use both angularjs and angular together?

Upvotes: 1

Related Questions