Incorporating Ionic Elements

I've been attempting to set a default segment as active in my app. After looking through other threads and questions, the solution appears to involve making changes in the segment js file located in the components folder.

However, I can't seem to find any segment file inside the component folder. I have just been entering the code directly into the html pages to include the component.

Have I been approaching this incorrectly? Is there another way to add it?

Thank you for your assistance.

Edit 1:

<div>
  <ion-segment [(ngModel)]="testing">
    <ion-segment-button value="book">book</ion-segment-button>
    <ion-segment-button value="table">table</ion-segment-button>
  </ion-segment>
</div>
  <div [ngSwitch]="testing" >
    <ion-list *ngSwitchWhen="'book'" ngSelected="selected">
      <a ion-item>
        <ion-label>book list</ion-label>
      </a>
   </ion-list>
<ion-list *ngSwitchWhen="'table'">
      <a ion-item>
        <ion-label>table list</ion-label>
      </a>
   </ion-list>
</div>
angulartypescriptionic2ionic3

Answer №1

To set the first tab as the default selection, you can initialize the testing property with the value of the segment when declaring it:

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

  public testing = 'book';

  // ...

}

In your view template:

<div>
  <ion-segment [(ngModel)]="testing">
    <ion-segment-button value="book">book</ion-segment-button>
    <ion-segment-button value="table">table</ion-segment-button>
  </ion-segment>
</div>
  <div [ngSwitch]="testing" >
    <ion-list *ngSwitchWhen="'book'"> <!-- I've removed the ngSelected-->
      <a ion-item>
        <ion-label>book list</ion-label>
      </a>
   </ion-list>
<ion-list *ngSwitchWhen="'table'">
      <a ion-item>
        <ion-label>table list</ion-label>
      </a>
   </ion-list>
</div>

The logic is simple. 

<ion-segment [(ngModel)]="testing">
connects the segment to the testing property, and 
<div [ngSwitch]="testing" >
determines which list to display based on the value of testing:

<ion-list *ngSwitchWhen="'book'">...</ion-list>
or 
<ion-list *ngSwitchWhen="'table'">...</ion-list>

By initializing 'book' to the testing property in your component, the first segment will be selected by default.

If you need to programmatically change the selected tab, simply update the testing property like so: this.testing = 'table'; to select the second segment.

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

Utilizing generic union types for type narrowing

I am currently attempting to define two distinct types that exhibit the following structure: type A<T> = { message: string, data: T }; type B<T> = { age: number, properties: T }; type C<T> = A<T> | B<T>; const x = {} as unkn ...

typescript

Deactivating attribute inheritance / configuring component settings with script setup and Typescript

Is there a way to disable attribute inheritance for a component's options when using script setup syntax with Typescript in Vue 3? Here is the JavaScript code example: app.component('date-picker', { inheritAttrs: false, // [..] }) How ...

typescriptvue.jsvue-componentvuejs3vue-script-setup

What could be causing the empty object return from the Async function in my Typescript code on Next JS?

Encountering issues with an async function. In the ../lib folder, I have a class for handling data from an API website. However, when attempting to load the API data within an async function, I encounter difficulties. The async function does not return a ...

javascripttypescriptapinext.js

Having difficulty handling text overflow in Angular4 and HTML

I'm facing an issue with displaying a very large text in a table. Despite trying various attributes such as - { text-overflow: clip; } { text-overflow: ellipsis; } { text-overflow: ellipsis-word; } { text-overflow: "---"; } { text-overflow: ellip ...

htmlcssangular

The power of Vue reactivity in action with Typescript classes

Currently, I am working on a Vue application that is using Vue 2.6.10 along with Typescript 3.6.3. In my project, I have defined a Typescript class which contains some standard functions for the application. There is also a plugin in place that assigns an ...

typescriptvue.jsvue-reactivity

Tips for postponing the listening observer experience?

One of my components is triggered by a conditional show: <app-list *ngIf="show"></app-list> At the same time, I emit an event in the same place where I activate this component: this.tabsEvens.emitMoveToVersions(version); this.router.navigate ...

angularangular7angular8

Terminal displays Typescript variable syntax error

