Building A Dashboard Wiht Angular - Part3

Remember the dymanicComponent we started with?
Lets change it code so it will be able to display each of three widgets when a widget type passed as an "input" with its data:

import {Component, ViewContainerRef, ViewChild, Input, ComponentFactoryResolver} from '@angular/core';
import {VERSION} from '@angular/material';
import CompletedTasksComponent from './completed-tasks.component'; 
import EmailSubscriptionsComponent from './email-subscriptions.component';
import DailySalesComponent from './daily-sales.component'; 
@Component({
  selector: 'dynamic-cmp',
  template: `<div>
     here some dynamic stuff should happen
     <div #dynamicComponentContainer></div>  
  </div>`,
  entryComponents: [
    CompletedTasksComponent,
    EmailSubscriptionsComponent,
    DailySalesComponent
  ]
})
export class DynamicComponent { 
  componentRef:any;
  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;
  constructor(private resolver: ComponentFactoryResolver) {}
  @Input() set componentData(data: {component: any, data: any }) {
    if (!data) {
      return;
    }
    let factory = this.resolver.resolveComponentFactory(data.component);    
    this.componentRef = this.dynamicComponentContainer.createComponent(factory);
    this.componentRef.instance.data = data.data; // passing data to component through input

  } 
}

Now the component data and the component type passed to dymanicComponent as input:

    <mat-grid-list cols="3" rowHeight="1:1">
      <mat-grid-tile *ngFor="let data of componentData">
        <dynamic-cmp [componentData]="data"></dynamic-cmp>
      </mat-grid-tile>
    </mat-grid-list>

Please see my first stackblitz embedd here:

Building A Dashboard With Angular - Part2

More Dashborad

The material dashboad project used for me as inspiration, thus i will implemented 3 widgets using Chartist library:
Completed Tasks Chart

import {Component, Input, AfterViewInit} from '@angular/core';
declare const Chartist:any;
@Component({
  selector: 'completed-tasks',
  template: `
       <mat-card>
        <mat-card-title>
          Completed Tasks
        </mat-card-title>
        <mat-card-content>
            <div class="ct-chart" id="completedTasksChart"></div>
        </mat-card-content>
    
      </mat-card>
  `,
})
export default class CompletedTasksComponent implements  AfterViewInit {
  @Input() data :any; 
 
  ngAfterViewInit(){           
        const  optionsCompletedTasksChart = {
            lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
            }),
            low: 0,
            high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
            chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
        }
                
        var completedTasksChart = new Chartist.Line('#completedTasksChart', this.data, optionsCompletedTasksChart);
        
  }
}

Daily Sales Chart

import {Component, Input, AfterViewInit} from '@angular/core';
declare const Chartist:any;
@Component({
  selector: 'completed-tasks',
  template: `
       <mat-card>
        <mat-card-title>
          Email Subscriptions
        </mat-card-title>
        <mat-card-content>
            <div class="ct-chart" id="dailySalesChart"></div>
        </mat-card-content>

      </mat-card>
  `,
})
export default class EmailSubscriptionsComponent implements  AfterViewInit {
  @Input() data :any;   

  ngAfterViewInit(){           
        const optionsDailySalesChart = {
            lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
            }),
            low: 0,
            high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
            chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
        }        
        
        var dailySalesChart = new Chartist.Line('#dailySalesChart', this.data, optionsDailySalesChart);        
  }
}

and
Email Subscriptions Chart

import {Component, Input, AfterViewInit} from '@angular/core';
declare const Chartist:any;
@Component({
  selector: 'completed-tasks',
  template: `
       <mat-card>
        <mat-card-title>
          Email Subscriptions
        </mat-card-title>
        <mat-card-content>
            <div class="ct-chart" id="emailsSubscriptionChart"></div>
        </mat-card-content>

      </mat-card>
  `,
})
export default class EmailSubscriptionsComponent implements  AfterViewInit {
  @Input() data :any;
   
  ngAfterViewInit(){
        const  optionsEmailsSubscriptionChart = {
            axisX: {
                showGrid: false
            },
            low: 0,
            high: 1000,
            chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
        }
        
        
        var emailsSubscriptionChart = new Chartist.Bar('#emailsSubscriptionChart', this.data, optionsEmailsSubscriptionChart);    
  }
}

All the components getting their data through data input
Please see my first stackblitz embedd here:

Building A Dashboard With Angular - Part1

Why Dashboard?

Dashboards are very common thing in the world of wed apps, also it involves creation of dynamic components - thing i want to investigate.
Here i have gathered some useful links about Dynamic Components In Angular, so you can learn a lot of stuff about Dynamic Components:

• dynamic components guide(angular)
• dynamically creating components(Netanel Basal blog)
• dynamically creating components with angular 2(rangle.io)

Also this time i want to use stack blitz grate editor for demonstrating running code of samples, and for teaching myself how to use this great tool

Scenario

Lets say we wanna build some application which has user customized dashboard. Dashboard should display 3 kind of widgets as default, but use can decide which widgets will be displayed.

How To Create Dynamic Component

For creating dynamic component with current angular (version 5.2.0-beta.1 ) all you need to know about is ComponentFactoryResolver - angular factory that allows you to add components dynamically
Once you get ComponentFactoryResolver injected into constructor of dymanic component

constructor(private resolver: ComponentFactoryResolver) {}

You can add any component which registered inside entryComponents property Please see my first stackblitz embedd here: