Custom Accordian in Angular

How to create reusable custom accordion in Angular
First create a folder name accordion with three files (accordian.component.ts, accordian.component.html and accordian.component.css) files code is given below. I am passing a data from app.component.ts to accordian.component.ts.I am passing data from parent to children using @input decorator and there is a loop and toggle function in accordion which show and hide the corresponding element we click and data i received from service file.You can also add static data in accordion if you see (app.component.ts) i have added static data in accordion array of objects.I am calling accordion component in app.component.html file and for service and data see servicedata.service.ts
Demo Link

accordian.component.ts
import { Component,Input } from '@angular/core';
@Component({
  selector: 'app-accordian',
  templateUrl: './accordian.component.html',
  styleUrls: ['./accordian.component.css']
})
export class AccordianComponent {
@Input() isOpen;
  constructor() { }
@Input() data;
 toggleAccordian():void{
 this.isOpen = !this.isOpen;
 console.log(this.isOpen)
}
}
accordian.component.html
<div class="card mb-2" >
  <div class="card-header" (click)="toggleAccordian()">
    {{data.title}}
  </div>
  <div class="card-body"  [class.d-none]="isOpen">
    <p class="card-text"> {{data.summary}}</p>
     </div>
</div>
accordian.component.css
.card-header{
    cursor: pointer;
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AccordianComponent } from './accordian/accordian.component';
import { Servicedata } from './servicedata.service';
@NgModule({
  declarations: [
    AppComponent,
    AccordianComponent
  ],
  imports: [
    BrowserModule
  ],
  providers:[Servicedata],
  bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component,OnInit,ContentChild } from '@angular/core';
import { Servicedata } from './servicedata.service';
import { AccordianComponent } from './accordian/accordian.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
 accord_Data:Object[];
  static_Data={
    title:'Static Header',
    summary:"Lorem Ipsum is simply dummy text of the printing and typesetting industry 1"
    };
 isOpen:boolean = true;
 constructor(private serviceData:Servicedata) { }
  ngOnInit(){
  this.accord_Data = this.serviceData.getData()
   this.accord_Data.unshift(this.static_Data)
}
}
app.component.html
<div class="container-fluid">
<app-accordian *ngFor="let data of accord_Data" [data]="data" [isOpen]="isOpen" ></app-accordian>
</div>
servicedata.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class Servicedata {
  constructor() { }
getData() {
  return  [
  {
    title:'Header 1',
    summary:"Lorem Ipsum is simply dummy text of the printing and typesetting industry 1"
    },
     {
    title:'Header 2',
    summary:"Lorem Ipsum is simply dummy text of the printing and typesetting industry 2"
    },
     {
   title:'Header 3',
    summary:"Lorem Ipsum is simply dummy text of the printing and typesetting industry 2"
    }
]
 }
}

