Exploring some Angular 5 experiments with PrimeNG, I encountered challenges related to Angular 5. After creating a component with the following template:
<p>Chemi-table works! And now, a message from our sponsors: {{this.nombre}}</p>
<p-dataTable [value]="_postsArray" [loading]="loading"
loadingIcon="fa-spinner" [rows]="10" [paginator]="true"
[multiSortMeta]="multiSortMeta" selectionMode="Single" [(selection)]="selectedUserInfo">
<p-header>Header of Chemi Table.</p-header>
<p-footer>The bottom part of the chemi table, showing what's being dragged along.</p-footer>
<p-column selectionMode="single"></p-column>
<p-column field="userId" header="User ID" sortable="true" [filter]="true" filterPlaceholder="Search"></p-column>
<p-column field="id" header="IDE" sortable="true" [filter]="true" [filter]="true" filterPlaceholder="Search"></p-column>
<p-column field="title" header="Title" sortable="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="body" header="Body" sortable="true" [filter]="true" filterMatchMode="contains"></p-column>
</p-dataTable>
However, the line:
<p>Chemi-table works! And now a message: {{this.nombre}}</p>
does not display anything for {{this.nombre}}, and when debugging in the component, the value is undefined.
The index HTML code is as follows:
<chemi-table [nombre]="Hello World">
Loading chemi's table </chemi-table>
Here is the corresponding component.ts file:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { UserService } from './shared/user/user.service';
import { IPosts } from './shared/interfaces';
import { DataTableModule, SharedModule } from 'primeng/primeng';
import { HttpClientModule } from '@angular/common/http';
@Component({
selector: 'chemi-table',
templateUrl: './chemi-table.component.html',
providers: [UserService],
styleUrls: ['./chemi-table.component.css']
})
export class ChemiTableComponent implements OnInit {
_postsArray: IPosts[];
msgs : CustomMessage[];
selectedUserInfo : IPosts;
@Input() nombre: string;
constructor(private apiSerivce: UserService) {
console.log("Constructor chemi table component.");
}
getPosts(): void {
this.apiSerivce.getPosts()
.subscribe(
resultArray => this._postsArray = resultArray,
error => console.log('Error :: ' + error)
)
}
ngOnInit(): void {
console.log(this.nombre);
this.getPosts();
}
}
class CustomMessage{
severity:string;
summary:string;
detail:string;
constructor(private severity_a: string, private summary_a: string, detail_a:string) {
this.severity = severity_a;
this.summary = summary_a;
this.detail = detail_a;
}
}
Lastly, here is the module.ts configuration used:
import { HttpModule } from '@http';//for promises, subscribe, etc.
import { BrowserModule } from '@angular/platform-browser';//necessary for rendering on screen
import { NgModule } from '@angular/core';
import { CommonModule } from '@common';
import { Routes, RouterModule } from '@router';//required for redirections
import { UserService } from './shared/user/user.service';//service fetching data
import { IPosts } from './shared/interfaces';//data types
import { MessageService } from 'primeng/components/common/messageservice';//not used
import { DataTableModule, SharedModule } from 'primeng/primeng';//necessary for the table
import { ChemiTableComponent } from './chemi-table.component';//my component
export const ROUTES: Routes = [
{ path: '', component: ChemiTableComponent }//directing a module to a component at a specific route
];
@NgModule({
declarations: [ ChemiTableComponent ],
imports: [
BrowserModule,
CommonModule,
DataTableModule,
SharedModule,
RouterModule.forChild(ROUTES),
HttpModule
],
providers: [ UserService ],
bootstrap: [ ChemiTableComponent ]
})
export class ChemisModule {
public nombre : string;
}
Everything compiles smoothly, and the p-datatable functions properly, but I'm unable to make the {{nombre}} variable appear. There seems to be a minor issue that I can't quite figure out.