While using it in my angular app I realized that I was having to a lot of PolymerEleme

angular: 2.1.2 angular-cli: 1.0.0-beta.21 <div class="snippet-clipboard-conten

Accept multiple component names in PolymerElement() construct ? about angular-polymer HOT 3 CLOSED

praveenpuglia commented on September 27, 2024

Accept multiple component names in PolymerElement() construct ?

from angular-polymer.

Comments (3)

niveo commented on September 27, 2024 1

angular: 2.1.2
angular-cli: 1.0.0-beta.21

import { PolymerElement } from '@vaadin/angular2-polymer';
export class Polymer {
    static forRoot() {
        return [
            PolymerElement('paper-button'),
            PolymerElement('paper-checkbox'),
            PolymerElement('paper-input')
        ]
    }
}

@NgModule({
  imports:      [],
  declarations: [Polymer.forRoot()],
  exports:      [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ComponentModule1 { }

@NgModule({
  imports:      [],
  declarations: [Polymer.forRoot()],
  exports:      [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ComponentModule2 { }

from angular-polymer.

platosha commented on September 27, 2024

Hi, thanks for asking. Currently there is no way of passing arrays.

As I think, we have to replace the PolymerElement function with something else anyway. Maybe we can solve this repetitive declaration issue at the same time with #86.

from angular-polymer.

praveenpuglia commented on September 27, 2024

I like the solution but it forces me to load all three polymer elements in both the modules which generally isn't the case. In some modules i may require all three of them and in some just one of them.

This however gave me an idea to make this parameterized the following way.

import { PolymerElement } from '@vaadin/angular2-polymer';
export class Polymer {
    static load(elements) {
        return elements.map( v => PolymerElement(v) )
    }
}

and then...

@NgModule({
  imports:      [],
  declarations: [Polymer.load(['paper-card','paper-checkbox'])],
  exports:      [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ComponentModule1 { }

@NgModule({
  imports:      [],
  declarations: [Polymer.load('paper-dropdown-menu')],
  exports:      [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ComponentModule2 { }

I have not tested it yet. Awaiting comments.

from angular-polymer.

Recommend Projects