Ionic Angular #1 Simple Demo

IONIC ANGULAR TUTORIAL

Step 1 : Install Ionic

npm install -g ionic

Step 2:

Create an Ionic angular  App by

npm install -g @ionic/cli native-run cordova-res

Step 3:

create an ionic app with tabs

ionic start demo-ionic tabs --type=angular --capacitor

Step 4 

cd demo-ionic

npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem

Step 5

npm install @ionic/pwa-elements

Step 6 : edit in VS studio

Next, import @ionic/pwa-elements by editing src/main.ts.

import { defineCustomElements } from '@ionic/pwa-elements/loader';

defineCustomElements(window);

Step 6:

Run the App by 

ionic serve

Check out the output similar to this browser window

Step 7:

In the file  /src/app/tab2/tab2.page.htm

change both <ion-title> Tab2 to <ion-title> Demo Photo

Append the code  changing icon from ellipse to camera

<ion-content>

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">

    <ion-fab-button>

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

    </ion-fab-button>

  </ion-fab>

</ion-content>

Step 8:

Modify src/app/tabs/tabs.page.html. file  

Change the label to <ion-label> Photos

check the changes made in running browser and clicking Photos icon

Let us learn further Later ....👀👀👀👀