Angular 10 Child Component only be used in Parent Component

Question

I need to configuration on component to be used only inside another component. How can I do that?

Components:

@Component({
    selector: 'app-menu[id]',
    templateUrl: './menu.component.html',
    styleUrls: ['./menu.component.scss']
})
export class MenuComponent {
    ...
}

@Component({
    selector: 'app-sub-menu[id]',
    templateUrl: './sub-menu.component.html',
    styleUrls: ['./sub-menu.component.scss']
})
export class SubMenuComponent {
    ...
}

HTML

The correct use MUST be only like that:

<app-menu>
    <app-sub-menu></app-sub-menu>
</app-menu>

I need to block this kind of use:

<div>
    <app-sub-menu></app-sub-menu>
</div>

Answer 1

In your child component's constructor inject parent component. and in html file use child component selector in parent component selector.

This may help you. Angular 2 - Restrict Component to specific parent Component.