How to ovveride the css class of root component in its child component - Angular 2?

Question

I have 3 components in angular 2 application.The class="container-fluid content" is css class in app.component.html. This class="container-fluid content" is default css for other components. Now I want to set background-color:blue in the detail component. I tried to set in detail.component.ts like this styles:['.container-fluid content{background-color: blue;}'] It did not work. If I set in app.component.html like this <div class="container-fluid content" style="background-color: blue;"> It applies to both the components. How to override this class="container-fluid content" in detail component?

 //my project structure

app
  - app.component.html
  -app.component.ts
- welcome
  -welcome.component.html
  -welcome.component.ts
- detail
  -detail.component.html
  -detail.component.ts

//app.component.html
<div class="container-fluid content">
    <router-outlet></router-outlet>
  </div>
  <app-footer></app-footer>
</div>

//welcome.component.html
<h1>welcome page heading</h1>
<div fxLayout="row" fxLayoutWrap  style="padding-bottom: 25px; 
 padding-top: 25px;  margin: auto;justify-content: center" >  
<md-card>
          <md-card-content>
            <h1></h1>
            <h2></h2>
          <h2>
            </h2>
          </md-card-content>
          </md-card> 
        </div>

//detail.component.html
<h1>Details page heading</h1>
<div fxLayout="row" fxLayoutWrap  style="padding-bottom: 25px; 
 padding-top: 25px;  margin: auto;justify-content: center" >  
<md-card>
          <md-card-content>
            <h1></h1>
            <h2></h2>
          <h2>
            </h2>
          </md-card-content>
          </md-card> 
        </div>
//detail.component.ts
import { OnInit, Component } from '@angular/core';
import { DetailService } from '../detail/detail.service'; 
import { HostBinding} from '@angular/core';

@Component({

  providers: [DetailService ]
  templateUrl: './detail.component.html',
  styles: ['h3 {margin:5px}'] 

})

export class DetailComponent implements OnInit {

 @HostBinding('class.blueClass') blue: boolean = false;

  constructor( private _detailService: DetailService ) { }

  ngOnInit() {

this.blue = true;
}
}

It can be fine if you show up how the detail.component.ts works. — tildy
– tildy, Commented Jun 2, 2017 at 12:48
@tildy Please find the sample code of detail.component.ts above — user2301
– user2301, Commented Jun 2, 2017 at 13:18

sr9yar · Accepted Answer · 2021-08-24 16:29:10Z

4

In child component, you can add this param to @Component.

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

// child-component.component.css

.container-fluid content{background-color: blue;}

You can ref this side for more infomartion :

https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

edited Aug 24, 2021 at 16:29

sr9yar

5,3605 gold badges57 silver badges62 bronze badges

answered Jun 2, 2017 at 11:53

Thien Hoang

6253 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2301 Over a year ago

I get error failed to load resource 'child-component.component.css'

Thien Hoang Over a year ago

Can you give detail error, folder structure, build tool ?

tildy Over a year ago

have you created the css for it? In your structure it should be here: - detail -detail.component.html -detail.component.ts -detail.component.css, and you should use styleUrls: ['detail.component.css']

user2301 Over a year ago

Yes, I did the same way. In Chrome browser console I get this error

Failed to load resource: :8100/detail.component.css Failed to load resource: the server responded with a status of 404 (Not Found)  Unhandled Promise rejection: Failed to load detail.component.css ; Zone: <root> ; Task: Promise.then ; Value: Failed to load detail.component.css undefined consoleError @ zone.js:522 zone.js:524 ZoneAwareError consoleError @ zone.js:524

Thien Hoang Over a year ago

Try with this way: styleUrls: ['./child-component.component.css']

|

tildy · Accepted Answer · 2017-06-02 11:59:11Z

0

Have you tried with the hostbinding and adding a new class there?

 @HostBinding('class.blueClass') blue: boolean = false;

And in the second component just switch that on onInit?

ngOnInit() {
    this.blue = true;
}

The other way could be in the component definition, you can add the following line :

  host: {'class': 'blueClass'}

and you do the rest of the css work in css instead.

edited Jun 2, 2017 at 11:59

answered Jun 2, 2017 at 11:39

tildy

1,00911 silver badges20 bronze badges

4 Comments

user2301 Over a year ago

where do I need to add this @HostBinding('class.someClass') blue: boolean = false;. In which component?

M Thomas Over a year ago

add in your detail.component.ts file. Import HostBinding decorator from angular/core

tildy Over a year ago

In the detail component.

tildy Over a year ago

Did you add the HostBinding into the import ? import {Component, HostBinding} from '@angular/core';

Collectives™ on Stack Overflow

How to ovveride the css class of root component in its child component - Angular 2?

2 Answers 2

7 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related