angular-md | Angular directive to render Markdown text

I created a new angular projec, I did the steps here: https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/getting-started

Why does my mdc-select look like this

instead of this

Button looks fine.

After updating my WebAPI project to Angular 9 and Typescript 3.8.3, I get errors upon building my application:

Then I tried executing some commands, deleting node_modules and executing npm install, I tried updating my dependencies so I ended up with Angular preview version (10).

I still have those errors and I'm not sure what should I do next to fix this.

Here is tsconfig.json:

I'm using: Angular 4.0 and for material: https://github.com/mseemann/angular2-mdl

extension: http://mseemann.io/angular2-mdl-ext/select

The issue is using the Select Component, it always stay open. Doesn't look like it's the proper behaviour.

Looks like this:

Here's the Demo App:

The question is as given in the title, ie, to access element whose parent is hidden. The problem is that, as per the cypress.io docs :

An element is considered hidden if:

• Its width or height is 0.
• Its CSS property (or ancestors) is visibility: hidden.
• Its CSS property (or ancestors) is display: none.
• Its CSS property is position: fixed and it’s offscreen or covered up.

But the code that I am working with requires me to click on an element whose parent is hidden, while the element itself is visible.

So each time I try to click on the element, it throws up an error reading :

CypressError: Timed out retrying: expected '< mdc-select-item#mdc-select-item-4.mdc-list-item>' to be 'visible'

This element '< mdc-select-item#mdc-select-item-4.mdc-list-item>' is not visible because its parent '< mdc-select-menu.mdc-simple-menu.mdc-select__menu>' has CSS property: 'display: none'

The element I am working with is a dropdown item, which is written in pug. The element is a component defined in angular-mdc-web, which uses the mdc-select for the dropdown menu and mdc-select-item for its elements (items) which is what I have to access.

A sample code of similar structure :

I need to change the array key names into others specified by users, using drop down lists as reactive form controls.

Lets say I have the following array:

So i try to make a "Service" which helps me with some small tasks,

my NavigationService.js has following function:

This is my project structure:

I have mat-radio-group that has more mat-radio-group within it. I have created a stackblitz here https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts

In the example when the page loads, I want to show 'ledger' radio option selected along with value1 below it selected as default. If I update the radio button to 'available', I need to select the 'value 1' below 'available' radio.

The code works fine for all cases, except the first case wherein I have to show default selection.

Can some one point out where I am going wrong?

I'm new to Angular and I'm a bit confused whether the implementation of the angular components reflects the recent (2018) material design system changes or they are just updating the old version of the system?

the Angular components version is been updated: https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/home

But it seems to me that the Angular Dart components version is still using the old system: https://dart-lang.github.io/angular_components/

Am I missing something or the Angular components will not get the latest material design updates? (I think the Angular team is using foundations and adapters to adapt the vanilla web version of the updated material design system, is the Angular Dart team doing the same?)