FAQ

Features

• Accordion Layout: Displays questions and answers in a collapsible format for a clean and organized look.
• Dynamic Content: Supports easy updates to questions and answers through a structured data model.
• Customizable Input: Accepts an @Input property to dynamically provide questions and answers.
• Responsive Design: Adapts seamlessly to various screen sizes for a smooth user experience.
• Primeng Integration: Leverages the PrimeNG Accordion module for a polished and interactive interface.

Usage

Step 1: Import the Component

Add the FaqComponent to your Angular project by including it in your module or component imports array.

import { FaqComponent } from "src/app/components/faq/faq.component";
 
@Component({
  ...
  imports: [..., FaqComponent],
  ...
})

Step 2: Add the Template

Include the FAQ component in your template and provide the questions input:

<faq [questions]="faqQuestions"></faq>

Step 3: Define the Questions

Create an array of FaqElement objects in your TypeScript file to pass as the input:

faqQuestions: FaqElement[] = [
  {
    content: 'What exactly do I get?',
    answer: 'With DevRocket, you get a fully loaded Angular boilerplate packed with pre-built components, integrations, and everything you need to build and launch fast. Think of it as your project’s cheat code.',
  },
  {
    content: 'Is this built with TypeScript?',
    answer: 'Absolutely. DevRocket runs on TypeScript to keep your code clean, safe, and easy to scale. Once you try it, you won’t go back to plain JavaScript!',
  },
];

Component Structure

HTML Template

The default structure includes:

• Header: A bold heading to introduce the FAQ section.
• Accordion: A collapsible accordion from PrimeNG. Display questions as headers and answers as content.

Example Template

<div class="px-2 my-6 py-6 md:my-8 md:py-8">
  <div class="text-900 font-semibold text-3xl md:text-5xl mb-6 text-center">
    Frequently Asked Questions
  </div>
  <p-accordion>
    <p-accordionTab
      *ngFor="let question of questions"
      [header]="question.content"
    >
      <p class="line-height-3 m-0 p-3">{{ question.answer }}</p>
    </p-accordionTab>
  </p-accordion>
</div>

Notes

• The FAQ component is designed to simplify the presentation of questions and answers in an intuitive and user-friendly manner.
• Use the @Input property questions to dynamically provide the FAQ content.
• Ensure the questions array follows the FaqElement interface for consistency.