CODEWITHSUNDEEP
angularangular-template
Giuseppe VERGARI
Giuseppe VERGARI

Reputation: 39

How to pass variable from .ts to html

I'm using the Hero's demo, provided from angular's site. I modify it to keep data from my rest server. Everithing ok , but when i try to open hero's detail it miss to print every detail like name surname ecc...

I think that there's a problem beetween "hero-detail.component.ts" and "hero-detail.component.html".

When i try to print this.hero.nome it showing nothing, so i think that is an empty class.

My rest server confirm that it send correctly all the information.

Here's my hero-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { Hero }         from '../hero';
import { HeroService }  from '../hero.service';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: [ './hero-detail.component.css' ]
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;



  constructor(
    private route: ActivatedRoute,
    private heroService: HeroService,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.getHero();
  }

  getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
    .subscribe(hero => this.hero = hero);

  }

  goBack(): void {
    this.location.back();
  }

 save(): void {
    this.heroService.updateHero(this.hero)
      .subscribe(() => this.goBack());
  }
}

and my hero-detail.component.html

<div *ngIf="hero">

  <h2>{{hero.nome | uppercase}} Dettagli</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>Nome:
      <input [(ngModel)]="hero.nome" placeholder="Nome"/>

      {{hero.nome}}
    </label>
    </div>
    <div>
    <label >Cognome:
      <input [(ngModel)]="hero.cognome" placeholder="Cognome"/>
    </label>
  </div>



  <button (click)="goBack()">go back</button>
  <button (click)="save()">save</button>
</div>

In the HTML file i want to display the name and the surname of the heroes provided by my rest server

Upvotes: 2

Views: 32302

Answers (1)

Ztemps
Ztemps

Reputation: 196

I guess that we are having a mistake here, and if I suppouse that you are using the Heros project from the angular page, the response of the service will be in english, not in Italian.

<div *ngIf="hero">

  <h2>{{hero.name | uppercase}} Dettagli</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>Nome:
      <input [(ngModel)]="hero.name" placeholder="Nome"/>

      {{hero.name}}
    </label>
    </div>
    <div>
    <label >Cognome:
      <input [(ngModel)]="hero.lastname" placeholder="Cognome"/>
    </label>
  </div>



  <button (click)="goBack()">go back</button>
  <button (click)="save()">save</button>
</div>

then 

<h2>{{hero.nome | uppercase}} Details</h2>

will be

<h2>{{hero.name | uppercase}} Details</h2>

hero.nome will be hero.name and I guess that user.cognome will be user.lastname.

Hope it helps! :D

Upvotes: 4

Related Questions