Create a title @input

Author: BaggersIO

src/app/app.component.html

@@ -5,3 +5,6 @@ <h1>
 <info-box></info-box>
 
 <mouse-cursor></mouse-cursor>
+
+<title-box [title]="title"></title-box>
+<title-box title="foo"></title-box>

src/app/app.module.ts

@@ -6,12 +6,14 @@ import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { InfoBoxComponent } from './info-box/info-box.component';
 import { MouseCursorComponent } from './mouse-cursor/mouse-cursor.component';
+import { TitleBoxComponent } from './title-box/title-box.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     InfoBoxComponent,
-    MouseCursorComponent
+    MouseCursorComponent,
+    TitleBoxComponent
   ],
   imports: [
     BrowserModule,

src/app/title-box/title-box.component.css

@@ -0,0 +1 @@
+<h3>{{title}}</h3>

src/app/title-box/title-box.component.html

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'title-box',
+  templateUrl: './title-box.component.html',
+  styleUrls: ['./title-box.component.css']
+})
+export class TitleBoxComponent implements OnInit {
+
+  @Input()
+  title: string = '';
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}