My Own Responsive Admin Template - Part 1

Motivation

There are lot of various admin templates out there across the internet like here and there (some even free) and you can find every combination you need instead of creating admin dashboard by yourself.
Yet, since I consider myself an experienced front end programmer - I decided to create responsive admin template of my own, sticking to recent best practices of web development.
Lets see there this little journey will take me and what discoveries I will make

Skeleton

So here I'm starting by create the first skeleton of dashboard using the basic HTML5 tags: aside, nav, main, section

  <div class="wrapper">
      <aside><!--for side nav-->
      </aside>
      <header class="topbar"><!--for topbar-->
         <nav> </nav>
      </header>
      <main>
      </main>
  </div>

Basic css

First thing here - I will declare css variables for each section:

:root {
    --topbar-bg-color: #2A62FF;
    --main-bg-color: #EDF5F8; 
    --sidebar-bg-color: #FFF; 
    --card-bg-color: #FFF;
    --text-color: #2F2F2F;
}

body { 
    background: var(--main-bg-color);
    color: var(--text-color);
}

/*  topbar  */
.topbar {
    background: var(--topbar-bg-color);
}
/*  aside  */
aside {
  width: 240px;
  background: var(--sidebar-bg-color);
}
/*  main  */
main {
    background: var(--main-bg-color);
}
/*  card  */
.card {
    background: var(--card-bg-color);    
}

Basic Layout using CSS Grid

Css grid - is a grate CSS3 feature for build various layouts
It gives you the ability to associate html elements with various grid areas

.wrapper {
    display: grid;
    height: 100vh;
    grid-template-areas:
    "aside topbar"
    "aside main";
    grid-template-columns: 240px auto;
    grid-template-rows: 40px auto;
}
.topbar {
    grid-area: topbar;
}
aside {
    grid-area: aside;
}
main {
    grid-area: main;  
}

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: