Formatting styles for child components' templates using Angular's parent component CSS styling

Question

Formatting styles for child components' templates using Angular's parent component CSS styling

Is there a way to override CSS of a child component from the parent using ::ng-deep or another method?

In my parent component, I have included a child component like this:

....parent.component...
<app-likes></app-likes>
.....parent.component......

Within the likes component, there is the following HTML structure:

<div class="mainDiv">
<div class="secondDiv"><i class="far fa-heart fa-3x"></i></div></div>

Now, I want to change the color of the fa-heart class to white from the parent's parent.component.css file.

Is there a solution for achieving this?

css angular parent-child ng-deep

Answer 1

Answer №1

To achieve this, you can modify the CSS of the main component as follows:

MainComponent.css:

:host ::ng-deep .fa-heart {
  color: red;
}

or

:host ::ng-deep app-like .fa-heart {
  color: red;
}

Answer 2

To achieve this, you can modify the CSS of the main component as follows:

MainComponent.css:

:host ::ng-deep .fa-heart {
  color: red;
}

or

:host ::ng-deep app-like .fa-heart {
  color: red;
}

Answer 3

Answer №2

Contrary to popular opinion, I would advise against going down that route.

If you view the component as a self-contained unit in your application, having a consistent appearance throughout is actually beneficial. Utilizing ::ng-deep to override this consistency can lead to complications in larger projects.

Angular advocates for using @Inputs as a means of passing data into components. Instead of using @Input solely to manipulate the view, consider utilizing Dependency Injection in more extensive scenarios to define a theme for all child components of a particular element.

<app-likes theme="white"></app-likes>

@Component({selector: 'app-likes'})
class AppLikesComponent {
  @Input() theme: string;

  @HostBinging("class") get themeBinding() {
     return 'theme--' + this.theme;
  }
}

Answer 4

Contrary to popular opinion, I would advise against going down that route.

If you view the component as a self-contained unit in your application, having a consistent appearance throughout is actually beneficial. Utilizing ::ng-deep to override this consistency can lead to complications in larger projects.

Angular advocates for using @Inputs as a means of passing data into components. Instead of using @Input solely to manipulate the view, consider utilizing Dependency Injection in more extensive scenarios to define a theme for all child components of a particular element.

<app-likes theme="white"></app-likes>

@Component({selector: 'app-likes'})
class AppLikesComponent {
  @Input() theme: string;

  @HostBinging("class") get themeBinding() {
     return 'theme--' + this.theme;
  }
}

Answer 5

Answer №3

To eliminate the shadow DOM, you can adjust the ViewEncapsulation option in the parent component. This will enable the child component to utilize the selector definitions from the parent component.

Here is an example of how to achieve this:

Parent component

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None        // <-- no shadow DOM
})
export class AppComponent  {
}

Parent CSS

.fa-heart {
  color: white;
}

See a live demonstration here: Stackblitz

Answer 6

To eliminate the shadow DOM, you can adjust the ViewEncapsulation option in the parent component. This will enable the child component to utilize the selector definitions from the parent component.

Here is an example of how to achieve this:

Parent component

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None        // <-- no shadow DOM
})
export class AppComponent  {
}

Parent CSS

.fa-heart {
  color: white;
}

See a live demonstration here: Stackblitz

Formatting styles for child components' templates using Angular's parent component CSS styling

Answer №1

Answer №2

Answer №3

Similar questions

Issue encountered while attempting to differentiate 'object Object'. NgFor only permits arrays and iterables

Customize the Grid Offset in CSS like BootstrapCSS Grid Offset

Building a single-page app optimized for mobile viewing with Foundation framework

Exporting Javascript functions is not possible

Place unchangeable elements both preceding and following an input field

Importing and viewing an Excel spreadsheet containing images in a specific column

In CSS, when text within a tab div lacks spaces, it triggers a horizontal scrolling effect

How to position and center a div layer over another div

What is the best method to override the CSS transition effect with JavaScript?

Using ngx-editor within a mat-table-cell in an Angular application

Attempting to adjust the navbar dimensions, alter the size of the font, and align the text in the center

When the CSS grid is equipped with a sticky left column, it will horizontally scroll if the grid's width exceeds 100% of its containing element

Comparison of universal and descending selector in CSS

The row in the table is not reaching its maximum height

Having trouble with the SELECT functionality in Angular2/4 and SAFARI?

Switch between different classes with JavaScript

There appears to be a TypeError in PrimeNG which states that the function "this._activeIndex.includes" is not recognized

Should the potential benefits of implementing Responsive Design in IE8 be taken into account in 2013?

Each div will display the same image twice when loading the image

Angular 2 Form Arrays