Angular - Injecting component instance into the view of another component

Question

I'm creating tabs control using Angular. The result should look like this:

<tabs>
   <tab header="tab 1">
     hello
   </tab>
   <tab header="tab 2">
     world
   </tab>
</tabs>

Now, the tab component looks like this:

@Component({
    selector: 'tab',
    template: `<ng-content></ng-content>`
})
export class TabComponent {
    @Input() header: string;
}

And the tabs component looks like this:

@Component({
    selector: 'tabs',
    template: `
       <div class="tabs">
            <ul>
                <li *ngFor="let tab of tabs">
                    <a (click)="selectTab(tab)">
                        {{tab.header}}
                    </a>
                </li>
            </ul>
        </div>
    `,
})
export class TabsComponent {
    @ContentChildren(TabComponent) tabs;

    selectTab(tab: TabComponent) {

    }
 }

Now, when the selectTab() method is called, I want the content of the pressed tab ("hello" or "world") to be rendered at the bottom of the template.

Basically there needs to be some kind of a tab placeholder in the TabsComponent , and it needs to be bonded to the currently selected TabComponent .

Anyway, I can't get it to work. I've tried using ng-template and createEmbeddedView , but I don't understand how to get the TemplateRef from the component, and I'm not completely sure that's the right way to go.

Thanks ahead!

Answer 1

Alright, so I solved it, but I'm not sure this is the right solution. I repeat my needs: I want to make a fully-functioning tab-set component, that consists of tab headers and the currently selected tab.

Example: https://s3.envato.com/files/169665336/Thetabs%20-%20Responsive%20HTML5%20&%20CSS3%20Tabs%202016-01-29%2005-57-05.png

So here's my solution. Please feel free to suggest a better one, as I'm not completely sure this is the example of a tab-set component:

@Directive({
    selector: 'tab',
})
export class TabDirective {
    private static seed = 0;

    readonly id: number;

    @Input() header: string;

    @HostBinding('hidden') isHidden: boolean;

    private isActive: boolean;
    @HostBinding('class.active') set active(value: boolean) {
        this.isActive = value;
        this.isHidden = !this.isActive;
    }

    get active(): boolean {
        return this.isActive;
    }

    constructor() {
        this.id = TabDirective.seed++;
        this.active = false;
    }
}

@Component({
    selector: 'bu-tabs',
    template: `
       <div class="tabs">
            <ul>
                <li *ngFor="let tab of tabs" [class.is-active]="tab.active">
                    <a (click)="selectTab(tab)">
                        <span>{{tab.header}}</span>
                    </a>
                </li>
            </ul>
        </div>

        <ng-content></ng-content>
    `,
})
export class TabsComponent implements AfterViewInit {
    @ContentChildren(TabDirective) tabs: QueryList<TabDirective>;

    @Output() select = new EventEmitter<TabDirective>();

    private selectedTab: TabDirective;

    selectTab(tab: TabDirective) {
        this.tabs.forEach((t: TabDirective) => t.active = (t.id === tab.id));
        this.selectedTab = tab;
    }

    ngAfterViewInit(): void {
        if (this.tabs && this.tabs.length > 0) {
            this.tabs.first.active = true;
        }
    }
}

@Component({
    template: `
        <tabs>
            <bu-tab header="hello">
                Hello!!
            </bu-tab>
            <bu-tab header="world">
                World!!
            </bu-tab>
        </tabs>
  `,
})
export class App { }