modal component

matsen-tool/src/app/_components/modal/modal.component.html

@@ -0,0 +1,10 @@
+<div class="modal-header">
+    <h4 class="modal-title">Hi there!</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
+</div>
+<div class="modal-body">
+    <ng-container *ngComponentOutlet="dynamicComponent"></ng-container>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
+</div>

matsen-tool/src/app/_components/modal/modal.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+  let component: ModalComponent;
+  let fixture: ComponentFixture<ModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ModalComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

matsen-tool/src/app/_components/modal/modal.component.ts

@@ -0,0 +1,14 @@
+import {Component, Input} from '@angular/core';
+import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrl: './modal.component.scss'
+})
+export class ModalComponent {
+  @Input() dynamicComponent: any;
+
+  constructor(public activeModal: NgbActiveModal) { }
+
+}

matsen-tool/src/app/app.module.ts

@@ -22,6 +22,8 @@ import {PartnersDetailComponent} from './partners/partners-detail/partners-detai
 import { ProductsComponent } from './products/products.component';
 import { ProductsDetailComponent } from './products/products-detail/products-detail.component';
 import { DocumentsComponent } from './documents/documents.component';
+import { NewContactComponent } from './partners/new-contact/new-contact.component';
+import { ModalComponent } from './_components/modal/modal.component';
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -65,7 +67,9 @@ export function HttpLoaderFactory(http: HttpClient) {
         PartnersDetailComponent,
         ProductsComponent,
         ProductsDetailComponent,
-        DocumentsComponent
+        DocumentsComponent,
+        NewContactComponent,
+        ModalComponent
     ],
     providers: [
         {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},

matsen-tool/src/app/partners/new-contact/new-contact.component.html

@@ -0,0 +1,5 @@
+<h2>Neuer Kontakt</h2>
+<div>
+    Hier kommt ein Formular hin!
+</div>
+<button>Abschicken</button>

matsen-tool/src/app/partners/new-contact/new-contact.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewContactComponent } from './new-contact.component';
+
+describe('NewContactComponent', () => {
+  let component: NewContactComponent;
+  let fixture: ComponentFixture<NewContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NewContactComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NewContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

matsen-tool/src/app/partners/new-contact/new-contact.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'app-new-contact',
+    templateUrl: './new-contact.component.html',
+    styleUrl: './new-contact.component.scss'
+})
+export class NewContactComponent {
+
+}

matsen-tool/src/app/partners/partners-detail/partners-detail.component.html

@@ -31,7 +31,7 @@
 <div class="contacts">
     <div class="d-flex justify-content-between align-items-start">
         <h2>Kontakte</h2>
-        <button>Neuer Kontakt</button>
+        <button (click)="openModalNewContact()">Neuer Kontakt</button>
     </div>
     <div class="row">
         <div class="col-4">

matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts

@@ -1,10 +1,23 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {ModalComponent} from "@app/_components/modal/modal.component";
+import {NewContactComponent} from "@app/partners/new-contact/new-contact.component";
 
 @Component({
-  selector: 'app-partners-detail',
-  templateUrl: './partners-detail.component.html',
-  styleUrl: './partners-detail.component.scss'
+    selector: 'app-partners-detail',
+    templateUrl: './partners-detail.component.html',
+    styleUrl: './partners-detail.component.scss'
 })
 export class PartnersDetailComponent {
+    private closeResult = '';
 
+    protected readonly ModalComponent = ModalComponent;
+    constructor(private modalService: NgbModal) {
+    }
+    openModalNewContact() {
+        const modalRef = this.modalService.open(ModalComponent);
+        modalRef.componentInstance.dynamicComponent = NewContactComponent;
+    }
+
+    ngOnInit() {}
 }