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>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|