Hide portion of component in home component Angular-CodePudding

this is the ts file of an accordion component that I have called in the Home Page. However I want to use the parameter showOnHome to only display the ones with boolean true. How can I do that?

 @Component({
  selector: "app-faq",
  templateUrl: "./faq.component.html",
  styleUrls: ["./faq.component.css"],
})
export class FaqComponent implements OnInit {
 
  data = [
    {
      id: 1,
      question: "question1",
      answer: [
        "answer here",
      ],
      bullet: false,
      showOnHome: true,
    },
    {
      id: 2,
      question: "question2",
      answer: [
        "answer2",
      ],
      bullet: false,
      showOnHome: false,
    },]```


Called On Home Page as:
``` <app-faq></app-faq> ```

CodePudding user response：

You could filter the list of items before displaying them by doing something like:

const filteredData = data.filter(d => d.showOnHome);

CodePudding user response：

You can create a parameter for you component called showHome and filter internally for him.

export class FaqComponent implements OnInit {
  // parameter
  @Input showHome: boolean = false;

  data = [
    {
      id: 1,
      question: "question1",
      answer: [
        "answer here",
      ],
      bullet: false,
      showOnHome: true,
    },
    {
      id: 2,
      question: "question2",
      answer: [
        "answer2",
      ],
      bullet: false,
      showOnHome: false,
    },
   ];

   if (showHome) {
     const filteredData = data.filter((question) => question.showOnHome === showHome);
   else {
     const filteredData = data;
   }

Called On Home Page as:

<app-faq [showHome]="true"></app-faq>