Building an Accordion Component in Ionic 3
HTML-код
- Опубликовано: 30 июл 2017
- In this coding session, we will build a new Ionic Component. This component will add Accordion functionality to our Ionic 3 Apps. We will not use anything pre built. We will build this component completely from scratch.
Join Me on FaceBook goo.gl/o2G36O
WooIonic on CodeCanyon: codecanyon.net/item/wooionic-...
Learn to build Ionic 3 Apps for WooCommerce. Grab a Coupon Here: goo.gl/uDbuad
Learn to Build Ionic 3 Apps with Parse Server goo.gl/PWAWny
Build an eCommerce Mobile App from start to end using Ionic Framework 3 and WooCommerce using HTML, SCSS, and TypeScript.
Ionic 3 Apps for WooCommerce is a course that will help you understand the basics of the latest version of Ionic Framework, v3, and also walk you through, step by step, to build a complete eCommerce application for Android and iOS using your WooCommerce Store as the back-end. Ionic Framework v2 and v3 are similar, so even if you want to learn Ionic 2, you need the same course.
The eCommerce app that we will build in this course gets the products' information from the WooCommerce store. You do not need to setup any extra databases or servers. All you need is just a WooCommerce store, either locally or on a remote server.
Don't own a WooCommerce Store yet? You will learn how to setup a WooCommerce store for free on your own computer and then use it to build an eCommerce App. You do not need to buy any tool or software. The course uses all open-sourced technologies.
You will build an eCommerce app that will allow the user to browse through the product catalog, search products in a particular product category, add products to their cart and then pay for their orders. The customers can pay using the PayPal payment gateway as well. The users will get Push Notifications every time you publish a new product. 
Наука
Github Repo: github.com/samarthagarwal/ionic-accordion-component
Hi bro, how i can display different information for each accordion ?
Hi bro, it's really awesome... Really appreciate for your contribution and it help us a lot. Keep it up!!
Saw some of your other videos great stuff. You keep getting better.
Thank you.
Another great tutorial from Samarth... Thanks a lot for share your knowledge with the world! Keep in this way! Greetings from Argentina.
This was really cool Samarth, it worked perfectly. Thanks so much for sharing.
I do have one question: Do I have to create a new component every time I want new content?
Great Video! Good job explaining the details. Thank you.
Yeah the music is fine, its better than hearing keyboard and mouse clicking in the background.... Thanks so much, the tut is awesome and helped me a lot!
Thank you for this video and sharing your knowledge :)
Thanks a lot bro worked perfectly
Thank you ! Great Content...
Thanks, Very helpful
Thanks, it's very nice
Thanks for this tutorial! Just wanted to add that the max-height should be this when the accordion expands so that the animation goes more smoothly if the content is long:
this.renderer.setElementStyle(this.cardContent.nativeElement, "max-height",(this.cardContent.nativeElement.scrollHeight + "px"));
Great content but please kill the music! it is very distracting
Great, I want to add different content to each accordion how to do that ? u explained in part two but not clear enough. Could u please explain about the file u are accessing in there? tq
(y) me funciono, saludos desde Mexico
Hey, I liked the video. but how do you pass data from an array to the component?
Muito obrigado . Brasil.
Its nice video. I need help how to export multiple component when i'm using lazy loading
how do you make one accordion close when you click on another?
Hey .I am implementing the same in my project but its showing an error like 'accordion' is not a known element:
Can u please give me the solution to get over it?
Hi thank you for your tutorial.
I am getting this error:
Error: Unexpected directive 'AccordionComponent in /Users/michaelberger/medmantest/src/components/accordion/accordion.ts' imported by the module 'AppModule in /Users/michaelberger/medmantest/src/app/app.module.ts'. Please add a @NgModule annotation.
What can I do?
can i set litst of items in the component
Hello, why do I always get the error message : "Uncaught (in promise): TypeError: this.cardContent is undefined" ?? I followed the tutorial, but it don't work... How you reply
How to use this with list of items
Hi Sir, Can you please solve this problem....I am getting this problem Error: Template parse errors:
'accordion' is not a known element:
1. If 'accordion' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
[ERROR ->]
"): ng:///ContextPageModule/ContextPage.html@50:4
hello, everything works fine but i'm getting error : " NullInjectorError: No provider for Renderer! " please help me to resolve
Cool :)
How can i implement using http get request?..this code is running fine.i am using list with a card & it expands only the first index of the list on every items click
When I am using the component in my page, how can I set a new Title and new content?
some thing like this:
text text text text text text text text text text text text
help, did you get it?
Hello, nice video, please push the code to github if possible. Thank you. :)
how can i set the different button name and content,because it gave me the same content and same name
bhavdip mangukiya watch part 2
Better to use Angular Animation and easier
The background techno music is not very distracting
It works in iIonic 4?
or some way to build in ionic 4?
ruclips.net/video/w5PR_d6eiQI/видео.html
When we put multiple Accordians, oblivious we need different content in each. But as per your method all the Accordians will have same content :(
Watch part 2.
i watch.. no solution =(
good tutorial, but the music dude, the music ruins everything
argh the music!! so hard to concentrate
Cool Content - irritating Music!