samarthagarwal

<ion-card>
  <ion-item class="activated">
    <ion-icon name="wifi" slot="start"></ion-icon>
    <ion-label>Card Link Item 1 .activated</ion-label>
  </ion-item>

  <ion-item>
    <ion-icon name="wine" slot="start"></ion-icon>
    <ion-label>Card Link Item 2</ion-label>
  </ion-item>

samarthagarwal

<ion-card>

  <img src="https://unsplash.it/600/400">

  <ion-card-header>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
    <ion-card-title>Card Title</ion-card-title>
  </ion-card-header>

  <ion-card-content>

samarthagarwal

<ion-grid>
  <ion-row>
    <ion-col style="background-color: yellowgreen">This column will take 6 columns</ion-col>
    <ion-col style="background-color: lightcyan">This column will take 6 columns</ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="8" style="background-color: red">This column will take 8 columns</ion-col>
    <ion-col size="4" style="background-color: lightgreen">This column will take 4 columns</ion-col>
  </ion-row>
  <ion-row>

samarthagarwal

<ion-grid>
    <ion-row>
      <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="2">
        This column takes 12/12 column width on the smallest (xs) screens. It takes 6/12 column width on small screens. It takes
        4/12 column width on medium sized screens. It takes 3/12 column width on large sized screens and it takes 2/12 column
        width on extra-large screens.
      </ion-col>
      <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="2">
        This column takes 12/12 column width on the smallest (xs) screens. It takes 6/12 column width on small screens. It takes
        4/12 column width on medium sized screens. It takes 3/12 column width on large sized screens and it takes 2/12 column

samarthagarwal

<ion-content padding>

  <ion-button expand="block" fill="solid" (click)="sayHello()">Say Hello</ion-button>
  
</ion-content>

samarthagarwal

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  rememberMe: boolean;

samarthagarwal

<ion-content padding>

  <ion-button expand="block" fill="solid" (click)="showLoading()">Show Loading</ion-button>

</ion-content>

samarthagarwal

<ion-content padding>

  <ion-button expand="block" fill="solid" (click)="showToast()">Show Toast</ion-button>

</ion-content>

samarthagarwal

<ion-content padding>

  <ion-button expand="block" fill="solid" (click)="showActionsheet()">Show Actionsheet</ion-button>

</ion-content>

samarthagarwal

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NavigationService {

  navParams: any;

  constructor() { }