CODEWITHSUNDEEP
javascripthtmlangular
Sumanth Jois
Sumanth Jois

Reputation: 97

Angular passing data to child component

Hey I am trying to display a simple error message on my login page if the login fails. Following is my login.component.html:

<div class="container shadow login-container">
  <div class="row">
    <div class="col-sm-12 text-center">

      <div class="error-message">
          <app-server-error [errorMessage]="error" ></app-server-error>  -----> not displaying on screen
      </div>


      <div class="login-form-container">
          <div class="login-input-container">
              <input [(ngModel)]="user.email" type="email" placeholder="Enter your email" class="buddha-input"/>
          </div>
          <div class="login-input-container">
              <input [(ngModel)]="user.password" type="password" placeholder="Enter password" class="buddha-input"/>
          </div>
          <div class="login-input-container">
              <button (click)="tryLogin()" class="login-form-button">Login</button>
           </div>
      </div>
    </div>
  </div>
</div>

Following is my server-error.component.html:

<p>
  {{errorMessage}}
</p>

Following is my server-error.component.ts

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

@Component({
  selector: 'app-server-error',
  templateUrl: './server-error.component.html',
  styleUrls: ['./server-error.component.css']
})
export class ServerErrorComponent implements OnInit {
  @Input() public errorMessage: string;

  constructor() { }

  ngOnInit() {
  }

}

"Error" is not showing up on the screen and I am not getting errors on console either. Please do let me know how I can fix this? Thank you

Upvotes: 1

Views: 58

Answers (3)

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

The other posted answer may solve your problem but I would go with Service which will be responsible for showing an error from everywhere in the Application and also you can have a full control on the error component as it is centralized at a one place:

error.service:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ErrorService {

  constructor() { }
  private errorMessages = new BehaviorSubject('');
  errorMessage = this.errorMessages.asObservable();

  showError(message: string) {
    this.errorMessages.next(message)
  }
}

Error.Component.ts:

import { Component, OnInit, Input } from '@angular/core';
import {ErrorService } from "../error.service";

@Component({
  selector: 'app-server-error',
  templateUrl: './server-error.component.html',
  styleUrls: ['./server-error.component.css']
})
export class ServerErrorComponent implements OnInit {

  private errorMessage : any;
  constructor(public errorService : ErrorService) { }

  ngOnInit() {
    this.errorService.errorMessage.subscribe(value => {
      this.errorMessage = value;
    })
  }
}

App.Component.html:

// show it in app.component
<div class="error-message">
    <app-server-error></app-server-error>
</div>

Use (in Login Component):

import { Component, OnInit } from "@angular/core";
import {ErrorService } from "../error.service";
@Component({
  selector: "app-login",
  templateUrl: "./login.component.html",
  styleUrls: ["./login.component.css"]
})
export class LoginComponent implements OnInit {
  constructor(public errorService: ErrorService) {}
  user = {};
  ngOnInit() {}

  tryLogin(){
    this.errorService.showError('An error');
  }
}

Upvotes: -1

Adrita Sharma
Adrita Sharma

Reputation: 22213

@Input() public errorMessage: string; expects error to be a string.

Define error like this in .ts

error = 'error message'

Working Demo

Upvotes: 1

Wandrille
Wandrille

Reputation: 6801

With [errorMessage]="error", error should be a variable.

So you need to define it in your component.

But if you want to display the string "error",

then pass it like this [errorMessage]="'error'" or errorMessage="error"

Upvotes: 1

Related Questions