Angular content projection example. This is the component where we're going to project the content (service-bar-status.component.ts). We also can define dumb components to allow the content to be projectected.

file-from-project-custom-content.html

<service-bar-status [service]="service" [routes]="{returnBackURL: returnBackURL, cancelRouteURL: cancelRoute}">
    <cancel-label>
        <!-- Will be projecten at <ng-content select="cancel-label"></ng-content> -->
        <span jhiTranslate="services.cancel"></span>
    </cancel-label>
    <service-cancelled-label>
        <span class="mt-2 text-uppercase" jhiTranslate="services.serviceCanceled"></span>
    </service-cancelled-label>
    <return-label>
        <span jhiTranslate="service.return"></span>
    </return-label>
</service-bar-status>

service-bar-status-labels.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'cancel-label',
    template: '<ng-content></ng-content>',
})
export class CancelLabelComponent {

    constructor() {
    }
}
@Component({
    selector: 'valuate-label',
    template: '<ng-content></ng-content>',
})
export class ValuateLabelComponent {

    constructor() {
    }
}
@Component({
    selector: 'invoiced-label',
    template: '<ng-content></ng-content>',
})
export class InvoicedLabelComponent {

    constructor() {
    }
}
@Component({
    selector: 'servcie-cancelled-label',
    template: '<ng-content></ng-content>',
})
export class ServiceCanceledLabelComponent {

    constructor() {
    }
}
@Component({
    selector: 'return-label',
    template: '<ng-content></ng-content>',
})
export class ReturnLabelComponent {

    constructor() {
    }
}

service-bar-status.component.html

<div class="row backlayout"
    [ngClass]="{'invoiced': service.invoiced && !service?.canceled, 'canceled': service?.canceled }">
    <div *ngIf="service.invoiced" class="col-6 invoiced-title">
        <ng-content select="invoiced-label"></ng-content>
    </div>
    <div class="col-6">
        <div *ngIf="!service?.canceled">
            <button *ngIf="showButton" type="button"
                class="btn btn-sm bg-link btn-icon icon-calculator text-uppercase" (click)="performOperation()">
                <ng-content select="valuate-label"></ng-content>
            </button>
            <button *ngIf="service?.id" type="button"
                class="btn btn-sm bg-link btn-icon icon-cancel-reservation text-uppercase"
                [routerLink]="routes.cancelRouteURL">
                <ng-content select="cancel-label"></ng-content>
            </button>
        </div>
        <div *ngIf="service?.canceled">
            <div class="col-6 canceled-title">
                <ng-container>
                    <i class="icon-cancel-reservation"></i>
                    <ng-content select="service-cancelled-label"></ng-content>
                </ng-container>
            </div>
        </div>
    </div>
    <!-- Always shown -->
    <div ckass="col-6">
        <button type="button" class="btn btn-sm bg-link btn-icon icon-back_arrow text-uppercase"
            [routerLink]="[routes.returnBackURL]">
            <ng-content select="return-label"></ng-content>
        </button>
    </div>
</div>

service-bar-status.component.ts

@Component({
    selector: 'service-bar-status',
    templateUrl: './service-bar-status.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ServiceBarStatusComponent {
    @Input() routes: {
        returnBackURL: string;
        cancelRouteURL: string;
    };
    @Input() showButton = false;
    // Define explicit data types form input
    @Input() service?: Service | AnotherService | DifferentService | UniqueService;
    @Output() performAction = new EventEmitter<boolean>();

    constructor() { }

    performOperation() {
        this.performAction.emit(true);
    }
}

service-bar-status.module.ts

@NgModule({
    imports: [SharedModule, RouterModule],
    declarations: [CancelLabelComponent, ValuateLabelComponent, ReturnLabelComponent, ServiceCanceledLabelComponent, InvoicedLabelComponent, ServiceBarStatusComponent],
    exports: [CancelLabelComponent, ValuateLabelComponent, ReturnLabelComponent, ServiceCanceledLabelComponent, InvoicedLabelComponent, ServiceBarStatusComponent]
})
export class ServiceBarStatusModule {}