Stack Overflow
Stack Overflow

Questions tagged [ng-deep]

20 questions
4
votes
1 answer

How to apply styling to shadow root element in angular

I am using angular 12 and I want to apply some styling to input field which is a shadow root element of group-search-field element. I tried using ng-deep like below but it didn't work :host ::ng-deep input { background: red…
SamD
  • 185
  • 5
  • 22
2
votes
1 answer

Need to increase the max-width of modal when the route click

I want to do if the logs click I need to increase the modal max-width to 80% and other routes need to set max-width to 50%. I use the ::ng-deep because their styles come from bootstrap. therefore I need to override those. but this one is not working…
Vihan Gammanpila
  • 346
  • 4
  • 10
2
votes
7 answers

How to access CSS of Angular child component with ::ng-deep

I'm trying to access and edit the CSS class of a child component using ::ng-deep. I have tried different versions of the provided code below but I was unable to access the CSS. The structure of the HTML component is as follows: This is how I'm…
Vasko Vasilev
  • 554
  • 1
  • 10
  • 25
1
vote
0 answers

::ng-deep getting applied to parent components

I was using ::ng-deep to apply classes to the child components but the class is also applied to the parent component of that component.How can i restrict this behaviour? ::ng-deep label { width: 164px; height: 22px; font-family:…
Barnit Basnet
  • 11
  • 2
1
vote
0 answers

ANGULAR - ng-deep SCSS not working overnight

I have my application right here : https://github.com/edissyum/opencapture/ Yesterday all was okay, but today I notice all my ::ng-deep SCSS directive stopped working… For example, the branch dev_v2 is okay but dev_nch is not. For example, the…
Nathan30
  • 689
  • 2
  • 8
  • 29
1
vote
1 answer

Cant use host with ng deep to style Angular Material Paginator?

So I have a Angular Material Paginator, which looks like this: And this is how I use it in my html:
IonicMan
  • 743
  • 1
  • 12
  • 31
1
vote
2 answers

What is the the scope of ::ng-deep?

A lot of our site is structured as such: component component CSS component template child component We often need to style the child component differently based on which parent component it was in. This is annoying, of course, but was…
DA.
  • 39,848
  • 49
  • 150
  • 213
1
vote
2 answers

Angular two ng-deep on the same element from different components

I need to know how it is established the precedence between ::ng-deep in angular. I have two different ::ng-deep from two different componets changing the css of the same element. How can I give precedence to one of them? I would like to not use…
Davide
  • 185
  • 3
  • 22
1
vote
1 answer

attr binding is not working while using ::ng-deep on mat-toggle in angular

I want to change the 'content' property of a CSS class which is getting applied on Slide-Toggle of angular. this is my SCSS - :host .red { .mat-toggle { ::ng-deep .mat-slide-toggle-bar{ &::after{ content: attr(data-active);; …
Prafull Dhadkar
  • 891
  • 2
  • 10
  • 23
1
vote
3 answers

Styling child components template from parent component css angular

How to force CSS of child component from parent using ::ng-deep or something? I have parent component where I put child component: ....parent.component... .....parent.component...... Not inside that likes component there is …
David
  • 4,332
  • 13
  • 54
  • 93
0
votes
1 answer

Reducing arrow size of mat-paginator without using ng-deep

I have used mat-paginator in my project and wanted to reduce size of pagination arrows without using ng-deep screenshot of mat-paginator result Currently I am able to do it with following code: ::ng-deep .mat-paginator-icon { width: 3vh; …
Saad Ali
  • 1
  • 1
0
votes
1 answer

Class inherit other css styling - ng-deep problem

I have a problem, a button that belongs to an InfoWindow component. The button isn't created in the HTML part of the code but is called whenever the card component is open. I use this InfoCard in two places of the application, and in each component,…
Haru
  • 83
  • 9
0
votes
1 answer

::ng-deep only works without :host when styling Angular Material Paginator

So, usually I never had problems styling a css class with :host ::ng-deep but I am currently customizing an Angular Material Paginator and the only way that currently works, is like this: ::ng-deep .cdk-overlay-pane { bottom: 73.7px…
IonicMan
  • 743
  • 1
  • 12
  • 31
0
votes
1 answer

Angular how to use ng-deep but still affect only one component?

In an Angular application, using Angular Material for themes, I'm trying to update a css class in a component when my theme changes to dark. This would work, but it would affect all components, loosing the encapsulation: ::ng-deep .dark-theme { //…
Leccho
  • 467
  • 5
  • 23
0
votes
1 answer

Set color of matInput outline dynamically

I've got a basic Angular Material input field like this:
user17087006
1
2