{"id":38761,"date":"2016-07-30T20:55:11","date_gmt":"2016-07-30T15:25:11","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=38761"},"modified":"2017-09-12T12:43:12","modified_gmt":"2017-09-12T07:13:12","slug":"angular-2-component-styling","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/angular-2-component-styling\/","title":{"rendered":"Angular 2 Component styling"},"content":{"rendered":"

Styling for large Angular application<\/a> is a challenging task as most of the times styles easily gets mixed and confusing. Major issue that is encountered when we try to structure our styles and give proper naming for individual styles.<\/p>\n

To resolve the issue many patterns were introduced to enhance style organization and most of these patterns are implemented when we make use of pre-processors like Sass and Less. The main thing about these patterns is that they suggest organizing our styles and templates in the form of COMPONENTS.<\/p>\n

Angular 2<\/a> is component based which means that each and every UI functionality is built as a component. A component comes with HTML, JavaScript and also has it\u2019s own styles that belong to it. All we need to do is to define the styles in our component, or at least declare, where to get those from. There are three ways to associate CSS styles to a component in Angular 2: Component inline styles,style urls and template inline styles. Let\u2019s explore them one by one.<\/p>\n

Component inline styles<\/strong>
\nThe simplest way to add styles to a component is taking advantage of the @Component decorators it allow us to define component inline styles. All we need to do is to add a styles property to the decorator and define the styles. To see what that looks like, below is the code snippet:<\/p>\n

[html]@Component({
\n selector: ‘test’,
\n templateUrl: test.html’,
\n styles: [`
\n .test {
\n color: yellow;
\n }
\n `]
\n })
\n class Test{
\n @Input() title: string;
\n}
\n[\/html]<\/p>\n

So where did these style end up in the DOM?<\/strong>
\nIf we run this in our browser, we see that Angular takes the defined styles, and writes them into the head of the HTML document. Here\u2019s what it looks like:<\/p>\n

[html]<\/p>\n

<!DOCTYPE html>
\n<html>
\n <head>
\n <style>
\n .test {
\n \tcolor: yellow;
\n }
\n <\/style>
\n <\/head>
\n <body><\/p>\n

<\/body>
\n<\/html>
\n[\/html]<\/p>\n

So why Angular takes all the styles and puts them up there?<\/strong>
\nIt is because of View Encapsulation. Angular 2 comes with three different view encapsulation types in order to support both, browsers that don\u2019t support Shadow DOM, and also the ones that do support it.<\/p>\n

Angular 2 uses the Emulated View Encapsulation by default which means there\u2019s no usage of any Shadow DOM at all. One of the features of Shadow DOM is style encapsulation. It allows us to scope styles to a specific component without affecting the outer world.<\/p>\n

To take advantage of style encapsulation, styles have to be put into the shadowRoot of a component. Due to the Shadow DOM strategy that is used, there is no shadowRoot to put our styles into. That\u2019s why Angular writes them into the head.<\/p>\n

Styles urls<\/strong>
\nWe never mix our styles with our application code. The tag, allows us to fetch and embed a style sheet from a server. Angular 2 components allow us to define styleUrls, so that styles don\u2019t have to be written into the component. Below is an example:<\/p>\n

[html]@Component({
\nselector: test,
\ntemplateUrl:\u2019test.html’,
\nstyleUrls: [test.css’]
\n})
\nclass Test{
\n@Input() title: string;
\n}
\n[\/html]<\/p>\n

Where do those end up in the DOM?<\/p>\n

Well, for the same reason as explained earlier, they are written into the head of the document. But not only that, when Angular fetches the style resources, it takes the text response, inlines and appends them after all component inline styles. So if we have a configuration like this:<\/p>\n

[html]@Component ({
\nselector: ‘test\u2019’,
\ntemplateUrl: ‘test.html’,
\nstyles: [‘.test { color: yellow; }’],
\nstyleUrls: [‘test.css’]
\n})
\nclass Test{
\n@Input() title: string;
\n}
\nAnd the test.css content would look like this:
\n.test {
\ncolor: green;
\n}[\/html]<\/p>\n

The document head that looks something like this:<\/p>\n

[html]
\n<!DOCTYPE html>
\n<html>
\n <head>
\n <style>
\n .test {
\n color: yellow;
\n }
\n <\/style>
\n <style>
\n .test {
\n color: green;
\n }
\n <\/style>
\n <\/head>
\n <body>
\n …
\n <\/body>
\n<\/html><\/p>\n

[\/html]<\/p>\n

It brings us to the conclusion that styles defined in style urls will always be appended and therefore override styles defined in the component, unless the inline styles don\u2019t have a higher specificity.<\/p>\n

Template inline styles<\/strong>
\nWe can write our styles directly into the DOM. When thinking in Web Components it\u2019s quite common to put styles directly into the template of a component, since they will be encapsulated when Shadow DOM is used.Those will be appended in the head of document, after the ones defined in the component or as style urls. Template inline styles always have the highest priority.<\/p>\n

Read Further on AngularJS Series<\/span><\/p>\n