split layout in some component

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
JanickRoss
Posts: 11
Joined: 31 Mar 2016, 04:07

21 Nov 2016, 19:59

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?

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

21 Nov 2016, 20:58

How do you use it as a component? Can you post some code?

JanickRoss
Posts: 11
Joined: 31 Mar 2016, 04:07

21 Nov 2016, 21:08

I Comment the top bar section to add a component that contait all 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>


JanickRoss
Posts: 11
Joined: 31 Mar 2016, 04:07

22 Nov 2016, 17:35

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

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

23 Nov 2016, 08:38

It's an open question we choose to implement like that but sometimes it can cause problems like yours.

JanickRoss
Posts: 11
Joined: 31 Mar 2016, 04:07

23 Nov 2016, 21:55

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

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

24 Nov 2016, 10:00

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

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>
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.

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests