CODEWITHSUNDEEP
javascripthtmlcssangularangular5
AlexFF1
AlexFF1

Reputation: 1283

How to inherit css styles in child component from parent in Angular 5

I have a parent component inside which I have a child component. The parent component have some css classes, where child component extends them. I tried to use :host as looking at documentation, but cant't seem to get it work properly.

child component:

<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
    <div class="body-content-inner-wrapper">
        <div class="body-content">
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
        </div>
    </div>
</div>

parent component: 

         <div class="table container">
                 <div class="table-row header">
                        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
                        <div id="demo" class="collapse">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                  </div>
            <app-child-component></app-child-component>
                </div>

parent component css:

  :host  .table {
    display: table;
  }

  :host .table-row {
    display: table-row;
  }

  :host .table-cell {
    display: table-cell;
  }

  :host .container {
   width: 400px;
   height: 100vh;
  }

  :host  .header {
    background: cyan;
 }

   :host .body {
    background: yellow;
    height: 100%;
 }

  :host .body-content-outer-wrapper {
    height: 100%;
 }

 .body-content-inner-wrapper {
    height: 100%;
   position: relative;
   overflow: auto;
}

 .body-content {
    position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

The problem if even I put css classes inside the child component, the layout breaks just because there is a child-component template. So the main question is what is proper way for child to inherit extend css from parent component?

Upvotes: 33

Views: 45131

Answers (4)

Abuhanzala Rehanansari
Abuhanzala Rehanansari

Reputation: 94

why you're trying to make it complex, you can just import your parent component CSS into your cild component CSS

Upvotes: 1

Chtioui Malek
Chtioui Malek

Reputation: 11515

Another alternative to ::ng-deep and referencing the parent's css file, is to use the encapsulation component propertie :

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  encapsulation: ViewEncapsulation.None
})

the parent css with flow to all it's childs.

Upvotes: 7

Damien
Damien

Reputation: 1600

With ::ng-deep, styles will be applied to the current component, but also trickle down to the components that are children to the current component in the component tree.

Example:

:host ::ng-deep app-child-component {
       color:yellow;
     }

A good resource - Styles Between Components in Angular 2+

Upvotes: 9

Dheeraj Kumar
Dheeraj Kumar

Reputation: 4175

Why make things complex?

Ideal way to do would be to add refrence of parent css file in child component as well.

 @Component({
    selector: 'child-app',
    templateUrl: `./child.component.html`,
    styleUrls:['./parent/parent.component.css', './child.component.css']
})
export class ChildComponent { }

Upvotes: 82

Related Questions