Creating a dynamic Angular 2 application using Bootstrap with external data sources

Question

Creating a dynamic Angular 2 application using Bootstrap with external data sources

How can I delay the loading of an Angular 2 application until external data is received?

For instance, if there is an external application on the same HTML page, and I need to pass some data to my app service before initialization. Let's say this data is an API URL, like 'some_host/api/', how do I ensure my application doesn't start until this information is retrieved?

Is it feasible to trigger a method in my application from the script of the external app, like so:

application.initApplication('some data string', some_object);

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>App</title>
  <base href="/">
  <link>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<script>
  application.initApplication('api/url', some_object);
</script>


  <app-root
   >Loading...</app-root>

</body>
</html>

javascript angular typescript angular-cli angular2-bootstrapping

Answer 1

Answer №1

If you're looking to kickstart a project, here's a helpful guide: Check out this plnkr example: https://plnkr.co/edit/b0XlctB98TLECBVm4wps

To start off, make sure to set the URL on the window object, as shown in the code snippet below. Within your root component, include *ngif="ready". The "ready" variable should be a public member of your root component that is initially set to false.

Subsequently, utilize the specified URL in your service or root component using the http service. Once the request is successfully completed, set the "ready" variable to true. Your application will then display the desired content, following the outlined steps in the app.ts file and the app component's ngOnInit method.

Here is the code excerpt:

File: src/app.ts

import { Component, NgModule, VERSION, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http } from '@angular/http';

@Component({
  selector: 'my-app',
  template: `
    <div *ngIf="ready">
      <h2>Hello {{name}}</h2>
    </div>
  `,
});

export class App implements OnInit {
  name: string;
  ready: boolean;
  constructor(private http: Http) {
    this.name = `Angular! v${VERSION.full}`
  }
  ngOnInit(){
    const self = this;
    const url = window["myUrl"];
    this.http.get(url)
    .subscribe(
      (res) =>
      {
        // do something with res
        console.log(res.json())
        self.ready = true;
      },
      (err) => console.error(err)),
      () => console.log("complete"))
  }
}

@NgModule({
  imports: [ BrowserModule, HttpModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

File: src/data.json

{
  "key1": "val1",
  "key2": "val2"
}

File: src/index.html

<header>
    ...
    <script>window['myUrl'] = 'data.json'</script>
    ...
</header>

Answer 2

If you're looking to kickstart a project, here's a helpful guide: Check out this plnkr example: https://plnkr.co/edit/b0XlctB98TLECBVm4wps

To start off, make sure to set the URL on the window object, as shown in the code snippet below. Within your root component, include *ngif="ready". The "ready" variable should be a public member of your root component that is initially set to false.

Subsequently, utilize the specified URL in your service or root component using the http service. Once the request is successfully completed, set the "ready" variable to true. Your application will then display the desired content, following the outlined steps in the app.ts file and the app component's ngOnInit method.

Here is the code excerpt:

File: src/app.ts

import { Component, NgModule, VERSION, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http } from '@angular/http';

@Component({
  selector: 'my-app',
  template: `
    <div *ngIf="ready">
      <h2>Hello {{name}}</h2>
    </div>
  `,
});

export class App implements OnInit {
  name: string;
  ready: boolean;
  constructor(private http: Http) {
    this.name = `Angular! v${VERSION.full}`
  }
  ngOnInit(){
    const self = this;
    const url = window["myUrl"];
    this.http.get(url)
    .subscribe(
      (res) =>
      {
        // do something with res
        console.log(res.json())
        self.ready = true;
      },
      (err) => console.error(err)),
      () => console.log("complete"))
  }
}

@NgModule({
  imports: [ BrowserModule, HttpModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

File: src/data.json

{
  "key1": "val1",
  "key2": "val2"
}

File: src/index.html

<header>
    ...
    <script>window['myUrl'] = 'data.json'</script>
    ...
</header>

Creating a dynamic Angular 2 application using Bootstrap with external data sources

Answer №1

Similar questions

Toggle between pausing and running CSS animations with this handy button!

Send information using jQuery AJAX

Any suggestions on how to customize the tawk.to positioning within a Next Js script?

Tips for organizing a list in Angular 1 when a button is clicked

Dealing with the process of single sign out from Identity Server4 using frontchannel

The error message "TypeError Cannot read properties of undefined (reading 'backdrop') - bootstrap v5.2.1 modal" is indicating that there is an

Utilizing V-bind for dynamically generated components

What is the best way to set the typing of a parent class to the child constructor?

Having trouble with the ::after element in my React component for my latest React 3D portfolio project

Tips for reusing multiple sequences of chained transitions in D3

Inquiries for Web-Based Applications

Are you patiently anticipating the definition of variables?

Issue with Vuetify password field: label overlaps with v-text-field

Is there a way to simultaneously upload a file and incorporate JSON data using the Fetch API?

"Enhance your data display with PrimeNG Table components and easily customize layouts

Retrieve a variety of items and pass them to a view using the mssql module in Node

Unlimited scrolling feature implemented in a specified container using AngularJS

Converting JSON DateTime objects to local time in JQuery without considering timezones

I am having issues with the Load More Posts Ajax Button on my WordPress site and it is

Angular binding of variable names beginning with numbers