How to display content in pop up in Angular 2

First we need to configure of in visual studio. So already I explained how to install typescript and configuration of reference file of angular js in V.S
For this, you can go this link

So now first right click of app folder and add a Typescript file and give the name app.component.parent.ts and write below code.

import { Component, OnInit, ViewChild } from '@angular/core';

import { ModalComponent } from './app.component.modal';

@Component({

    moduleId: module.id,

    selector: 'parent-content',

    templateUrl: 'app.component.parent.html'

})

export class ParentComponent implements OnInit {

    private caption: string = 'File Details';

    @ViewChild('modal') private modalComponent: ModalComponent;

    constructor() {

    }

    ngOnInit(): void {

    }

    private openModal(): void {

        this.modalComponent.showModal();

    }

    private hideModal(): void {

        this.modalComponent.btnClose();

    } 

}  

Again right click of app folder and add a Typescript file and give the name app.component.modal.ts and write below code.

import { Component, OnInit, ViewChild } from '@angular/core';

import { ModalComponent } from './app.component.modal';

@Component({

    moduleId: module.id,

    selector: 'parent-content',

    templateUrl: 'app.component.parent.html'

})

export class ParentComponent implements OnInit {

    private caption: string = 'File Details';

    @ViewChild('modal') private modalComponent: ModalComponent;

    constructor() {

    }

    ngOnInit(): void {

    }

    private openModal(): void {

        this.modalComponent.showModal();

    }

    private hideModal(): void {

        this.modalComponent.btnClose();

    }

} 

Again right click of app folder and add an HTML file and give the name app.component.parent.html and write below code.

<div aligin="center">

    <h2>Display the File</h2>

    <input type="button" value="Show File" class="btn btn-primary" (click)="openModal()" />

    <br />

    <modal-window [header-caption]="caption" #modal>

        <content-body>

            AngularJS is an open source Model-View-Controller framework which is similar to the JavaScript framework.

            Angular JS is probably one of the most popular modern day web frameworks available today. This framework is used for developing mostly Single Page applications. This framework has been developed by a group of developers from Google itself.

            Because of the sheer support of Google and ideas from a wide community forum, the framework is always kept up to date. Also, it always incorporates the latest development trends in the market.

        </content-body>

        <content-footer>

            <input type="button" class="btn-default active  btn-danger" value="Close" (click)="hideModal();" />

        </content-footer>

    </modal-window>

</div>  

Again right click of app folder and add an HTML file and give the name app.component.modal.html and write below code.

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" [ngStyle]="{'display' : display }">

    <div class="modal-dialog">

        <div class="modal-content animated bounceInRight">

            <div class="modal-header">

                <button type="button" class="close" (click)="btnClose()">×</button>

                <h3 class="modal-title">{{header}}</h3>

            </div>

            <div class="modal-body">

                <ng-content select="content-body"></ng-content>

            </div>

            <div class="modal-footer">

                <ng-content select="content-footer"></ng-content>

            </div>

        </div>

    </div>

</div>  

Again right click of app folder and add a Typescript file and give the name app.module.ts and write below code.

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from "@angular/forms";

import { ParentComponent } from './app.component.parent';

import { ModalComponent } from './app.component.modal';

@NgModule({

    imports: [BrowserModule, FormsModule],

    declarations: [ParentComponent, ModalComponent],

    bootstrap: [ParentComponent],

    schemas: [NO_ERRORS_SCHEMA]

})

export class AppModule { }   

Now modify the directive in index.html page

<body>

    <parent-content>Please wait Angular application is loading ...</parent-content>

</body>

See the output

After click Show File button