Issue
I have a folder named Sidebar
.
Then inside this folder, I have a folder named Views
, with inside 2 folders which are Home
and Devise
.
In sidebarComponent.html
, I have this:
<div class="d-flex">
<div
class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white"
style="background-color: #1F6AB3;"
>
<a
href="/"
class="
d-flex
align-items-center
mb-3 mb-md-0
me-md-auto
text-white text-decoration-none
"
>
<svg class="bi me-2" width="80" height="32"></svg>
<span class="fs-4">Logo </span>
</a>
<hr />
<ul class="nav nav-pills flex-column mb-auto">
<li>
<a href="home" class="nav-link text-white">
<i class="fa fa-key"></i><span class="ms-2">Home</span>
</a>
</li>
<li>
<a href="devise" class="nav-link text-white">
<i class="fa fa-credit-card"></i><span class="ms-2">Devise</span>
</a>
</li>
</ul>
<hr />
<div></div>
</div>
<div class="w-100">
<nav class="navbar navbar-light" style="background-color: #1F6AB3; "></nav>
</div>
</div>
Then, In the file Home.component.html
<app-sidebar></app-sidebar>
<div class="container pt-5 text-center">
<h1 class="pb-5">Home Page</h1>
<form>
<div class="mb-3">
<div class="d-inline-flex col-md-4 col-form-label text-right">
<label
for="exampleInputEmail1"
class="form-label d-flex justify-content-end align-items-end pe-3"
style="min-width: 158px !important"
>Wallet
</label>
<input
type="text"
class="form-control"
name="exampleInputEmail1"
style="min-width: 380px"
aria-describedby="emailHelp"
required
/>
</div>
</div>
<div class="mb-3">
<div class="d-inline-flex col-md-4 col-form-label text-right">
<label
for="exampleInputEmail1"
class="form-label d-flex justify-content-end align-items-end pe-3"
style="min-width: 158px !important"
>Company</label
>
<input
type="text"
class="form-control"
name="exampleInputEmail1"
style="min-width: 380px"
aria-describedby="emailHelp"
required
/>
</div>
</div>
<div class="row">
<div class="text-center">
<button type="submit" class="btn btn-primary">Rechercher</button>
</div>
</div>
</form>
</div>
When, I click on Home
, the page stays empty.
I don't understand why?
I can give you my code here -> https://stackblitz.com/edit/angular-ivy-1l46hw?file=src/app/views/sidebar/views/home/home.component.html
I thank you in advance for your help.
Solution
You have two issues.
- app.component.html should have
<router-outlet></router-outlet>
element, it's placeholder element where angular injects components when route changed. - To navigate in angular you should use [routerLink] directive, otherwise your app will constantly be reloaded on every route change
Fork of your example - https://stackblitz.com/edit/angular-ivy-3gw65c?file=src%2Fapp%2Fapp.component.html
Answered By - Cowcancry
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.