CODEWITHSUNDEEP
htmlcssangularangular-components
user2301
user2301

Reputation: 1967

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

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;
}
}

Upvotes: 0

Views: 2111

Answers (2)

Thien Hoang
Thien Hoang

Reputation: 625

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

Upvotes: 4

tildy
tildy

Reputation: 1009

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.

Upvotes: 0

Related Questions