要使Angular Material 10的日期范围选择器变为开放区间，您可以通过自定义日期范围选择器的模板来实现。下面是一个示例代码：

首先，您需要创建一个新的组件来扩展Angular Material的日期范围选择器组件。假设您的新组件名为CustomDateRangePickerComponent。

custom-date-range-picker.component.html:

  
  





  
    Clear
    Apply
  

  

custom-date-range-picker.component.ts:

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';

@Component({
  selector: 'app-custom-date-range-picker',
  templateUrl: './custom-date-range-picker.component.html',
  styleUrls: ['./custom-date-range-picker.component.css']
})
export class CustomDateRangePickerComponent {
  @Input() startDate: Date;
  @Input() endDate: Date;
  @Output() startDateChange = new EventEmitter();
  @Output() endDateChange = new EventEmitter();

  selectedRange: Date[];

  updateStartDate(event: MatDatepickerInputEvent) {
    this.startDateChange.emit(event.value);
  }

  updateEndDate(event: MatDatepickerInputEvent) {
    this.endDateChange.emit(event.value);
  }

  updateSelectedRange(range: Date[]) {
    this.selectedRange = range;
  }

  clearDateRange() {
    this.startDate = null;
    this.endDate = null;
    this.startDateChange.emit(null);
    this.endDateChange.emit(null);
  }

  applyDateRange() {
    this.startDate = this.selectedRange[0];
    this.endDate = this.selectedRange[1];
    this.startDateChange.emit(this.startDate);
    this.endDateChange.emit(this.endDate);
  }
}

在您的应用程序中使用这个新的自定义日期范围选择器组件：

app.component.html:

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  startDate: Date;
  endDate: Date;

  onStartDateChange(date: Date) {
    this.startDate = date;
  }

  onEndDateChange(date: Date) {
    this.endDate = date;
  }
}

现在，您可以在AppComponent中使用startDate和endDate属性来获取选择的日期范围。

希望这个示例能帮助到您！请注意，这只是一个示例，您可能需要根据您的实际需求进行调整。