Question 52118 in Javascript Question posted in
A very good W3school tutorial can be found here.

Angular: Cannot pass output from one child component to another – Javascript

I am a complete newbie in Angular (started learning it yesterday for a take-home job interview project) so I apologize in advance if I’m asking something trivial.

I decided to do a basic project to get some practice: the main component (app) has two children (main-form and answer). main-form collects three numbers a, b and c, computes a+bc and passes the result to answer through app. The problem is, the answer component does not receive the data; instead, both the answer and the warning variable – designed to be invoked when one of the inputs is null – are "undefined". By using the console and test buttons I could see that the values are passed to the parent but not to the sibling component.

I uploaded the entire project to https://github.com/thestraycat7/angular-question/tree/ad44ad0d14d10fa254141d8d30c7a942e258ba15 in case someone would like to help me out. I also used https://medium.com/weekly-webtips/how-to-pass-data-between-components-in-angular-8-c6bfc0358cd2 as an example to follow. Would really appreciate if someone could check my docs and find where the error is.

Tags:

2

Answers


  1. 0

    The reason why the ‘answer’ component does not receive the data is that you put AnswerComponent as part of the bootstrap in the AppModule (I am not sure why you are putting it).

    Your app module should be something like this:

    @NgModule({
  declarations: [
    AppComponent,
    AnswerComponent,
    MainFormComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

    Now, the Answer component now is able to receive the data.

    We only use bootstrap usually to specify the root component to initiate the Angular application.

    Login or Signup to reply.
  2. 0

    This was a tricky one to track down, but the issue actually isn’t related to your component implementation at all, but actually with the setup of the project:

    Firstly, some of the contents that belong in index.html have been applied to app.component.html. The general idea is that index.html will contain the top-level HTML of the webpage, as you would find in a typical vanilla JS project (<html>, <head>, <body>, <script> etc) and your app.component.html will contain the top level of your application code (basically the contents of the <body tag)

    index.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Experimenting with Angular</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="oinkicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

    app.component.html

    <div class="topnav">
  <a>A very simple calculator</a>
</div>

...

    Secondly, you have this line in app.module.ts

    bootstrap: [AppComponent, AnswerComponent]

    which needs to be

    bootstrap: [AppComponent]

    The bootstrap property is used when you need to deploy/switch between two different root applications at the top-level of your project

    That is not required here (and is almost never required for most Angular applications in totality)

    Removing this line will treat the AnswerComponent as a typical non-root-level component to be included in AppComponents component tree. Everything works properly after this change

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search