I have the following 4 components:

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

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

    </app-odd>
  </div>
  <div >
    <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 >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 >
  <div >
    <app-odd *ngFor="let evenNumber of arrEvenNumber;index as i" [number]="evenNumber" >

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

app.module.css::

.even {
    background-color: red;
}

CodePudding user response：

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 ></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.

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

Disable view encapsulation in the child component

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