Component Style
In the previous lecture, we learned about view templates and how to create them for a component. Now, let's explore how to style the HTML of a view template.
Styling with the styles Property
The styles property in Angular allows inline CSS to be defined within the component metadata. It takes an array of string values where each string contains CSS rules.
Example:
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styles: ['a { text-decoration: none; margin: 0 10px; }','button { padding: 10px 20px; }']
})
export class HeaderComponent {}Issues with the styles Property:
- Mixes CSS with TypeScript code, making it less maintainable.
- Since CSS is a string, syntax errors won't be detected at compile time.
- Large amounts of CSS make the array difficult to manage.
Using the styleUrls Property
Instead of defining styles inline, we can use an external CSS file by specifying it in the styleUrls property.
Example:
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent {}The header.component.css file will contain the styles:
.shoppingkart--header{
width: 100%;
height: 11vh;
display:flex;
flex-wrap: wrap;
border-bottom: #E5E4E2 1.5px solid;
}
.shoppingkart-logo{
padding: 1.2vh 8vh;
font-size: 40px;
font-weight: bold;
color: #36454F;
font-family: 'Concert One', cursive;
width:20%;
}
.shoppingkart--header--nav{
width: 80%;
padding: 1vh 2vh;
font-size: 12px;
}
.shoppingkart--top--bar{
width:auto;
text-align: right;
padding-top: 3px;
padding-bottom: 15px;
padding-right: 30px;
}
.shoppingkart-menu{
padding-top: 2vh;
padding: 1vh 1vh;
color: #36454F;
font-family: 'Roboto', sans-serif;
font-weight:normal;
font-size: 16px;
width:70%;
text-align: center;
}
.shoppingkart--bottom--bar{
display: flex;
}
.shoppingkart--search-bar{
padding: 0 3vh;
}
.shoppingkart-search-box{
width: 170px;
height: 33px;
border: none;
background-color: #efefef;
padding: 2px 10px;
}
a{
text-decoration: none;
padding: 0 10px;
}
.shoppingkart--search--btn{
width: 33px;
height: 33px;
border: none;
background-color: #efefef;
margin-left: -5px;
}
.btn{
padding: 15px 25px;
border: none;
margin: 10px 0px;
}
.btn-primary{
background-color: #28282B;
color: white;
}Advantages of Using styleUrls:
- Keeps CSS separate from TypeScript, improving maintainability.
- Syntax errors are detected during compilation.
- Better organization for large CSS files.
Component-Specific Styling
In Angular, styles defined in a component's CSS file apply only to that component's view template.
Even if another component has a same element, it will not inherit this style unless explicitly referenced.Global Styles
For styles that should apply across the entire application, use the global styles file (e.g., styles.css or styles.scss in the root directory).
Conclusion
In this lecture, we explored different ways to style view templates in Angular. We discussed:
- The
stylesproperty for inline styles. - The
styleUrlsproperty for external stylesheets. - Component-specific styling.
- Global styles.
If you have any questions, feel free to ask. Thank you for reading!
If you have any query or question, please contact through below form. Our team will be in touch with you soon.
Please provide your valueable feedback or suggession as well.