Tips for adding style to a child component from a parent component with multiple child components

I am faced with a situation where I have a child component in the form of a spinner that I need to display in two different places, each with its own unique style. In order to achieve this, I have attempted the following approach:

my-loading-overlay ::ng-deep .loading:after {
  top: 80px;
}

While this solution works perfectly fine for the first instance, I am now left wondering how can I modify the style for the second child component by changing the CSS property 'top' to '150px'?

Your help on this matter would be greatly appreciated. Thank you in advance.

cssangularparent-child

Answer №1

It is recommended to define your styles globally instead of using ::ng-deep, which is now deprecated. For more information, refer to https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

You can try implementing the styles like this:

<my-loading-overlay class="first"></my-loading-overlay>
<my-loading-overlay class="second"></my-loading-overlay>



my-loading-overlay {
  display: block;

  &.first {
    .loading:after {
      top: 80px;
    }
  }

  &.second {
    .loading:after {
      top: 20px;
    }
  }
}

Answer №2

Check out this solution:

Here is an example of using attributes in CSS selection:

// Add first-attr and second-attr attributes for CSS selection
<my-overlay-component first-attr></my-overlay-component>
<my-overlay-component second-attr></my-overlay-component>

my-overlay-component[first-attr] ::ng-deep .overlay:after {
  top: 80px;
}

my-overlay-component[second-attr] ::ng-deep .overlay:after {
  top: 150px;
}

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

Centralized and secure masthead

Currently, I am focusing on showcasing my portfolio at www.bbellmedia.com/mywork The specific requirement I have is to center the text 'Bryan Bell' and ensure that it remains fixed even when the user scrolls. Can anyone suggest the most effecti ...

htmlcsspositioning

Using Angular, you can incorporate a dynamic href inside interpolation by using

Looking for a way to include a redirecting link within the response of string interpolation. I am incorporating the API response value into the interpolation binding. For instance, if my response is, "This site is not working. please contact google f ...

htmlangular

Why is my link not being acknowledged by its parent <div>?

I am facing an issue where a <a> tag inside a <div> element is not being recognized properly, causing the <div> height to remain unchanged and not accommodate the link as intended. You can view my HTML/CSS code here: http://jsfiddle.net/ ...

css

What is the best way to connect or link to a HTML table row <tr>

Is there a way to trigger an alert when the user double clicks on the whole row? ...

javascripthtmlcsshtml-table

Determine the location of a character based on its index position

Is it feasible to identify the precise x and y coordinates of the character at position 24 (e.g., '-') in this overflowing multi-line text? ...

jqueryhtmlcss

Error: The function split cannot be used on the token

I encountered an unexpected error while logging in and despite my efforts over the past 2 days, I have not been able to resolve it. The API is built using Nodejs and Angular 7 is used for the frontend. I have shared some of the code snippets with the erro ...

node.jsangularjwt

Add a container element resembling a div inside a table without implementing the table layout

I am working with a table that is rendered by DataTable, and I have the requirement to dynamically append new elements inside the table like this: The dark grey area represents the new DOM elements that need to be inserted dynamically. The first row cont ...

javascripthtmlcss

Encountering "Undefined error" while using @ViewChildren in Angular Typescript

In my application, I am facing an issue with a mat-table that displays data related to Groups. The table fetches more than 50 rows of group information from a data source, but initially only loads the first 14 rows until the user starts scrolling down. Alo ...

angulartypescriptundefinedviewchildren

Steps for positioning a play button at the center of all images

index.html - here is the index.html file code containing all the necessary html code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width ...

htmlcssflexboxcss-selectors

Another class is overriding the border of the text-box

I'm facing a challenge in customizing the material ui css. Specifically, I want to set the border color of a textbox to red. The issue arises when the bottom border gets overwritten. Upon investigation, I discovered that the culprit is the class MuiIn ...

javascripthtmlcssreactjsmaterial-ui

Achieving Left and Right Alignment of Navigation Elements using Flex Basis in Chakra UI with Next JS

For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challeng ...

cssreactjsnext.jsflexboxchakra-ui

What could be causing the malfunction of the .setAttribute() and .removeAttribute functions in my JavaScript program?

Below is a flashcard game I have developed: Once a user enters the correct answer in the text box, "Correct!" is expected to be displayed in bold green font. The CSS attributes are then supposed to be removed shortly after. Here is the HTML code for the i ...

javascripthtmlcss

Showing submenu items in a jQuery menu system without causing the top level menu item to expand and fit

I currently have a menu system in place, which is quite simple, but there is an issue where the submenu items are larger than the top-level items. When hovering over the submenu items, the top-level menu expands to accommodate them. Is there a way to keep ...

javascriptjqueryhtmlcss

Determining the Suitability of an Angular2 Module for Importing into a Shared Module

Is there a specific method to determine if a module qualifies as a provider or if it exports other modules that act as providers; in order to be considered for inclusion in the "shared" module? According to angular.io: "The SharedModule should not have p ...

angular

Having difficulty configuring my Angular .NET Core 2.1 web application correctly on GoDaddy

After deploying my netcore 2.1 Angular application using Visual Studio FTP profile to my Godaddy Host, I encountered a few issues. The deployment included the following contents: ClientApp folder wwwroot appsettings.json application.dlls web.config In t ...

angularweb-deployment

CSS prefers to remain within its original controller and does not want to be uploaded from any other source

My webpage includes headers and footers with CSS in them. Strangely, when I load the view using one controller, the CSS displays correctly. But when I try to load the same view using a different controller, the CSS doesn't appear at all. What could b ...

phpcsscodeigniterframeworks

Icons in small circles surrounding text in HTML

I am trying to add a small icon or image next to my HTML code on a webpage, but I can't seem to get it to display properly. Currently, the image is showing above the code instead of beside it. How can I adjust my code to achieve this? Below is the cod ...

htmlcsswebfrontendbootstrap-4

Having trouble with the Jquery animate() function?

I recently developed a jQuery animation where clicking on specific buttons triggers a hidden div to slide from left: -650px; to left: 0px;. You can see an example by clicking here. However, I've noticed that when another button is clicked to reveal a ...

javascriptjquerycss

PHP does not provide any error when an update on a database row fails

When I try to update values retrieved from the database into a form on submission, the process fails without any error message. Below is the PHP code snippet: <?php session_start(); $username=$_SESSION['uname']; $cn=mysqli_connect("loc ...

phphtmlcssbootstrap-4

Generate gzipped files using Angular CLI

I am attempting to populate a dist folder with the standard files along with their .gz versions. To achieve this, I used ng eject to obtain the webpack.config.js file in order to integrate the compression plugin from https://github.com/webpack-contrib/comp ...

cssangularwebpackangular-cli