CODEWITHSUNDEEP
angulartypescript
Pietro Nadalini
Pietro Nadalini

Reputation: 1800

Set ViewEncapsulation.None to every component

I don't like how Angular adds a _ngcontent-* in the elements of the HTML page, and since I don't really implement that functionality I remove it adding encapsulation: ViewEncapsulation.None in my component. But since there are a lot of components and there will be more in my project, I was wondering if there's a way to set the encapsulation globally instead of modifying each component.

Here's a link to some research I have done and the angular documentation about the ViewEncapsulation enum.

Upvotes: 2

Views: 1631

Answers (2)

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

You can try setting 'ViewEncapsulation.None' in app.component.ts which will be applicable for your whole project.

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

Upvotes: -2

Rahul
Rahul

Reputation: 2128

ViewEncapsulation will not only allow to bind your contents from other components - it will also stop encapsulating your components styles so if you remove the style or styleUrls from your component decorator the encapsulation will be set to none by the compiler

Check this doc for further queries

Next step you can restrict it while creating your components using angular cli

ng generate component [name] --view-encapsulation=none

This will create your component with the encapsulation property as none - you can check for some commands over here

Hope this helps - Happy coding:)

Upvotes: 4

Related Questions