While this solution may not be perfect, based on the information provided in your question, this is the approach I have come up with.
To see a working example, you can click on the 'li' tags in the link below:
https://stackblitz.com/edit/angular-ivy-u8oxlv?file=src/app/app.component.ts
app.component.ts
export class AppComponent {
filterList = ['First', 'Second', 'Third'];
// List of items that has been selected by clicking
selectedList = [];
// List of items that needs to be selected for the condition
itemsNeededForDisplay = ['Second', 'Third'];
// Flag to either hide or display the component
displayComponent: boolean = true;
filterChanged(text) {
// If we already selected the item, we should remove it from our list, otherwise add it to the list
const foundIndex = this.selectedList.findIndex((sl) => sl == text);
if (foundIndex == -1) this.selectedList.push(text);
else this.selectedList.splice(foundIndex, 1);
// After every click we should check if we should hide or display the component
this.handleComponentDisplayRule();
}
handleComponentDisplayRule() {
// This filter will return us a new array that matches the filter (we look if the selectedList has the 'itemsNeededForDisplay')
let foundSelectedFilters = this.selectedList.filter((elem) => {
return this.itemsNeededForDisplay.indexOf(elem) > -1;
});
// If we get the length same as our 'itemNeededForDisplay' it means that our list has all the values we are looking for
this.displayComponent = foundSelectedFilters.length != this.itemsNeededForDisplay.length;
}
}
app.component.html
<span> Selected: {{ selectedList | json }} </span>
<ul>
<li
*ngFor="let filter of filterList"
(click)="filterChanged(filter)"
[attr.data-nav]="filter"
>
{{ filter }}
</li>
</ul>
<hello *ngIf="displayComponent"></hello>
hello.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
}