The input variable does not accept the values ​​from the @Input property in the template. Angular 5

Question

I tried several angular 5 with simple experiments, and I found some features (regarding angular 5), I created a component with the following pattern:

<p>Chemi-tabla works! Y ahora un mensage de nuestros patrocinadores: {{this.nombre}}</p>
<p-dataTable [value]="_postsArray" [loading]="loading"
   loadingIcon="fa-spinner" [rows]="10" [paginator]="true" 
   [multiSortMeta]="multiSortMeta" selectionMode="Single" [(selection)]="selectedUserInfo">
    <p-header>Cabecera de la Chemi Tabla.</p-header>
    <p-footer>Lo de abajo de la chemi tabla, vamos lo que va arrastrando.</p-footer>
    <p-column selectionMode="single"></p-column>
    <p-column field="userId" header="Usuario 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="Título" sortable="true" [filter]="true" filterMatchMode="contains"></p-column>
    <p-column field="body" header="Body" sortable="true" [filter]="true" filterMatchMode="contains"></p-column>
</p-dataTable>

But the line:

<p>Chemi-tabla works! And now a message: {{this.nombre}}</p>

does not print anithing in {{this.nombre}}, and if I debug the code in the component, then it is undefined.

My html index is as follows:

<chemi-tabla [nombre]="Hello World">
Loading chemi table  </chemi-tabla>

And the component.ts file is as follows:

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-tabla',
  templateUrl: './chemi-tabla.component.html',
  providers: [UserService],
  styleUrls: ['./chemi-tabla.component.css']
})

export class ChemiTablaComponent implements OnInit {
  _postsArray: IPosts[];
  msgs : CustomMessage[];
  selectedUserInfo : IPosts;
  @Input() nombre: string;
  constructor(private apiSerivce: UserService) {
    console.log("Constructor chemi tabla 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;
  }
}

Finally, this is module.ts, which I use:

import { HttpModule } from '@angular/http';//para promesas subscribe y demás
import { BrowserModule } from '@angular/platform-browser';//necesariko para pintar en pantalla
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';//necesario para redirecciones*1
import {UserService} from './shared/user/user.service';//servicio que me trae datos
import {IPosts} from './shared/interfaces';//tipos de datos
import {MessageService} from 'primeng/components/common/messageservice';//no se usa
import {DataTableModule,SharedModule} from 'primeng/primeng';//necesaroi para la tabla
import { ChemiTablaComponent } from './chemi-tabla.component';//mi componente

export const ROUTES: Routes = [
  { path: '', component: ChemiTablaComponent }//*1 podríamos decirle a un modulo que en tal direccion vaya a tal componente.... 
];
@NgModule({
  declarations: [ ChemiTablaComponent ],
  imports: [
    BrowserModule,
    CommonModule,
    DataTableModule,
    SharedModule,
    RouterModule.forChild(ROUTES),
    HttpModule
  ],
  providers: [ UserService ],
  bootstrap: [ ChemiTablaComponent ]
})
export class ChemisModule {
 public nombre : string;
 }

Everything compiles and p-datatable works fine, but I could not display the variable {{nombre}} . I missed something, and I’m sure this is a very stupid question, but I don’t see what it is.

Answer 1

There are three things in the code.

• this . {{nombre}}
• public nombre : string; ChemisModule
• , , , <chemi-tabla [nombre]="'Hello World'"> <chemi-tabla nombre="Hello World"> [], .

Edit

, , . question

, Input . , , . .

Answer 2

"Bunyamin Coskuner" , , . , , component.ts:

import { Component, OnInit, Input, Output, EventEmitter, ElementRef  } from '@angular/core';

....

constructor(private apiSerivce: UserService, private elementRef:ElementRef) {
    console.log("Constructor chemi tabla component.");    
    let nombreAttribute = this.elementRef.nativeElement.getAttribute('nombre');
    this.nombre = nombreAttribute;
    console.log(this.nombre);
  }

. , , .

ElementRef ( @ angular/core), 'nombre'like this: this.elementRef.nativeElement.getAttribute(' nombre '); " (private apiSerivce: UserService, private elementRef: ElementRef)", .

, , , , .

, , ,