Angular 1 and Angular 2 Integration

Angular 2 components css styles and styleUrls

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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.