Activate the ion-navbar button when submitting from the modal page

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

Answer №1

<button ion-button #button1 [disabled]="showButton" icon-left (click)="enablebuttonn()">

Take note of the [] surrounding the disabled attribute. This enables you to apply conditional logic to the attribute.

Furthermore, in the click event, you can set the property to true.

showbutton:boolean = false;
 ....
constructor(){
}
 ....
itemTapped(event, item) {
  this.showbutton = true;
  ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with an If-else situation in an Effect to decide between throwing an error or retrieving a response from an API

I'm currently working on implementing a condition that will determine whether to throw an error or proceed with calling an API to retrieve a response. I'm seeking guidance on the best approach for this task. My knowledge of rxjs is limited as I ...

Click on an element in Angular to toggle it

A function in my codebase is responsible for toggling a specific section within a div element. Currently, there are a total of 3 sections available in the app. The functionality is implemented in the app.component.ts file: show = false; toggle() { ...

The hover effect does not carry over to duplicated HTML

I successfully added a node, but I forgot to include the hover function of the node in my application. The hover function is not necessary, and I need it to work with ie8 compatibility. Here's my HTML: <div id="appendCell" style="color:green; colo ...

Oops! The program encountered an error where it cannot assign a value to the 'id' property of an undefined object while trying to store a session in redis

I am currently working on an Angular4 login application and I am looking to store sessions in Redis. To accomplish this, I am utilizing Express session. However, I have encountered the following error: req.session.id = userName; ...

embed a hyperlink onto a live video at a designated moment within an HTML document

Can anyone help me figure out how to overlay a link over a video playing at a specific time on an HTML page? I know it's easy to do on Youtube, but I need to accomplish this task without using Youtube. :) Thank you in advance for any assistance! ...

Empty the localStorage when terminating the IE process using the Task Manager

Utilizing HTML5 localStorage to keep track of my application session has been a useful feature. Here is a snippet of the code I am currently using: if(typeof(Storage)!=="undefined") { if(sessionStorage.lastname=="Smith") { alert("Your ses ...

Is there a feature similar to notifyWhenNoOutstandingRequests in Angular 2?

In my experience, test frameworks like Arquillian have utilized this method to determine when the DOM is ready for inspection with Angular 1. I am curious if there is a similar approach for accomplishing this in Angular 2? ...

Seeking a way to keep the returned Ajax string consistent and prevent it from fading away after page transition

I have a form that appears when the user clicks on the "Edit" link, allowing them to input their profile information. Upon submission, the data is processed via Ajax and saved in an SQL database using a PHP script. After saving the new profile, I would lik ...

Changing Content Dynamically in Adobe Muse

I'm in the process of creating a website for an internet radio station and I've chosen to use Adobe Muse due to its user-friendly design features. My goal is to have the header and footer sections stay static while only the content on the page ch ...

A pair of buttons each displaying a unique div block

I am facing an issue with my jQuery script. I want to be able to click on one of the previewed text associated with a button and then have the other one close automatically. The desired effect is for the text to slide down using slideDown() and disappear ...

What is the process for loading an HTML form into a specific target using Angular?

Is there a way to load an HTML form into a target in Angular without the use of jQuery? I have a working script, but I am currently stuck on: <html> <head> <script src="components/angular/angular.js"></script> <script&g ...

When you zoom in, the HTML elements tend to shift out of place

Spent the entire day yesterday attempting to make my page responsive while Zooming In, but I just can't seem to get it right. Even after adding height and weight, elements still get mixed up when zooming in on the page. I've scoured countless w ...

Is it recommended to run JavaScript functions obtained from REST APIs?

Our single page application is built on Angular 4 and we are able to change input fields based on customer requirements. All the business rules for adjusting these fields are coded in JavaScript, which runs on the Java Platform and delivers the output thro ...

What is the best way to modify the quantity property of a cart item object within the framework of this Angular 13 online shopping application?

I am currently developing an e-commerce app with a front-end built using Angular 13. The following code snippet is designed to calculate the total price of items in the shopping cart: import { Component, OnInit } from '@angular/core'; @Componen ...

``I'm having trouble getting the onchange event to function properly in a customized

After following a tutorial, I successfully created a custom select dropdown using the provided link. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select However, I am facing an issue with the onchange event not working for the select ...

using async and await to avoid receiving 0 when accessing the array length of objects

Currently, my task involves searching for data in localStorage, then pushing this data (objects) to an array. However, when attempting to loop through this array of objects, I encounter an issue where the length is 0. I understand that I need to use async/ ...

What is the method of including a null option in a dropdown menu?

I have a basic dropdown menu with the placeholder text "none." I want users to be able to clear their selection without adding another option to the dropdown. Can anyone help me achieve this? Thank you! Below is my code snippet: Check out the live demo h ...

Accessing html form elements using jQuery

I'm having trouble extracting a form using jQuery and haven't been able to find a solution. I've tried several examples, but none of them display the form tags along with their attributes. Here is a sample fiddle that I've created: Sam ...

Profile picture placeholder with conditional logic

After extensively searching online, I was unable to find a solution on how to add a default profile picture. Here is the code snippet I used for uploading an image chosen by the user: <td><img class="image" src="image/<?php echo $contact[&apos ...

Having trouble implementing button functionality in a web app using JS, jQuery, HTML, and CSS along with an API integration

I am currently developing a web search engine that utilizes the Giphy API... However, I've encountered difficulties with the button function. I have created buttons to modify the page format and adjust the number of search results displayed.... The We ...