DialogAPI with Angular 2 : Diasplay my angular 2 component inside dialog using displayDialogAsync. RRS feed

  • Question

  • Hi,

    I am new to Angular 2 and office js. I read about displayDialogAsync and created one sample.

    My working sample display html page right now but i want to display angular 2 component inside office js dialog and then try to redirect it to different domains.

    HTML Page : Waiting.html  ( Just for wait 2 seconds )

    app.Component.html  :::


        <br /> Testing...
        <div class="ms-Grid">
            <div class="ms-Grid-row">
                <div class="ms-Grid-col">
                    <input type="button" value="OpenDialog" (click)="openDialog()" />

    Component : AppComponent

    import { Component, OnInit, Input } from '@angular/core';
    import { WordService } from './office/word.service';
    import { Router, ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, RouterStateSnapshot, Event, UrlSerializer } from '@angular/router';
    import { Location } from '@angular/common'

        moduleId: module.id,
        selector: 'addin',
        templateUrl: 'app.component.html',
        providers: [WordService]

    export class AppComponent implements OnInit {
        title: string = 'Angular 2 Excel Add-in';
        private newURL: string;
        constructor(private wordService: WordService, private _router: Router, private _activatedroute: ActivatedRoute,
            private urlSerializer: UrlSerializer,
            private location: Location) {}
        ngOnInit() { }

        openDialog() {
            this.newURL = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '') + "/Waiting.html";
            Office.context.ui.displayDialogAsync(this.newURL, { height: 50, width: 50 });
            //Office.context.ui.displayDialogAsync(this._router.navigate(['login/test']), { height: 20, width: 20 });        

    Expected Result :

    Display any component inside dialog and then redirect to customdomin and get response from customdomain and pass it to our office add-ins.

    Please help me.

    Thanks in advance.

    Thanks, Hardik Shah

    Thursday, February 2, 2017 12:05 PM

All replies

  • Hi Hardik,

    If you show up angular 2 component in Task Pane instead of displayDialogAsync, will it show up correctly? If it does, will you get any wrong result when you show it by displayDialogAsync, or where it did not work for you?

    Based on Tips for creating Office Add-ins with Angular 2, your add-in can have a separate HTML page (different from the base page) to pass to this parameter, or you can pass the URL of a route in your Angular application.

    It is important to remember, if you pass a route, that the dialog box creates a new window with its own execution context. Your base page and all its initialization and bootstrapping code run again in this new context, and any variables are set to their initial values in the dialog box. So this technique launches a second instance of your single page application in the dialog box. Code that changes variables in the dialog box does not change the task pane version of the same variables. Similarly, the dialog box has its own session storage, which is not accessible from code in the task pane.

    Best Regards,


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, February 3, 2017 5:40 AM