Using Cypress drop down select values are not happening

Question

How can I select the dropdown values using Cypress, it is build on angular page. By default the select field is displaying as below. First option click on the drop down but not value, I have tried eq(1), eq(2)..but not working yet.

I have tried the below options in cypress but these are not working;

Option : 1

cy.get('.mat-select-value > span').eq(0).then((option)=>{
  cy.wrap(option).eq(0).click();
})

Option 2:

cy.get('.mat-select-value > span').contains("Phase 4 - Boond ").click();

// Attached the html:

Answer 1

you might want to try this:

cy.get('.mat-select-value > span').eq(0).click() // to open the drop down
cy.get('.mat-option').contains('Phase 4 - Boond').click() // to click the actual option