How can I make the form input data appear in another component’s html

Question

this error should be simple but I’m new with angular

I believe I must make few changes to that code

Code of the Service below:

import { Grade } from './../calculator/calculator.model';
import { Injectable } from '@angular/core';
import { Input } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ResultService {
  @Input()
  grade: Grade = {
    name: '',
    grade1: null,
    grade2: null,
    grade3: null,
  };

  calcGrade(): void {
    let nota1 = this.grade.grade1 * 0.25;
    let nota2 = this.grade.grade2 * 0.25;
    let nota3 = this.grade.grade3 * 0.5;

    let conta = nota1 + nota2 + nota3;

    if (conta < 6.2) {
      console.log(
        `o aluno ${this.grade.name} foi reprovado com a nota ${conta}`
      );
    }
    if (conta >= 6.2) {
      console.log(
        `o aluno ${this.grade.name} foi aprovado com a nota ${conta}`
      );
    }
  }

  constructor() {}
}

when I click on a button I want to call another component with the data typed in another component

HTML code below:

or I can put the service code inside ts

<div class="container">
  <div class="content">
    <h1>
      o aluno {{ grade.name }} tirou {{ grade.grade1 }} na primeira prova e
      {{ grade.grade2 }} na segunda prova
    </h1>
  </div>
</div>

Answer 1

I suggest you work all on the same component, Gradecalculatorcomponent for example. The important thing is that in service you’re using @Input(), which is not a syntax used by Angular (used only for components!).

I propose something like (after generating the component with $ ng g c grade-calculator):

@Component({
...
});
export class GradeCalculatorComponent {
 grade: Grade = {
  name: '',
  grade1: null,
  grade2: null,
  grade3: null,
 };
 submitted = false;

 calcGrade(): void {
  this.submitted = true;
  ...
 }
}

grid-Calculator.component.ts

<input [(ngModel)]="grade.name" type="text" placeholder="Name">
<input [(ngModel)]="grade.grade1" type="number" placeholder="Grade 1" min="0" max="10">
<input [(ngModel)]="grade.grade2" type="number" placeholder="Grade 2" min="0" max="10">
<input [(ngModel)]="grade.grade3" type="number" placeholder="Grade 3" min="0" max="10">
<button type="button" (click)="calcGrade()"></button>

<h1 *ngIf="submitted">
  o aluno {{ grade.name }} tirou {{ grade.grade1 }} na primeira prova e
  {{ grade.grade2 }} na segunda prova
</h1>

grid-Calculator.component.html