From 9b38c6a435f167e8c3b40331ff0d913d30b5a44d Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Thu, 19 Jan 2023 11:44:46 -0500
Subject: [PATCH] wip

---
 src/dev-app/performance/BUILD.bazel           |    1 +
 src/dev-app/performance/performance-demo.html | 1022 ++++++++++++++++-
 src/dev-app/performance/performance-demo.ts   |    8 +-
 src/material/core/option/index.ts             |    6 +-
 src/material/core/option/option-parent.ts     |    4 +-
 src/material/core/option/option.ts            |  182 ++-
 6 files changed, 1211 insertions(+), 12 deletions(-)

diff --git a/src/dev-app/performance/BUILD.bazel b/src/dev-app/performance/BUILD.bazel
index ffba0b8921aa..eececca8545f 100644
--- a/src/dev-app/performance/BUILD.bazel
+++ b/src/dev-app/performance/BUILD.bazel
@@ -12,6 +12,7 @@ ng_module(
     deps = [
         "//src/material/button",
         "//src/material/divider",
+        "//src/material/expansion",
         "//src/material/form-field",
         "//src/material/icon",
         "//src/material/input",
diff --git a/src/dev-app/performance/performance-demo.html b/src/dev-app/performance/performance-demo.html
index 5674ab4b2232..235ebe90ed04 100644
--- a/src/dev-app/performance/performance-demo.html
+++ b/src/dev-app/performance/performance-demo.html
@@ -24,7 +24,7 @@
       <mat-option [value]="1">1</mat-option>
       <mat-option [value]="10">10</mat-option>
       <mat-option [value]="100">100</mat-option>
-      <mat-option [value]="1000">1000</mat-option>
+      <mat-option [value]="10000">10000</mat-option>
     </mat-select>
   </mat-form-field>
 </div>
@@ -82,9 +82,1023 @@
 
 <ng-container *ngIf="show">
   <ng-container *ngFor="let _ of componentArray">
-    <mat-form-field>
-      <mat-label>Input</mat-label>
-      <input matInput />
+    <mat-form-field appearance="outline">
+      <mat-label>Favorite food</mat-label>
+      <mat-select [value]="options[10].value" #select>
+        <ng-container *ngFor="let option of options">
+          <mat-option [value]="option.value">{{option.text}}</mat-option>
+        </ng-container>
+      </mat-select>
     </mat-form-field>
+
+    <!-- <mat-accordion>
+      <mat-expansion-panel #panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Basic expansion panel </mat-panel-title>
+        </mat-expansion-panel-header>
+        <ng-container *ngIf="panel.expanded">
+          <button mat-button>Line 1</button>
+          <button mat-button>Line 2</button>
+          <button mat-button>Line 3</button>
+          <button mat-button>Line 4</button>
+          <button mat-button>Line 5</button>
+          <button mat-button>Line 6</button>
+          <button mat-button>Line 7</button>
+          <button mat-button>Line 8</button>
+          <button mat-button>Line 9</button>
+          <button mat-button>Line 10</button>
+          <button mat-button>Line 11</button>
+          <button mat-button>Line 12</button>
+          <button mat-button>Line 13</button>
+          <button mat-button>Line 14</button>
+          <button mat-button>Line 15</button>
+          <button mat-button>Line 16</button>
+          <button mat-button>Line 17</button>
+          <button mat-button>Line 18</button>
+          <button mat-button>Line 19</button>
+          <button mat-button>Line 20</button>
+          <button mat-button>Line 21</button>
+          <button mat-button>Line 22</button>
+          <button mat-button>Line 23</button>
+          <button mat-button>Line 24</button>
+          <button mat-button>Line 25</button>
+          <button mat-button>Line 26</button>
+          <button mat-button>Line 27</button>
+          <button mat-button>Line 28</button>
+          <button mat-button>Line 29</button>
+          <button mat-button>Line 30</button>
+          <button mat-button>Line 31</button>
+          <button mat-button>Line 32</button>
+          <button mat-button>Line 33</button>
+          <button mat-button>Line 34</button>
+          <button mat-button>Line 35</button>
+          <button mat-button>Line 36</button>
+          <button mat-button>Line 37</button>
+          <button mat-button>Line 38</button>
+          <button mat-button>Line 39</button>
+          <button mat-button>Line 40</button>
+          <button mat-button>Line 41</button>
+          <button mat-button>Line 42</button>
+          <button mat-button>Line 43</button>
+          <button mat-button>Line 44</button>
+          <button mat-button>Line 45</button>
+          <button mat-button>Line 46</button>
+          <button mat-button>Line 47</button>
+          <button mat-button>Line 48</button>
+          <button mat-button>Line 49</button>
+          <button mat-button>Line 50</button>
+          <button mat-button>Line 51</button>
+          <button mat-button>Line 52</button>
+          <button mat-button>Line 53</button>
+          <button mat-button>Line 54</button>
+          <button mat-button>Line 55</button>
+          <button mat-button>Line 56</button>
+          <button mat-button>Line 57</button>
+          <button mat-button>Line 58</button>
+          <button mat-button>Line 59</button>
+          <button mat-button>Line 60</button>
+          <button mat-button>Line 61</button>
+          <button mat-button>Line 62</button>
+          <button mat-button>Line 63</button>
+          <button mat-button>Line 64</button>
+          <button mat-button>Line 65</button>
+          <button mat-button>Line 66</button>
+          <button mat-button>Line 67</button>
+          <button mat-button>Line 68</button>
+          <button mat-button>Line 69</button>
+          <button mat-button>Line 70</button>
+          <button mat-button>Line 71</button>
+          <button mat-button>Line 72</button>
+          <button mat-button>Line 73</button>
+          <button mat-button>Line 74</button>
+          <button mat-button>Line 75</button>
+          <button mat-button>Line 76</button>
+          <button mat-button>Line 77</button>
+          <button mat-button>Line 78</button>
+          <button mat-button>Line 79</button>
+          <button mat-button>Line 80</button>
+          <button mat-button>Line 81</button>
+          <button mat-button>Line 82</button>
+          <button mat-button>Line 83</button>
+          <button mat-button>Line 84</button>
+          <button mat-button>Line 85</button>
+          <button mat-button>Line 86</button>
+          <button mat-button>Line 87</button>
+          <button mat-button>Line 88</button>
+          <button mat-button>Line 89</button>
+          <button mat-button>Line 90</button>
+          <button mat-button>Line 91</button>
+          <button mat-button>Line 92</button>
+          <button mat-button>Line 93</button>
+          <button mat-button>Line 94</button>
+          <button mat-button>Line 95</button>
+          <button mat-button>Line 96</button>
+          <button mat-button>Line 97</button>
+          <button mat-button>Line 98</button>
+          <button mat-button>Line 99</button>
+          <button mat-button>Line 100</button>
+          <button mat-button>Line 101</button>
+          <button mat-button>Line 102</button>
+          <button mat-button>Line 103</button>
+          <button mat-button>Line 104</button>
+          <button mat-button>Line 105</button>
+          <button mat-button>Line 106</button>
+          <button mat-button>Line 107</button>
+          <button mat-button>Line 108</button>
+          <button mat-button>Line 109</button>
+          <button mat-button>Line 110</button>
+          <button mat-button>Line 111</button>
+          <button mat-button>Line 112</button>
+          <button mat-button>Line 113</button>
+          <button mat-button>Line 114</button>
+          <button mat-button>Line 115</button>
+          <button mat-button>Line 116</button>
+          <button mat-button>Line 117</button>
+          <button mat-button>Line 118</button>
+          <button mat-button>Line 119</button>
+          <button mat-button>Line 120</button>
+          <button mat-button>Line 121</button>
+          <button mat-button>Line 122</button>
+          <button mat-button>Line 123</button>
+          <button mat-button>Line 124</button>
+          <button mat-button>Line 125</button>
+          <button mat-button>Line 126</button>
+          <button mat-button>Line 127</button>
+          <button mat-button>Line 128</button>
+          <button mat-button>Line 129</button>
+          <button mat-button>Line 130</button>
+          <button mat-button>Line 131</button>
+          <button mat-button>Line 132</button>
+          <button mat-button>Line 133</button>
+          <button mat-button>Line 134</button>
+          <button mat-button>Line 135</button>
+          <button mat-button>Line 136</button>
+          <button mat-button>Line 137</button>
+          <button mat-button>Line 138</button>
+          <button mat-button>Line 139</button>
+          <button mat-button>Line 140</button>
+          <button mat-button>Line 141</button>
+          <button mat-button>Line 142</button>
+          <button mat-button>Line 143</button>
+          <button mat-button>Line 144</button>
+          <button mat-button>Line 145</button>
+          <button mat-button>Line 146</button>
+          <button mat-button>Line 147</button>
+          <button mat-button>Line 148</button>
+          <button mat-button>Line 149</button>
+          <button mat-button>Line 150</button>
+          <button mat-button>Line 151</button>
+          <button mat-button>Line 152</button>
+          <button mat-button>Line 153</button>
+          <button mat-button>Line 154</button>
+          <button mat-button>Line 155</button>
+          <button mat-button>Line 156</button>
+          <button mat-button>Line 157</button>
+          <button mat-button>Line 158</button>
+          <button mat-button>Line 159</button>
+          <button mat-button>Line 160</button>
+          <button mat-button>Line 161</button>
+          <button mat-button>Line 162</button>
+          <button mat-button>Line 163</button>
+          <button mat-button>Line 164</button>
+          <button mat-button>Line 165</button>
+          <button mat-button>Line 166</button>
+          <button mat-button>Line 167</button>
+          <button mat-button>Line 168</button>
+          <button mat-button>Line 169</button>
+          <button mat-button>Line 170</button>
+          <button mat-button>Line 171</button>
+          <button mat-button>Line 172</button>
+          <button mat-button>Line 173</button>
+          <button mat-button>Line 174</button>
+          <button mat-button>Line 175</button>
+          <button mat-button>Line 176</button>
+          <button mat-button>Line 177</button>
+          <button mat-button>Line 178</button>
+          <button mat-button>Line 179</button>
+          <button mat-button>Line 180</button>
+          <button mat-button>Line 181</button>
+          <button mat-button>Line 182</button>
+          <button mat-button>Line 183</button>
+          <button mat-button>Line 184</button>
+          <button mat-button>Line 185</button>
+          <button mat-button>Line 186</button>
+          <button mat-button>Line 187</button>
+          <button mat-button>Line 188</button>
+          <button mat-button>Line 189</button>
+          <button mat-button>Line 190</button>
+          <button mat-button>Line 191</button>
+          <button mat-button>Line 192</button>
+          <button mat-button>Line 193</button>
+          <button mat-button>Line 194</button>
+          <button mat-button>Line 195</button>
+          <button mat-button>Line 196</button>
+          <button mat-button>Line 197</button>
+          <button mat-button>Line 198</button>
+          <button mat-button>Line 199</button>
+          <button mat-button>Line 200</button>
+          <button mat-button>Line 201</button>
+          <button mat-button>Line 202</button>
+          <button mat-button>Line 203</button>
+          <button mat-button>Line 204</button>
+          <button mat-button>Line 205</button>
+          <button mat-button>Line 206</button>
+          <button mat-button>Line 207</button>
+          <button mat-button>Line 208</button>
+          <button mat-button>Line 209</button>
+          <button mat-button>Line 210</button>
+          <button mat-button>Line 211</button>
+          <button mat-button>Line 212</button>
+          <button mat-button>Line 213</button>
+          <button mat-button>Line 214</button>
+          <button mat-button>Line 215</button>
+          <button mat-button>Line 216</button>
+          <button mat-button>Line 217</button>
+          <button mat-button>Line 218</button>
+          <button mat-button>Line 219</button>
+          <button mat-button>Line 220</button>
+          <button mat-button>Line 221</button>
+          <button mat-button>Line 222</button>
+          <button mat-button>Line 223</button>
+          <button mat-button>Line 224</button>
+          <button mat-button>Line 225</button>
+          <button mat-button>Line 226</button>
+          <button mat-button>Line 227</button>
+          <button mat-button>Line 228</button>
+          <button mat-button>Line 229</button>
+          <button mat-button>Line 230</button>
+          <button mat-button>Line 231</button>
+          <button mat-button>Line 232</button>
+          <button mat-button>Line 233</button>
+          <button mat-button>Line 234</button>
+          <button mat-button>Line 235</button>
+          <button mat-button>Line 236</button>
+          <button mat-button>Line 237</button>
+          <button mat-button>Line 238</button>
+          <button mat-button>Line 239</button>
+          <button mat-button>Line 240</button>
+          <button mat-button>Line 241</button>
+          <button mat-button>Line 242</button>
+          <button mat-button>Line 243</button>
+          <button mat-button>Line 244</button>
+          <button mat-button>Line 245</button>
+          <button mat-button>Line 246</button>
+          <button mat-button>Line 247</button>
+          <button mat-button>Line 248</button>
+          <button mat-button>Line 249</button>
+          <button mat-button>Line 250</button>
+          <button mat-button>Line 251</button>
+          <button mat-button>Line 252</button>
+          <button mat-button>Line 253</button>
+          <button mat-button>Line 254</button>
+          <button mat-button>Line 255</button>
+          <button mat-button>Line 256</button>
+          <button mat-button>Line 257</button>
+          <button mat-button>Line 258</button>
+          <button mat-button>Line 259</button>
+          <button mat-button>Line 260</button>
+          <button mat-button>Line 261</button>
+          <button mat-button>Line 262</button>
+          <button mat-button>Line 263</button>
+          <button mat-button>Line 264</button>
+          <button mat-button>Line 265</button>
+          <button mat-button>Line 266</button>
+          <button mat-button>Line 267</button>
+          <button mat-button>Line 268</button>
+          <button mat-button>Line 269</button>
+          <button mat-button>Line 270</button>
+          <button mat-button>Line 271</button>
+          <button mat-button>Line 272</button>
+          <button mat-button>Line 273</button>
+          <button mat-button>Line 274</button>
+          <button mat-button>Line 275</button>
+          <button mat-button>Line 276</button>
+          <button mat-button>Line 277</button>
+          <button mat-button>Line 278</button>
+          <button mat-button>Line 279</button>
+          <button mat-button>Line 280</button>
+          <button mat-button>Line 281</button>
+          <button mat-button>Line 282</button>
+          <button mat-button>Line 283</button>
+          <button mat-button>Line 284</button>
+          <button mat-button>Line 285</button>
+          <button mat-button>Line 286</button>
+          <button mat-button>Line 287</button>
+          <button mat-button>Line 288</button>
+          <button mat-button>Line 289</button>
+          <button mat-button>Line 290</button>
+          <button mat-button>Line 291</button>
+          <button mat-button>Line 292</button>
+          <button mat-button>Line 293</button>
+          <button mat-button>Line 294</button>
+          <button mat-button>Line 295</button>
+          <button mat-button>Line 296</button>
+          <button mat-button>Line 297</button>
+          <button mat-button>Line 298</button>
+          <button mat-button>Line 299</button>
+          <button mat-button>Line 300</button>
+          <button mat-button>Line 301</button>
+          <button mat-button>Line 302</button>
+          <button mat-button>Line 303</button>
+          <button mat-button>Line 304</button>
+          <button mat-button>Line 305</button>
+          <button mat-button>Line 306</button>
+          <button mat-button>Line 307</button>
+          <button mat-button>Line 308</button>
+          <button mat-button>Line 309</button>
+          <button mat-button>Line 310</button>
+          <button mat-button>Line 311</button>
+          <button mat-button>Line 312</button>
+          <button mat-button>Line 313</button>
+          <button mat-button>Line 314</button>
+          <button mat-button>Line 315</button>
+          <button mat-button>Line 316</button>
+          <button mat-button>Line 317</button>
+          <button mat-button>Line 318</button>
+          <button mat-button>Line 319</button>
+          <button mat-button>Line 320</button>
+          <button mat-button>Line 321</button>
+          <button mat-button>Line 322</button>
+          <button mat-button>Line 323</button>
+          <button mat-button>Line 324</button>
+          <button mat-button>Line 325</button>
+          <button mat-button>Line 326</button>
+          <button mat-button>Line 327</button>
+          <button mat-button>Line 328</button>
+          <button mat-button>Line 329</button>
+          <button mat-button>Line 330</button>
+          <button mat-button>Line 331</button>
+          <button mat-button>Line 332</button>
+          <button mat-button>Line 333</button>
+          <button mat-button>Line 334</button>
+          <button mat-button>Line 335</button>
+          <button mat-button>Line 336</button>
+          <button mat-button>Line 337</button>
+          <button mat-button>Line 338</button>
+          <button mat-button>Line 339</button>
+          <button mat-button>Line 340</button>
+          <button mat-button>Line 341</button>
+          <button mat-button>Line 342</button>
+          <button mat-button>Line 343</button>
+          <button mat-button>Line 344</button>
+          <button mat-button>Line 345</button>
+          <button mat-button>Line 346</button>
+          <button mat-button>Line 347</button>
+          <button mat-button>Line 348</button>
+          <button mat-button>Line 349</button>
+          <button mat-button>Line 350</button>
+          <button mat-button>Line 351</button>
+          <button mat-button>Line 352</button>
+          <button mat-button>Line 353</button>
+          <button mat-button>Line 354</button>
+          <button mat-button>Line 355</button>
+          <button mat-button>Line 356</button>
+          <button mat-button>Line 357</button>
+          <button mat-button>Line 358</button>
+          <button mat-button>Line 359</button>
+          <button mat-button>Line 360</button>
+          <button mat-button>Line 361</button>
+          <button mat-button>Line 362</button>
+          <button mat-button>Line 363</button>
+          <button mat-button>Line 364</button>
+          <button mat-button>Line 365</button>
+          <button mat-button>Line 366</button>
+          <button mat-button>Line 367</button>
+          <button mat-button>Line 368</button>
+          <button mat-button>Line 369</button>
+          <button mat-button>Line 370</button>
+          <button mat-button>Line 371</button>
+          <button mat-button>Line 372</button>
+          <button mat-button>Line 373</button>
+          <button mat-button>Line 374</button>
+          <button mat-button>Line 375</button>
+          <button mat-button>Line 376</button>
+          <button mat-button>Line 377</button>
+          <button mat-button>Line 378</button>
+          <button mat-button>Line 379</button>
+          <button mat-button>Line 380</button>
+          <button mat-button>Line 381</button>
+          <button mat-button>Line 382</button>
+          <button mat-button>Line 383</button>
+          <button mat-button>Line 384</button>
+          <button mat-button>Line 385</button>
+          <button mat-button>Line 386</button>
+          <button mat-button>Line 387</button>
+          <button mat-button>Line 388</button>
+          <button mat-button>Line 389</button>
+          <button mat-button>Line 390</button>
+          <button mat-button>Line 391</button>
+          <button mat-button>Line 392</button>
+          <button mat-button>Line 393</button>
+          <button mat-button>Line 394</button>
+          <button mat-button>Line 395</button>
+          <button mat-button>Line 396</button>
+          <button mat-button>Line 397</button>
+          <button mat-button>Line 398</button>
+          <button mat-button>Line 399</button>
+          <button mat-button>Line 400</button>
+          <button mat-button>Line 401</button>
+          <button mat-button>Line 402</button>
+          <button mat-button>Line 403</button>
+          <button mat-button>Line 404</button>
+          <button mat-button>Line 405</button>
+          <button mat-button>Line 406</button>
+          <button mat-button>Line 407</button>
+          <button mat-button>Line 408</button>
+          <button mat-button>Line 409</button>
+          <button mat-button>Line 410</button>
+          <button mat-button>Line 411</button>
+          <button mat-button>Line 412</button>
+          <button mat-button>Line 413</button>
+          <button mat-button>Line 414</button>
+          <button mat-button>Line 415</button>
+          <button mat-button>Line 416</button>
+          <button mat-button>Line 417</button>
+          <button mat-button>Line 418</button>
+          <button mat-button>Line 419</button>
+          <button mat-button>Line 420</button>
+          <button mat-button>Line 421</button>
+          <button mat-button>Line 422</button>
+          <button mat-button>Line 423</button>
+          <button mat-button>Line 424</button>
+          <button mat-button>Line 425</button>
+          <button mat-button>Line 426</button>
+          <button mat-button>Line 427</button>
+          <button mat-button>Line 428</button>
+          <button mat-button>Line 429</button>
+          <button mat-button>Line 430</button>
+          <button mat-button>Line 431</button>
+          <button mat-button>Line 432</button>
+          <button mat-button>Line 433</button>
+          <button mat-button>Line 434</button>
+          <button mat-button>Line 435</button>
+          <button mat-button>Line 436</button>
+          <button mat-button>Line 437</button>
+          <button mat-button>Line 438</button>
+          <button mat-button>Line 439</button>
+          <button mat-button>Line 440</button>
+          <button mat-button>Line 441</button>
+          <button mat-button>Line 442</button>
+          <button mat-button>Line 443</button>
+          <button mat-button>Line 444</button>
+          <button mat-button>Line 445</button>
+          <button mat-button>Line 446</button>
+          <button mat-button>Line 447</button>
+          <button mat-button>Line 448</button>
+          <button mat-button>Line 449</button>
+          <button mat-button>Line 450</button>
+          <button mat-button>Line 451</button>
+          <button mat-button>Line 452</button>
+          <button mat-button>Line 453</button>
+          <button mat-button>Line 454</button>
+          <button mat-button>Line 455</button>
+          <button mat-button>Line 456</button>
+          <button mat-button>Line 457</button>
+          <button mat-button>Line 458</button>
+          <button mat-button>Line 459</button>
+          <button mat-button>Line 460</button>
+          <button mat-button>Line 461</button>
+          <button mat-button>Line 462</button>
+          <button mat-button>Line 463</button>
+          <button mat-button>Line 464</button>
+          <button mat-button>Line 465</button>
+          <button mat-button>Line 466</button>
+          <button mat-button>Line 467</button>
+          <button mat-button>Line 468</button>
+          <button mat-button>Line 469</button>
+          <button mat-button>Line 470</button>
+          <button mat-button>Line 471</button>
+          <button mat-button>Line 472</button>
+          <button mat-button>Line 473</button>
+          <button mat-button>Line 474</button>
+          <button mat-button>Line 475</button>
+          <button mat-button>Line 476</button>
+          <button mat-button>Line 477</button>
+          <button mat-button>Line 478</button>
+          <button mat-button>Line 479</button>
+          <button mat-button>Line 480</button>
+          <button mat-button>Line 481</button>
+          <button mat-button>Line 482</button>
+          <button mat-button>Line 483</button>
+          <button mat-button>Line 484</button>
+          <button mat-button>Line 485</button>
+          <button mat-button>Line 486</button>
+          <button mat-button>Line 487</button>
+          <button mat-button>Line 488</button>
+          <button mat-button>Line 489</button>
+          <button mat-button>Line 490</button>
+          <button mat-button>Line 491</button>
+          <button mat-button>Line 492</button>
+          <button mat-button>Line 493</button>
+          <button mat-button>Line 494</button>
+          <button mat-button>Line 495</button>
+          <button mat-button>Line 496</button>
+          <button mat-button>Line 497</button>
+          <button mat-button>Line 498</button>
+          <button mat-button>Line 499</button>
+          <button mat-button>Line 500</button>
+          <button mat-button>Line 501</button>
+          <button mat-button>Line 502</button>
+          <button mat-button>Line 503</button>
+          <button mat-button>Line 504</button>
+          <button mat-button>Line 505</button>
+          <button mat-button>Line 506</button>
+          <button mat-button>Line 507</button>
+          <button mat-button>Line 508</button>
+          <button mat-button>Line 509</button>
+          <button mat-button>Line 510</button>
+          <button mat-button>Line 511</button>
+          <button mat-button>Line 512</button>
+          <button mat-button>Line 513</button>
+          <button mat-button>Line 514</button>
+          <button mat-button>Line 515</button>
+          <button mat-button>Line 516</button>
+          <button mat-button>Line 517</button>
+          <button mat-button>Line 518</button>
+          <button mat-button>Line 519</button>
+          <button mat-button>Line 520</button>
+          <button mat-button>Line 521</button>
+          <button mat-button>Line 522</button>
+          <button mat-button>Line 523</button>
+          <button mat-button>Line 524</button>
+          <button mat-button>Line 525</button>
+          <button mat-button>Line 526</button>
+          <button mat-button>Line 527</button>
+          <button mat-button>Line 528</button>
+          <button mat-button>Line 529</button>
+          <button mat-button>Line 530</button>
+          <button mat-button>Line 531</button>
+          <button mat-button>Line 532</button>
+          <button mat-button>Line 533</button>
+          <button mat-button>Line 534</button>
+          <button mat-button>Line 535</button>
+          <button mat-button>Line 536</button>
+          <button mat-button>Line 537</button>
+          <button mat-button>Line 538</button>
+          <button mat-button>Line 539</button>
+          <button mat-button>Line 540</button>
+          <button mat-button>Line 541</button>
+          <button mat-button>Line 542</button>
+          <button mat-button>Line 543</button>
+          <button mat-button>Line 544</button>
+          <button mat-button>Line 545</button>
+          <button mat-button>Line 546</button>
+          <button mat-button>Line 547</button>
+          <button mat-button>Line 548</button>
+          <button mat-button>Line 549</button>
+          <button mat-button>Line 550</button>
+          <button mat-button>Line 551</button>
+          <button mat-button>Line 552</button>
+          <button mat-button>Line 553</button>
+          <button mat-button>Line 554</button>
+          <button mat-button>Line 555</button>
+          <button mat-button>Line 556</button>
+          <button mat-button>Line 557</button>
+          <button mat-button>Line 558</button>
+          <button mat-button>Line 559</button>
+          <button mat-button>Line 560</button>
+          <button mat-button>Line 561</button>
+          <button mat-button>Line 562</button>
+          <button mat-button>Line 563</button>
+          <button mat-button>Line 564</button>
+          <button mat-button>Line 565</button>
+          <button mat-button>Line 566</button>
+          <button mat-button>Line 567</button>
+          <button mat-button>Line 568</button>
+          <button mat-button>Line 569</button>
+          <button mat-button>Line 570</button>
+          <button mat-button>Line 571</button>
+          <button mat-button>Line 572</button>
+          <button mat-button>Line 573</button>
+          <button mat-button>Line 574</button>
+          <button mat-button>Line 575</button>
+          <button mat-button>Line 576</button>
+          <button mat-button>Line 577</button>
+          <button mat-button>Line 578</button>
+          <button mat-button>Line 579</button>
+          <button mat-button>Line 580</button>
+          <button mat-button>Line 581</button>
+          <button mat-button>Line 582</button>
+          <button mat-button>Line 583</button>
+          <button mat-button>Line 584</button>
+          <button mat-button>Line 585</button>
+          <button mat-button>Line 586</button>
+          <button mat-button>Line 587</button>
+          <button mat-button>Line 588</button>
+          <button mat-button>Line 589</button>
+          <button mat-button>Line 590</button>
+          <button mat-button>Line 591</button>
+          <button mat-button>Line 592</button>
+          <button mat-button>Line 593</button>
+          <button mat-button>Line 594</button>
+          <button mat-button>Line 595</button>
+          <button mat-button>Line 596</button>
+          <button mat-button>Line 597</button>
+          <button mat-button>Line 598</button>
+          <button mat-button>Line 599</button>
+          <button mat-button>Line 600</button>
+          <button mat-button>Line 601</button>
+          <button mat-button>Line 602</button>
+          <button mat-button>Line 603</button>
+          <button mat-button>Line 604</button>
+          <button mat-button>Line 605</button>
+          <button mat-button>Line 606</button>
+          <button mat-button>Line 607</button>
+          <button mat-button>Line 608</button>
+          <button mat-button>Line 609</button>
+          <button mat-button>Line 610</button>
+          <button mat-button>Line 611</button>
+          <button mat-button>Line 612</button>
+          <button mat-button>Line 613</button>
+          <button mat-button>Line 614</button>
+          <button mat-button>Line 615</button>
+          <button mat-button>Line 616</button>
+          <button mat-button>Line 617</button>
+          <button mat-button>Line 618</button>
+          <button mat-button>Line 619</button>
+          <button mat-button>Line 620</button>
+          <button mat-button>Line 621</button>
+          <button mat-button>Line 622</button>
+          <button mat-button>Line 623</button>
+          <button mat-button>Line 624</button>
+          <button mat-button>Line 625</button>
+          <button mat-button>Line 626</button>
+          <button mat-button>Line 627</button>
+          <button mat-button>Line 628</button>
+          <button mat-button>Line 629</button>
+          <button mat-button>Line 630</button>
+          <button mat-button>Line 631</button>
+          <button mat-button>Line 632</button>
+          <button mat-button>Line 633</button>
+          <button mat-button>Line 634</button>
+          <button mat-button>Line 635</button>
+          <button mat-button>Line 636</button>
+          <button mat-button>Line 637</button>
+          <button mat-button>Line 638</button>
+          <button mat-button>Line 639</button>
+          <button mat-button>Line 640</button>
+          <button mat-button>Line 641</button>
+          <button mat-button>Line 642</button>
+          <button mat-button>Line 643</button>
+          <button mat-button>Line 644</button>
+          <button mat-button>Line 645</button>
+          <button mat-button>Line 646</button>
+          <button mat-button>Line 647</button>
+          <button mat-button>Line 648</button>
+          <button mat-button>Line 649</button>
+          <button mat-button>Line 650</button>
+          <button mat-button>Line 651</button>
+          <button mat-button>Line 652</button>
+          <button mat-button>Line 653</button>
+          <button mat-button>Line 654</button>
+          <button mat-button>Line 655</button>
+          <button mat-button>Line 656</button>
+          <button mat-button>Line 657</button>
+          <button mat-button>Line 658</button>
+          <button mat-button>Line 659</button>
+          <button mat-button>Line 660</button>
+          <button mat-button>Line 661</button>
+          <button mat-button>Line 662</button>
+          <button mat-button>Line 663</button>
+          <button mat-button>Line 664</button>
+          <button mat-button>Line 665</button>
+          <button mat-button>Line 666</button>
+          <button mat-button>Line 667</button>
+          <button mat-button>Line 668</button>
+          <button mat-button>Line 669</button>
+          <button mat-button>Line 670</button>
+          <button mat-button>Line 671</button>
+          <button mat-button>Line 672</button>
+          <button mat-button>Line 673</button>
+          <button mat-button>Line 674</button>
+          <button mat-button>Line 675</button>
+          <button mat-button>Line 676</button>
+          <button mat-button>Line 677</button>
+          <button mat-button>Line 678</button>
+          <button mat-button>Line 679</button>
+          <button mat-button>Line 680</button>
+          <button mat-button>Line 681</button>
+          <button mat-button>Line 682</button>
+          <button mat-button>Line 683</button>
+          <button mat-button>Line 684</button>
+          <button mat-button>Line 685</button>
+          <button mat-button>Line 686</button>
+          <button mat-button>Line 687</button>
+          <button mat-button>Line 688</button>
+          <button mat-button>Line 689</button>
+          <button mat-button>Line 690</button>
+          <button mat-button>Line 691</button>
+          <button mat-button>Line 692</button>
+          <button mat-button>Line 693</button>
+          <button mat-button>Line 694</button>
+          <button mat-button>Line 695</button>
+          <button mat-button>Line 696</button>
+          <button mat-button>Line 697</button>
+          <button mat-button>Line 698</button>
+          <button mat-button>Line 699</button>
+          <button mat-button>Line 700</button>
+          <button mat-button>Line 701</button>
+          <button mat-button>Line 702</button>
+          <button mat-button>Line 703</button>
+          <button mat-button>Line 704</button>
+          <button mat-button>Line 705</button>
+          <button mat-button>Line 706</button>
+          <button mat-button>Line 707</button>
+          <button mat-button>Line 708</button>
+          <button mat-button>Line 709</button>
+          <button mat-button>Line 710</button>
+          <button mat-button>Line 711</button>
+          <button mat-button>Line 712</button>
+          <button mat-button>Line 713</button>
+          <button mat-button>Line 714</button>
+          <button mat-button>Line 715</button>
+          <button mat-button>Line 716</button>
+          <button mat-button>Line 717</button>
+          <button mat-button>Line 718</button>
+          <button mat-button>Line 719</button>
+          <button mat-button>Line 720</button>
+          <button mat-button>Line 721</button>
+          <button mat-button>Line 722</button>
+          <button mat-button>Line 723</button>
+          <button mat-button>Line 724</button>
+          <button mat-button>Line 725</button>
+          <button mat-button>Line 726</button>
+          <button mat-button>Line 727</button>
+          <button mat-button>Line 728</button>
+          <button mat-button>Line 729</button>
+          <button mat-button>Line 730</button>
+          <button mat-button>Line 731</button>
+          <button mat-button>Line 732</button>
+          <button mat-button>Line 733</button>
+          <button mat-button>Line 734</button>
+          <button mat-button>Line 735</button>
+          <button mat-button>Line 736</button>
+          <button mat-button>Line 737</button>
+          <button mat-button>Line 738</button>
+          <button mat-button>Line 739</button>
+          <button mat-button>Line 740</button>
+          <button mat-button>Line 741</button>
+          <button mat-button>Line 742</button>
+          <button mat-button>Line 743</button>
+          <button mat-button>Line 744</button>
+          <button mat-button>Line 745</button>
+          <button mat-button>Line 746</button>
+          <button mat-button>Line 747</button>
+          <button mat-button>Line 748</button>
+          <button mat-button>Line 749</button>
+          <button mat-button>Line 750</button>
+          <button mat-button>Line 751</button>
+          <button mat-button>Line 752</button>
+          <button mat-button>Line 753</button>
+          <button mat-button>Line 754</button>
+          <button mat-button>Line 755</button>
+          <button mat-button>Line 756</button>
+          <button mat-button>Line 757</button>
+          <button mat-button>Line 758</button>
+          <button mat-button>Line 759</button>
+          <button mat-button>Line 760</button>
+          <button mat-button>Line 761</button>
+          <button mat-button>Line 762</button>
+          <button mat-button>Line 763</button>
+          <button mat-button>Line 764</button>
+          <button mat-button>Line 765</button>
+          <button mat-button>Line 766</button>
+          <button mat-button>Line 767</button>
+          <button mat-button>Line 768</button>
+          <button mat-button>Line 769</button>
+          <button mat-button>Line 770</button>
+          <button mat-button>Line 771</button>
+          <button mat-button>Line 772</button>
+          <button mat-button>Line 773</button>
+          <button mat-button>Line 774</button>
+          <button mat-button>Line 775</button>
+          <button mat-button>Line 776</button>
+          <button mat-button>Line 777</button>
+          <button mat-button>Line 778</button>
+          <button mat-button>Line 779</button>
+          <button mat-button>Line 780</button>
+          <button mat-button>Line 781</button>
+          <button mat-button>Line 782</button>
+          <button mat-button>Line 783</button>
+          <button mat-button>Line 784</button>
+          <button mat-button>Line 785</button>
+          <button mat-button>Line 786</button>
+          <button mat-button>Line 787</button>
+          <button mat-button>Line 788</button>
+          <button mat-button>Line 789</button>
+          <button mat-button>Line 790</button>
+          <button mat-button>Line 791</button>
+          <button mat-button>Line 792</button>
+          <button mat-button>Line 793</button>
+          <button mat-button>Line 794</button>
+          <button mat-button>Line 795</button>
+          <button mat-button>Line 796</button>
+          <button mat-button>Line 797</button>
+          <button mat-button>Line 798</button>
+          <button mat-button>Line 799</button>
+          <button mat-button>Line 800</button>
+          <button mat-button>Line 801</button>
+          <button mat-button>Line 802</button>
+          <button mat-button>Line 803</button>
+          <button mat-button>Line 804</button>
+          <button mat-button>Line 805</button>
+          <button mat-button>Line 806</button>
+          <button mat-button>Line 807</button>
+          <button mat-button>Line 808</button>
+          <button mat-button>Line 809</button>
+          <button mat-button>Line 810</button>
+          <button mat-button>Line 811</button>
+          <button mat-button>Line 812</button>
+          <button mat-button>Line 813</button>
+          <button mat-button>Line 814</button>
+          <button mat-button>Line 815</button>
+          <button mat-button>Line 816</button>
+          <button mat-button>Line 817</button>
+          <button mat-button>Line 818</button>
+          <button mat-button>Line 819</button>
+          <button mat-button>Line 820</button>
+          <button mat-button>Line 821</button>
+          <button mat-button>Line 822</button>
+          <button mat-button>Line 823</button>
+          <button mat-button>Line 824</button>
+          <button mat-button>Line 825</button>
+          <button mat-button>Line 826</button>
+          <button mat-button>Line 827</button>
+          <button mat-button>Line 828</button>
+          <button mat-button>Line 829</button>
+          <button mat-button>Line 830</button>
+          <button mat-button>Line 831</button>
+          <button mat-button>Line 832</button>
+          <button mat-button>Line 833</button>
+          <button mat-button>Line 834</button>
+          <button mat-button>Line 835</button>
+          <button mat-button>Line 836</button>
+          <button mat-button>Line 837</button>
+          <button mat-button>Line 838</button>
+          <button mat-button>Line 839</button>
+          <button mat-button>Line 840</button>
+          <button mat-button>Line 841</button>
+          <button mat-button>Line 842</button>
+          <button mat-button>Line 843</button>
+          <button mat-button>Line 844</button>
+          <button mat-button>Line 845</button>
+          <button mat-button>Line 846</button>
+          <button mat-button>Line 847</button>
+          <button mat-button>Line 848</button>
+          <button mat-button>Line 849</button>
+          <button mat-button>Line 850</button>
+          <button mat-button>Line 851</button>
+          <button mat-button>Line 852</button>
+          <button mat-button>Line 853</button>
+          <button mat-button>Line 854</button>
+          <button mat-button>Line 855</button>
+          <button mat-button>Line 856</button>
+          <button mat-button>Line 857</button>
+          <button mat-button>Line 858</button>
+          <button mat-button>Line 859</button>
+          <button mat-button>Line 860</button>
+          <button mat-button>Line 861</button>
+          <button mat-button>Line 862</button>
+          <button mat-button>Line 863</button>
+          <button mat-button>Line 864</button>
+          <button mat-button>Line 865</button>
+          <button mat-button>Line 866</button>
+          <button mat-button>Line 867</button>
+          <button mat-button>Line 868</button>
+          <button mat-button>Line 869</button>
+          <button mat-button>Line 870</button>
+          <button mat-button>Line 871</button>
+          <button mat-button>Line 872</button>
+          <button mat-button>Line 873</button>
+          <button mat-button>Line 874</button>
+          <button mat-button>Line 875</button>
+          <button mat-button>Line 876</button>
+          <button mat-button>Line 877</button>
+          <button mat-button>Line 878</button>
+          <button mat-button>Line 879</button>
+          <button mat-button>Line 880</button>
+          <button mat-button>Line 881</button>
+          <button mat-button>Line 882</button>
+          <button mat-button>Line 883</button>
+          <button mat-button>Line 884</button>
+          <button mat-button>Line 885</button>
+          <button mat-button>Line 886</button>
+          <button mat-button>Line 887</button>
+          <button mat-button>Line 888</button>
+          <button mat-button>Line 889</button>
+          <button mat-button>Line 890</button>
+          <button mat-button>Line 891</button>
+          <button mat-button>Line 892</button>
+          <button mat-button>Line 893</button>
+          <button mat-button>Line 894</button>
+          <button mat-button>Line 895</button>
+          <button mat-button>Line 896</button>
+          <button mat-button>Line 897</button>
+          <button mat-button>Line 898</button>
+          <button mat-button>Line 899</button>
+          <button mat-button>Line 900</button>
+          <button mat-button>Line 901</button>
+          <button mat-button>Line 902</button>
+          <button mat-button>Line 903</button>
+          <button mat-button>Line 904</button>
+          <button mat-button>Line 905</button>
+          <button mat-button>Line 906</button>
+          <button mat-button>Line 907</button>
+          <button mat-button>Line 908</button>
+          <button mat-button>Line 909</button>
+          <button mat-button>Line 910</button>
+          <button mat-button>Line 911</button>
+          <button mat-button>Line 912</button>
+          <button mat-button>Line 913</button>
+          <button mat-button>Line 914</button>
+          <button mat-button>Line 915</button>
+          <button mat-button>Line 916</button>
+          <button mat-button>Line 917</button>
+          <button mat-button>Line 918</button>
+          <button mat-button>Line 919</button>
+          <button mat-button>Line 920</button>
+          <button mat-button>Line 921</button>
+          <button mat-button>Line 922</button>
+          <button mat-button>Line 923</button>
+          <button mat-button>Line 924</button>
+          <button mat-button>Line 925</button>
+          <button mat-button>Line 926</button>
+          <button mat-button>Line 927</button>
+          <button mat-button>Line 928</button>
+          <button mat-button>Line 929</button>
+          <button mat-button>Line 930</button>
+          <button mat-button>Line 931</button>
+          <button mat-button>Line 932</button>
+          <button mat-button>Line 933</button>
+          <button mat-button>Line 934</button>
+          <button mat-button>Line 935</button>
+          <button mat-button>Line 936</button>
+          <button mat-button>Line 937</button>
+          <button mat-button>Line 938</button>
+          <button mat-button>Line 939</button>
+          <button mat-button>Line 940</button>
+          <button mat-button>Line 941</button>
+          <button mat-button>Line 942</button>
+          <button mat-button>Line 943</button>
+          <button mat-button>Line 944</button>
+          <button mat-button>Line 945</button>
+          <button mat-button>Line 946</button>
+          <button mat-button>Line 947</button>
+          <button mat-button>Line 948</button>
+          <button mat-button>Line 949</button>
+          <button mat-button>Line 950</button>
+          <button mat-button>Line 951</button>
+          <button mat-button>Line 952</button>
+          <button mat-button>Line 953</button>
+          <button mat-button>Line 954</button>
+          <button mat-button>Line 955</button>
+          <button mat-button>Line 956</button>
+          <button mat-button>Line 957</button>
+          <button mat-button>Line 958</button>
+          <button mat-button>Line 959</button>
+          <button mat-button>Line 960</button>
+          <button mat-button>Line 961</button>
+          <button mat-button>Line 962</button>
+          <button mat-button>Line 963</button>
+          <button mat-button>Line 964</button>
+          <button mat-button>Line 965</button>
+          <button mat-button>Line 966</button>
+          <button mat-button>Line 967</button>
+          <button mat-button>Line 968</button>
+          <button mat-button>Line 969</button>
+          <button mat-button>Line 970</button>
+          <button mat-button>Line 971</button>
+          <button mat-button>Line 972</button>
+          <button mat-button>Line 973</button>
+          <button mat-button>Line 974</button>
+          <button mat-button>Line 975</button>
+          <button mat-button>Line 976</button>
+          <button mat-button>Line 977</button>
+          <button mat-button>Line 978</button>
+          <button mat-button>Line 979</button>
+          <button mat-button>Line 980</button>
+          <button mat-button>Line 981</button>
+          <button mat-button>Line 982</button>
+          <button mat-button>Line 983</button>
+          <button mat-button>Line 984</button>
+          <button mat-button>Line 985</button>
+          <button mat-button>Line 986</button>
+          <button mat-button>Line 987</button>
+          <button mat-button>Line 988</button>
+          <button mat-button>Line 989</button>
+          <button mat-button>Line 990</button>
+          <button mat-button>Line 991</button>
+          <button mat-button>Line 992</button>
+          <button mat-button>Line 993</button>
+          <button mat-button>Line 994</button>
+          <button mat-button>Line 995</button>
+          <button mat-button>Line 996</button>
+          <button mat-button>Line 997</button>
+          <button mat-button>Line 998</button>
+          <button mat-button>Line 999</button>
+        </ng-container>
+      </mat-expansion-panel>
+      <mat-expansion-panel></mat-expansion-panel>
+    </mat-accordion> -->
   </ng-container>
 </ng-container>
diff --git a/src/dev-app/performance/performance-demo.ts b/src/dev-app/performance/performance-demo.ts
index 7e0b17bc4b68..cb6b84479b97 100644
--- a/src/dev-app/performance/performance-demo.ts
+++ b/src/dev-app/performance/performance-demo.ts
@@ -20,6 +20,7 @@ import {MatSelectModule} from '@angular/material/select';
 import {MatTableDataSource, MatTableModule} from '@angular/material/table';
 
 import {take} from 'rxjs/operators';
+import {MatExpansionModule} from '@angular/material/expansion';
 
 @Component({
   selector: 'performance-demo',
@@ -31,6 +32,7 @@ import {take} from 'rxjs/operators';
     FormsModule,
     MatButtonModule,
     MatDividerModule,
+    MatExpansionModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
@@ -44,10 +46,10 @@ export class PerformanceDemo implements AfterViewInit {
   show = false;
 
   /** The number of times metrics will be gathered. */
-  sampleSize = 100;
+  sampleSize = 1;
 
   /** The number of components being rendered. */
-  componentCount = 100;
+  componentCount = 1;
 
   /** A flat array of every sample recorded. */
   allSamples: number[] = [];
@@ -67,6 +69,8 @@ export class PerformanceDemo implements AfterViewInit {
   /** Used in an ngFor to render the desired number of comonents. */
   componentArray = [].constructor(this.componentCount);
 
+  options = Array.from({length: 1000}).map((_, i) => ({text: `Option ${i}`, value: i}));
+
   /** The standard deviation of the recorded samples. */
   get stdev(): number | undefined {
     if (!this.allSamples.length) {
diff --git a/src/material/core/option/index.ts b/src/material/core/option/index.ts
index 96da5f1c97fc..8a0928485c8d 100644
--- a/src/material/core/option/index.ts
+++ b/src/material/core/option/index.ts
@@ -11,13 +11,13 @@ import {CommonModule} from '@angular/common';
 import {MatRippleModule} from '../ripple/index';
 import {MatPseudoCheckboxModule} from '../selection/index';
 import {MatCommonModule} from '../common-behaviors/common-module';
-import {MatOption} from './option';
+import {MatLazyOption, MatOption} from './option';
 import {MatOptgroup} from './optgroup';
 
 @NgModule({
   imports: [MatRippleModule, CommonModule, MatCommonModule, MatPseudoCheckboxModule],
-  exports: [MatOption, MatOptgroup],
-  declarations: [MatOption, MatOptgroup],
+  exports: [MatOption, MatLazyOption, MatOptgroup],
+  declarations: [MatOption, MatLazyOption, MatOptgroup],
 })
 export class MatOptionModule {}
 
diff --git a/src/material/core/option/option-parent.ts b/src/material/core/option/option-parent.ts
index 3cb515aedd97..b47c4dc4a934 100644
--- a/src/material/core/option/option-parent.ts
+++ b/src/material/core/option/option-parent.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InjectionToken} from '@angular/core';
+import {EventEmitter, InjectionToken} from '@angular/core';
 
 /**
  * Describes a parent component that manages a list of options.
@@ -17,6 +17,8 @@ export interface MatOptionParentComponent {
   disableRipple?: boolean;
   multiple?: boolean;
   inertGroups?: boolean;
+  valueChange: EventEmitter<any>;
+  openedChange: EventEmitter<boolean>;
 }
 
 /**
diff --git a/src/material/core/option/option.ts b/src/material/core/option/option.ts
index 97e386d9599d..574957d40ad6 100644
--- a/src/material/core/option/option.ts
+++ b/src/material/core/option/option.ts
@@ -8,7 +8,7 @@
 
 import {FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {ENTER, hasModifierKey, SPACE} from '@angular/cdk/keycodes';
+import {ENTER, hasModifierKey, P, SPACE} from '@angular/cdk/keycodes';
 import {
   Component,
   ViewEncapsulation,
@@ -25,10 +25,16 @@ import {
   EventEmitter,
   QueryList,
   ViewChild,
+  TemplateRef,
+  ViewContainerRef,
+  NgZone,
+  Injectable,
 } from '@angular/core';
-import {Subject} from 'rxjs';
+import {Observable, Subject, Subscription, fromEvent, observable} from 'rxjs';
 import {MatOptgroup, MAT_OPTGROUP, _MatOptgroupBase} from './optgroup';
 import {MatOptionParentComponent, MAT_OPTION_PARENT_COMPONENT} from './option-parent';
+import {finalize, share, takeUntil} from 'rxjs/operators';
+import {DOCUMENT} from '@angular/common';
 
 /**
  * Option IDs need to be unique across components, so this counter exists outside of
@@ -284,6 +290,178 @@ export class MatOption<T = any> extends _MatOptionBase<T> {
   }
 }
 
+// @Directive({selector: '[lazy]'})
+// export class MatLazyOption {
+//   @Input()
+//   set lazy(value: boolean) {
+//     if (!value && !this._rendered.closed) {
+//       this._render();
+//     }
+//   }
+
+//   private readonly _rendered = new Subject<void>();
+
+//   constructor(
+//     private _ngZone: NgZone,
+//     private templateRef: TemplateRef<any>,
+//     private viewContainer: ViewContainerRef,
+//     @Optional() @Inject(MAT_OPTION_PARENT_COMPONENT) private parent: MatOptionParentComponent,
+//   ) {
+//     this.listen();
+//   }
+
+//   ngOnDestroy() {
+//     this._ngZone.runOutsideAngular(() => {
+//       this._rendered.next();
+//       this._rendered.complete();
+//     });
+//   }
+
+//   private listen(): void {
+//     this._ngZone.runOutsideAngular(() => {
+//       this.parent.openedChange.pipe(takeUntil(this._rendered)).subscribe(open => {
+//         if (open) {
+//           this._render();
+//         }
+//       });
+//     });
+//   }
+
+//   private _render(): void {
+//     if (!this._rendered.closed) {
+//       this.viewContainer.createEmbeddedView(this.templateRef);
+//       this._ngZone.runOutsideAngular(() => {
+//         this._rendered.next();
+//         this._rendered.complete();
+//       });
+//     }
+//   }
+// }
+
+@Directive({selector: '[lazy]'})
+export class MatLazyOption {
+  @Input('lazyTrigger') trigger: HTMLElement;
+
+  @Input()
+  set lazy(isLazy: boolean) {
+    this._lazy = isLazy;
+    if (!isLazy) {
+      this._render();
+    }
+  }
+  get lazy(): boolean {
+    return this._lazy;
+  }
+  private _lazy = true;
+
+  private _focusSubscription?: Subscription;
+  private _mouseoverSubscription?: Subscription;
+
+  constructor(
+    private _ngZone: NgZone,
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    private listener: GlobalListener,
+  ) {}
+
+  ngAfterViewInit() {
+    if (this.lazy) {
+      this.listen();
+    }
+  }
+
+  ngOnDestroy() {
+    this._ngZone.runOutsideAngular(() => {
+      this._focusSubscription?.unsubscribe();
+      this._mouseoverSubscription?.unsubscribe();
+    });
+  }
+
+  private listen(): void {
+    this._ngZone.runOutsideAngular(() => {
+      this._focusSubscription = this.listener.listen('focus', this.trigger, () => {
+        this._render();
+      });
+      this._mouseoverSubscription = this.listener.listen('mouseover', this.trigger, () => {
+        this._render();
+      });
+    });
+  }
+
+  private _render(): void {
+    if (!this._focusSubscription?.closed) {
+      console.log('render!');
+      this.viewContainer.createEmbeddedView(this.templateRef);
+      this._ngZone.runOutsideAngular(() => {
+        this._focusSubscription?.unsubscribe();
+        this._mouseoverSubscription?.unsubscribe();
+      });
+    }
+  }
+}
+
+/**
+ * Provides a global listener for all events that occur on the document.
+ */
+@Injectable({providedIn: 'root'})
+export class GlobalListener implements OnDestroy {
+  private _elementToTypeToObservable = new Map<
+    HTMLElement | Document,
+    Map<keyof DocumentEventMap, Observable<Event>>
+  >();
+
+  /** The notifier that triggers the global event observables to stop emitting and complete. */
+  private _destroyed = new Subject();
+
+  constructor(private _ngZone: NgZone) {}
+
+  ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
+    this._elementToTypeToObservable.clear();
+  }
+
+  /**
+   * Appends an event listener for events whose type attribute value is type.
+   * The callback argument sets the callback that will be invoked when the event is dispatched.
+   */
+  listen(
+    type: keyof DocumentEventMap,
+    element: HTMLElement | Document,
+    listener: (ev: Event) => any,
+  ): Subscription {
+    // This is the first listener on this element. Instantiate the type-to-observable map.
+    if (!this._elementToTypeToObservable.has(element)) {
+      this._elementToTypeToObservable.set(element, new Map());
+    }
+
+    // This is the first listener of this type for this element. Instantiate the observable.
+    if (!this._elementToTypeToObservable.get(element)!.get(type)) {
+      const typeToObservable = this._elementToTypeToObservable.get(element)!;
+      typeToObservable.set(type, this._createGlobalEventObservable(element, type));
+    }
+
+    return this._ngZone.runOutsideAngular(() =>
+      this._elementToTypeToObservable
+        .get(element)!
+        .get(type)!
+        .subscribe((event: Event) => listener(event)),
+    );
+  }
+
+  /** Creates an observable that emits all events of the given type. */
+  private _createGlobalEventObservable(
+    element: HTMLElement | Document,
+    type: keyof DocumentEventMap,
+  ) {
+    return fromEvent(element, type, {passive: true, capture: true}).pipe(
+      takeUntil(this._destroyed),
+      finalize(() => this._elementToTypeToObservable.get(element)?.delete(type)),
+      share(),
+    );
+  }
+}
+
 /**
  * Counts the amount of option group labels that precede the specified option.
  * @param optionIndex Index of the option at which to start counting.