Created Bootstrap Dashboard in Angular

See: https://getbootstrap.com/docs/4.3/examples/dashboard/

I was able to recreate the get bootstrap dashboard example in Angular, the code can be found here: https://github.com/muncey/angular-bootstrap-admin

There were a few highlights:

  • The layout is broken down into header, nav (sidebar) and main components.
  • The feather.js and Chart.js scripts were not loading in time for the code to be available so I load these scripts in the app.component.
  • If creating again I would create a Resolve guard in future to wait for scripts to load.
  • If creating again I would call the nav component sidebar to be closer to what it does.

To load the scripts in the app.component I created a function loadScript.

  loadScript(src) {
    const script: any = document.createElement('script');
    script.src = src;
    return new Promise((resolve, reject) => {
        if (script.readyState) {
          script.onreadystatechange = function () {
              if (script.readyState === 'loaded' || script.readyState === 'complete') {
                  script.onreadystatechange = null;
                  return resolve(true);
              }
          };
        } else {
          script.onload = () => {
            return resolve(true);
          }
        }
        document.getElementsByTagName('body')[0].appendChild(script);
    });

This is based on the advice found here: http://www.lukasjakob.com/how-to-dynamically-load-external-scripts-in-angular/

I modify the ngOnInit as follows:

  ngOnInit() {
    this.loadScript('https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js')
      .then((result) => {
        console.log('feather loaded');
        this.scriptsLoaded++;
      });
    this.loadScript('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js')
      .then((result) => {
        console.log('Chart loaded');
        this.scriptsLoaded++;
      })
  }

And wait for the scripts to load in app.component

<app-frontend-layout *ngIf="scriptsLoaded == 2"></app-frontend-layout>

I am pretty happy with this as it looks close to the example and didn’t take a long time to create. The next steps will be to look at creating an authenticated admin console.