Angular child component doesn't work in two parent components

Question

There is a weird issue in my parent-to-child component and I will simplify it to be usable for everyone.

Components Structure:

ProfileEditComponent
-- ProfilePhotoEditComponent
-------- PhotoUploadComponent
-- AlbumPhotoEditComponent
-------- PhotoUploadComponent

There is a Child Component that I Call PhotoUploadComponent, And there are two components ProfilePhotoEditComponent and AlbumPhotoEditComponent that are using the PhotoUploadComponent. The problem is that PhotoUploadComponent does not work at the same time in both parent components. To be more clear ProfilePhotoEditComponent is on the top level at the DOM and PhotoUploadComponent works properly in the ProfilePhotoEditComponent but it does not work in the AlbumPhotoEditComponent. If I remove the tag of PhotoUploadComponent form ProfilePhotoEditComponent HTML so the PhotoUploadComponent will work properly in the AlbumPhotoEditComponent.

I have to say that parent Components are located in another component and there is the same route for all of them. Actually, I have a tab feature that consists of ProfilePhotoEditComponent and AlbumPhotoEditComponent.

here is the code

ProfileEditComponent.html

<div class="tab-content ">

   <div class="tab-pane" id="Album">
     <app-profileAlbumPhotoEdit [member]="member"></app-profileAlbumPhotoEdit>
   </div>

   <div class="tab-pane" id="ProfilePhoto">
      <app-profilePhotoEdit [member]="member"></app-profilePhotoEdit>
   </div>

</div>

ProfilePhotoEditComponent.html

    <div class="col-md-6">
        <app-photo-upload [uploadPhoto]="uploadPhotoInfo"></app-photo-upload>
    </div>

ProfilePhotoEditComponent.ts

export class ProfilePhotoEditComponent implements OnInit {

@Input() member: Member;
uploadPhotoInfo : UploadPhoto = {
  url: "Users/AddPhoto",
  className: "square"
};

constructor() { }

ngOnInit() {}
}

AlbumPhotoEditComponent.html

    <div class="col-md-6">
        <app-photo-upload [uploadPhoto]="uploadPhotoInfo"></app-photo-upload>
    </div>

AlbumPhotoEditComponent.ts

export class AlbumPhotoEditComponent implements OnInit {

@Input() member: Member;
uploadPhotoInfo : UploadPhoto = {
  url: "UserAlbum/AddPhoto",
  className: "square"
};

constructor() { }

ngOnInit() {}
}

PhotoUploadComponent.ts

export class PhotoUploadComponent implements OnInit {

  @Input() uploadPhoto: UploadPhoto;
  uploader:FileUploader;

  constructor (private accountService: AccountService){
   this.accountService.currentUser$.pipe(take(1)).subscribe(u => this.user = u); 
  }

  ngOnInit(): void {
    this.InitializeUploader(); 
    this.DragDrop();
  }



  InitializeUploader() {
  this.uploader = new FileUploader({
    url: this.baseUrl + this.uploadPhoto.url,
    authToken: 'Bearer ' + this.user.token,
    isHTML5: true,
    allowedFileType: ['image'],
    removeAfterUpload: true,
    autoUpload: false,
    maxFileSize: 10 * 1024* 1024
    
  });

  this.uploader.onAfterAddingFile = (file) => {
    file.withCredentials = false;
  }

  this.uploader.onSuccessItem = (item, response, status, headers) => {
    if (response) {
      const photo = JSON.parse(response);
    }
  }

 }
}

PhotoUploadComponent.html

   <div class="drag-area" ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
  (fileOver)="fileOverBase($event)" [uploader]="uploader">
  <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
  <header>Drag & Drop to Upload File</header>
  <span>OR</span>
  <button>Browse File</button>
  <input style="display: none;" title="Upload ypur photo" type="file" ng2FileSelect [uploader]="uploader" type="file"
      hidden>

In the PhotoUploadComponent I'm using ng2-file-upload to upload images.

Update: Upload functionality and the pop-up window does not appear when I'm going to upload a new file. And there is no error in the console as well.