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

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.