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> ```
You could filter the list of items before displaying them by doing something like:
const filteredData = data.filter(d => d.showOnHome);
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