import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {ModalPage} from '../modal-page/modal-page';
@Component({
selector: 'page-page2',
templateUrl: 'page2.html'
})
export class Page2 {
selectedItem: any;
icons: string[];
items: Array<{title: string, note: string, icon: string}>;
public nb:ModalPage;
constructor(public navCtrl: NavController, public navParams: NavParams) {
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item');
// Let's populate this page with some filler content for funzies
this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
'american-football', 'boat', 'bluetooth', 'build'];
this.items = [];
for (let i = 1; i < 11; i++) {
this.items.push({
title: 'Item ' + i,
note: 'This is item #' + i,
icon: this.icons[Math.floor(Math.random() * this.icons.length)]
});
}
}
itemTapped(event, item) {
// That's right, we're pushing to ourselves!
this.navCtrl.push(Page2, {
item: item
});
}
enablebuttonn(){
if ( this.nb.login()){
console.log("button va être activée");
}
}
}
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Page Two</ion-title>
<ion-buttons end>
<button ion-button icon-left>
<ion-icon name="paper"></ion-icon>
<span class="hide-xs">news</span>
</button>
<button ion-button #button1 disabled="true" icon-left (click)="enablebuttonn()">
<ion-icon name="car"></ion-icon>
<span class="hide-xs">voiture</span>
</button>
<button ion-button icon-left (click)="showAlert()">
<ion-icon name="chatbubbles"></ion-icon>
<span class="hide-xs">messages</span>
</button>
<button ion-button icon-only >
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon [name]="item.icon" item-left></ion-icon>
{{item.title}}
<div class="item-note" item-right>
{{item.note}}
</div>
</button>
</ion-list>
<div *ngIf="selectedItem" padding>
You navigated here from <b>{{selectedItem.title}}</b>
</div>
</ion-content>
I'm currently developing a new mobile app using Ionic 2, and I'm attempting to activate a button placed in the ion-navbar upon successful submission from a modal page. Here is a screenshot: the "voiture" button (in the top right) is initially disabled, and I would like to enable it upon submission. View screenshot here
Below is the TypeScript file for my page2 page and the modal page