Configurable components in Angular 4 (dynamic class loader)

Question

In our application we have a KeypadComponent which displays keyboard layout, based on given JSON, eg. {'Q', 'W', 'E', 'R'...} etc.

For now we have ~100 keyboard layouts defined, but there are possibly unlimited number of them (each language specific), so it would be hard to register them all as providers.

What architecture for this would you choose?

For now I'm thinking of something like this (storing one layout per file):

interface LayoutInterface {
    getLayout();
}

class LayoutEnglish implements LayoutInterface {
    getLayout() {
        return {'Q', 'W', 'E', 'R'...};
    }
}

class LayoutNumeric implements LayoutInterface {
    getLayout() {
        return {'1', '2', '3', ...};
    }
}

class LayoutComponent {
   @Input
   type: 'english';

   getLayout(type) { 
     // what about dynamic import here?
     return new {Layout+type};
   }
}


keypad.component.html

<app-keypad type="english"></app-keypad>

score 1 · Answer 1 · answered Jan 06 '18 at 10:25

I dont know how you load your component. I think dynamic route parameter is best for.

If you want to change your template for your different keypad layout
Then you can use nested router outelet for you every child component.

If you don't want to change your template
Then make a service which return specific data for your specific layout

Configurable components in Angular 4 (dynamic class loader)

1 Answers1