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.