Back Arrow Button In Ionic - ionic-framework

Question

I'm new to Ionic and I'm trying to add back arrow to my project using Ionic framework. I'm using the simple code as follows:
<ion-header-bar class="bar-stable">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
<h1 class="title">Title of my project</h1>
</ion-header-bar>
But I can't see the Ionic back button in my header anywhere.

Answer 1

Here some code for header in ionic.
<ion-view>
<ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-clear ion-arrow-left-c " ng-click="backButton()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-clear btn-white ion-android-settings header-icon-size " ng-click="openDrawer()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<!-- here content -->
</ion-content>
</ion-view>

Answer 2

<ion-header style="background-color: #D3D3D3;box-shadow: none;">
<ion-navbar>
<ion-title>
<ion-row no-padding>
<ion-col no-padding>
<ion-buttons left>
<button ion-button icon-only (click)="back()">
<ion-icon name="arrow-back"></ion-icon>
</button>
</ion-buttons>
</ion-col>
<ion-col>
<div style="text-align: center;font-size: 20px; margin-top: 5px;">
Training Reports
</div>
</ion-col>
<ion-col></ion-col>
</ion-row>
</ion-title>
</ion-navbar>
</ion-header>

Answer 3

ion-nav-back-button is only displayed when your navigation stack has more than one page pushed onto it.
The following code shows this by displaying a page and then pushing the same page onto the navigation stack after 2 seconds. In the first page, the back arrow isn't displayed, but it is displayed on the second page and pressing it returns to the first page. The results can be tested in this JSFiddle that I created (which contains the same code).
HTML:
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core/css/ionic.bundle.css"/>
<ion-app>
<ion-nav root='nav-page'></ion-nav>
</ion-app>
Javascript:
customElements.define(
'nav-page', class NavPage extends HTMLElement
{
connectedCallback() {
this.innerHTML = `
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/">
</ion-back-button>
</ion-buttons>
<ion-title>
Page ${this.data ? this.data.page : 0}
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
Page ${this.data ? this.data.page : 0}
</ion-content>
`;
}
});
const nav = document.querySelector('ion-nav');
let data = { page: 1 };
setTimeout(function() {
nav.push('nav-page', { data });
}, 2000);