match-2.directive.ts

import { untilDestoryed, UntilDestroy } from '@ngneat/until-destroy';

const breakpoints = { ... };

@UntilDestroy()
@Directive({
  selector: '[matches]'
})
export class MatchesDirective implements OnInit {
  @Input() matches: keyof typeof breakpoints;

  constructor(private tpl: TemplateRef<any>,
              private breakpointObserver: BreakpointObserver,
              private vcr: ViewContainerRef) {
  }

  ngOnInit() {
    const breakpoint = breakpoints[this.matches];
    
    fromMediaQuery(breakpoint).pipe(untilDestroyed(this)).subscribe(matches => {
      matches ? this.vcr.createEmbeddedView(this.tpl) : this.vcr.clear();
    });
  }

}

Very nice solution, indeed.
I guess untilDestoryed should be untilDestroyed :-)