The functionality of ItemSliding appears to be disabled when used in combination with

Could you please help me figure out why the Me button is not visible? I implemented the ItemSliding component.

Here is the link to the stackblitz project. The issue is within the home folder.

I am trying to create a list like the one below:

UI

https://i.sstatic.net/jjOnD.png

.html

<ion-list>
        <ion-item-sliding #item>
            <ion-item>
                <button ion-button class="buttoncls">Me</button>
                <ion-label fixed>Members</ion-label>
            </ion-item>
            <ion-item-options side="right">
                <button ion-button (click)="deleteMember(item)" color="danger">
                <ion-icon name="ios-trash-outline"></ion-icon>
                </button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
cssangulartypescriptsassionic3

Answer №1

That's due to the fact that the ion-item component comes with a predefined set of selectors that can be inserted into the component. GitHub repository

 '<ng-content select="[item-start],[item-left],ion-checkbox:not([item-end]):not([item-right])"></ng-content>' +
    '<div class="item-inner">' +
      '<div class="input-wrapper">' +
        '<ng-content select="ion-label"></ng-content>' +
        '<ion-label *ngIf="_viewLabel">' +
          '<ng-content></ng-content>' +
        '</ion-label>' +
        '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
      '</div>' +
      '<ng-content select="[item-end],[item-right],ion-radio,ion-toggle"></ng-content>' +
      '<ion-reorder *ngIf="_hasReorder"></ion-reorder>' +
    '</div>' +
'<div class="button-effect"></div>',

Therefore, simply add an attribute like item-start as shown below

<button ion-button item-start class="buttoncls">Me</button>

and refer to the Forked Stackblitz

item-right will resemble Example

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

Is there a way to preserve the original color format without converting it to RGB

When applying a hsl color in JavaScript, it ends up being converted to RGB instead of staying as an HSL color. document.body.style.backgroundColor = "hsl(0,100%,50%)" document.body.style.backgroundColor; // "rgb(255, 0, 0)" I wanted to set an HSL color a ...

javascriptcsscolorsrgbhsl

What is the best way to ensure that an input group expands to fill the entire horizontal space

I am currently utilizing bootstrap 4 and have a responsive navbar for smaller screens. On this navbar, I am trying to implement a search input group that spans the full width from left to right up until the menu bar icon on the right side. You can view my ...

csstwitter-bootstrapflexbox

"Discovering issues with the functionality of Antd Table's search and reset capabilities

I'm currently working on integrating search and reset functions in an Antd table. However, I am encountering an issue with the reset (clearAll) function as it does not revert the table back to its initial state when activated. The search functionality ...

javascriptreactjstypescriptantd

Troubleshooting material design CSS problem in AngularJS routing module

Attempting to incorporate material design with routing in angular js, but encountering issues with CSS design not working. Interestingly, when using bootstrap CSS, it functions properly. Check out the Plnker Demo here However, upon trying this approach, ...

cssangularjsangularjs-routingangular-material

Displaying the appropriate DIV element based on the value entered by the user

I am encountering some difficulties... I have an <input> field. Depending on the input, one of the various <div> elements should be displayed. For now, it's just a text (e.g. "Your plan contains less than 1500 kcal!"), but later, the div ...

javascriptcss

Variety of HTML tags yet identical ID

Is it possible to have two elements with different types – such as a div and an ul with the same id in HTML? Here is an example of HTML code: <div id="articleOptions"> <ul id="articleOptions"> <li>Share</li> ...

htmlcss

After successfully installing @angular/localize, running npm update or npm install could result in a dependency error

I am looking to implement @angular/localize in my Angular application. Currently, I have a newly created NestJS backend integrated with an Angular frontend within an Nx monorepo. Upon attempting to install the package using npm install @angular/localize, ...

angularnpmnestjsnrwl-nxangular-localize

Frontend Angular Posting Data to Server

https://i.sstatic.net/6dcPt.png https://i.sstatic.net/uFMuL.png I have two components - one is a form and the other is a dialog with a form. When I click on the dialog with the form and input data, I want to save it first in an in-memory, and then post all ...

angulartypescriptrxjsin-memory

Transform the check box into a button with a click feature

I've customized a checkbox to resemble a button, but I'm encountering an issue where the checkbox is only clickable when you click on the text. Is there a way to make the entire button clickable to activate the checkbox? .nft-item-category-lis ...

htmlcsscheckbox

How can I incorporate a child component into a separate component within Angular version 14?

Currently working with Angular 14 and facing a challenge with including a child component from another module into a standalone component. The structure of the standalone component is as follows: <div> <child-component></child-component& ...

javascriptangularmodulecomponentsangular14

What is causing Safari to block styling for <em> elements in RESET.CSS only?

I am utilizing Eric Meyer's reset.css file, which can be found at this link: Interestingly, my <em> definition in my main stylesheet is working perfectly fine on all browsers except Safari. Somehow, only in Safari, the styling for italics is no ...

cssfontssafarigoogle-webfonts

Dealing with race conditions in Angular 2 nested resolvers and managing them effectively using RX

Back with an intriguing predicament! Currently, I am in the process of developing an angular2 application using RXjs observable data stores to supply data to my app. Upon launch, if a user is logged in, the app resolvers fetch the relevant user data and po ...

angularrxjsangular2-routingangular2-services

Crystal report for VS2010 displays scrollbars on the page

I like to present my report in a div container with overflow:scroll I have placed the crystal report viewer inside the DIV and expect it to stay within the div only, which it does. The div shows scroll bars when the report overflows. However, my page als ...

cssvisual-studio-2010crystal-reports

Transforming traditional HTML table layout to modern div structure

We are currently in the process of transitioning old pages from our previous website structure, which used tables, to our new layout based on DIVs. Our website is structured using a PHP include system with separate components for the header, body, and foot ...

phpcsshtml-table

Installation of Angular-cli is successful but system still shows error of Angular-cli not being installed

https://i.sstatic.net/dINO9.png These are the packages included in my project: "license": "MIT", "dependencies": { "@angular/animations": "^4.0.3", "@angular/common": "^4.0.3", "@angular/compiler": "~4.0.0", "@angular/core": "~4.0.0", ...

angularangular-cli

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

[http://jsfiddle.net/w7r3gveg/]1 I am looking to position 4 Facebook logos in the center bottom of my background image. The background is represented by the 'bg' div, while the Facebook logo is in the 'facebook' div. Currently, I can ...

htmlcss

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

javascriptcssvue.jsd3.jssvg

What is the ideal method to manage API post requests in Angular?

I have a requirement to search for a document based on its name property by providing a string input from my Angular application. This involves calling a REST API endpoint with a function that resembles the following code snippet: exports.idea_search = f ...

node.jsangularmongodbexpressmongoose

Having trouble getting my image and text to align properly in two columns

<img id="story_image" src="images/builder_story_side.png" alt="photo"/> <div id="story_right"> <h2 class="story_header">fdgdfgdfgdfgdfgfdgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg</h2> <p ...

css

Encountered an error with Aurelia webpack 4 when trying to load a necessary CSS file during runtime

I encountered a unique issue with webpack and aurelia that I can't seem to figure out. After creating a new webpack configuration based on online resources and official documentation, the compilation goes smoothly without any errors. However, during r ...

javascripttypescriptwebpackaurelia