- I want to get functionality like if the filter result1 is zero then it should not show the header.
- In the code you can see that there is a global array which has many categories. When searching when the result filter is zero, i don't want to show the header name . If it doesn't match any category then i have to show no result.
- We are filtering the category out from the global array which has material for all the categories ,then showing that category content.
Basically I want to hide the header when there is no result.
app.html
This is the place where the filter is used for the global array and it shows the questions and the answers.
<div class="faq-section text-center"> **Using ngContainer to check if the result is empty or not** <ng-container *ngIf="( globalList | filter : searchText) as result1"> *This is the heading that i want to hide when there is no content but it the header is showing when the contents are searched in the search bar* <h1 *ngIf="!result1.length<=0" data-aos="fade-up" data-aos-easing="ease-in-out-back" data-aos-duration="1200" data-aos-once="true"> <span ng-hide="home.browser=='ie'">Download and Installation</span> <!-- <span class="heading-ie" ng-show="home.browser=='ie'"> <svg xmlns="http://www.w3.org/2000/svg" width="70" height="50" viewBox="0 0 0 0"> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#133778;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#2A9DA7;stop-opacity:1"></stop> </linearGradient> <text x="0" y="35" font-family=" 'Open Sans', sans-serif !important" font-size="34" fill="url(#grad1)">Download and Installation</text> </svg> </span> --> <!----> </h1> *PLace to show the contents* <div data-aos="fade-up" data-aos-easing="ease-in-out-back" data-aos-duration="1200" data-aos-once="true" class="row justify-content-center no-gutters"> <div class="col-11 faq-list" style="text-align: left;"> <mat-accordion displayMode="flat" [multi]="false" #accordion="matAccordion"> <!--*ngFor="let faq of faqList | filter : searchText" --> <mat-expansion-panel *ngFor="let faq of faqList | filter : searchText" [expanded]="faq.isExpanded" (opened)="beforePanelOpened(faq,'faqList')" (closed)="beforePanelClosed(faq)" (afterCollapse)="afterPanelClosed($event)" (afterExpand)="afterPanelOpened($event)" style="font-size:0.9em;font-weight: 500;color: #2c333f;" #mapanel="matExpansionPanel" [hideToggle]="true"> **This is a mat expansion for showing the questions and the answers which will come from the filter** <mat-expansion-panel-header> <mat-panel-title> <div class="col-xs-11 col-sm-11 col-11 no-padding" ng-class=" {'open': faq.open}" [ngClass]="{'open':faq.isExpanded === true}"> </div> <!-- --> </mat-panel-title> <mat-panel-description class="plusicon"> <mat-icon *ngIf="!faq.isExpanded"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve"> <g id="svg-plus"> <path d="M420.75,286.875h-95.625V191.25c0-10.557-8.568-19.125-19.125-19.125c-10.557,0-19.125,8.568-19.125,19.125v95.625 H191.25c-10.557,0-19.125,8.568-19.125,19.125c0,10.557,8.568,19.125,19.125,19.125h95.625v95.625 c0,10.557,8.568,19.125,19.125,19.125c10.557,0,19.125-8.568,19.125-19.125v-95.625h95.625c10.557,0,19.125-8.568,19.125-19.125 C439.875,295.443,431.307,286.875,420.75,286.875z M535.5,0h-459C34.253,0,0,34.253,0,76.5v459C0,577.747,34.253,612,76.5,612 h459c42.247,0,76.5-34.253,76.5-76.5v-459C612,34.253,577.747,0,535.5,0z M573.75,535.5c0,21.133-17.136,38.25-38.25,38.25h-459 c-21.133,0-38.25-17.117-38.25-38.25v-459c0-21.133,17.117-38.25,38.25-38.25h459c21.114,0,38.25,17.136,38.25,38.25V535.5z" fill="#23808b"></path> </g> </svg> </mat-icon> <mat-icon *ngIf="faq.isExpanded"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve"> <g id="svg-minus"> <path d="M420.75,286.875h-229.5c-10.557,0-19.125,8.568-19.125,19.125c0,10.557,8.568,19.125,19.125,19.125h229.5 c10.557,0,19.125-8.568,19.125-19.125C439.875,295.443,431.307,286.875,420.75,286.875z M535.5,0h-459C34.253,0,0,34.253,0,76.5 v459C0,577.747,34.253,612,76.5,612h459c42.247,0,76.5-34.253,76.5-76.5v-459C612,34.253,577.747,0,535.5,0z M573.75,535.5 c0,21.133-17.117,38.25-38.25,38.25h-459c-21.133,0-38.25-17.117-38.25-38.25v-459c0-21.133,17.117-38.25,38.25-38.25h459 c21.133,0,38.25,17.136,38.25,38.25V535.5z" fill="#23808b"></path> </g> </svg> </mat-icon> </mat-panel-description> </mat-expansion-panel-header> <span style="white-space: pre-line;"> </span> </mat-expansion-panel> <li style="list-style: none;" *ngIf="result1.length == 0"> >This region will come when no result will come <div class="card"> <div class="card-body text-center"> <span class="justify-content-center">No result</span> </div> </div> </li> </mat-accordion> </div> </div> </ng-container> 
没有评论:
发表评论