What are some strategies for customizing the appearance of child components within a parent component?

I have a scenario where I am using parent and child components. When I use the HTML in another component, I also apply my CSS.

For example, in my parent component:

HTML

<div class="chips">
    <p class="tags">Tag 1</p>
</div>

CSS

.chips .tags {
   color:red;
}

and everything works fine. However, when I do this with another component:

<div class="chips">
    <app-child></app-child>
</div>

HTML FROM CHILD COMPONENT

<p class="tags">Tag 1</p>

the text doesn't appear in red as expected.

How can I resolve this issue?

htmlcssangularangular-components

Answer №1

You have the option to place the .css file in a common styles.css that is shared across the application.

Alternatively, you can utilize ::ng-deep, although personally I am not a big fan of this approach.

Another technique is to use CSS variables as demonstrated in Netanel Basal's insightful article here

//in your parent
.chips app-child{
    --bgcolor:red;
}

//in your child
.tags
{
   background-color:var(--bgcolor,pink) //<--use a "pink" by default
}

For a demonstration, check out this sample example

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

Stop users from being able to copy text on their smartphones' internet browsers

I am currently working on creating a competitive typing speed challenge using JavaScript. Participants are required to type all the words they see from a div into a textarea. In order to prevent cheating, such as copying the words directly from the div, o ...

javascriptphpjqueryhtmlcss

The use of pattern fill in fabric.js is causing a decrease in rendering speed

I recently attempted to create a clip mask effect on a large image by using the picture as a pattern and setting it to the svg paths that support the desired shape. You can view the slow-loading jsfiddle example here: http://jsfiddle.net/minzojian/xwurbw ...

javascripthtmlsvgfabricjs

Discovering back-to-back days

I am currently working on a PHP script that utilizes a MySQL database to calculate various climatological parameters based on different variables. While I have successfully completed most of the calculations, there is one particular task that I am struggli ...

phphtmlmysql

Using an asynchronous for loop to assign a background image to a div element

I am facing an issue with setting the background image of an observable array in my Ionic application. Here is the code snippet I am using: <ion-card *ngFor="let picture of pictures$ | async;" <div class="user-image" [ngStyle]="{'background- ...

angularionic-frameworkobservableangularfire2

Emphasizing a full row within a table is a way to draw attention

I have a piece of HTML/CSS code that successfully underlines the text in a single table cell when hovering over it. However, I want to extend this effect to underline all text in a row of cells, rather than just one cell. It's not necessary for the en ...

htmlcss

AJAX response for form validation

I need to validate my contact form when the submit button is clicked. If all fields are valid, I want to display a Processing message using AJAX, followed by a success message with the entered name. The content of my Form is: <form onsubmit="return va ...

javascripthtmlajax

Stylish Radial Hover Effect for Images Using CSS

I am looking to create a unique effect where upon hovering over an image, color will be applied in a radial shape on a grayscaled image within a div that is pointed by the cursorhttps://i.sstatic.net/64RJv.jpg Below you can see the desired outcome compare ...

htmlcssuser-interfacefrontend

Strange behavior observed in Angular Reactive form

I've been troubleshooting this code snippet: login.component.html <div class="main"> <div class="image"> <img src="./assets/icons/login.png" alt="Login"> <p>Sign in t ...

angularangular-reactive-forms

Is it feasible to retrieve and view local storage data within an Electron application?

I created an electron application that enables users to drag and drop elements like divs on the screen, saving their positions in localstorage as a class. The purpose is to ensure that any modifications made by the user persist even after reloading or re ...

javascriptjqueryhtmlcsselectron

Preventing Flash of Unstyled Content in ElectronJS Browser Windows

Upon creating a new BrowserWindow and utilizing loadURL to incorporate an html file within the renderer, there is a brief instance where unstyled content is displayed for approximately half a second before the css is loaded. window.loadURL('file://&a ...

javascriptcsselectron

Is Angular 2 built on Shadow DOM or Virtual DOM architecture?

When it comes to updating the DOM in Angular 2, does it utilize Shadow DOM or Virtual DOM? And did Angular 1 have a similar concept? ...

angularshadow-domvirtual-dom

Hear and register keypress in Angular service

I offer a dialog service Check it out below @Injectable() export class HomeDialogService { public constructor(private readonly dialogService: DialogService, private readonly userAgent: UserAgentService) {} @HostListener('document:keydown.escape ...

javascriptangulartypescript

The instantiation of generic types in Typescript

I have been working on a function that aims to create an instance of a specified type with nested properties, if applicable. This is the approach I have come up with so far. export function InitializeDefaultModelObject<T extends object> (): T { ...

angulartypescript

Guide to automatically dismiss calendar popup after selecting a date

After selecting a date, how can I hide the calendar? I am currently utilizing Date-time-picker by DanyelYKPan. Is there a specific function that I should be using? Here is the code snippet: <div class="col-3"> <div class="form-group calenderF ...

javascriptjquerytwitter-bootstrapangulardatetimepicker

Ensuring that the field is empty is acceptable as long as the validators are configured to enforce

I have successfully created a form using control forms. idAnnuaire: new FormControl('',[Validators.minLength(6),Validators.maxLength(6)]), However, I am facing an issue where when the field is left empty, {{form.controls.idAnnuaire.valid }} is ...

angulartypescriptangular-reactive-formsangular-forms

Combining multiple 'Eithers' and 'Promises' in fp-ts: A guide to piping and chaining operations

Recently, I began working with fp-ts and wanted to create a method with functional-like behavior that would: Parse a bearer token Verify the validity of the user using the parsed token import { Request } from 'express'; import { either } from & ...

javascriptangulartypescriptfunctional-programmingfp-ts

Tips on creating a button that, upon clicking, triggers the download of an Excel file using PHPSpreadsheet

I am trying to figure out how to create a button that, when clicked, will download an Excel file named b1b5.xls with some specified values added. Here is the code I have so far: <html> <head> </head> <body> <center> < ...

javascriptphphtml

Is there a way to design a form that appears as though it's levitating above a div element?

I am new to web development and currently practicing by converting PSD designs into HTML pages. I am facing an issue where I need to create a form that appears to be floating on top of a div, with the form being taller than the div itself. Here is an illu ...

javascripthtmltwitter-bootstrapbootstrap-5

Stringified HTML code showcased

When working with Angular, I have encountered an issue where I am calling a function inside an .html file that returns a string containing a table element. My goal is to convert this string into HTML code. I attempted to use [innerHtml]: <p [innerHtml ...

htmlangulartypescript

Resizable Bootstrap column-md-4

I need to make a bootstrap column fixed position (col-md-4). This is for a shop layout with 2 columns: Shop content (long & scrollable) col-md-8 Cart content (short & fixed so it stays visible while scrolling the shop content) col-md-4 I'm ...

csstwitter-bootstrapcss-position