49 thoughts on “Custom Accordian in Angular

  1. Hairstyles Men

    I will immediately grab your rss feed as I can not in finding your e-mail subscription link or e-newsletter service. Do you’ve any? Kindly let me recognize in order that I may just subscribe. Thanks.

  2. Hairstyles

    Hello there, simply was aware of your weblog through Google, and found that it is really informative. I抦 gonna be careful for brussels. I will be grateful in the event you proceed this in future. Lots of other folks might be benefited from your writing. Cheers!

  3. Hairstyles Women

    Thanks for this glorious article. Also a thing is that the majority of digital cameras are available equipped with a zoom lens that enables more or less of your scene to get included by ‘zooming’ in and out. These changes in target length tend to be reflected while in the viewfinder and on large display screen at the back of the particular camera.

  4. Hi Hairstyles

    Normally I don’t read article on blogs, however I wish to say that this write-up very forced me to take a look at and do it! Your writing style has been surprised me. Thank you, very nice article.

  5. Hairstyles

    Pretty great post. I just stumbled upon your weblog and wanted to say that I have really enjoyed browsing your blog posts. In any case I will be subscribing in your rss feed and I hope you write again soon!

  6. Hairstyles Women

    I and also my guys have been reviewing the nice ideas located on your web blog then before long developed a horrible suspicion I never thanked the website owner for those techniques. The men are already as a consequence excited to learn all of them and now have honestly been having fun with them. Appreciate your truly being very helpful and also for considering this form of perfect subject areas most people are really needing to learn about. My personal honest apologies for not saying thanks to sooner.

  7. Hairstyles Men

    One more thing I would like to talk about is that as an alternative to trying to accommodate all your online degree classes on days and nights that you finish work (since the majority people are drained when they go back home), try to obtain most of your classes on the week-ends and only one or two courses on weekdays, even if it means taking some time away from your weekend break. This is fantastic because on the week-ends, you will be more rested in addition to concentrated in school work. Thanks alot : ) for the different points I have figured out from your weblog.

  8. Hairstyles

    Thanks for the tips you have discussed here. Another thing I would like to say is that laptop memory requirements generally rise along with other innovations in the technologies. For instance, as soon as new generations of processors are brought to the market, there is certainly usually a corresponding increase in the size and style demands of all personal computer memory along with hard drive room. This is because the software operated by means of these cpus will inevitably increase in power to take advantage of the new know-how.

  9. Hairstyles Men

    Hey! Quick question that’s completely off topic. Do you know how to make your site mobile friendly? My site looks weird when viewing from my apple iphone. I’m trying to find a template or plugin that might be able to resolve this problem. If you have any recommendations, please share. Thanks!

  10. Fashion Styles

    What i do not realize is actually how you’re not really much more well-liked than you may be now. You’re very intelligent. You realize therefore significantly relating to this subject, produced me personally consider it from a lot of varied angles. Its like women and men aren’t fascinated unless it is one thing to do with Lady gaga! Your own stuffs excellent. Always maintain it up!

  11. Charliqs

    Bitcoin Mixer (Tumbler) Mixer Bitcoin Mixer Bitcoin (onion) is the incomparable cryptocurrency clearing aid if you desideratum settled anonymity when exchanging and shopping online. This select refrain from obscure your personality if you needfulness to be worthy of p2p payments and a variety of bitcoin transfers. The Bitcoin Mixer serving is designed to jumble a son’s loot and give him real bitcoins. The vital hub here is to succeed unshakable that the mixer obfuscates transaction traces amiably, as your transactions may essay to be tracked. The foremost blender is the a given that gives utmost anonymity. If you lack every Bitcoin lyikoin or etherium arrangement to be uncommonly arcane to track. Here, the malediction of our bitcoin mixing organize makes a outline of sense. It intention be much easier to protect your notes and slighting information. The the same pretext you be lost short of to in concert with our help is that you thirst for to disguise your bitcoins from hackers and third parties. Someone can analyze blockchain transactions, they on be gifted to track your intimate statistics to heist your coins. With our Bitcoin toggle discipline, you won’t hold to sweat blood about it anymore.
    All unstained grid-work bitcoin mixers ARE NOT MILD and can be tracked down to their owners, and the owners fiat send powwow there the users to release their asses. This includes bitcoin-laundry.com, bitmix.biz, cryptogrind.com, blender.io, mixtum.io, bitcoinmixer.eu and sundry others.
    As a ascendancy of thumb, if you utilization this avenue: whois.domaintools.com and you can discovery the possessor and hosting company of a bitcoin mixer, then is not acceptable to use.
    The coppers can find out them as fair and go them to encourage also in behalf of your verboten activities. They intent redeem their asses and cater advice broad what bitcoins you got.
    Each time profit not later than bitcoins mixers on the brunette web. Look as surplus our mixer. If you don’t like it use another mixer on the overcast web. But eternally on dim as a toc h lamp entanglement
    And it not ok if a bitcoin on the privy network has also an address on put net. The gendarmes can bump into uncover them with the eliminate network assign a philippic to and entreat severely their shady spider’s web tracking down and require suited for logs.
    Mixer Bitcoin Mixer Bitcoin (onion)

  12. Altojers

    比特币混合器(切换开关)
    BitMix BitMix (onion)
    – 是最好的加密货币交换服务,如果您在网上交换和购物时需要完全匿名。 如果您需要进行p2p支付和各种比特币转账,这将有助于隐藏您的身份。 比特币混合器服务旨在混合一个人的钱,并为他提供纯粹的比特币。 这里的主要重点是确保混合器很好地隐藏事务跟踪,因为您的事务可以被跟踪。 最好的搅拌机是提供最大匿名性的搅拌机。 如果您希望比特币,lycoin或以太坊的每笔交易都非常难以跟踪。 在这里,使用我们的比特币混合网站非常有意义。 这将是更容易为你保护你的钱和个人信息。 您想要与我们的服务合作的唯一原因是因为您想隐藏您的比特币免受黑客和第三方的攻击。 有人可以分析区块链交易,他们将能够跟踪您的个人数据以窃取您的硬币。 有了我们的比特币开关,你就不用再担心了。我们的收费是业界最低的。 由于我们有大量的交易,我们可以负担得起我们的百分比降低到低于0.01%,吸引越来越多的客户。 客户很少的比特币搅拌机无法跟上我们的步伐,他们被迫收取大笔佣金,从1%到3%的服务,以赚取足够的钱来支付托管和费用。
    通常很少使用1-3%的高额费用的比特币搅拌机,当它们被使用时,人们将它们用于small30,$200或类似金额的小额交易。 使用这些搅拌机进行价值数千美元的大型交易是不方便的,因为这样费用将是恒定的。
    3. 碰撞保护。 由于我们的客户对我们非常重要,我们有一个崩溃保护机制,确保我们的系统永远不会失败。 无论发生什么,你总是能拿回你的纯比特币。 如果互联网连接中断,如果电源熄灭或电池耗尽,您仍然可以取回您的比特币。
    最多10个输出地址。 其他比特币搅拌机最多只允许5个地址。 我们允许最多10个地址。
    个人费用。 这使您可以选择我们收到的报酬金额,具体取决于您有多少钱。 如果你觉得更慷慨,你可以分配更高的费用,如果你觉得害羞,你可以分配更低的费用。
    时间延迟。 您可以在收到交易后设置一个时间延迟,基本上确保执法机构无法通过只看哪些比特币在您进入比特币后出来来跟踪您的比特币。 时间延迟允许您在其他人收到他们的付款后发送您的付款,因此基本上如果警察跟踪您,他们可能会感到困惑并转而关注其他付款给其他人。
    Bitcoin Mixer Bitcoin Mixer (onion)

Leave a Reply

Your email address will not be published. Required fields are marked *