Add files via upload

Author: piyalidas10

src/app/app.component.css

@@ -0,0 +1,3 @@
+html,body{
+    background: #CCCCCC;
+}

src/app/app.component.html

@@ -0,0 +1,33 @@
+<!--The content below is only a placeholder and can be replaced.-->
+<div class="container">
+  <h1 align="center">
+    Welcome to {{ title }}!
+  </h1>
+
+  
+  <div class="col-md-2">
+    <button type="button" 
+      class="btn btn-success  btn-block"
+      modal-box 
+      [title]='"Demo Modal 1"'
+      [componentData]="data1"
+      [componentName]="'Demo1Component'">
+      Demo Modal 1
+    </button>
+  </div>  
+
+  <div class="col-md-2">
+    <button type="button" 
+      class="btn btn-danger  btn-block"
+      modal-box 
+      [title]='"Demo Modal 2"'
+      [componentData]="data2"
+      [componentName]="'Demo2Component'">
+      Demo Modal 2
+    </button>
+  </div>  
+
+
+</div>
+
+

src/app/app.component.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to myapp!');
+  }));
+});

src/app/app.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Demo1Component } from './demo1/demo1.component';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  data1 : string;
+  data2 : string;
+
+
+  ngOnInit() {
+    this.data1="The content is displayed from Demo1 component";
+    this.data2="The content is displayed from Demo2 component";
+  }
+
+}

src/app/app.module.ts

@@ -0,0 +1,36 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppComponent } from './app.component';
+import { Demo1Component } from './demo1/demo1.component';
+import { Demo2Component } from './demo2/demo2.component';
+import { ModalDialogComponent } from './modal-dialog/modal-dialog.component';
+import { ModalDirective } from './modal.directive';
+import { DatacontainerDirective } from './modal-dialog/datacontainer.directive';
+import { ComponentLoaderService } from './component-loader.service';
+
+//import { ModalDialogDirective } from './modal-dialog/modal-dialog.directive';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    Demo1Component,
+    Demo2Component,
+    ModalDialogComponent,
+    ModalDirective,
+    DatacontainerDirective
+  ],  
+  providers: [ComponentLoaderService],
+  imports: [
+    BrowserModule,
+    HttpClientModule
+  ],
+  entryComponents: [
+    Demo1Component,
+    Demo2Component,
+    ModalDialogComponent
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/component-loader.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Demo1Component } from './demo1/demo1.component';
+import { Demo2Component } from './demo2/demo2.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ComponentLoaderService {
+
+  constructor() { }
+
+  getComponent(componentName: string) {
+    if (componentName == "Demo2Component") {
+      return Demo2Component;
+    }
+    else if (componentName == "Demo1Component") {
+      return Demo1Component;
+    }
+    else{
+      return "";
+    }
+  }
+}