Angular Component Styles

In an earlier post, I wrote about using template html to render your Angular component. CSS styles work similarly. You can provide css styles specific to a component. Just like template and templateUrl, you can use css styles inline with the styles metadata and externally with the styleUrls metadata. If you use the inline choice, then you use ES backticks. Here is an example…

@Component({
  selector: 'app-selector',
  template: `<div>
                <h1>My Page Header</h1>
                <app-selector></app-selector>
             </div>`,
  styles: `color: blue;`
})

For more complex styles (which is probably more common), you reference an external file like so…

@Component({
  selector: 'app-selector',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

The syntax in the css file is like normal css stylings. Note that you can also use Sass (scss) files.

Happy Coding!

Clay Hess