Нужно подключить фильтрацию сообщений Angular

Нужно, чтобы при нажатии на кнопки, оставались только те сообщения, которые соответсвуют категории кнопки На данный момент фильтрация работает, но только в одностороннем порядке И при исчезновении лишних сообщений, остаются полосы разделения Помогите, пожалуйста, решить вопрос Код HTML:

  <div class="left-content">
    <div class="notifications-top-filter d-flex">
      <div class="top-filter-button" ng-repeat="listBlock | filter:">
        <button (click)="toggleAll()">All</button>
        <button (click)="toggleSystem()">System Messages</button>
        <button (click)="toggleActivities()">Activities</button>
        <button (click)="toggleNews()">News</button>
      </div>
      <div class="search">
        <label>
          <input type="text" placeholder="Search">
          {{search}}
        </label>
      </div>
    </div>
    <hr>
    <div class="notification-list" *ngIf="all">
      <mat-list *ngIf="system">
        <mat-list-item *ngFor="let list of notificationSystem" [class.d-none]="!list.view">
          <img src="assets/images/systemmessage.svg" alt="">
          <div class="message">
            <div class="name-message"><a>{{list.name}}</a></div>
            <div class="content">{{list.content}}</div>
          </div>
          <div class="info">
            <div class="date">{{list.date}}</div>
            <div class="show"><a>{{list.show}}</a></div>
          </div>
        </mat-list-item>
      </mat-list>
      <mat-list *ngIf="activit">
        <mat-list-item *ngFor="let list of notificationActivit" [class.d-none]="!list.view">
          <img src="assets/images/activities.svg" alt="">
          <div class="message">
            <div class="name-message"><a>{{list.name}}</a></div>
            <div class="content">{{list.content}}</div>
          </div>
          <div class="info">
            <div class="date">{{list.date}}</div>
            <div class="show"><a>{{list.show}}</a></div>
          </div>
        </mat-list-item>
      </mat-list>
      <mat-list *ngIf="news">
        <mat-list-item *ngFor="let list of notificationNews" [class.d-none]="!list.view">
          <img src="assets/images/news.svg" alt="">
          <div class="message">
            <div class="name-message"><a>{{list.name}}</a></div>
            <div class="content">{{list.content}}</div>
          </div>
          <div class="info">
            <div class="date">{{list.date}}</div>
            <div class="show"><a>{{list.show}}</a></div>
          </div>
        </mat-list-item>
      </mat-list>
      <mat-list *ngIf="news">
        <mat-list-item *ngFor="let list of notificationNews" [class.d-none]="!list.view">
          <img src="assets/images/news.svg" alt="">
          <div class="message">
            <div class="name-message"><a>{{list.name}}</a></div>
            <div class="content">{{list.content}}</div>
          </div>
          <div class="info">
            <div class="date">{{list.date}}</div>
            <div class="show"><a>{{list.show}}</a></div>
          </div>
        </mat-list-item>
      </mat-list>
      <mat-list *ngIf="system">
        <mat-list-item *ngFor="let list of notificationSystem" [class.d-none]="!list.view">
          <img src="assets/images/systemmessage.svg" alt="">
          <div class="message">
            <div class="name-message"><a>{{list.name}}</a></div>
            <div class="content">{{list.content}}</div>
          </div>
          <div class="info">
            <div class="date">{{list.date}}</div>
            <div class="show"><a>{{list.show}}</a></div>
          </div>
        </mat-list-item>
      </mat-list>
      <mat-list *ngIf="activit">
        <mat-list-item *ngFor="let list of notificationActivit " [class.d-none]="!list.view">
          <img src="assets/images/activities.svg" alt="">
          <div class="message">
            <div class="name-message"><a>{{list.name}}</a></div>
            <div class="content">{{list.content}}</div>
          </div>
          <div class="info">
            <div class="date">{{list.date}}</div>
            <div class="show"><a>{{list.show}}</a></div>
          </div>
        </mat-list-item>
      </mat-list>
      <mat-list *ngIf="news">
        <mat-list-item *ngFor="let list of notificationNews " [class.d-none]="!list.view">
          <img src="assets/images/news.svg" alt="">
          <div class="message">
            <div class="name-message"><a>{{list.name}}</a></div>
            <div class="content">{{list.content}}</div>
          </div>
          <div class="info">
            <div class="date">{{list.date}}</div>
            <div class="show"><a>{{list.show}}</a></div>
          </div>
        </mat-list-item>
      </mat-list>
      <mat-list *ngIf="news">
        <mat-list-item *ngFor="let list of notificationNews " [class.d-none]="!list.view">
          <img src="assets/images/news.svg" alt="">
          <div class="message">
            <div class="name-message"><a>{{list.name}}</a></div>
            <div class="content">{{list.content}}</div>
          </div>
          <div class="info">
            <div class="date">{{list.date}}</div>
            <div class="show"><a>{{list.show}}</a></div>
          </div>
        </mat-list-item>
      </mat-list>
      <mat-list *ngIf="news">
        <mat-list-item *ngFor="let list of notificationNews " [class.d-none]="!list.view">
          <img src="assets/images/news.svg" alt="">
          <div class="message">
            <div class="name-message"><a>{{list.name}}</a></div>
            <div class="content">{{list.content}}</div>
          </div>
          <div class="info">
            <div class="date">{{list.date}}</div>
            <div class="show"><a>{{list.show}}</a></div>
          </div>
        </mat-list-item>
      </mat-list>
    </div>
  </div>
  <div class="notifications-settings">
    <h3 class="txt-16">Settings</h3>
    <div>
      <img src="assets/images/terminal.svg" alt="">
      <p class="txt-14">System Messages</p>
      <label class="switch">
        <input type="checkbox" (click)="toggleSystem()">
        <span class="slider round"></span>
      </label>
    </div>
    <div>
      <img src="assets/images/pulse.svg" alt="">
      <p class="txt-14">Activities</p>
      <label class="switch">
        <input type="checkbox" (click)="toggleActivities()">
        <span class="slider round"></span>
      </label>
    </div>
    <div>
      <img src="assets/images/Springboard.svg" alt="">
      <p class="txt-14">News</p>
      <label class="switch">
        <input type="checkbox" (click)="toggleNews()">
        <span class="slider round"></span>
      </label>
    </div>
  </div>
