Angular4 - Nesting Components & Inputs Error

Question

I am trying to complete an exercise from "Angular From Theory To Practice - Asim Hussain" https://codecraft.tv/courses/angular/quickstart/nesting-components-and-inputs/

As a challenge to myself, I'm trying to go a step forward and refactor the app using Angular CLI instead of writing all the components in the same file; See sample from book http://plnkr.co/edit/LKj9OAoUMIUZhDS5HAiP?p=preview , but the app is crashing. So Far I have created two new components

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

class Joke {
  public setup: string;
  public punchline: string;
  public hide: boolean;

  constructor(setup: string, punchline: string) {
    this.setup = setup;
    this.punchline = punchline;
    this.hide = true;
  }

  toggle() {
    this.hide = !this.hide;
  }

}

@Component({
  selector: 'joke',
  template: `
    <div class="card card-block">
     <h4 class="card-title">{{data.setup}}</h4>
     <p class="card-text" [hidden]="data.hide">{{data.punchline}}</p>
     <a (click)="data.toggle()" class="btn btn-warning">Tell Me</a>
    </div>
  `
})

export class JokeComponent implements OnInit {
  @Input('joke') data: Joke;

  ngOnInit() {}

}

// JokeListComponent

import { Component, OnInit, Output } from '@angular/core';
import { JokeComponent } from '../joke/joke.component';

@Component({
  selector: 'joke-list',
  template: '<joke *ngFor="let j of jokes" [joke]="j"></joke>'
})

export class JokeListComponent implements OnInit {

  @Output() jokes: Joke[];

  constructor() {
    this.jokes = [
      new Joke("Joke 1", "Joke One Body")
    ];
  }
  ngOnInit() {}
}

And this is how my AppComponent & AppModule looks like

import { Component } from '@angular/core';
import { JokeListComponent } from '././joke-list/joke-list.component';

//AppComponent
@Component({
  selector: 'app',
  template: `
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
         <h4>Jokes App</h4>
         <hr>
         <joke-list></joke-list>
        </div>
      </div>
    </div>
  `
})
export class AppComponent {

}

// AppModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { JokeComponent } from './joke/joke.component';
import { JokeListComponent } from './joke-list/joke-list.component';

@NgModule({
  declarations: [
    AppComponent,
    JokeComponent,
    JokeListComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

When I run ng serve I'm getting the following error: ERROR: in ../joke-list.component.ts (11.20): Cannot find name 'Joke'

In the joke-list.component jokes: Joke[]; // Cannot find name

Can someone help?

Poul Kruijt · Accepted Answer · 2017-06-27 14:10:35Z

2

You should export the class Joke otherwise it cannot be used outside of the file:

export class Joke { ... }

Besides that, you should also import it wherever you use the Joke class, for instance in your JokeListComponent:

import { Joke } from '../joke/joke.component';

But it would be even better (like 10x better) to move the Joke class to an own file, instead of placing it in a component file

answered Jun 27, 2017 at 14:10

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kangular Over a year ago

// modified joke.components.ts export class Joke { ... // And joke-list.component.ts import { Joke } from '../joke/joke.component';

Amit Chigadani · Accepted Answer · 2017-06-27 14:11:31Z

0

You are missing the import statement for Joke class

import {Joke} from '../pathToJokeModel'

answered Jun 27, 2017 at 14:11

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Comments

alehn96 · Accepted Answer · 2017-06-27 14:15:08Z

0

In the component joke list import the Joke model

in joke-list.component.ts

import { Joke } from './joke.component'; // path where is exported class Joke

answered Jun 27, 2017 at 14:15

alehn96

1,4031 gold badge14 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular4 - Nesting Components & Inputs Error

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related