samarthagarwal

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="menu"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>
      Ionic Components - Advanced
    </ion-title>

samarthagarwal

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { NavigationService } from '../navigation.service';

@Component({
  selector: 'app-office',
  templateUrl: './office.page.html',
  styleUrls: ['./office.page.scss'],
})
export class OfficePage implements OnInit {

samarthagarwal

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

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

  navParams: any;

  constructor() { }

samarthagarwal

<ion-content padding>

  <ion-button expand="block" fill="solid" (click)="showActionsheet()">Show Actionsheet</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)="showLoading()">Show Loading</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)="sayHello()">Say Hello</ion-button>
  
</ion-content>

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-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>