[SOLVED] How to use ng-deep at media query syntax inside?

Issue

I need to bind the CSS class property value dynamically for desktop. i have using ng-deep in angular. if i use the ng-deep inside the @media query is not working.

i have tried below code in css

 @media (min-width: 1025px) and (max-width: 1280px) {

   ::ng-deep.bs-datepicker {
    left: var(--my-var) !important;
   }

  }

ng-deep CSS is not working at media query syntax. where i need to place or what i need to do?

Solution

::ng-deep does work inside a media query… something else must be off for your specific case;

relevant CSS in typeahead-basic.ts:

  ::ng-deep .dropdown-menu.show { background:lightblue;}
  ::ng-deep .dropdown-item { color:red !important; }
  @media screen and (max-width:768px){
    ::ng-deep .dropdown-menu.show { background:lightgreen;}
    ::ng-deep .dropdown-item { color:orange !important; }
  }

complete working stackblitz here

update: for your shared stackblitz, the correct syntax is below… you gotta check your page on the widths between 1025px and 1280px and you will see the effect in action:

@media  (min-width:1025px) and (max-width: 1280px) {

::ng-deep .third-party-content{
  left:30px;
  position: absolute;
  color:red;
}

}

Answered By – Akber Iqbal

Answer Checked By – Mildred Charles (BugsFixing Admin)