Open ng2-modal window from parent Component and change styles

app.component.ts (Parent)


import {Component, Input, ViewChild} from '@angular/core';
import { Router } from '@angular/router';
import { ModalComponent } from './modal.component';


@Component({
selector: 'my-app',
template:
`
<button (click)="open()">Open Modal</button>
<modal  [header]=header></modal>
`,
directives: [ModalComponent]
})

export class AppComponent {

@ViewChild(ModalComponent)
        private modalComponent: ModalComponent; 

header: string = 'Hi, I'm Header...';

open(){
this.modalComponent.open();
}

cancel(){

}

save(){


}
}


and modal implementation:
modal.component.ts

import {Component, Input, ViewChild, Inject, ElementRef} from '@angular/core';
import { Router } from '@angular/router';
import {MODAL_DIRECTIVES, Modal} from 'ng2-modal';

@Component({
    selector: 'modal',
    template:
    `            
        <modal #myModal [style.position] = 'fixed' [style.top.px] = '200'>
     
            <modal-header>
                <div class="text-center">
                    <h3>{{headerName}}</h3>
                </div>
            </modal-header>          
            <modal-content>                  
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque                         laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
            </modal-content>          
            <modal-footer>
                <button class="btn btn-primary" (click)="save()">Yes, I'll Do This Later</button>
                <button class="btn btn-link" (click)="myModal.close()">Cancel</button>
            </modal-footer>
       
        </modal>
`,
    directives: [MODAL_DIRECTIVES],
    //styles: [':host >>> .modal-content  {position: fixed; top: '+ 300 +'px;}'],
})

export class ModalComponent {
    @ViewChild(Modal)
    private modalComponent: Modal;
    private _color: string = 'red';
    private _elementRef: ElementRef;
    private windowsHeigh: number;
    private windowsWidth: number;

    @Input('header') headerName: string;

    constructor( @Inject(ElementRef) elementRef: ElementRef) {
        this._elementRef = elementRef;
    }

    ngAfterViewChecked() {
        var windowsHeigh: number = window.innerHeight;
        var windowsWidth: number = window.innerWidth;
        var el: HTMLElement = this._elementRef.nativeElement;
        var content: any = el.getElementsByClassName("modal-content");
        if (content[0] !== undefined) {
            var elementStyle: any = content[0].style;
            var contentHeight: number = elementStyle.height;
            var contentWidth: number = elementStyle.widht;
            elementStyle.postion = "fixed";
            elementStyle.top = (windowsHeigh - contentHeight) / 2 + "px";
            elementStyle.left = (windowsWidth - contentWidth) / 2 + "px";
        }
    }

    open() {
        this.modalComponent.open();
    }

    save(){
          this.modalComponent.close();
    }

}

One thing I suggest to implement we dont have in this example - implement Emitters to send callbacks back to Parent component and implement custom functionality for Close and Save buttons.

Getting Starting - Visual Studio Code and AngularJS 2

Before we have Node.js installed lets host our AngualrJS 2 Application on IIS

All we have to do, Create new Web Site under IIS and then we have to add web.config to our application:

<configuration>
    <system.webServer>
    <staticContent>
      <remove fileExtension=".ts" />
      <mimeMap fileExtension=".ts" mimeType="text/x-typescript" />
    </staticContent>
    <!-- Some other content -->
</system.webServer>
</configuration>

Otherwise by default IIS will block *.ts (typescript) files.

Create simple AngularJS 2 application following any guide, for instance this one:

https://angular.io/docs/ts/latest/quickstart.html#!#devenv

Then copy your html and ts files under new Web Site and refresh IIS and.

Go to url, for instance: http://localhost/AngularJS_2_Tryout/index.html

And you can host your AngularJS 2 application on IIS.