How to style components in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Component styling in Angular enables scoped CSS that prevents style conflicts and maintains clean separation of concerns in component architecture. As the creator of CoreUI, a widely used open-source UI library, I’ve designed component styling strategies for Angular applications throughout my 11 years of frontend development. The most maintainable approach is using external stylesheet files with styleUrls and Angular’s default Emulated view encapsulation. This method provides automatic style scoping, supports SCSS preprocessing, and maintains clear separation between template and styling logic.
Define component styles using styleUrls array pointing to external stylesheet files with automatic view encapsulation.
import { Component } from '@angular/core'
@Component({
selector: 'app-user-card',
templateUrl: './user-card.component.html',
styleUrls: ['./user-card.component.scss']
})
export class UserCardComponent {
user = {
name: 'John Doe',
email: '[email protected]',
avatar: 'https://example.com/avatar.jpg'
}
}
<!-- user-card.component.html -->
<div class='user-card'>
<img [src]='user.avatar' alt='User avatar' class='avatar'>
<div class='user-info'>
<h3 class='name'>{{ user.name }}</h3>
<p class='email'>{{ user.email }}</p>
</div>
<button class='action-btn'>View Profile</button>
</div>
// user-card.component.scss
.user-card {
display: flex;
align-items: center;
padding: 1.5rem;
background: #ffffff;
border-radius: 0.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
gap: 1rem;
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.user-info {
flex: 1;
.name {
margin: 0 0 0.25rem 0;
font-size: 1.125rem;
font-weight: 600;
color: #333;
}
.email {
margin: 0;
font-size: 0.875rem;
color: #666;
}
}
.action-btn {
padding: 0.5rem 1rem;
background: #0d6efd;
color: white;
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: background 0.2s;
&:hover {
background: #0b5ed7;
}
}
}
Alternative inline styles approach:
@Component({
selector: 'app-inline-styled',
template: `<div class='container'>Styled content</div>`,
styles: [`
.container {
padding: 1rem;
background: #f0f0f0;
}
`]
})
export class InlineStyledComponent { }
Here the styleUrls array accepts multiple stylesheet paths for component-specific styles. Angular’s default ViewEncapsulation.Emulated mode automatically scopes styles to the component by adding unique attributes. The SCSS file uses nested selectors matching Angular’s component structure for maintainable styling. Component styles only affect elements within the component template, preventing global CSS pollution. The styles property allows inline CSS as an alternative for small components, but external files are preferred for maintainability. SCSS features like nesting, variables, and mixins enhance styling capabilities beyond plain CSS.
Best Practice Note:
This is the component styling architecture we use in CoreUI for Angular to maintain clean, scoped styles across complex component libraries. Use :host selector to style the component’s host element itself, leverage :host-context for parent-dependent styling, and prefer SCSS over CSS to utilize variables and mixins for consistent theming across components, especially when building design systems or extending CoreUI components.
