The component inside ng-content is instantiated twice

Question

I am using Angular 4 and I have a component 'X' which is basically a collapse-expand component. It wraps whatever is provided to it and collapse and expand it on clicking. It looks similar to below one.

<div>
    // some X related DOM here
    <ng-content></ng-content>
</div>

I have another component 'Y', which I place within the 'X' component, like:

<x>
   <y [someAttribute]="someAttribute"> </y>
</x>

Now I have realized that the 'Y' component is instantiated twice i.e, the constructor, ngOnInit, ngOnChanges everything gets called twice.

Can it be a problem with using <ng-content> (I am still not completely sure). If Yes, how should I handle this to call my 'Y' component only once as I need to have component 'Y' wrapped within the 'X' only.

Edit: I missed adding earlier in the question that I am using ngxPermissions library to display '' conditionally. So its more like:

<x>
   <ng-template [ngxPermissionsOnly]="validPermissions">
       <y [someAttribute]="someAttribute"> </y>
   </ng-template>
</x>