CODEWITHSUNDEEP
cssangularsass
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Apply css class in component that will effect entire css angular 6

I have one component

my.component.ts That has its own css like this

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class NotificationComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

my.component.css

.hello{
color:red;
}

The problem is that i want to use that class to be visible in entire project in html, i know i can put them globally, but i want to use it from component.

Now other components does not see that class :(

Is there some kind of solution in Angular?

Upvotes: 0

Views: 1607

Answers (3)

Ali Badr
Ali Badr

Reputation: 138

If you want your component css style to be accessible from other component the solution is view encapsulation.

Example :

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class NotificationComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

Angular comes with view encapsulation built in, which enables us to use Shadow DOM or even emulate it, so what ViewEncapsulation.None will do is remove the shadow DOM, so there will be no style encapsulation

Upvotes: 0

Julien Ambos
Julien Ambos

Reputation: 2098

Please take a look at the documentation on View Encapsulation, especially at the "None" part:

None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

Apply it to the component decorators config object:

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None // <-- This
})

Upvotes: 3

Manzurul Hoque Rumi
Manzurul Hoque Rumi

Reputation: 3104

Add your css to app.component.css or style.css. It will effect on whole application.

Upvotes: 0

Related Questions