Ionic Framework: Implementing a search bar in the navigation bar

I am looking to include a search icon in the navbar of my Ionic project

<ion-navbar>
    <ion-buttons left>
      <button ion-button menuToggle>
        <ion-icon name="menu"></icon-icon>
      </button>
    </ion-buttons>
<ion-title *ngIf="!searchBox">Destiny Pro 1.0</ion-title>

<ion-searchbar *ngIf="searchBox"></ion-searchbar>

  <ion-buttons right>
    <button ion-button icon-only (click)="showSearchBox()">
        <ion-icon  *ngIf="!searchBox" md="md-options" ></icon-icon>
    </button>
</ion-buttons>
</ion-navbar>

https://i.stack.imgur.com/yTdO7.png

Unfortunately, the ion-icon is not showing up.

angulartypescriptionic-frameworkionic3

Answer №1

I just checked and it's functioning correctly.

<ion-navbar>
    <ion-buttons left>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
<ion-title *ngIf="!searchBox">Destiny Pro 1.0</ion-title>

<ion-searchbar *ngIf="searchBox" ></ion-searchbar>

  <ion-buttons right>
    <button ion-button icon-only (click)="showSearchBox()">
        <ion-icon  *ngIf="!searchBox" md="md-options" ></ion-icon>
    </button>
</ion-buttons>
</ion-navbar>

Check out this live Demo

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

determine function output based on input type

Here's a question that is somewhat similar to TypeScript function return type based on input parameter, but with a twist involving promises. The scenario is as follows: if the input is a string, then the method returns a PlaylistEntity, otherwise it ...

javascripttypescriptgenericsconditional-types

Exploring intricate JSON data in Angular 4 applications

Below is the json structure I have: [ { "section":{ "secName":"Module 1", "pages":[ { "pageName":"Page 1", "pageType":"brightcove", "pageData":[ { ...

angulartypescript

Chrome Not Responding to Angular5 Debugging

I'm facing an issue where I used to be able to set breakpoints in my Angular code using developer tools, and it would pause correctly. However, recently the network files are not being mapped to my local files properly. For a detailed explanation, ple ...

angulargoogle-chrometypescriptsource-mapsgoogle-developer-tools

Inject SCSS variables into Typescript in Vue 2 Using Vue-cli 5

When working on my Vue 2 project (created using the Vue-cli v4), I successfully imported variables from my SCSS file into my typescript (.vue files) without any issues. I had the :export { ... } in my SCSS file _variables.scss, along with shims.scss.d.ts ...

typescriptvue.jswebpacksassvue-cli

Component does not detect change when the same number is sent as input

Let me paint you a picture: I have this nifty component, set up with the OnPush strategy, that showcases a PDF document, sliding through pages one by one, and granting users the ability to smoothly glide through pages and jump to specific ones. It even of ...

javascriptangularangular-changedetectionngonchanges

Retrieve data upon component mounting and deactivate the query in React-query

When navigating to a search result page, query parameters are passed to useQuery. I want the data to be fetched only when the user clicks the "Search" button after changing the search prompt. I attempted to use enabled: false and call refetch() on button ...

reactjstypescriptnext.jsreact-querytanstack

How to determine the return type based on the quantity of arguments passed to a rest parameter function

Is there a way to create an arrow function using rest parameters that can return different types based on the number of arguments passed? For example, I am looking to implement a safeId() function with the following return type variations: safeId() // () ...

typescripttypescript-generics

SmartEdit functions properly when spartacus is running using yarn start --ssl, but does not work without SSL enabled

I followed the smartedit setup instructions at and everything works well when I start the Spartacus server with yarn start --ssl. However, if I start the server with just yarn start, the storefront does not appear. See image here for reference ...

javascriptangular

Intellisense from @reduxjs/toolkit is not showing up in my VS Code editor

My experience with vscode is that intellisense does not recognize @reduxjs/toolkit, even though the code itself is functioning correctly. I have already installed the ES7+ React/Redux/React-Native snippets extension from here. Here are a couple of issues ...

reactjstypescriptvisual-studio-codeautocompleteintellisense

Angular template error: Potential is present but not defined

Encountering an issue with my Angular application's template file (dashboard.component.html). The error message reads "Object is possibly 'undefined'." Here's the portion of the template that seems to be causing the problem: <div> ...

angulartypescriptangular17

Using Angular to sort arrays based on the values in a separate array

I have a unique setup where there is a table containing select options in each row. The value of the select option changes based on the 'dataType' specified for that particular row. Here is an example of my Table Array: { 'name':' ...

javascriptangular

Angular Delight: Jaw-Dropping Animation

After setting up my first Angular project, I wanted to incorporate Angular Animations to bring life to my content as the user scrolls through the page. I aimed to not only have the content appear on scroll but also implement a staggering animation effect. ...

htmlcssangulartypescriptanimation

Sharing data between two components in an Angular2-Meteor application

I am currently working with angular2-meteor. When attempting to transfer a value between two components (updating the value in the first component triggers an event in the second component where the new value is used), I have two methods available: The ...

meteorangularangular2-meteor

Angular 4 applications do not come with TinyMCE embedded

I've been attempting to integrate the tinyMCE editor into an angular4 application, but unfortunately I encountered an error that reads: tinyMCE is not defined. https://i.stack.imgur.com/qMb5K.png I have been following the guidance provided by tin ...

javascriptnode.jsangularjhipstertinymce-4

The React component using createPortal and having its state managed by its parent will remain static and not refresh upon state modifications

I am facing a problem that can be seen in this live example: https://stackblitz.com/edit/stackblitz-starters-qcvjsz?file=src%2FApp.tsx The issue arises when I pass a list of options to a radio button list, along with the state and setter to a child compon ...

javascriptreactjstypescript

Organize library files into a build directory using yarn workspaces and typescript

When setting up my project, I decided to create a yarn workspace along with typescript. Within this workspace, I have three folders each with their own package.json /api /client /lib The main goal is to facilitate code sharing between the lib folder and b ...

node.jstypescriptyarnpkg

How is it possible for this for loop to function properly without the need to pass the incrementing variable

I managed to compile my code and it's working fine, but there's something interesting - the variable that should reference the incrementing value is not included as an argument in the for loop. var _loop2 = function _loop2() { var p = docume ...

javascripttypescriptfor-loop

A guide to resolving the Angular 11 error of exceeding the maximum call stack size

I am currently working with 2 modules in Angular 11 CustomerModule AccountingModule I have declared certain components as widget components in these modules that are used interchangeably: CustomerModule -> CustomerBlockInfoWidget AccountingModule -&g ...

node.jsangulartypescript

The additional parameters I am trying to append are being overwritten by the set parameters in the httpInterceptor

Issue Description: I have implemented an HttpInterceptor that adds an id and token to all requests when the user's credentials are available. However, I am facing the problem of the interceptor overwriting any additional HttpParams added to a request. ...

angularangular-http-interceptors

Browser with Node's https.Agent

In my npm package written in TypeScript, I utilize axios to make web requests. One of the endpoints requires certificate authentication, so I pass new https.Agent to axios to include the necessary certificates. Everything works perfectly when the module is ...

node.jstypescriptnpm