title: PrimeNG DataTable Change Detection
body: <p>So there we are.. Again ;)</p>
  
  <p>I have a PrimeNG Data Table with some Simple Data and a Service that gets API Data.</p>
  
  <p>So I'am Pretty New to Angular and cant figure why my Table View isn't Updated on change for instance when I'am adding a entry.</p>
  
  <p>Would by nice if someone could give me a hint or a Solution how to detect changes on Data Tables.</p>
  
  <p>I hope i have Provided any Code needed, if not i will Post it Later.</p>
  
  <p>Tx in Advance  ;)</p>
  
  <p>//Component</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {KnowledgeBaseService} from '../../../services/knowledge-base.service';
  import {WikiModel} from '../../../../models/wiki.model';
  import {HttpClient} from '@angular/common/http';
  import {CommonService} from '../../../services/common.service';
  
  
  @Component({
    selector: 'app-knwoledge-center-admin',
    templateUrl: './knowledge-base-admin.component.html',
    styleUrls: ['./knowledge-base-admin.component.scss']
  })
  export class KnowledgeBaseAdminComponent implements OnInit {
  
    displayDialog: boolean = false;
    wikiList: WikiModel;
    wikiItemNew = new WikiModel();
    selectedItem: WikiModel = null;
  
    constructor(private knowledgebaseService: KnowledgeBaseService, private commonService: CommonService, protected http: HttpClient) {
    }
  
    ngOnInit() {
      this.getWikiList();
    }
  
    getWikiList(): void {
      this.knowledgebaseService.getWikiList().subscribe(
        data =&gt; {
          this.wikiList = data;
          console.log(this.wikiList);
        },
        err =&gt; console.error(err),
        () =&gt; console.log('Wiki Items Geladen')
      );
    }
    onRowSelect(event) {
      console.log(event);
    }
  
    showDialogToAdd() {
      this.displayDialog = true;
    }
  
  /*  showDialogToEdit() {
      if ( !this.selectedItem ) {
        alert('Bitte zuerst einen Eintrag auswählen');
        return;
      }
      this.editItem = &lt;WikiModelOld&gt;this.selectedItem.clone();
      Object.assign(this.editItem, this.selectedItem);
      this.displayDialog = true;
    }*/
  
    addWikiItem() {
      this.knowledgebaseService.createWikiItem(this.wikiItemNew).subscribe(res =&gt; {
      });
      this.displayDialog = false;
  
    }
  
  }
  </code></pre>
  
  <p>//Service
  getting Data from my API
  getWikiList gets an Array of Objects that is Displayed in the Data Table
  some Simple Articles With, Title Text and Keywords.</p>
  
  <pre><code>import {Injectable, OnInit} from '@angular/core';
  import {HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpRequest, HttpResponse} from '@angular/common/http';
  import {environment} from '../../environments/environment';
  import {catchError, map, take} from 'rxjs/operators';
  import {Observable, pipe, throwError} from 'rxjs';
  import {WikiModel} from '../../models/wiki.model';
  
  
  @Injectable()
  export class KnowledgeBaseService {
  
    wikiApiUrl: string = environment.wikiApiUrl;
    wikiApiKeywordsPlain: string = environment.wikiApiKeywordsPlain;
    wikiApiKeywordObjects: string = environment.wikiApiKeywordObjects;
    wikiApiList:string = environment.wikiApiList;
  
  
    constructor(protected http: HttpClient) {
  
    }
  
    getWikiList() {
      return this.http.get(this.wikiApiList)
        .pipe(map((data: any) =&gt; data.result),
          catchError(error =&gt; {
            return throwError('Its a Trap!');
          })
        );
    }
  
   createWikiItem(wikiItem){
      return this.http.post(this.wikiApiUrl, wikiItem);
    }
  
    updateWikiItem(WikiItem) {
      return this.http.put(this.wikiApiUrl, {
        title: WikiItem.title,
        text: WikiItem.text,
        keyWords: WikiItem.keyWords
      });
    }
  
    getKeyWordsPlain() {
      return this.http.get(this.wikiApiKeywordsPlain)
        .pipe(map((data: any) =&gt; data.result),
          catchError(error =&gt; {
            return throwError('ERROR KeyWords Plain !');
          })
        );
    }
  
    getKeyWordObjects() {
      return this.http.get(this.wikiApiKeywordObjects)
        .pipe(map((data: any) =&gt; data.result),
          catchError(error =&gt; {
            return throwError('ERROR Keyword Objects');
          })
        );
    }
  
  }
  </code></pre>
  
  <p>//Template</p>
  
  <pre><code>&lt;div class="section section-wiki-admin-head"&gt;
    &lt;h1 class="h-centered"&gt;Begriffsdatenbank&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="section section-wiki-admin-table"&gt;
    &lt;div class="wiki-articles-table-container"&gt;
  
      &lt;p-table [value]="wikiList" selectionMode="single" [(selection)]="selectedItem" (onRowSelect)="onRowSelect($event)"&gt;
        &lt;ng-template pTemplate="header"&gt;
          &lt;tr&gt;
            &lt;th&gt;Begriff&lt;/th&gt;
            &lt;th&gt;Beschreibung&lt;/th&gt;
            &lt;th&gt;Schlagworte&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-wikiList&gt;
          &lt;tr [pSelectableRow]="wikiList"&gt;
            &lt;td&gt;{{wikiList.title}}&lt;/td&gt;
            &lt;td&gt;{{wikiList.text}}&lt;/td&gt;
            &lt;td&gt;{{wikiList.keyWords}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/ng-template&gt;
      &lt;/p-table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="section section-wiki-admin-footer"&gt;
    &lt;div class="wiki-articles-table-toolbar"&gt;
      &lt;button type="button" pButton icon="fa fa-plus" (click)="showDialogToAdd()" label="Neu"
              class="wiki-a-footer-btn"&gt;&lt;/button&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;p-dialog [header]="editItem &amp;&amp; editItem._id &gt; 0 ? 'Bearbeiten' : 'Hinzufügen'" [(visible)]="displayDialog"
            [responsive]="true" showEffect="fade" [modal]="true" [width]="600"&gt;
    &lt;div class="ui-g ui-fluid"&gt;
  
      &lt;div&gt;
        &lt;div class="ui-g-12 wikiTitleContainer"&gt;
          &lt;label for="wikiTitleInput"&gt;Titel&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="ui-g-12 wikiInputContainer"&gt;
          &lt;input pInputText id="wikiTitleInput" [(ngModel)]="wikiItemNew.title" name="wiki_title"/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div class="ui-g-12 wikiTitleContainer"&gt;
          &lt;label for="wikiText"&gt;Wiki Text&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="ui-g-12 wikiInputContainer"&gt;
          &lt;textarea id="wikiText" [rows]="5" [cols]="49" [(ngModel)]="wikiItemNew.text" pInputTextarea
                    name="wiki_text"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;div class="ui-g-12 wikiTitleContainer"&gt;
          &lt;label for="wikiChips"&gt;Schlagworte&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="ui-g-12 wikiInputContainer"&gt;
          &lt;p-chips id="wikiChips" [(ngModel)]="wikiItemNew.keyWords"&gt;&lt;/p-chips&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;p-footer&gt;
      &lt;div class="ui-dialog-buttonpane ui-helper-clearfix"&gt;
        &lt;button type="button" pButton (click)="addWikiItem();" icon="fa fa-save" label="Speichern"&gt;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/p-footer&gt;
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p>//Model</p>
  
  <pre><code>export class WikiModel {
  
    constructor(title?: string, text?: string, keyWords?: string, _id?: number,) {
      this.title = '';
      this.text = '';
      this.keyWords = '';
      this._id = '';
  
  
    }
  
    public title;
    public text;
    public keyWords;
    public _id;
  </code></pre>