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

Exploring Angular's filtering capabilities and the ngModelChange binding

Currently, I am in the process of working on a project for a hotel. Specifically, I have been focusing on developing a reservation screen where users can input information such as the hotel name, region name, check-in and check-out dates, along with the nu ...

htmlangulartypescript

Troubleshooting Problems with Angular Localization in EJ2 Syncfusion

I have been utilizing the Syncfusion Spreadsheet component to display data similar to an Excel spreadsheet. I successfully implemented all the necessary functionalities with Syncfusion documents, however, I am encountering a challenge. My current issue i ...

angularlocalizationinternationalizationsyncfusionangular-i18n

Exploring Angular2's DOMContentLoaded Event and Lifecycle Hook

Currently, I am utilizing Angular 2 (TS) and in need of some assistance: constructor(public element:ElementRef){} ngOnInit(){ this.DOMready() } DOMready() { if (this.element) { let testPosition = this.elemen ...

typescriptangular

Best Practices for Error Handling in Typescript

After delving into articles about error handling, a thought lingers in my mind - is throwing an exception on validation logic in the value object really the most efficient approach? Take for example this class that represents a value object: export class U ...

typescripterror-handlingdomain-driven-designvalue-objects

Why do optional values of objects remain optional when being checked in an if statement in Typescript?

Recently at work, I encountered this code snippet and was left wondering why Typescript couldn't comprehend the logic behind it. If 'test' in the object can either be undefined or a string, shouldn't it logically infer that within an if ...

typescriptobjectif-statement

Error: Unable to connect to 'ngbTypeahead' as it is not recognized as a valid attribute of 'input' in the template

Having trouble with ngbTypeahead. The console is displaying the following error message: Error: Template parse errors: Can't bind to 'ngbTypeahead' since it isn't a known property of 'input'. (" <inpu ...

angular

Is there a way to show uppercase values in Angular's tooltip as capital letters?

Here is my HTML code: <i [class]="item.icon" [pTooltip]="item.item" tooltipPosition="bottom" ></i> The value inside item.item is 'ATTACHMENT' and I am unable to modify it from the ts file. Is there a way ...

htmlangulartooltipprimeng

Getting TypeScript errors when incorporating a variant into a Material-UI button using a custom component

I have created a unique Link component inspired by this particular example. Take a look at the code below: import classNames from 'classnames'; import {forwardRef} from 'react'; import MuiLink, {LinkProps as MuiLinkProps} from '@ma ...

reactjstypescriptmaterial-uitypescript-typings

Angular throws a NullInjectorError when a unit test fails due to issues with dependency

As a newcomer to Angular, I am struggling to grasp the concept of Dependency Injection (DI) and how it functions. My current challenge involves trying to pass a unit test successfully. Below is the code for the test; import { TestBed } from '@angula ...

angularunit-testing

Using the Angular Material Tree to showcase the hierarchical layout of an organization's

I am looking to visually represent the structure of an organization using an angular material tree, with properties such as position, salary, and years of service for each employee. class Employee { name: string; position: string; salary: number; ...

angularangular-materialtreeviewangular-cdk

The process of transitioning to a different view through a button press

How can I switch to another view by clicking a button in Aurelia? Here is my code: <button class="btn btn-success " click.delegate="save()">New item</button> Typescript configureRouter(config: RouterConfiguration, router: ...

typescriptaurelia

Generating divs dynamically with inline styling and utilizing ngFor, while incorporating a conditional check with ngIf in Angular

Currently, I have an Angular component where I am dynamically generating div elements using the ngFor directive. However, I also need to validate a condition before creating each div, and I'm facing challenges when trying to use both ngFor and ngIf in ...

htmlcssangular

Disruptions in typing occur due to errors popping up while utilizing zod and react-hook-forms within a TypeScript application

Currently, I am working on developing a registration page for users using react-hook-forms for the registration form and zod for validation. Initially, when testing the form, I noticed that errors only appeared after submitting the form. However, once the ...

reactjstypescriptvitezod

Generate a commitment from the function

I know the basics of JavaScript Promise and promise chain, but I'm looking to deepen my understanding. For example, take a look at the method provided below. It's in TypeScript, but can be adjusted for JavaScript ES6. private InsertPersonInDB(p ...

javascriptangulartypescriptpromisees6-promise

A guide on iterating through various JSON arrays and displaying them in AngularJS

I'm in the process of developing a new school management system and I need to showcase the list of departments along with the courses being offered by each department. The course information is saved in JSON format within the database. Here is my JSO ...

angularmultidimensional-array

Implementing dynamic data updates for the yAxis in a chart using Highcharts and Angular 2/4

I am currently working with a spline chart: this.chart = { chart: { type: 'spline', zoomType: 'x', animation: true, marginRight: 10, renderTo ...

angulartypescripthighchartsangular2-highcharts

Determine the types of values for an object through the use of Generics

After spending a while pondering over this issue, I have yet to discover an elegant solution. My dilemma begins with an Enum: export enum Enum { A, B, C, } Next, there is an object that utilizes the Enum. While the structure is somewhat predi ...

typescript

Can you retrieve the Angular Service Instance beyond the scope of an angular component?

Is it possible to obtain the reference of an Injectable Angular service within a generic class without including it in the constructor? I am exploring different methods to access the Service reference. For example: export class Utils { getData(): string ...

angulartypescriptangular-services

TypeScript: The class results in an empty object being returned

I'm encountering an issue with a Typescript Class that I'm attempting to use. Even after instantiating it, I'm not getting the correct class instance. Class GamesService export interface IGame { name: string; online: number; likes: n ...

typescript

What could be the reason it's not functioning as expected? Maybe something to do with T extending a Record with symbols mapped

type Check<S extends Record<unique, unknown>> = S; type Output = Check<{ b: number; }>; By defining S extends Record<unique, unknown>, the Check function only accepts objects with unique keys. So why does Check<{b:number}> ...

typescript