I try to separate the layout and menu as a reusable component, if we use it directly in the app.component.html, everything works nice. But if we put it inside an another component that is being displayed as a child router-outlet, it redirects the user to the ourdomain/#.
We know that is directly related to the href="#" property, but if we remove this, the menu just don't appear when user clicks it.
How can we handle that?
split layout in some component
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
How do you use it as a component? Can you post some code?
-
- Posts: 11
- Joined: 31 Mar 2016, 04:07
I Comment the top bar section to add a component that contait all html
In my app-top-bar component the code is identical to html on original top bar section into application.html
Code: Select all
<!-- Top Bar -->
<app-top-bar></app-top-bar>
<!--<div class="topbar clearfix">
...
</ul>
</div>
</div>-->
<!-- Menu -->
<div [ngClass]="{'layout-menu':true,'layout-menu-dark':darkMenu}">
In my app-top-bar component the code is identical to html on original top bar section into application.html
Code: Select all
<div class="topbar clearfix">
<div class="topbar-left">
<div class="logo"></div>
</div>
<div class="topbar-right">
<a id="menu-button" href="#">
<i></i>
</a>
<a id="topbar-menu-button" href="#">
<i class="material-icons">menu</i>
</a>
<ul class="topbar-items fadeInDown animated">
<li class="profile-item" [hidden]="profileMode!='top'&&layoutMode!='horizontal'">
<a href="#">
<div class="profile-image"></div>
<span class="topbar-item-name">Jane Williams</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#">
<i class="material-icons">person</i>
<span>Profile</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">security</i>
<span>Privacy</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">settings_applications</i>
<span>Settings</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">power_settings_new</i>
<span>Logout</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="topbar-icon material-icons">settings</i>
<span class="topbar-item-name">Settings</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#">
<i class="material-icons">palette</i>
<span>Change Theme</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">favorite_border</i>
<span>Favorites</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">lock</i>
<span>Lock Screen</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">wallpaper</i>
<span>Wallpaper</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="topbar-icon material-icons animated swing">message</i>
<span class="topbar-badge animated rubberBand">5</span>
<span class="topbar-item-name">Messages</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="resources/layout/images/avatar1.png" width="35" />
<span>Give me a call</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="resources/layout/images/avatar2.png" width="35" />
<span>Sales reports attached</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="resources/layout/images/avatar3.png" width="35" />
<span>About your invoice</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="resources/layout/images/avatar2.png" width="35" />
<span>Meeting today at 10pm</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="resources/layout/images/avatar4.png" width="35" />
<span>Out of office</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="topbar-icon material-icons">timer</i>
<span class="topbar-badge animated rubberBand">4</span>
<span class="topbar-item-name">Notifications</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#">
<i class="material-icons">bug_report</i>
<span>Pending tasks</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">event</i>
<span>Meeting today at 3pm</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">file_download</i>
<span>Download documents</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">flight</i>
<span>Book flight</span>
</a>
</li>
</ul>
</li>
<li class="search-item">
<span class="md-inputfield">
<input type="text">
<label>Search</label>
<i class="topbar-icon material-icons">search</i>
</span>
</li>
</ul>
</div>
</div>
-
- Posts: 11
- Joined: 31 Mar 2016, 04:07
If it's not a best practice to use a href="#", why the template I purshased have this as example ? It's possible to have a good example if I want split the page in multi component.
- top bar
menu
footer
content
It's an open question we choose to implement like that but sometimes it can cause problems like yours.
-
- Posts: 11
- Joined: 31 Mar 2016, 04:07
I Know but I need help to split into example page into many component and I don't know how withoout rewrite all. When I paid for a theme, I paid for save time of implantation. It's possible for you to send me an example of how I can split application page ?
Thanks
Thanks
Hi,
I understand the problem but it's not directly about the layout itself it's a problem with html and angular2 and handling href property between them.
I split the top bar just like you did and then inside the topbar.component.html
Now when i use <app-topbar></app-topbar> for my topbar and click one of the item above it's not refreshing the page or navigating it to /#.
Sorry for the annoyance.
I understand the problem but it's not directly about the layout itself it's a problem with html and angular2 and handling href property between them.
I split the top bar just like you did and then inside the topbar.component.html
Code: Select all
<li>
<a href="javascript:void(0)">
<i class="topbar-icon material-icons">timer</i>
<span class="topbar-badge animated rubberBand">4</span>
<span class="topbar-item-name">Notifications</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#">
<i class="material-icons">bug_report</i>
<span>Pending tasks</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">event</i>
<span>Meeting today at 3pm</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">file_download</i>
<span>Download documents</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">flight</i>
<span>Book flight</span>
</a>
</li>
</ul>
</li>
Sorry for the annoyance.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 3 guests