Use multiple wj-popup concurrently

Originally Posted 30 August 2017, 10:10 am EST

  • Originally Posted 30 August 2017, 10:10 am EST

    I tried to build a custom Angular 4 component that contains the like so:

    TS
    @Component({
    selector: 'user',
    templateUrl: 'user.component.html'
    })
    export class UserComponent {
    @Input()
    public user = {
    name: 'John Smith',
    email: 'John.Smith@example.com',
    phone: '+1 555 123 456'
    };
    }




    HTML
    {{ user.name }}

    {{ user.email }}
    {{ user.phone }}




    We intend to use this component like so:
    Created by:

    Modified by:






    The problem ist, this won't work if more than one wj-popup exists in the DOM, because of the owner CSS-Selector isn't unique.

    Stuff that I tried:

    1. Tried to adapt solution from here: https://stackoverflow.com/a/37236668

    Code looks like this:

    TS
    @Component({
    selector: 'user',
    templateUrl: 'user.component.html'
    })
    export class UserComponent {

    private static counter = 0;
    public id = ++UserComponent.counter;

    @Input()
    public user = {
    name: 'John Smith',
    email: 'John.Smith@example.com',
    phone: '+1 555 123 456'
    };
    }




    HTML
    {{ user.name }}

    {{ user.email }}
    {{ user.phone }}



    However, this doesn't work. Can't figure out why not..

    2. Tried the opposite way around, by assigning the popup to an Angular Variable and call popup.show() on it. This does not satisfy the requirements because lack of owner shows the popup centered on the screen not aligned to the element clicked.

    How can I solve the above situation?
  • Reply

    Can't edit original post anymore..

    The last HTML should read:
    {{ user.name }}

    {{ user.email }}
    {{ user.phone }}


  • Reply

    It's too hot in here... of course it should read:

    {{ user.name }}

    {{ user.email }}
    {{ user.phone }}



  • Reply

    Hi,

    We are investigating on this. Would reply tomorrow.

    ~nilay
  • Reply

    Hi,

    You need to use template reference variables instead of id for the owner. However, template reference are static values and cannot be named based on properties. Using static reference should not bother your use case. Refer the following code:

    app.component.html













    app.component.ts
    import { Component, Inject, ViewChild, Input } from '@angular/core';
    import { DataSvc } from '../services/DataSvc';
    import * as wjCore from 'wijmo/wijmo';
    import * as wjInput from 'wijmo/wijmo.input'

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    title = 'app';
    @Input()
    public userCreatedBy1 = {
    id: '1',
    name: 'John Smith',
    email: 'John.Smith@example.com',
    phone: '+1 555 123 456'
    };
    public userCreatedBy2 = {
    id: '2',
    name: 'John Kline',
    email: 'John.Kline@example.com',
    phone: '+1 555 123 456'
    };
    public userCreatedBy3 = {
    id: '3',
    name: 'Jedda Smith',
    email: 'Jedda.Smith@example.com',
    phone: '+1 555 123 456'
    };
    public userCreatedBy4 = {
    id: '4',
    name: 'James Smith',
    email: 'James.Smith@example.com',
    phone: '+1 555 123 456'
    };
    public userCreatedBy5 = {
    id: '5',
    name: 'John Davis',
    email: 'John.Davis@example.com',
    phone: '+1 555 123 456'
    }
    }






    user.component.html

    {{user.name}}

    {{ user.email }}
    {{user.phone}}







    user.component.ts
    import { Component, Inject, ViewChild, Input } from '@angular/core';
    import { DataSvc } from '../services/DataSvc';
    import * as wjCore from 'wijmo/wijmo';
    import * as wjInput from 'wijmo/wijmo.input'

    @Component({
    selector: 'user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css']
    })
    export class UserComponent {
    title = 'user';
    @Input()
    public user = {}
    }






    app.module.ts
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { UserComponent } from './user.component';
    import { WjInputModule } from 'wijmo/wijmo.angular2.input';

    import {DataSvc} from '../services/DataSvc';

    @NgModule({
    declarations: [
    AppComponent,
    UserComponent
    ],
    imports: [
    BrowserModule,
    WjInputModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }






    index.html




    WijmoPopup














    Hope this helps.

    ~nilay
  • Marked as Answer

    Reply

    Thanks, I can confirm it's working this way.

    Using the angular reference variable is much better than css selector. I strongly suggest you should update your demos and docs over at:

    http://demos.wijmo.com/5/Angular/Popups/Popups/
    http://wijmo.com/5/docs/topic/wijmo.input.Popup.Class.html
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels