Skip to main content

Posts

Showing posts with the label Angular 2 components css styles styleUrls

How to apply styles to a confirmation alert in Ionic 3 Angular 4?

We need to move alert specific styling to the global app.scss. It is little bit confusing and it works global level. app.scss – .icon-color {     color : #C45810 !important ; } Used Actions Buttons to displayed alert and confirmation box- < ion-fab right bottom >   < button ion-fab color = "light" >< ion-icon name = "arrow-dropleft" ></ ion-icon ></ button >   < ion-fab-list side = "left" >     < button ion-fab >< ion-icon name = "trash" ( click )= "presentConfirm()" ></ ion-icon ></ button >   </ ion-fab-list > </ ion-fab > Home.ts - Using css class in home components import { Component } from '@angular/core' ; import { NavController , App , AlertController } from 'ionic-angular' ; import { WelcomePage } from '../../pages/welcome/welcome' ; @ Component ({   selector: 'page-ho...

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;     }]     ...