</div>

ts:

export interface Section {
  name: string;
  content: string;
  date: number;
  show: string;
  view: boolean;
}

@Component({
  selector: 'app-notifications',
  templateUrl: './notifications.component.html',
  styleUrls: ['./notifications.component.scss']
})
export class NotificationsComponent implements OnInit {
  all = true;
  system = true;
  activit = true;
  news = true;
  search: string;

  notificationSystem: Section[] = [
    {
      name: 'New device has been authorized',
      content: 'Weekly Updates From Binance Futures:',
      date: 1,
      show: 'Show Details',
      view: true,
    }
  ];
  notificationActivit: Section[] = [
    {
      name: 'Deposit Successful',
      content: 'You have deposited 449.6989702 DGTX at 2020-07-07',
      date: 1,
      show: 'Show Details',
      view: true,
    }
  ];
  notificationNews: Section[] = [
    {
      name: 'Trading ivent is coming!',
      content: 'Good news! We\'ve added SNX to Digitex Margin trading',
      date: 1,
      show: 'Show Details',
      view: true,
    }
  ];
  toggleNews() {
    for (let i = 0; i < this.notificationNews.length; i++) {
      if (this.notificationNews[i].show === 'Show Details') {
        this.notificationSystem[i].view = false;
        this.notificationActivit[i].view = false;
      }
    }
  }
  toggleSystem() {
    for (let i = 0; i < this.notificationSystem.length; i++) {
      if (this.notificationSystem[i].show === 'Show Details') {
        this.notificationNews[i].view = false;
        this.notificationActivit[i].view = false;
      }
    }
  }
  toggleActivities() {
    for (let i = 0; i < this.notificationActivit.length; i++) {
      if (this.notificationActivit[i].show === 'Show Details') {
        this.notificationNews[i].view = false;
        this.notificationSystem[i].view = false;
      }
    }
  }
  constructor() { }

  ngOnInit(): void {
  }
}