CODEWITHSUNDEEP
angular
Juan Casas
Juan Casas

Reputation: 104

How to style child components in angular without adding the style to the child component itself?

I have the following 4 components:

<app-game-control (intervalFired)="onEmittedCount($event)"></app-game-control>

<div class="row">
  <div class="col-xs-2">
    <app-odd *ngFor="let evenNumber of arrEvenNumber;index as i" [number]="evenNumber" >

    </app-odd>
  </div>
  <div class="col-xs-2">
    <app-even *ngFor="let oddNumber of arrOddNumber" [number]="oddNumber">
  
    </app-even>
  </div>
</div>

the fourth component would be app.module, which is the parent component

here is the odd component::

<p class="odd">odd - {{number}}</p>

I want to make the class 'odd' have a red background. I can achieve that by adding the style to odd.component.css

I want to add the styling to the parent component at 'app.component.css'

how do I do that?

I tried the following aswell but no luck::

<app-game-control (intervalFired)="onEmittedCount($event)"></app-game-control>

<div class="row">
  <div class="col-xs-2">
    <app-odd *ngFor="let evenNumber of arrEvenNumber;index as i" [number]="evenNumber" >

    </app-odd>
  </div>
  <div class="col-xs-2">
    <app-even class="even" *ngFor="let oddNumber of arrOddNumber" [number]="oddNumber">
    </app-even>
  </div>
</div>

app.module.css::

.even {
    background-color: red;
}

Upvotes: 0

Views: 3512

Answers (4)

Nehal
Nehal

Reputation: 13307

Whenever I have to create a common styling that I can use across different components, I utilize the root stylesheet, usually it's the styles.scss file.

If you add odd, even css classes in this file, app-odd, app-even can pick these up without the need of :host or ::ng-deep. You can also restrict the css classes to certain components, by wrapping inside them with component selectors.

// apply to any app-odd or app-even components within my-app

my-app {
  app-odd {
    .odd {
      background-color: red;
    }
  }
  
  app-even {
    .even {
      background-color: green;
    }
  }
}

// apply to all app-odd/app-even components

app-odd {
  .odd {
    background-color: red;
  }
}

app-even {
  .even {
    background-color: green;
  }
}

// apply to all odd and even classes everywhere

.odd {
  background-color: red;
}

.even {
  background-color: green;
}

Stackblitz Demo

Upvotes: 1

James Griffin
James Griffin

Reputation: 101

Avoid using ::ng-deep as this is deprecated; you should also only use ViewEncapsulation.None with extreme caution as this means any classes and other styles you define in the parent will bleed into all child components. The reason this encapsulation exists is so that as your app grows you don't end up with styling conflicts across components and a web of rules that you can't untangle.

For your specific use-case, I would recommend that you keep the styling within your child component but use the :host pseudo-selector like so:

:host.background-red {
    background: red;
}

:host.background-blue {
    background: blue;
}

Then, from the parent you can specify the class

<app-odd class="background-red"></app-odd>

This means that you're able to style differently depending on what the parent specifies, but still keep encapsulation and also let the component expose only the styling options that work in its own context.

Upvotes: 3

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41407

Disable view encapsulation in the child component

@Component({
  selector: 'app-odd',
  templateUrl: './odd.component.html',
  styleUrls: ['./odd.component.scss'], 
  encapsulation: ViewEncapsulation.None,

Upvotes: 0

Rajat
Rajat

Reputation: 692

You can use the selector ::ng-deep

:host ::ng-deep .odd {
  background: red;
}

Use the :host selector so that the styles remain within the parent and not bleed into other components. Note that ::ng-deep is being deprecated.

Upvotes: 0

Related Questions