<file_sep>import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {NewsHeader} from '../model/NewsHeader';
import {WebService} from '../service/web.service';
import {NewsCategory} from '../model/NewsCategory';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import {MatDialog} from '@angular/material';
import {DetailDialogComponent} from '../dialog/detail-dialog/detail-dialog.component';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;  selectedCategory = '';
  displayedColumns: string[] = ['time', 'date', 'headline', 'category'];
  dataSource: MatTableDataSource < NewsHeader >;
  selectedHeader = '';
  categories: NewsCategory[];

  constructor(
    private service: WebService,
    public dialog: MatDialog
  ) { }

  ngOnInit() {
    this.service.getHeader().subscribe(res => {
      this.dataSource = new MatTableDataSource(res);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      this.dataSource.filterPredicate =
        (data: NewsHeader, filter: string) => {
          const searchTerms: NewsHeader = JSON.parse(filter);
          return (data.category === searchTerms.category || searchTerms.category === '')
            && data.headline.toLowerCase().indexOf(searchTerms.headline) !== -1;
        };
    }, error1 => {
      console.log(error1);
    });
    this.service.getCategory().subscribe(res => {
      this.categories = res;
    }, error1 => {
      console.log(error1);
    });
  }

  applyFilter() {
    this.dataSource.filter = JSON.stringify({
      category: this.selectedCategory,
      headline: this.selectedHeader.toLowerCase()
    });
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  openDialog(news): void {
    localStorage.setItem(news.id.toString(), 'true');
    this.service.getDetail(news.id).subscribe(res => {
      const dialogRef = this.dialog.open(DetailDialogComponent, {
        width: '600px',
        height: '300px',
        data: {
          detail: res,
          header: news.headline
        }
      });
    }, error1 => {
      console.log(error1);
    });
  }

  getLocalData(id) {
    if (localStorage.getItem(id.toString())) {
      return { 'text-decoration': 'line-through' };
    }
    return '';
  }
}

<file_sep>export interface NewsHeader {
  date: Date;
  timestamp: number;
  category: string;
  language: string;
  dailyNewsNo: number;
  isFlash: boolean;
  id: number;
  headline: string;
  source: string[];
}
<file_sep>import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {NewsHeader} from '../model/NewsHeader';
import {NewsCategory} from '../model/NewsCategory';
import {NewsDetail} from '../model/NewsDetail';

@Injectable({
  providedIn: 'root'
})
export class WebService {

  private url = 'https://dev.matrikswebtrader.com/homework/assets/dummy-service/';
  constructor(
    private http: HttpClient,
  ) { }

  getCategory() {
    return this.http.get<NewsCategory[]>(this.url + 'default.asp?type=newsCategory');
  }

  getHeader() {
    return this.http.get<NewsHeader[]>(this.url + 'default.asp?type=newsHeader');
  }

  getDetail(id) {
    return this.http.get<NewsDetail>(this.url + 'newsDetail.asp?id=' + id);
  }
}
<file_sep>export interface NewsDetail {
  content: string;
  headLine: string;
}
<file_sep>import {Component, Inject} from '@angular/core';
import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {MarkdownService} from '../../service/markdown.service';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  selector: 'app-detail-dialog',
  templateUrl: './detail-dialog.component.html',
  styleUrls: ['./detail-dialog.component.css'],
  providers: [MarkdownService]
})
export class DetailDialogComponent {

  constructor(
    public dialogRef: MatDialogRef<DetailDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private markService: MarkdownService,
    private sanitizer: DomSanitizer
  ) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

  convertText() {
    return this.markService.convert(this.data.detail.content);
  }

  close() {
    this.dialogRef.close();
  }
}
