Angular Pass data using Input component

Question

I'm trying to learn Angular 2 using free video tutorials from scotch.io website. I followed the most parts without any problems. But I cannot work out passing data from one component to another.

There is app.component.html in which it lists user profiles. When the user clicks the user link it should show text input where the user can change the name.

Here is the app.component.html

<header>
  <nav class="navbar navbar-inverse">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">My Angular 2 App</a>
    </div>
  </nav>
<main>

  <div class="row">
    <div class="col-sm-4">
      <div *ngIf="user_list">
        <ul class="list-group users-list" >
          <li class="list-group-item" *ngFor="let user of user_list"
          (click)="selectUser(user)"
          [class.active] = "user == active_user">{{user.name}}</li>
        </ul>
      </div>
    </div>
    <div class="col-sm-8">

      <user-profile [user] = "active_user"></user-profile>

      <div class="jumbotron gocrazy" *ngIf="!active_user">
        <span class="glyphicon glyphicon-hand-left"></span>
        <h2>Choose a user from the left menu </h2>
      </div>
    </div>
  </div>


</main>

<footer class="text-center">
  Copyright &copy; 2016
</footer>

And this is the user-profile.component.ts file.

import {Component, Input} from '@angular/core';
import {User} from '../shared/model/user';

@Component({
  selector : 'user-profile',
  template : `
  <div class="jumbotron gocrazy" *ngIf="user">
    <h1>Welcome to our app</h1>
    <p>{{user.name}}</p>
    <p>{{message}}</p>
    <input class="form-control" [(ngModel)] = "user.name" />
  </div>
  `
})

export class UserProfileComponent{
  @Input() user : User;
}

And this is the app.component.ts file.

import {Component} from '@angular/core';
import {User} from './shared/model/user';

@Component({
  selector: 'my-app',
  templateUrl: './app/app.component.html',
  styleUrls : ['./app/app.component.css']
})

export class AppComponent {
  message : string = "Hello, How are you?";

  user_list : User[] =[
  {
    name : "Thilini Weerasooriya",
    age : 27,
    id : 2
  },
  {
    name : "Aurelia",
    age : 23,
    id : 2
  }];

  active_user : User;

  selectUser(user){
    this.active_user = user;
  }

}

And here is the app.module.ts file.

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {UserProfileComponent} from './users/user-profile.component';

@NgModule({
  imports : [BrowserModule, FormsModule],
  declarations : [AppComponent, UserProfileComponent],
  bootstrap : [AppComponent, UserProfileComponent]
})

export class AppModule{}

And the folder structure is as follows.

And I don't get any errors.

I know that I should debug the code, but I have minimal knowledge on Angular and TypeScript. If you have any idea or tips on how to debug or solve the problem, it would be great.

Thank you!

AVJT82 · Accepted Answer · 2017-01-29 10:45:43Z

You should only bootstrap your AppComponent. Tested your code, and as it seems, if you bootstrap both components, an error is not thrown.

Furthermore, when that is fixed, you need to add schemas to your ngModule. This because you have created a custom (html)tag which is not recognized as "normal" html-tag. If you wouldn't declare it, your app would throw an error since it cannot recognized your custom tag. That being said, your ngModule should look like this:

//import CUSTOM_ELEMENTS_SCHEMA
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {UserProfileComponent} from './users/user-profile.component';

@NgModule({
  imports : [BrowserModule, FormsModule],
  declarations : [AppComponent, UserProfileComponent],
  bootstrap : [AppComponent]
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // add this!
})

export class AppModule{}

Here is a working plunker

Thank you so much! The problem was with the bootstrap. Thanks for the clarification.

Collectives™ on Stack Overflow

Angular Pass data using Input component

1 Answer 1

Here is a working plunker

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Here is a working plunker

2 Comments

Related