Hide portion of component in home component Angular

Question

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> ```

Answer 1

您可以通过执行以下操作在显示它们之前过滤项目列表：

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

Answer 2

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

export class FaqComponent {
  @Input() showHome: boolean = false;
  filteredData;

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

  ngOnInit() {
    console.log(this.showHome);
    if (this.showHome) {
      this.filteredData = this.data.filter((question) => question.showOnHome);
    } else {
      this.filteredData = this.data;
    }
  }
}

Called On Home Page as:

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

---

EDIT: Create a simple example how this works. https://codesandbox.io/s/focused-nash-dlgsl?file=/src/app/app.component.html