Dependency inversion principle

src/app/app.component.ts

@@ -2,7 +2,34 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  template: ``,
-  styles: [],
+  template: `
+    <mat-toolbar color="primary">
+      <span>My App</span>
+    </mat-toolbar>
+    <main class="content">
+      <app-widget title="Wether">
+        <app-wether-content></app-wether-content>
+      </app-widget>
+      <app-widget title="Velocity">
+        <app-velocity-content></app-velocity-content>
+      </app-widget>
+      <app-widget title="Anything">
+        <p>Any content</p>
+      </app-widget>
+    </main>
+  `,
+  styles: [
+    `
+      .content {
+        background-color: #fff;
+        padding: 2rem;
+        height: calc(100vh - 64px);
+        display: flex;
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+      }
+    `,
+  ],
 })
 export class AppComponent {}

src/app/app.module.ts

@@ -3,10 +3,29 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { WidgetComponent } from './widget/widget.component';
+import { WetherContentComponent } from './widget/wether-content.component';
+import { VelocityContentComponent } from './widget/velocity-content.component';
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, BrowserAnimationsModule],
+  declarations: [
+    AppComponent,
+    WidgetComponent,
+    WetherContentComponent,
+    VelocityContentComponent,
+  ],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatIconModule,
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/widget/velocity-content.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { WidgetContent } from './widget-content';
+
+@Component({
+  selector: 'app-velocity-content',
+  template: `
+    <h5>Last sprint</h5>
+    <section class="widget-content">
+      <mat-icon class="widget-icon">assessment</mat-icon>
+      <div class="value">Planned: <strong>25</strong></div>
+      <div class="value">Achieved: <strong>20</strong></div>
+    </section>
+  `,
+  styleUrls: ['./widget-content.scss'],
+})
+export class VelocityContentComponent implements WidgetContent {
+  id = 'random-string';
+}

src/app/widget/wether-content.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { WidgetContent, Reloadable } from './widget-content';
+import { RELOADABLE_CONTENT } from './widget-content.token';
+
+@Component({
+  selector: 'app-wether-content',
+  template: `
+    <h5>Currently</h5>
+    <section class="widget-content">
+      <mat-icon class="widget-icon">wb_sunny</mat-icon>
+      <div class="value">+25</div>
+    </section>
+  `,
+  styleUrls: ['./widget-content.scss'],
+  providers: [
+    { provide: RELOADABLE_CONTENT, useExisting: WetherContentComponent },
+  ],
+})
+export class WetherContentComponent implements WidgetContent, Reloadable {
+  id = 'random-string';
+  isLoading = false;
+  reload() {
+    console.log('...reloading is happening...');
+  }
+}

src/app/widget/widget-base.ts

@@ -0,0 +1,10 @@
+import { Directive, Input } from '@angular/core';
+
+@Directive()
+export class WidgetBase {
+  @Input()
+  title: string = '';
+  onExportJson() {
+    console.log('Export Json logic..');
+  }
+}

src/app/widget/widget-content.scss

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+  text-align: center;
+  position: relative;
+  min-width: 190px;
+}
+
+.widget-icon {
+  font-size: 64px;
+  width: 64px;
+  height: 64px;
+  color: orange;
+}
+.value {
+  font-size: 24px;
+  opacity: 0.7;
+}

src/app/widget/widget-content.token.ts

@@ -0,0 +1,5 @@
+import { Reloadable } from './widget-content';
+import { InjectionToken } from '@angular/core';
+export const RELOADABLE_CONTENT = new InjectionToken<Reloadable>(
+  'reloadable-content'
+);

src/app/widget/widget-content.ts

@@ -0,0 +1,8 @@
+export interface WidgetContent {
+  id: string;
+}
+
+export interface Reloadable {
+  reload: () => any;
+  isLoading: boolean;
+}

src/app/widget/widget.component.ts

@@ -0,0 +1,47 @@
+import { WetherContentComponent } from './wether-content.component';
+import { WidgetBase } from './widget-base';
+import { Component, ContentChild } from '@angular/core';
+import { RELOADABLE_CONTENT } from './widget-content.token';
+import { Reloadable } from './widget-content';
+
+@Component({
+  selector: 'app-widget',
+  template: `
+    <div class="header">
+      <h1>{{ title }}</h1>
+      <button mat-stroked-button (click)="onExportJson()">
+        Export as JSON
+      </button>
+    </div>
+    <mat-divider></mat-divider>
+    <ng-content></ng-content>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        border: #f0ebeb solid 1px;
+        border-radius: 5px;
+        padding: 15px;
+        background-color: #fafafa;
+        width: 400px;
+        margin-left: 20px;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    `,
+  ],
+})
+export class WidgetComponent extends WidgetBase {
+  @ContentChild(RELOADABLE_CONTENT)
+  content?: Reloadable;
+
+  ngAfterContentInit(): void {
+    if (this.content) {
+      this.content.reload();
+    }
+  }
+}