How to give css to the elements in ionic 4 using angular?

Question

I am working with a application which is to manage a company and its orders and staff so now ,I am unable to impove the application that only the data is displayed normally so do add some colors, give padding to some html elements to add styles to my application how to use css in ionic 4

For example below I have to elements in same row

<ion-list>
    <ion-item *ngFor="let i of showChannelPartners">
      <ion-label> <p> {{ i.name }} {{i.manager}} </p>
       <h2> {{ i.contact_number }} </h2>
     </ion-label>
    </ion-item>
  </ion-list>

So how to display the name and manager in above code at corners of the row.I mean how to give padding to name and manager

Answer 1

So here I am using 'p' tag to place both valued in same line of the label. So to align the elements in a same line we should as following

ion-text tag

<ion-list>
  <ion-item *ngFor="let i of showCustomers;let i = index" (click)="getCustomerDetails([i.cust_id],[i.name],[i.contact_number])">
    <ion-label> <p> {{i.name}} <ion-text class="ion-float-end" color="success"> <small>{{i.manager}}</small></ion-text> </p>
     <h2> {{i.contact_number}} </h2>
    <p> {{i.address}} <ion-text class="ion-float-end">{{i.locality}}</ion-text> </p> </ion-label>
  </ion-item>
</ion-list>

If you see in the above code snippet ,I am placing one of the elements inside a ion-text tag and using the class to align the element to the end of the row in this way we can align the text in rows and at starting or center and at the end of rows of a label using p,ion-text tags