My app structure like this
<app-header>
<router-outlet>
<app-footer>
But here the problem is when I go to some page since angular loads footer component first before loading the router outlet
My router outlet is coming over the footer component which hides the footer
What am I doing wrong here ?
How to load all the components perfectly without occuring any html , css issues
Related
I have a header menu in my web page, inside the menu I have sections and subsections, one of the subsections will jump me to the position where the section is in the home page
for this I am using react router hash
import { HashLink as Link } from 'react-router-hash-link';
<Link to="/#map-section">
Section of home page
</Link>
this works if I am in the current page where the section I want to jump is, but it doesnt work at all when I am in another page and I wanna go to the main page and then jumping to the section.
I am guessing that component where the section is has not finished loading when i am trying to get there. Is there any way to manage this?
Please check below codesandbox.
It worked.
https://codesandbox.io/s/zen-swartz-59rj4
Now that I got my button to route to another component, I'm trying to make it render on a blank page. I thought adding target="_blank" to Link to="/blog" would make the component render on a new blank page but the component renders on the same page making my App.js cluttered. My CodeSandbox
I have two html files; index.html and registrationform.html.
index is the main form having the website navbar that I want fixed at the top as I move to registrationform page or any other page.
how do I go about it in html?
You can do it using the css with position: fixed; the top bar will be reloaded for each page but will stay at the same position.
If you do want to load this top bar only on the first load, you can use ajax to only reload the main content of the page or in a more modern using a JS framework like Vue or React to build a Single Page Application (SPA).
How is the page in the Angular2 is rendered? Does it render all the DOM elements that might be used at the page, for example pop-up, dialog? Or does it render after the element is being invoked?
For angular 2 when you spin up a server it loads all the html templates lazily. The index.html page is the entry point and by default the app-root directive is loaded first. If you have say another component featureA and featureB that are triggered by clicking a button or some other UI element those aren't loaded until you actually click on it.
I am using ui-router of angularjs in my SPA. When i add an style to my view pages, angularjs loads them when switching to than view. Thats actually pretty cool that it can be done in runtime.
The problem is i do not want it to do so. for example i want to use bootstrap css in my view. it is already inserted in the main page, so it is not needed to get loaded again form child view. but for my IDE to auto-complete class names, it is needed to be added to html page of subview.
Is there any way to ask Angularjs to ignore Head part and just load Body part of my html?