Our Angular8 app with components plugged in

src/app/app.component.html

@@ -1,3 +1,7 @@
+<my-buttons></my-buttons>
+<my-carousels></my-carousels>
+<my-datepickers></my-datepickers>
+<my-dropdowns></my-dropdowns>
 <hello name="{{ name }}"></hello>
 <p>
   Start editing to see some magic happen :)

src/app/app.module.ts

@@ -5,9 +5,16 @@ import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { HelloComponent } from './hello.component';
 
+import { ButtonsComponent } from './buttons/buttons.component';
+import { CarouselsComponent } from './carousels/carousels.component';
+import { DatepickersComponent } from './datepickers/datepickers.component';
+import { DropdownsComponent } from './dropdowns/dropdowns.component';
+
 @NgModule({
   imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent, HelloComponent ],
+  declarations: [ 
+    AppComponent, HelloComponent, 
+    ButtonsComponent, CarouselsComponent, DatepickersComponent, DropdownsComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

src/app/buttons/buttons.component.html

@@ -0,0 +1 @@
+<div>buttons works!</div>

src/app/buttons/buttons.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-buttons',
+  templateUrl: './buttons.component.html',
+})
+export class ButtonsComponent { }

src/app/carousels/carousels.component.html

@@ -0,0 +1 @@
+<div>carousels works!</div>

src/app/carousels/carousels.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-carousels',
+  templateUrl: './carousels.component.html'
+})
+export class CarouselsComponent { }

src/app/datepickers/datepickers.component.html

@@ -0,0 +1 @@
+<div>datepickers works!</div>

src/app/datepickers/datepickers.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-datepickers',
+  templateUrl: './datepickers.component.html'
+})
+export class DatepickersComponent {}

src/app/dropdowns/dropdowns.component.html

@@ -0,0 +1 @@
+<div>dropdowns works!</div>

src/app/dropdowns/dropdowns.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-dropdowns',
+  templateUrl: './dropdowns.component.html'
+})
+export class DropdownsComponent {}