Angular cdkDrag boundary parent component

The following code was working as expected. The #draggablecontainer is draggable inside #mastercontainer (it doesn't break the boundaries of .master-container).

<div class="master-container" #mastercontainer> 
  <div class="drag-child" #draggablecontainer cdkDrag cdkDragBoundary=".master-container">
    <div class="drag-header" cdkDragHandle>...</div>
    <div class="drag-body">...</div>
  </div>
</div>

But my #draggablecontainer will be big, so I decided to make a component. So the code became the following:

Parent component html:

<div class="master-container" #mastercontainer> 
<app-child-draggable></app-child-draggable>
</div>

Child component html:

<div #draggablecontainer class="drag-child" cdkDrag cdkDragBoundary=".master-container">
<div class="drag-header" cdkDragHandle>...</div>
<div class="drag-body">...</div>
</div>

The problem is that it doesn't recognize the .master-container, so I can drag it to out of the screen.

How can I set a cdkDragBoundary in a child component with a class declared in the parent component?