Hello everyone, I am going to share the CSS styling in Angular2 components. The Angular 2 components styling can be
1. Inline
styles
2. CSS Style
URLs and
3. Template
inline styles
The Angular 2 components allow us to define both type of
css that are inline css and styleUrls and the detail about it as given below.
Components Inline CSS Styles
@Component({
selector: 'customers',
templateUrl: 'customers.html',
styles: [
.customer {
padding:0.3em;
background-color: #f5f5f;
box-shadow: inset 1px 1px 1px
rgba(0,0,1,0.2);
border-radius:1px;
border: solid 1px #c1c1c;
}]
})
Components CSS styleUrls
@Component({
selector: 'customers',
templateUrl: 'customers.html',
styleUrls: ['customers.css']
})
//customers.css
.customer {
padding:0.3em;
background-color: #f5f5f;
box-shadow: inset 1px 1px 1px
rgba(0,0,1,0.2);
border-radius:1px;
border: solid 1px #c1c1c;
}
Components Template inline css styles
<style>
.customer {
padding:0.3em;
background-color: #f5f5f;
box-shadow: inset 1px 1px 1px
rgba(0,0,1,0.2);
border-radius:1px;
border: solid 1px #c1c1c;
}
</style>
<div
class="customer">
<div (click)="toggle()">
{{IsVisible ? true : false }} {{CustomerUID}}
</div>
<div [hidden]="!IsVisible">
<customer></customer>
</div>
</div>