CODEWITHSUNDEEP
angulartypescript
Gelso77
Gelso77

Reputation: 1895

Angular : ViewEncapsulation.None

I haven't understood what's the meaning of the property encapsulation inside @Component

@Component({
  selector: 'az-manage',
  templateUrl: './manage.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./manage.component.scss']
})
export class ManageComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Thanks

Upvotes: 0

Views: 4228

Answers (1)

Antoniossss
Antoniossss

Reputation: 32507

If you leave the default encapsulation all your CSS rules for this component will have added attribute selector so they will look like this:

.yourclass[ngcomponent-0] {
  your set of rules
}

and the actual markup generated will look like this:

<yourcompoent ngcomponent-0=""></yourcompoent>

This way your CSS is strictly bound to your component, so it will not affect any other part of your app. If you do ViewEncapsulation.NONE, attribute selector won't be added, CSS will be global and will affect every other part of the app.

Disclaimer: I don't remember if it is ngcomponent-x or ngN-component or whatever - that does not matter - the rule is explained.

Upvotes: 4

Related Questions