angularloadingangular-componentsangular-lifecycle-hooks

Loading api data after page initialization

Do you know how to load a page, then one of the components inside?

For example, I have a page with a navigation bar and an API call component (which displays a table).

I'd like the page to load, we see the navigation bar, and only then the API call component is activated.

Thank you!

Solution

  • You can use ngAfterViewInit life cycle hook to ensure the statements are executed after view is completely initialized.

    You can read more about that here

    Essentially, you will need to do ::

    export SomeComponent implements AfterViewInit

ngAfterViewInit() {}

    If you are placing nav-bar in seperate component and populating the api data in a separate component, please do the following ::

    Inside your navigation component,

    In HTML : you can place the <router-outlet></router-outlet>

    In TS: Inside ngAfterViewInit(), do router.navigate()

    Please add a comment if you feel you need more help on this :)