Learn how to apply CSS styles from one component to another in Angular

I am attempting to modify the background color of a wrapper from a different component. I tried using ::ng-deep but it's not functioning correctly. For the mauto component, the background should be a solid block color. For the vgud component, the background should be green.

mauto.component.css:

::ng-deep.wrapper {
  background: red !important;
}

vgud.component.css:

::ng-deep.wrapper {
  background: green !important;
}

app.component.html:

<div class="wrapper">
  <app-mauto></app-mauto> 
</div>

<div class="wrapper"> 
  <app-vgud></app-vgud>
</div>

app.component.css:

.wrapper{
  width:600px;
  height:240px;
  background: black;
}

Demo: https://stackblitz.com/edit/angular-ivy-qdhsyh?file=src%2Fapp%2Fapp.component.html

Answer №1

even though it may seem like a viable option

::ng-deep.wrapper:has(app-mauto) {
  background: red !important;
}

it is definitely not the best solution.

The proper approach would be to define styles within the component that contains the elements requiring styling

.wrapper {
  ...
  &--mauto { // no need for ng-deep
    background: red !important;
  }
}


------ 
<div class="wrapper wrapper--mauto">
  <app-mauto></app-mauto> 
</div>
....

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Substitute the existing path with an alternative route

To move to a different route in Angular 2.0, we typically use route.navigate( [ 'routeName' ] ). However, this approach adds the current route to the browser's history. Is there a technique available to substitute the current route in the ...

Tracking button clicks on Angular Material using Google Analytics through Google Tag Manager

I'm currently utilizing the Universal Analytics tag within Google Tag Manager to monitor user interactions. I'm looking to establish click listeners in GTM that will trigger when specific buttons on the page are clicked. These buttons are Angular ...

The CSS does not get applied to the returned element in Next JS

When I create a function to return a DOM element with an associated className, the local style doesn't seem to be applied. For example: export default function thing(){ const elem = function(){ return (<div className="myCss">Hello< ...

Maintaining the original size of the fill texture when resizing a path in SVG

I have created an SVG pattern using the following code: <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="circles-1_4" patternUnits="userSpaceOnUse" width="10" height="10"> & ...

Connecting static CSS files to Django

I am fairly new to working with Django and I am having trouble linking CSS to my project. I have included the necessary static settings in my app's configuration, which allows me to access images in the static folder without any issues. However, when ...

a tag's functionality remains unchanged by its class association

In my Laravel project, I am attempting to create an active class for a link tag, but the class is not affecting the link. Below is the code snippet from my blade file: <li class="{{ (request()->is('categories*')) ? 'side-active&ap ...

Tips for saving the generated POST request ID for future use in another function

I am facing a challenge where I want to use the ID of a newly created Order as the OrderId for an OrderLine that needs to be created immediately after. After creating the Order, if I log the orderId INSIDE THE SUBSCRIBE METHOD, it shows the correct value. ...

What is the process for changing the name of an element in Angular 2?

I'm feeling a bit lost here ... I need to implement the feature that allows users to edit the name of an element by simply clicking on a button. These elements are all stored in the Storage system. How can I achieve this in my current setup? File: ho ...

Eliminate inner margin from the canvas of a bar chart created with ChartJS

I am looking to use Chart.js to create a single stacked bar chart that visualizes progress towards a specific financial goal. I have added a dotted line on top of the chart to represent this goal amount. The issue I am facing is that there is unwanted pad ...

Angular 2.0 in conjunction with D3.js does not style SVG elements using CSS

Currently, I am utilizing Angular 2.0 TypeScript along with the d3.js library to create graphics. My main focus is on applying CSS to the axis (especially shape-rendering: crispEdges;). Do you have any suggestions? Check out the code below: var vis = d3 ...

Is it possible to apply varying CSS styles depending on the parent element's class?

Apologies for the poorly worded question, but I am struggling to find the right terms to convey my query. Let me attempt to explain... Is it feasible to apply different css styles based on the classes assigned to the containing element? For example: < ...

Trouble with saving the positioning after drag and drop

I am currently facing an issue with my drag-and-drop script where the coordinates of positioned relative divs are not being saved in the same position when I reload. These divs are contained within a container with specific height and width, restricting t ...

A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Currently, I have created a component template using Bootstrap that looks like this: <div class="container"> <div class="row my-4"> <div class="col-md-12 d-flex justify-content-center"> <h2> ...

The problem of SVG rendering order requires a solution that does not rely on javascript

I am new to experimenting with inline svg, and I wanted to share my code: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="350"> <defs> <style> .ring { transform-origin: 175px 175px; } ...

Steps for building a Bootstrap grid of thumbnails

I need to display an unknown number of thumbs. Below is a sample of the HTML rendered: <div class="row-fluid"> <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> &l ...

ActivatedRoute not receiving the parameter value

Having trouble retrieving the parameter from the route and passing it to a function within the component which then communicates with the service. Initially tried placing the parameter retrieval in the NgInit but moved it to the constructor, still no succ ...

Optimizing Angular: Configuring baseHref for assets during development with SSR

During production, we set the base href using the following command: ng build --base-href /app/ This configuration works smoothly as our assets are also accessible at /app/assets/, just as expected. However, I have been facing difficulties achieving the ...

Troubleshooting the challenges with jQuery's next().addClass() and prev().addClass() functions

I am attempting to create a slider feature. I have four different contents that I've positioned consecutively, but made them invisible initially. I defined a class called active-client with the attribute display: flex. Using jQuery's addClass() m ...

Accessing the 8100 ionic application from any port or device other than the original one is not possible

I have successfully developed an Ionic application that runs smoothly on the browser using port 8100. However, I am encountering issues with logging in from simulator or any other port. I have implemented httpClient to fetch headers. Can someone please pro ...

Faulty Container - Excessive spacing issues

Currently enrolled in a Udemy course on Full Stack Development from scratch. The instructor often makes mistakes that require improvisation, like using <span> instead of <p> next to the sign-in. Additionally, adjustments were needed for the hei ...