Recently, I've been delving into TypeScript using Visual Studio Code. However, I've encountered a perplexing syntax error that stems from how I've defined a variable. Here's an example of my declaration: let year:number = 2015 My term ...

node.jstypescriptterminalvisual-studio-code

Angular Material 7 now allows you to create a link for an entire row!

Currently, I am utilizing Angular Material 7 tables (mat-table) and my goal is to create a link for an entire row so that it leads to a detailed page display. The specific requirement is to have a functional link that can be opened in a new tab, which mea ...

angularangular-material

Utilize your access token to send a message through Google Business Messages

Currently, I have successfully set up a method to send messages using the Google Business Messages API from an agent to a user through NodeJS. const bmApi = new businessmessages.businessmessages_v1.Businessmessages({}); This process requires authenticatio ...

node.jstypescriptgoogle-apigoogle-oauth

Refilling state through an NgRx Effect

I am facing a situation where I have JSON data stored in my effect, which was initially generated using JSON.stringify(state), and now I need to insert that JSON string back into the state in order to update the application. As someone new to Angular and N ...

angularreduxngrxngrx-storengrx-effects

React TypeScript - Module not found

Organizational structure: src - components - About.tsx In an attempt to optimize performance, I am experimenting with lazy loading: const About = React.lazy(() => import('components/About')); However, Visual Studio Code is flagging &ap ...

reactjstypescript

Reactive forms with Angular CDK drag and drop

I'm facing an issue in this scenario: https://stackblitz.com/edit/angular-asevei?file=app%2Fcdk-drag-drop-sorting-example.html Everything seems to be functioning properly, except that when I drag the select box, it keeps resetting to the first value ...

angularangular-reactive-formsangular-cdk

What is the proper way to add an object to an array within an object in TypeScript?

import {Schedule} from './schedule.model'; export class ScheduleService{ private schedules:Schedule[]=[ new Schedule("5:00","reading"), new Schedule("6:00","writing"), new Schedule("7:00","cleaning") ]; getSchedule(){ ret ...

javascriptarraysangular

Navigating Between Pages with Parameters in Ionic 2 (starter app)

I have an Ionic 2 project with a blank template containing a page that displays a list. Upon clicking on an item in the list, the user should be able to view more details about that specific item. Below are the files related to the list: list.html: <i ...

javascriptangulartypescriptionic2ionic3

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

Looking for a way to set custom buttons on ion-select through interfaceOptions in ionic 4? HTML <ion-item> <ion-label>Lines</ion-label> <ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOption ...

htmltypescriptionic-frameworkionic4

Issue with Formik compatibility in Next JS 14 Application Structure

I attempted to create a basic validation form using Formik. I meticulously followed their tutorial and example, but unfortunately, the form is not functioning correctly. Despite my efforts, I have been unable to identify a solution (Please correct me if I& ...

typescriptnext.jsformik

Encountering errors in Visual Studio when trying to work with node_modules directories that have a tsconfig

In my current project, there is a tsconfig.json file located in the root directory. Strangely, Visual Studio keeps throwing errors related to other instances of tsconfig.json found in different packages, as shown below: https://i.sstatic.net/T7Co2.png Ev ...

typescriptvisual-studiovisual-studio-2022

Can someone please explain how to display a specific element from a JSON Array?

Is there a way to display only this specific part? /db/User_DataDb/61500546-4e63-42fd-9d54-b92d0f7b9be1 from the entirety of this Object obj.sel_an: [ { "__zone_symbol__state":true, "__zone_symbol__value":"/db/User_DataDb/61500546-4 ...

arraysobjecttypescript

Angular application using ngrx-store-localstorage does not retain data after a page refresh

Looking to incorporate ngrx into my authentication flow with the help of ngrx-store-localstorage for token persistence between browser sessions. After logging in, I can see the token value stored like this: {"token":{"token":"e5cb6515-149c-44df-88d1-4ff1 ...

angularauthenticationngrx

Angular with RxJS: Observable with synchronous data flow

One of the services I have includes a method called foo. In this method, I am subscribing to an observable (http-client). foo () : boolean { let ret : false; this.http.get ("/blabla").subscribe ( (resp) => { ret = true; } return ret; ) ...

angularrxjs