ionic: Color

src/theme/variables.scss

In here define your colors inside $colors map:

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  ...
  myColor: #ff0000,
);

custom_scss.scss

.my-class {
...
background-color: color($colors, myColor);
}

ionic: Save index from *ngFor

*ngFor="let item of items; let i = index"

ionic: Menu

app.html

<ion-menu [content]="id_name">

<ion-header>
<ion-toolbar>
<ion-title>menu_name</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item (click)="loadPage(page1)">
<ion-icon name="menu_item_1" item-left></ion-icon>
item_1
</button>
<button ion-item (click)="loadPage(page2)">
<ion-icon name="menu_item_2" item-left></ion-icon>
item_2
</button>
</ion-list>
</ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #id_name></ion-nav>

app.component.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = RootPage;
  page1 = Page1;
  page2 = Page2;
  @ViewChild('nav') nav: NavController; // Because the menu is inside the ion-nav

  ....

  onLoad(page: any) {
    this.nav.setRoot(page);
    this.menuController.close();
  }
}

your_page.html

<ion-header>

  <ion-navbar>

  <ion-buttons start>

  <button ion-button menuToggle>

  <ion-icon name="menu"></ion-icon>

  </button>

  </ion-buttons>

    <ion-title>your_page</ion-title>

  </ion-navbar>

</ion-header>

...

ionic: Theming

In theme folder, in variables.scss:

1) Redefine a one:

$content-padding: 8px;

2) Add one, inside a map, for instance, colors or outside of it.

Inside:

$colors: ( primary: #488aff, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222, myColor: #f2f2f2 );

Outside:

$myColor: #f2f2f2

ionic: View hooks

willEnter	Observable, fired when Component is about to become active
didEnter	Observable, fired when Component has become active
willLeave	Observable, fired when Component is about to become inactive
didLeave	Observable, fired when Component has become inactive
willUnload	Observable, fired when Component has been destroyed
onWillDismiss	Observable, fired when Component will be dismissed
onDidDismiss	Observable, fired when Component was dismissed

ionic: Import data

your_data.ts

export default / data_name [
   // Json object
]

to use it, import it:

import any_name (if default) / data_name from 'your_data_relative_location';

...

ngOnInit() {
  this.quoteCollection = quotes;

  }

ionic: Interface

export interface interface_name {
// definition
}

Note: Can by used to import data.

To use it import it in your file:

import { interface_name } from 'interface_relative_location';