Quick overview

I have a "Terminal" Component which should be able to be used multiple times all over my application. This component should also be able to put into a "read only" mode where you pass a single command you'd like the terminal to fire and it will display the output. I am trying to have this component be able to be refreshed by many things; data updating else where, user events, etc. To achieve this, currently, I am using RxJS subjects as an @Input into the terminal component which when updated fires the subscribed functions. This works for the first user click (see bellow) but after that the subject doesn't update again. I suspect this is due to the "object" not updating, there for angular doesn't register the change and my whole idea falls apart.

Can I fix this? or do I need to redesign this "Terminal" component?

Code

terminal.component.ts

export class TerminalComponent implements OnInit, OnDestroy {
    constructor() {}

    $destroy = new Subject();
    terminalOutput = '';

    // Command input (if you want the terminal to only fire one command)
    @Input() command = '';
    $command: BehaviorSubject<string> = new BehaviorSubject('');

    // Refresh terminal input
    $refresh: Subject<void> = new Subject();
    @Input() set refresh(value: Subject<void>) {
        this.$refresh = value;
    }

    // ReadOnly Input
    @Input() readOnly = false;

    ngOnInit(): void {
        this.$refresh
            .pipe(
                takeUntil(this.$destroy),
                tap(() => {
                    const lastCommand = this.$command.getValue();
                    if (lastCommand) {
                        console.log('Refreshing, last command is:', lastCommand);                       
                    }
                })
            )
            .subscribe();

        //...
    }

    //...
}

parent.component.html

<h1>Home</h1>

<app-terminal command="ls" [refresh]="$refreshSubject"></app-terminal>

<button (click)="refreshTest()">Refresh</button>

parent.component.ts

export class ParentComponent implements OnInit {
    $refreshSubject: Subject<void> = new Subject();

    constructor() {}

    ngOnInit(): void {}

    refreshTest(): void {
        console.log('Refreshing');
        this.$refreshSubject.next();
    }
}