gWe can Add Multi-line List, in Multi-line List displays multiple items in each component over more than one line. In this apps, we are creating a home page with a list of pages and adding item sliding. A sliding item is a list item that can be swiped to reveal buttons.
Here is this example we are learning
- Adding multiple page link in home template
- Adding swiped right to reveal hidden button
- Use of [ngClass]
In apps screenshot, we have the image at a left side of the page title and descriptions. We have to upload images in assets folder of our apps.
Step 1: ionic start navigation blank –v2
Step 2: Add following code in home.html
Within our component we have 2 components:
• For organizing the content for the list
• Which contains two hidden buttons (with click events bound to
them) that are activated when swiping in from the right
On clicking on the hidden button we will be calling a method that will display the message in the browser console.
Step 3: Add following code in home.ts
Step 4: Add the following code in home.scss
On continuing our previous example, we are creating about page where we will be displaying an image and text through an ion-slides. The Slides component allows multiple contents to be loaded (e.g images, video or text), as individual slides, into a single container which can then be swiped through. The Slides component is a multi-section container. Each section can be swiped or dragged between. It contains any number of Slide components.
Step 5 : Add the following code in about.html
Step 6: Add the following code in about.ts. We need to import slides and viewChilde. In an angular, we have @ViewChild decorator which allow us to interact with parent and child component. ViewChild helps us to get access to a component and its methods of the parent component.
We create an object called slideOpts which store the configuration options for our Slides component (these are part of the Slides component API – the pager property defines whether we display pagination bullets and the speed property defines, in milliseconds, how long the transition between slides will last