0

Let's supose, i have following components:

@Component({
    selector: '.abc',
    template: '{{ message }}'
})
export class AbcComponent {
    @Input() message: string;
}

@Component({
    selector: '.efg',
    template: '{{ message }}'
})
export class EfgComponent {
    @Input() message: string;
}

@Component({
    selector: 'my-wrapper',
    templateUrl: './my-wrapper.component.html'
})
export class MyWrapperComponent implements OnInit {
    data: { selector: string, message: string }[];

    ngOnInit() {
        data = [
            {selector: 'abc', message: 'Hello '},
            {selector: 'efg', message: 'world'}
        ];
    }
}

and my-wrapper.component.html

<div class="abc" [message]="Hello "></div>
<div class="efg" [message]="World"></div>

Because AbcComponent and DefComponent selectors are prefixed with dot, i can select component using class parameter.

And here comes the question. Can i set that class dynamically? I will now use a data field of MyWrapperComponent and change my-wrapper.component.html to:

<div *ngFor="let element of data">
    <div [class]="element.selector" [message]="element.message"></div>
</div>

Unfortunatelly, that won't work and error message is message is not known property of div. But even if i remove that property binding, it renders div with attached class, instead of component.

I tried also with class="{{element.selector}}" and [ngClass]="element.selector" but in both cases, it's not working.

Workaround for this could be ngSwitch. 

<div *ngFor="let element of data" [ngSwitch]="element.selector">
    <div class="abc" *ngSwitchCase="'abc'" [message]="element.message"></div>
    <div class="def" *ngSwitchCase="'def'" [message]="element.message"></div>
</div>

But i don't like that solution because there's a code duplication and i want it more dynamically.

Described components are dummy, my use case is to create a generic navigation component, that recives list of element's representing existing components of type

{selector: string, data: any}

and based on that, it displays components dynamically e.g.RouterLinkNavigationItemComponent, ExternalLinkNavigationItemComponent, AnchorNavigationElement and so on.

nowszy94
  • 3,151
  • 4
  • 18
  • 33
  • If there's a solution, it's is simmilar to router-outlet implementation. It also has a predefined list of components that gets rendered on some condition. – nowszy94 Feb 03 '18 at 00:01
  • Possible duplicate of [How can I use/create dynamic template to compile dynamic Component with Angular 2.0?](https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular) – Aluan Haddad Feb 03 '18 at 00:01
  • Could you provide a little more background about the actual use case? Could you provide some sample data that shows the map? For example, do the individual selectors map to a component? – cgatian Feb 03 '18 at 00:18
  • @cgatian I have a sub-navigation component. It will be used in many subpages to navigate on them. It will have links to sections e.g. entities page will have a pages like address, student, trainer, course, admin-panel will have links like user-management, course-management. These are all router link elements, but i can have also external link navigation item e.g. admin-panel -> h2-console. In future, i would also like to have sub navigation, that points to some anchor items in text. – nowszy94 Feb 03 '18 at 11:46
  • @cgatian From navigation component perspective it's just a list of navigation items, but those items are separate components. That's why i would like to have it more generic, to just provide generic list of NavigationItemComponent, that will be displayed under that navigation. – nowszy94 Feb 03 '18 at 11:47

0 Answers0