angular-mdc-web | Angular wrapper for Material Design Components | User Interface library

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'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?)

So, I'm using angularCLI and angular-MDC, I want to use the second color of my styles.scss. There is on site https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/top-app-bar-demo/sass this syntax mdc-top-app-bar-fill-color($color) I used and returns No mixin named mdc-top-app-bar-fill-color, below is my code:

I'm trying to get angular-mdc-web to work with the vs2017 .net core angular template. So far without luck.

• the ripple effect of the buttons are strange
• while clicking the button, the button gets completely white
• when sizing chrome, the click dimension doesn't move with it

Please have a look at the Demo-Gif: Demo Gif

According to the following Get started Tutorial: Angular MDC - Getting started

I know, the following steps destroys the bootstrap stuff. But I just want the button to work.

Question is: How do I get angular-mdc-web work with the vs2017 Angular-Template? Thanks for your help!

Here how i did my setup: VS2017 Community Edition 15.6.4

1. Menu File\New\Project...
2. ASP.NET Core Web Application

3. Select Angular

4. Edit package.json (ready for angular5 with vs2017, no bootstrap)