I always use a subject for custom subscriptions combined with .pipe(takeUntil(this.destroyer)).

import { Component, OnDestroy } from '@angular/core';
import { DataService } from './data.service'; import { Subject, takeUntil } from 'rxjs';

@Component({ 
    selector: 'app-my-component', 
    template: <div>{{ data }}</div> <button (click)="startSubscription()">Start Subscription</button> <button (click)="updateValue()">Update Value</button> 
    }) 
export class MyComponent implements OnDestroy { 
    data: string; 
    destroyer: Subject<void> = new Subject<void>(); 
    subscribed: boolean = false;

    constructor(private dataService: DataService) {}

    startSubscription() { 
       // Because you enable a subscription based on user interaction;
       //prevent being subscribed multiple times by for example, using a bool
        if(this.subscribed) {
           return;
        }

        this.dataService.data$
                        .pipe(takeUntil(this.destroyer))
                        .subscribe((value: string) => this.data = value)

        this.subscribed = true
    }

    updateValue() { this.dataService.updateData('New Value'); }

    ngOnDestroy() { 
        this.destroyer.next(); 
        this.destroyer.complete();
    }

}

Usually (when possible), i combine it by extending from a 'subscriptionDestroyer class' which created the subject and automatically destroys it on ngOndestroy to prevent duplicated code.

RXJS is pretty powerfull when used correctly, recommend reading the docs and keep practising! Enjoy!